Added an Image Slider

package.json

@@ -3,12 +3,17 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@material-ui/core": "^4.12.3",
+    "@material-ui/icons": "^4.11.2",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
     "@testing-library/user-event": "^12.1.10",
+    "components": "^0.1.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
+    "styled": "^1.0.0",
+    "styled-components": "^5.3.3",
     "web-vitals": "^1.0.1"
   },
   "scripts": {

public/index.html

@@ -5,6 +5,9 @@
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <meta name="description" content="Web site created using create-react-app" />
+
+  <link href="https://fonts.googleapis.com/css2?family=Urbanist:wght@100&display=swap" rel="stylesheet">
+
   <style>
     * {
       margin: 0;

src/App.jsx

@@ -1,5 +1,7 @@
+import Home from "./pages/Home";
+
 const App = () => {
-  return <div>Hello world!</div>;
+  return <Home/>;
 };
 
 export default App;

src/components/Announcement.jsx

@@ -0,0 +1,22 @@
+import styled from "styled-components"
+
+
+const Container = styled.div`
+height : 30px;
+background-color : teal;
+color: white;
+display : flex;
+align-items: center;
+font-size: 14px;
+font-weight:500;
+`
+
+const Announcement = () => {
+    return (
+        <Container>
+            Super Deal! Free shipping on orders over $50
+        </Container>
+    )
+}
+
+export default Announcement

src/components/Navbar.jsx

@@ -0,0 +1,90 @@
+import { Badge } from '@material-ui/core';
+import { Search, ShoppingCartOutlined } from '@material-ui/icons';
+import React from 'react'
+import styled from 'styled-components'
+
+const Container = styled.div`
+    height : 60px;
+`;
+
+const Wrapper = styled.div`
+padding : 10px 20px;
+display : flex;
+justify-content : space-between;
+`;
+
+const Left = styled.div`
+flex:1;
+display: flex;
+`
+
+const Language = styled.span`
+    font-size: 14px;
+    cursor: pointer;
+`
+const SearchContainer = styled.div`
+border : 0.5px solid lightgray;
+display: flex;
+align-items: center;
+margin-left : 25px;
+
+
+`;
+
+const Input = styled.input`
+ border:none;
+`;
+
+const Center = styled.div`
+flex:1;
+text-align : center;
+`;
+
+const Logo = styled.h1`
+font-weight : bold;
+text-align : center;
+`;
+const Right = styled.div`
+flex:1;
+display: flex;
+align-items : center;
+justify-content : flex-end;
+
+`;
+
+const MenuItem = styled.div`
+font-size : 14px;
+cursor : pointer;
+margin-left : 25px;
+`;
+
+
+
+const Navbar = () => {
+    return (
+        <Container>
+            <Wrapper>
+                <Left>
+                    <Language> EN </Language>
+                    <SearchContainer>
+                        <Input />
+                        <Search style={{ color: "gray", fontSize:16}} />
+
+                    </SearchContainer>
+                </Left>
+                <Center> <Logo> LAMA. </Logo> </Center>
+                <Right>
+                    <MenuItem> REGISTER </MenuItem>
+                    <MenuItem> SIGN IN </MenuItem>
+                    <MenuItem>
+                        <Badge badgeContent={4} color="primary">
+                            <ShoppingCartOutlined />
+                        </Badge>
+                    </MenuItem> </Right>
+            </Wrapper>
+        </Container>
+    )
+}
+
+export default Navbar
+

src/components/Slider.jsx

@@ -0,0 +1,138 @@
+import { ArrowLeftOutlined, ArrowRightOutlined } from "@material-ui/icons"
+import { useState } from "react";
+import styled from "styled-components"
+
+const Container = styled.div`
+width: 100%;
+height: 100vh;
+display: flex;
+
+position : relative;
+overflow: hidden;
+`
+const Arrow = styled.div`
+width: 50px;
+height: 50px;
+
+background-color: #fff7f7;
+border-radius: 50%;
+display: flex;
+align-items: center;
+justify-content: center;
+position :absolute;
+top: 0;
+bottom : 0;
+left: ${props => props.direction === "left" && "10px"};
+right: ${props => props.direction === "right" && "10px"};
+
+cursor : pointer;
+opacity : 0.5;
+margin: auto;
+z-index: 2;
+
+`
+
+const Wrapper = styled.div`
+height : 100%;
+display: flex;
+transform : translateX(0vw);
+`;
+
+const Slide = styled.div`
+display : flex;
+align-items : center;
+width : 100vw;
+height : 100vh;
+background-color: #${props=>props.bg};
+`;
+const ImgContainer = styled.div`
+height : 100%;
+flex : 1;
+`;
+
+
+const Image = styled.image`
+height :80%`;
+
+
+const InfoContainer = styled.div`
+flex : 1;
+padding : 50px;
+`;
+
+const Title = styled.h1`
+font-size : 70px;
+
+`;
+const Description = styled.p`
+margin: 50px 0px;
+font-size: 20px;
+font-weight: 500;
+letter-spacing: 3px;
+
+
+`
+const Button = styled.button`
+padding: 10px;
+font-size: 20px;
+background-color: transparent;
+cursor: pointer;
+`;
+
+
+const Slider = () => {
+
+    const  [slideIndex, setSlideIndex] = useState(0);
+
+    const handleClick = (direction) => {
+
+    }
+    return (
+        <Container>
+            <Arrow direction="left" onClick={()=>handleClick("left")}>
+                <ArrowLeftOutlined />
+            </Arrow>
+            <Wrapper>
+                <Slide bg="f5fafd">
+                    <ImgContainer>
+                        <img src="https://i.pinimg.com/564x/2e/41/47/2e4147c28c008ad1f1c581c1c503f7fb.jpg" />
+                    </ImgContainer>
+                    <InfoContainer>
+                        <Title> SUMMER SALE </Title>
+                        <Description> DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS</Description>
+                        <Button>SHOP NOW</Button>
+                    </InfoContainer>
+                </Slide>
+                <Slide bg="fcf1ed">
+                    <ImgContainer>
+                        <img src="https://i.pinimg.com/564x/2e/41/47/2e4147c28c008ad1f1c581c1c503f7fb.jpg" />
+                    </ImgContainer>
+                    <InfoContainer>
+                        <Title> WINTER SALE </Title>
+                        <Description> DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS</Description>
+                        <Button>SHOP NOW</Button>
+                    </InfoContainer>
+                </Slide>
+
+                <Slide bg="fbf0f4">
+                    <ImgContainer>
+                        <img src="https://i.pinimg.com/564x/2e/41/47/2e4147c28c008ad1f1c581c1c503f7fb.jpg" />
+                    </ImgContainer>
+                    <InfoContainer>
+                        <Title> POPULAR SALE </Title>
+                        <Description> DON'T COMPROMISE ON STYLE! GET FLAT 30% OFF FOR NEW ARRIVALS</Description>
+                        <Button>SHOP NOW</Button>
+                    </InfoContainer>
+                </Slide>
+
+            </Wrapper>
+            <Arrow direction="right" onClick={()=>handleClick("left")}>
+                <ArrowRightOutlined />
+            </Arrow>
+        </Container>
+
+
+    )
+}
+
+export default Slider

src/pages/Home.jsx

@@ -0,0 +1,16 @@
+import React from 'react'
+import Announcement from '../components/Announcement'
+import Navbar from '../components/Navbar'
+import Slider from '../components/Slider'
+const Home = () => {
+    return (
+        <div>
+            <Announcement/>
+            <Navbar/>
+            <Slider/>
+        </div>
+    )
+}
+
+export default Home
+