bla

package.json

@@ -10,12 +10,13 @@
   },
   "dependencies": {
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "styled-components": "^5.3.10"
   },
   "devDependencies": {
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.9",
     "@vitejs/plugin-react": "^3.0.0",
     "vite": "^4.0.0"
   }
-}
+}

src/App.jsx

@@ -1,9 +1,32 @@
+import styled from "styled-components"
+import Hero from "./components/Hero"
+import Who from "./components/Who"
+import Works from "./components/Works"
+import Contact from "./components/Contact"
+
+const Container = styled.div`
+  height: 100vh;
+  scroll-snap-type: y mandatory;
+  scroll-behavior: smooth;
+  overflow-y: auto;
+  scrollbar-width: none;
+  color: #000;
+  background: url("./public/img/background.png");
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+`
+
 function App() {
 
   return (
-    <div>
-      Hello world!
-    </div>
+    <Container>
+      <Hero />
+      <Who />
+      <Works />
+      <Contact />
+    </Container>
   )
 }
 

src/components/Contact.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Section = styled.div`
+  height: 100vh;
+  scroll-snap-align: center;
+`
+
+const Contact = () => {
+    return (
+        <Section>Contact</Section>
+    )
+}
+
+export default Contact

src/components/Hero.jsx

@@ -0,0 +1,105 @@
+import React from 'react'
+import styled from 'styled-components'
+import Navbar from './Navbar'
+
+const Section = styled.div`
+  height: 100vh;
+  scroll-snap-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+`
+
+const Container = styled.div`
+    height: 100vh;
+    scroll-snap-align: center;
+    width: 75rem;
+    display: flex;
+    justify-content: space-between;
+`
+
+const Left = styled.div`
+    flex: 2;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 20px;
+`
+const Title = styled.h1`
+    font-size: 3rem;
+`;
+const WhatWeDo = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+`;
+const Line = styled.img`
+height: 5px;
+`;
+
+const Subtitle = styled.h3`
+    color: #da4ea2;
+`;
+const Desc = styled.p`
+    font-size: 24px;
+    color: #000;
+`;
+
+const Button = styled.button`
+    width: 100px;
+    padding: 10px;
+    cursor: pointer;
+    background-color: #000;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+`
+
+const Right = styled.div`
+    flex: 3;
+    position: relative;
+`
+const Img = styled.img`
+    width: 800px;
+    height: 600px;
+    object-fit: contain;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    margin: auto;
+    animation: animate 2s infinite ease alternate;
+
+    @keyframes animate {
+        to {
+            transform: translateY(50px);
+        }
+    }
+`;
+
+const Hero = () => {
+    return (
+        <Section>
+            <Navbar />
+            <Container>
+                <Left>
+                    <Title>Lorem. Ipsum. Dolor.</Title>
+                    <WhatWeDo>
+                        <Line src="/img.line.png" />
+                        <Subtitle>What we do</Subtitle>
+                    </WhatWeDo>
+                    <Desc>Lorem ipsum dolor sit amet consectetur adipisicing elit.</Desc>
+                    <Button>Learn more</Button>
+                </Left>
+                <Right>
+                    {/* 3d model */}
+                    <Img src="/img/3d.png" />
+                </Right>
+            </Container >
+        </Section >
+    )
+}
+
+export default Hero

src/components/Navbar.jsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Section = styled.div`
+    display: flex;
+    justify-content: center;
+`
+
+const Container = styled.div`
+    width: 75rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 0px;
+`
+
+const Links = styled.div`
+    display: flex;
+    align-items: center;
+    Gap: 50px;
+    `;
+const Icons = styled.div`
+    display: flex;
+    align-items: center;
+    Gap: 20px;`;
+
+const Logo = styled.img`
+height: 50px;
+`;
+const List = styled.ul`
+    display: flex;
+    gap: 20px;
+    list-style: none;
+`;
+
+const ListItem = styled.li`
+cursor: pointer;`;
+
+const Icon = styled.img`
+width: 20px;
+cursor: pointer;`;
+
+const Button = styled.button`
+    width: 100px;
+    padding: 10px;
+    cursor: pointer;
+    background-color: #000;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+`
+
+const Navbar = () => {
+    return (
+        <Section>
+            <Container>
+                <Links>
+                    <Logo src="./public/img/logo.png" />
+                    <List>
+                        <ListItem>Home</ListItem>
+                        <ListItem>About</ListItem>
+                        <ListItem>Works</ListItem>
+                        <ListItem>Contact</ListItem>
+                    </List>
+                </Links>
+                <Icons>
+                    <Icon src="./public/img/search.png" />
+                    <Button>Hire now</Button>
+                </Icons>
+
+            </Container>
+        </Section>
+    )
+}
+
+export default Navbar

src/components/Who.jsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Section = styled.div`
+  height: 100vh;
+  scroll-snap-align: center;
+  display: flex;
+  justify-content: center;
+`
+
+const Container = styled.div`
+    height: 100vh;
+    scroll-snap-align: center;
+    width: 75rem;
+    display: flex;
+    justify-content: space-between;
+`
+
+const Left = styled.div`
+    flex: 1;
+
+`
+const Title = styled.h1`
+    font-size: 3rem;
+`;
+
+const Right = styled.div`
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    gap: 20px;
+`
+const WhatWeDo = styled.div`
+    display: flex;
+    align-items: center;
+    gap: 10px;
+`;
+const Line = styled.img`
+height: 5px;
+`;
+
+const Subtitle = styled.h3`
+    color: #da4ea2;
+`;
+const Desc = styled.p`
+    font-size: 24px;
+    color: lightgray;
+`;
+
+const Button = styled.button`
+    width: 100px;
+    padding: 10px;
+    cursor: pointer;
+    background-color: #000;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+`
+
+const Who = () => {
+    return (
+        <Section>
+            <Container>
+                <Left>
+                </Left>
+                <Right>
+                    <Title>think outside the box.</Title>
+                    <WhatWeDo>
+                        <Line src="/img.line.png" />
+                        <Subtitle>Who we are</Subtitle>
+                    </WhatWeDo>
+                    <Desc>Lorem ipsum dolor sit amet consectetur adipisicing elit.</Desc>
+                    <Button>Zie werken</Button>
+                </Right>
+            </Container >
+        </Section >
+    )
+}
+
+export default Who

src/components/Works.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import styled from 'styled-components'
+
+const Section = styled.div`
+  height: 100vh;
+  scroll-snap-align: center;
+`
+
+const Works = () => {
+    return (
+        <Section>Works</Section>
+    )
+}
+
+export default Works