Crue Creative - Sri Lankan Creative Studio

FOLLOW ME ON INSTAGRAM - @chaniru.lk

32 | 33 | 52 | 53 | {loaded ? null : } 54 | 55 | 56 | 57 |

62 | 63 | 64 | 65 | 66 | 67 |

69 | 70 | 71 | 72 | 73 | ); 74 | }; 75 | 76 | export default App; 77 | -------------------------------------------------------------------------------- /src/assets/font/Domaine Sans Fine Regular Regular.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/font/Domaine Sans Fine Regular Regular.woff -------------------------------------------------------------------------------- /src/assets/img/1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/1.png -------------------------------------------------------------------------------- /src/assets/img/2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/2.png -------------------------------------------------------------------------------- /src/assets/img/3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/3.png -------------------------------------------------------------------------------- /src/assets/img/4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/4.png -------------------------------------------------------------------------------- /src/assets/img/41.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/41.png -------------------------------------------------------------------------------- /src/assets/img/5.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/5.png -------------------------------------------------------------------------------- /src/assets/img/6.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/6.png -------------------------------------------------------------------------------- /src/assets/img/9.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/9.png -------------------------------------------------------------------------------- /src/assets/img/Chaniru.lk.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/Chaniru.lk.png -------------------------------------------------------------------------------- /src/assets/img/Thumbs.db: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/Thumbs.db -------------------------------------------------------------------------------- /src/assets/img/f1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/f1.png -------------------------------------------------------------------------------- /src/assets/img/pod01.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/pod01.png -------------------------------------------------------------------------------- /src/assets/img/pod02.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/pod02.png -------------------------------------------------------------------------------- /src/assets/img/pod03.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/pod03.png -------------------------------------------------------------------------------- /src/assets/img/pod04.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/pod04.png -------------------------------------------------------------------------------- /src/assets/img/sc1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/img/sc1.png -------------------------------------------------------------------------------- /src/assets/video.mp4: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Chanirulk/Awwwards-remake-CRUE-CREATIVE/a219b14e0439fe9da9fc9acaa78b2cf3492093f3/src/assets/video.mp4 -------------------------------------------------------------------------------- /src/components/CoverVideo.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import Video from '../assets/video.mp4'; 3 | import { motion } from 'framer-motion'; 4 | import "./cover.css"; 5 | const SectionWrapper = styled.section` 6 | min-height: 100vh; 7 | width: 100%; 8 | position: relative; 9 | 10 | video { 11 | width: 100%; 12 | height: 100vh; 13 | object-fit: cover; 14 | } 15 | `; 16 | 17 | const OverLay = styled.div` 18 | position: absolute; 19 | top: 0; 20 | bottom: 0; 21 | left: 0; 22 | right: 0; 23 | 24 | z-index: 1; 25 | background-color: ${(props) => 26 | `rgba(${props.theme.bodyRgba}, 0.7)`}; 27 | `; 28 | 29 | const TitleWrapper = styled(motion.div)` 30 | position: absolute; 31 | top: 47%; 32 | left: 1%; 33 | z-index: 8; 34 | 35 | display: flex; 36 | flex-direction: column; 37 | justify-content: center; 38 | align-items: center; 39 | div { 40 | display: flex; 41 | } 42 | 43 | `; 44 | 45 | const containerVariants = { 46 | hidden: { 47 | opacity: 0, 48 | }, 49 | show: { 50 | opacity: 1, 51 | transition: { 52 | delayChildren: 5, // 2 53 | staggerChildren: 0.3, 54 | }, 55 | }, 56 | }; 57 | 58 | const itemVariants = { 59 | hidden: { 60 | opacity: 0, 61 | }, 62 | show: { 63 | opacity: 1, 64 | }, 65 | }; 66 | 67 | const CoverVideo = () => { 68 | return ( 69 | 70 | 71 | 76 |

77 | 83 |

Crue Creative

84 | 85 |

86 | 87 | 88 |

90 | ); 91 | }; 92 | 93 | export default CoverVideo; 94 | -------------------------------------------------------------------------------- /src/components/Loader.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import { motion } from 'framer-motion'; 4 | import "./loader.css"; 5 | const Container = styled(motion.div)` 6 | position: absolute; 7 | 8 | touch-action: none; 9 | overflow: hidden; 10 | 11 | width: 100vw; 12 | height: 100vh; 13 | 14 | z-index: 6; 15 | 16 | display: flex; 17 | flex-direction: column; 18 | justify-content: center; 19 | align-items: center; 20 | 21 | background-color: ${(props) => props.theme.body}; 22 | color: ${(props) => props.theme.text}; 23 | 24 | svg { 25 | width: 10vw; 26 | height: auto; 27 | overflow: visible; 28 | stroke-linejoin: round; 29 | stroke-linecap: round; 30 | 31 | g { 32 | path { 33 | stroke: ${(props) => props.theme.text}; 34 | } 35 | } 36 | } 37 | `; 38 | 39 | const Text = styled(motion.span)` 40 | font-size: ${(props) => props.theme.fontxl}; 41 | color: ${(props) => props.theme.text}; 42 | padding-top: 0.5rem; 43 | `; 44 | 45 | const textVariants = { 46 | hidden: { 47 | opacity: 0, 48 | }, 49 | visible: { 50 | opacity: 1, 51 | 52 | transition: { 53 | duration: 1, 54 | yoyo: Infinity, 55 | ease: 'easeInOut', 56 | }, 57 | }, 58 | }; 59 | 60 | const pathVariants = { 61 | hidden: { 62 | opacity: 0, 63 | pathLength: 0, 64 | }, 65 | visible: { 66 | opacity: 1, 67 | pathLength: 1, 68 | 69 | transition: { 70 | duration: 4, 71 | ease: 'easeInOut', 72 | }, 73 | }, 74 | }; 75 | 76 | const Loader = () => { 77 | return ( 78 | 91 | 92 | 98 |

Crue Creative

99 | 100 | 101 | 106 | A Creative & Digital Studio Based in Sri Lanka 107 | 108 | 109 | ); 110 | }; 111 | 112 | export default Loader; 113 | -------------------------------------------------------------------------------- /src/components/Logo.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import { Link } from 'react-router-dom'; 3 | import { motion } from 'framer-motion'; 4 | import imga from "../assets/img/f1.png"; 5 | const Container = styled.div` 6 | `; 7 | 8 | const TextWrapper = styled(motion.span)` 9 | 10 | .bar-nav{ 11 | position:absolute; 12 | z-index:99; 13 | } 14 | ul { 15 | list-style-type: none; 16 | margin: 0; 17 | padding: 0; 18 | overflow: hidden; 19 | background-color: #ffffff; 20 | border-radius: 20px; 21 | position: fixed; 22 | left: 5px; 23 | top: 10px; 24 | width: 99%; 25 | } 26 | 27 | li { 28 | float: right; 29 | } 30 | li a:hover{ 31 | color: rgb(187, 161, 122); 32 | 33 | } 34 | li a { 35 | font-family: 'Albert Sans', sans-serif; 36 | display: block; 37 | color: #000000; 38 | text-align: center; 39 | padding: 14px 16px; 40 | text-decoration: none; 41 | } 42 | li a:after { 43 | content: ''; 44 | position: absolute; 45 | width: 100%; 46 | transform: scaleX(0); 47 | height: 3px; 48 | bottom: 0; 49 | left: 0; 50 | background-color: #000000; 51 | transform-origin: bottom right; 52 | transition: transform 0.25s ease-out; 53 | } 54 | 55 | li a:hover:after{ 56 | 57 | transform: scaleX(1); 58 | transform-origin: bottom left; 59 | } 60 | 61 | 62 | 63 | .logo-av{ 64 | position:absolute; 65 | top: -57.5px; 66 | left: 5px; 67 | height: 160px; 68 | width: 160px; 69 | 70 | } 71 | 72 | `; 73 | 74 | const textVariants = { 75 | hidden: { 76 | opacity: 0, 77 | pathLength: 0, 78 | x: -10, 79 | }, 80 | visible: { 81 | opacity: 1, 82 | pathLength: 1, 83 | x: -5, 84 | transition: { 85 | duration: 1, 86 | delay: 2, 87 | ease: 'easeInOut', 88 | }, 89 | }, 90 | }; 91 | 92 | const pathVariants = { 93 | hidden: { 94 | opacity: 0, 95 | pathLength: 0, 96 | }, 97 | visible: { 98 | opacity: 1, 99 | pathLength: 1, 100 | transition: { 101 | duration: 1, 102 | delay: 2, 103 | ease: 'easeInOut', 104 | }, 105 | }, 106 | }; 107 | 108 | const Logo = () => { 109 | return ( 110 | 111 | 112 | 113 | 118 |

119 |

About
Contact
News
Home

129 |

130 | 131 | 132 | 133 | 134 | ); 135 | }; 136 | 137 | export default Logo; 138 | -------------------------------------------------------------------------------- /src/components/ScrollTriggerProxy.jsx: -------------------------------------------------------------------------------- 1 | // To use gsap with locomotive scroll, we have to use scroller proxy provided by gsap 2 | import gsap from 'gsap'; 3 | import ScrollTrigger from 'gsap/ScrollTrigger'; 4 | import { useEffect } from 'react'; 5 | import { useLocomotiveScroll } from 'react-locomotive-scroll'; 6 | 7 | const ScrollTriggerProxy = () => { 8 | // first let's get instance of locomotive scroll 9 | 10 | const { scroll } = useLocomotiveScroll(); 11 | // Register scroll trigger plugin 12 | gsap.registerPlugin(ScrollTrigger); 13 | 14 | useEffect(() => { 15 | if (scroll) { 16 | const element = scroll?.el; // locomotive scrolling element, in our case it's app (main) 17 | 18 | scroll.on('scroll', ScrollTrigger.update); // on scroll of locomotive, update scrolltrigger 19 | 20 | // let's use scroller proxy 21 | ScrollTrigger.scrollerProxy(element, { 22 | scrollTop(value) { 23 | return arguments.length 24 | ? scroll.scrollTo(value, 0, 0) 25 | : scroll.scroll.instance.scroll.y; 26 | }, // we don't have to define a scrollLeft because we're only scrolling vertically. 27 | getBoundingClientRect() { 28 | return { 29 | top: 0, 30 | left: 0, 31 | width: window.innerWidth, 32 | height: window.innerHeight, 33 | }; 34 | }, 35 | // LocomotiveScroll handles things completely differently on mobile devices - it doesn't even transform the container at all! So to get the correct behavior and avoid jitters, we should pin things with position: fixed on mobile. We sense it by checking to see if there's a transform applied to the container (the LocomotiveScroll-controlled element). 36 | pinType: element.style.transform ? 'transform' : 'fixed', 37 | }); 38 | } 39 | 40 | return () => { 41 | ScrollTrigger.addEventListener('refresh', () => 42 | scroll?.update() 43 | ); 44 | ScrollTrigger.refresh(); 45 | }; 46 | }, [scroll]); 47 | 48 | return null; 49 | }; 50 | 51 | export default ScrollTriggerProxy; 52 | -------------------------------------------------------------------------------- /src/components/cover.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300&family=Philosopher&display=swap'); 2 | @font-face { 3 | font-family: domaine; 4 | src: url(/src/assets/font/Domaine\ Sans\ Fine\ Regular\ Regular.woff); 5 | } 6 | 7 | .cover-head-vid{ 8 | font-family: 'Albert Sans', sans-serif; 9 | font-size: 10em; 10 | color: whitesmoke; 11 | } 12 | 13 | .vr{ 14 | background-color:rgb(248, 236, 219) 15 | } -------------------------------------------------------------------------------- /src/components/loader.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: domaine; 3 | src: url(/src/assets/font/Domaine\ Sans\ Fine\ Regular\ Regular.woff); 4 | } 5 | .load-head{ 6 | font-size: 2em; 7 | position: absolute; 8 | top: 50%; 9 | left: 50%; 10 | transform: translate(-50%, -50%); 11 | font-family: domaine; 12 | } 13 | 14 | .small-text-load{ 15 | text-align: center; 16 | font-family: domaine; 17 | font-size: 0.4em; 18 | } -------------------------------------------------------------------------------- /src/components/nav.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Albert+Sans:wght@300&family=Philosopher&display=swap'); 2 | @font-face { 3 | font-family: domaine; 4 | src: url(/src/assets/font/Domaine\ Sans\ Fine\ Regular\ Regular.woff); 5 | } 6 | -------------------------------------------------------------------------------- /src/components/sections/About.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import "./about.css"; 3 | const SectionWrapper = styled.section` 4 | min-height: 100vh; 5 | width: 100vw; 6 | position: relative; 7 | background-color: #000000; 8 | display: flex; 9 | margin: 0 auto; 10 | color: white; 11 | font-family: 'Albert Sans', sans-serif; 12 | 13 | `; 14 | 15 | const TextWrapper = styled.div` 16 | z-index: 10; 17 | `; 18 | 19 | const TitleWrapper = styled.span` 20 | position: absolute; 21 | top: 50%; 22 | z-index: 10; 23 | font-family: domaine; 24 | `; 25 | 26 | const LeftContainer = styled.div` 27 | width: 100%; 28 | text-align:center; 29 | top: 40%; 30 | left:50% 31 | font-size:1.5em; 32 | position: absolute; 33 | text-transform:uppercase; 34 | z-index: 10; 35 | `; 36 | const RightContainer = styled.div` 37 | width: 35%; 38 | position: relative; 39 | margin-right: auto; 40 | margin-top: auto; 41 | margin-bottom: auto; 42 | img { 43 | width: 100%; 44 | height: auto; 45 | border-radius: 2%; 46 | } 47 | 48 | .small-img-1 { 49 | width: 40%; 50 | position: absolute; 51 | right: 80%; 52 | bottom: 10%; 53 | } 54 | .small-img-2 { 55 | width: 40%; 56 | position: absolute; 57 | left: 80%; 58 | bottom: 30%; 59 | } 60 | 61 | `; 62 | 63 | const Home = () => { 64 | return ( 65 | 66 | 67 | 68 | 73 | "Creative and ingenious, Crue Creative LK
74 | has a way of making a simple idea/brand
75 | come to full bloom" 76 |
77 | - a crue creative statement 78 | 79 | 80 | 81 |

born in sri lanka

83 | 84 | 85 | ); 86 | }; 87 | 88 | export default Home; 89 | -------------------------------------------------------------------------------- /src/components/sections/Banner.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import "./banner.css"; 3 | import ban01 from '../../assets/img/pod01.png'; 4 | import ban02 from '../../assets/img/pod02.png'; 5 | import ban03 from '../../assets/img/pod03.png'; 6 | import ban04 from '../../assets/img/pod04.png'; 7 | const SectionWrapper = styled.section` 8 | min-height: 100vh; 9 | width: 100vw; 10 | position: relative; 11 | display: flex; 12 | justify-content: center; 13 | align-items: center; 14 | background-color:black; 15 | z-index: 12; 16 | `; 17 | 18 | const Container = styled.div` 19 | min-height: 100vh; 20 | 21 | display: flex; 22 | flex-direction: column; 23 | justify-content: center; 24 | align-items: center; 25 | gap: 40px; 26 | `; 27 | 28 | const BannerComponent = styled.p` 29 | font-size: ${(props) => props.theme.fontxxxl}; 30 | font-family: 'Lora', serif; 31 | 32 | color: ${(props) => props.theme.text}; 33 | white-space: nowrap; 34 | text-transform: uppercase; 35 | line-height: 1; 36 | span { 37 | display: block; 38 | background-color: ${(props) => props.theme.body}; 39 | padding: 1rem 2rem; 40 | } 41 | `; 42 | 43 | const Banner = () => { 44 | return ( 45 | 46 | 47 | 48 |

54 | 55 | 56 | 57 |

63 | 64 | 65 | 66 |

72 | 73 | 74 | 75 |

81 | 82 | 83 | 84 | 85 | ); 86 | }; 87 | 88 | export default Banner; 89 | -------------------------------------------------------------------------------- /src/components/sections/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import styled from 'styled-components'; 3 | import { useLocomotiveScroll } from 'react-locomotive-scroll'; 4 | import "./foot.css"; 5 | const SectionWrapper = styled.section` 6 | min-height: 90vh; 7 | width: 100vw; 8 | display: flex; 9 | flex-direction: column; 10 | justify-content: center; 11 | align-items: center; 12 | 13 | background-color: black; 14 | color:whitesmoke 15 | 16 | position: relative; 17 | `; 18 | const LogoContainer = styled.div` 19 | font-family: domaine; 20 | display: flex; 21 | flex-direction: column; 22 | justify-content: center; 23 | align-items: center; 24 | 25 | img { 26 | width: 10vw; 27 | height: auto; 28 | } 29 | h3 { 30 | font-family: domaine; 31 | font-size: 3em; 32 | } 33 | `; 34 | const Bottom = styled.div` 35 | font-family: domaine; 36 | color: white; 37 | font-size:1em; 38 | `; 39 | 40 | const Footer = () => { 41 | const { scroll } = useLocomotiveScroll(); 42 | 43 | const handleScroll = (id) => { 44 | let elem = document.querySelector(id); 45 | 46 | scroll.scrollTo(elem, { 47 | offset: '-100', 48 | duration: '2000', 49 | easing: [0.25, 0.0, 0.35, 1.0], 50 | }); 51 | }; 52 | 53 | return ( 54 | 55 | 56 | 57 |

58 | Crue Creative 59 |

60 | 61 | 62 | 63 | 68 | © {new Date().getFullYear()}. All Rights Reserved 2022 69 | 70 | 75 | Crafted by - 76 | 81 | @chaniru.lk 82 | 83 | 84 | 85 | 86 | ); 87 | }; 88 | 89 | export default Footer; 90 | -------------------------------------------------------------------------------- /src/components/sections/Home.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import CoverVideo from '../CoverVideo'; 3 | import Logo from '../Logo'; 4 | 5 | const SectionWrapper = styled.section` 6 | min-height: 100vh; 7 | width: 100vw; 8 | position: relative; 9 | overflow: hidden; 10 | `; 11 | 12 | const Home = () => { 13 | return ( 14 | 15 | 16 | 17 | 18 | ); 19 | }; 20 | 21 | export default Home; 22 | -------------------------------------------------------------------------------- /src/components/sections/Second.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import "./second.css"; 3 | import img01 from '../../assets/img/1.png'; 4 | import img02 from '../../assets/img/2.png'; 5 | import img03 from '../../assets/img/3.png'; 6 | import img04 from '../../assets/img/41.png'; 7 | import img05 from '../../assets/img/5.png'; 8 | import img06 from '../../assets/img/6.png'; 9 | import img09 from '../../assets/img/9.png'; 10 | const SectionWrapper = styled.section` 11 | min-height: 150vh; 12 | width: 100%; 13 | position: relative; 14 | background-color: #000000; 15 | display: flex; 16 | margin: 0 auto; 17 | color: white; 18 | font-family: 'Albert Sans', sans-serif; 19 | `; 20 | 21 | const TextWrapper = styled.div` 22 | z-index: 10; 23 | @media (max-width: 768px) { 24 | display: none; 25 | } 26 | `; 27 | 28 | const LeftContainer = styled.div` 29 | z-index: 10; 30 | overflow: hidden; 31 | width:1000px; 32 | 33 | `; 34 | 35 | const Home = () => { 36 | return ( 37 | 38 | 42 | Caron 46 |

50 | 51 | Amana 55 |

59 | 60 | TwentySix 64 |

68 | 69 | PARADIS 73 |

77 | 78 | NUTMEG.GINGER 82 |

86 | 87 | Aymddesigns 91 |

95 | 96 | Agnes 100 |

104 | 105 | 106 | 107 | 108 | MAKE A GLOBAL IMPACT
109 | ACROSS DIFFERENT VERTICLES 110 | 111 | 112 | 113 | 114 | ); 115 | }; 116 | 117 | export default Home; 118 | -------------------------------------------------------------------------------- /src/components/sections/Third.jsx: -------------------------------------------------------------------------------- 1 | import styled from 'styled-components'; 2 | import "./new.css"; 3 | const SectionWrapper = styled.section` 4 | min-height: 100vh; 5 | width: 100vw; 6 | position: relative; 7 | background-color: #000000; 8 | display: flex; 9 | margin: 0 auto; 10 | color: white; 11 | font-family: 'Albert Sans', sans-serif; 12 | 13 | `; 14 | 15 | const TextWrapper = styled.div` 16 | z-index: 10; 17 | `; 18 | 19 | const LeftContainer = styled.div` 20 | width: 100%; 21 | text-align:center; 22 | top: 40%; 23 | left:50% 24 | font-size:1.5em; 25 | position: absolute; 26 | text-transform:uppercase; 27 | z-index: 10; 28 | `; 29 | 30 | const Home = () => { 31 | return ( 32 | 33 | 34 | 35 | 40 |

42 | Cure creative is a digital agecny based in Sri Lanka
43 | our aim is to win awwwards as being part of its community
44 | Not just awwwards to, we won't to provide our customers with
45 | the best digital experience they could ever imagine of. 46 |

47 | 48 | 49 | 50 |

WORK WITH US

52 | 53 | 54 | ); 55 | }; 56 | 57 | export default Home; 58 | -------------------------------------------------------------------------------- /src/components/sections/about.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: domaine; 3 | src: url(/src/assets/font/Domaine\ Sans\ Fine\ Regular\ Regular.woff); 4 | } 5 | .small-left{ 6 | font-size: 10px; 7 | } 8 | .header-sl{ 9 | position: absolute; 10 | font-family: domaine; 11 | text-transform: uppercase; 12 | font-size: 8em; 13 | top: 60%; 14 | left: 5%; 15 | } -------------------------------------------------------------------------------- /src/components/sections/banner.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: domaine; 3 | src: url(/src/assets/font/Domaine\ Sans\ Fine\ Regular\ Regular.woff); 4 | } 5 | .ban-pic{ 6 | height: 400px; 7 | width: auto; 8 | } -------------------------------------------------------------------------------- /src/components/sections/foot.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: domaine; 3 | src: url(/src/assets/font/Domaine\ Sans\ Fine\ Regular\ Regular.woff); 4 | } 5 | .credit{ 6 | position: absolute; 7 | font-family: domaine; 8 | font-size: 1.5em; 9 | color: whitesmoke; 10 | left: 10%; 11 | } 12 | .link-ig{ 13 | position: absolute; 14 | font-family: domaine; 15 | font-size: 1.5em; 16 | color: whitesmoke; 17 | right: 10%; 18 | } 19 | .link-ig a{ 20 | font-family: Arial, Helvetica, sans-serif; 21 | } -------------------------------------------------------------------------------- /src/components/sections/new.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: domaine; 3 | src: url(/src/assets/font/Domaine\ Sans\ Fine\ Regular\ Regular.woff); 4 | } 5 | .header-sl-new{ 6 | position: absolute; 7 | font-family: domaine; 8 | text-transform: uppercase; 9 | font-size: 10em; 10 | top: 68%; 11 | left: 5%; 12 | } 13 | .end-tezxt{ 14 | position: absolute; 15 | font-size: 1.2em; 16 | font-family: domaine; 17 | top: 2%; 18 | left: 25%; 19 | } -------------------------------------------------------------------------------- /src/components/sections/second.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: domaine; 3 | src: url(/src/assets/font/Domaine\ Sans\ Fine\ Regular\ Regular.woff); 4 | } 5 | .acros-left{ 6 | position: absolute; 7 | font-family: domaine; 8 | font-size: 5em; 9 | text-transform: uppercase; 10 | text-align: left; 11 | top: 80%; 12 | left: 2%; 13 | line-height: 70px; 14 | } 15 | .prod-one{ 16 | position: absolute; 17 | left: 5%; 18 | top: 40%; 19 | height: auto; 20 | width: 300px; 21 | filter: grayscale(100%); 22 | -webkit-filter: grayscale(100%); 23 | transition: 0.5s ease-in-out; 24 | } 25 | .prod-one:hover{ 26 | filter: none; 27 | -webkit-filter: grayscale(0); 28 | transition: 0.5s ease-in-out; 29 | } 30 | .prod-text-one{ 31 | font-family: domaine; 32 | text-align: center; 33 | font-size: 2em; 34 | color: white; 35 | left: 5%; 36 | top: 32%; 37 | position: absolute; 38 | text-decoration: none; 39 | } 40 | .prod-two{ 41 | position: absolute; 42 | right: 5%; 43 | top: 20%; 44 | height: auto; 45 | width: 300px; 46 | filter: grayscale(100%); 47 | -webkit-filter: grayscale(100%); 48 | transition: 0.5s ease-in-out; 49 | } 50 | .prod-two:hover{ 51 | filter: none; 52 | -webkit-filter: grayscale(0); 53 | transition: 0.5s ease-in-out; 54 | } 55 | .prod-text-two{ 56 | font-family: domaine; 57 | text-align: center; 58 | font-size: 2em; 59 | color: white; 60 | right: 5%; 61 | top: 15%; 62 | position: absolute; 63 | text-decoration: none; 64 | } 65 | .prod-three{ 66 | position: absolute; 67 | left: 30%; 68 | top: 20%; 69 | height: auto; 70 | width: 300px; 71 | filter: grayscale(100%); 72 | -webkit-filter: grayscale(100%); 73 | transition: 0.5s ease-in-out; 74 | } 75 | .prod-three:hover{ 76 | filter: none; 77 | -webkit-filter: grayscale(0); 78 | transition: 0.5s ease-in-out; 79 | } 80 | .prod-text-three{ 81 | font-family: domaine; 82 | text-align: center; 83 | font-size: 2em; 84 | color: white; 85 | left: 30%; 86 | top: 15%; 87 | position: absolute; 88 | text-decoration: none; 89 | } 90 | .prod-four{ 91 | position: absolute; 92 | left: 30%; 93 | top: 60%; 94 | height: auto; 95 | width: 350px; 96 | } 97 | .prod-text-four{ 98 | font-family: domaine; 99 | text-align: center; 100 | font-size: 2em; 101 | color: white; 102 | left: 45%; 103 | top: 54%; 104 | position: absolute; 105 | text-decoration: none; 106 | } 107 | .prod-five{ 108 | position: absolute; 109 | left: 60%; 110 | top: 6%; 111 | height: 270px; 112 | width: auto; 113 | filter: grayscale(100%); 114 | -webkit-filter: grayscale(100%); 115 | transition: 0.5s ease-in-out; 116 | } 117 | .prod-five:hover{ 118 | filter: none; 119 | -webkit-filter: grayscale(0); 120 | transition: 0.5s ease-in-out; 121 | } 122 | .prod-text-five{ 123 | font-family: domaine; 124 | text-align: center; 125 | font-size: 2em; 126 | color: white; 127 | left: 55%; 128 | top: 3%; 129 | position: absolute; 130 | text-decoration: none; 131 | } 132 | .prod-six{ 133 | position: absolute; 134 | left: 60%; 135 | top: 50%; 136 | height: 270px; 137 | width: auto; 138 | filter: grayscale(100%); 139 | -webkit-filter: grayscale(100%); 140 | transition: 0.5s ease-in-out; 141 | } 142 | .prod-six:hover{ 143 | filter: none; 144 | -webkit-filter: grayscale(0); 145 | transition: 0.5s ease-in-out; 146 | } 147 | .prod-text-six{ 148 | font-family: domaine; 149 | text-align: center; 150 | font-size: 2em; 151 | color: white; 152 | left: 70%; 153 | top: 50%; 154 | position: absolute; 155 | text-decoration: none; 156 | } 157 | .prod-seven{ 158 | position: absolute; 159 | left: 80%; 160 | top: 60%; 161 | height: 270px; 162 | width: auto; 163 | filter: grayscale(100%); 164 | -webkit-filter: grayscale(100%); 165 | transition: 0.5s ease-in-out; 166 | } 167 | .prod-seven:hover{ 168 | filter: none; 169 | -webkit-filter: grayscale(0); 170 | transition: 0.5s ease-in-out; 171 | } 172 | .prod-text-seven{ 173 | font-family: domaine; 174 | text-align: center; 175 | font-size: 2em; 176 | color: white; 177 | left: 86%; 178 | top: 58%; 179 | position: absolute; 180 | text-decoration: none; 181 | } -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | 4 | import App from './App'; 5 | import { BrowserRouter as Router } from 'react-router-dom'; 6 | 7 | ReactDOM.render( 8 | 9 | 10 | 11 | 12 | , 13 | document.getElementById('root') 14 | ); 15 | -------------------------------------------------------------------------------- /src/styles/GlobalStyles.js: -------------------------------------------------------------------------------- 1 | import { createGlobalStyle } from 'styled-components'; 2 | import '@fontsource/lora'; 3 | import '@fontsource/monda'; 4 | 5 | const GlobalStyles = createGlobalStyle` 6 | *,*::before, *::after,h1,h2,h3,h4,h5,h6 { 7 | margin: 0; 8 | padding: 0; 9 | } 10 | *{ 11 | box-sizing: border-box; 12 | } 13 | body { 14 | font-family: "Monda", sans-serif; 15 | overflow-x: hidden; 16 | } 17 | 18 | a { 19 | color: inherit; 20 | text-decoration: none; 21 | font-family: "Monda", sans-serif; 22 | } 23 | 24 | h1,h2,h3,h4,h5,h6 { 25 | line-height: 1.7; 26 | } 27 | 28 | p { 29 | line-height: 2; 30 | } 31 | `; 32 | 33 | export default GlobalStyles; 34 | -------------------------------------------------------------------------------- /src/styles/Themes.js: -------------------------------------------------------------------------------- 1 | export const light = { 2 | body: '#fff', 3 | text: '#202020', 4 | bodyRgba: '255, 255, 255', 5 | textRgba: '32,32,32', 6 | 7 | grey: '#ebebeb', 8 | 9 | fontxs: '0.75em', 10 | fontsm: '0.875em', 11 | fontmd: '1em', // 1em = 16px 12 | fontlg: '1.25em', 13 | fontxl: '2em', 14 | fontxxl: '3em', 15 | fontxxxl: '4em', 16 | 17 | fontButton: '0.875em', 18 | 19 | navHeight: '5rem', 20 | }; 21 | 22 | export const dark = { 23 | body: '#000000', 24 | text: '#fff', 25 | textRgba: '255, 255, 255', 26 | bodyRgba: '32,32,32', 27 | 28 | grey: '#ebebeb', 29 | 30 | fontxs: '0.75em', 31 | fontsm: '0.875em', 32 | fontmd: '1em', // 1em = 16px 33 | fontlg: '1.25em', 34 | fontxl: '2em', 35 | fontxxl: '3em', 36 | fontxxxl: '4em', 37 | 38 | fontButton: '0.875em', 39 | 40 | navHeight: '5rem', 41 | }; 42 | --------------------------------------------------------------------------------