diff --git a/src/App.js b/src/App.js
index 3784575..22bb293 100644
--- a/src/App.js
+++ b/src/App.js
@@ -1,25 +1,8 @@
-import logo from './logo.svg';
-import './App.css';
+import logo from "./logo.svg";
+import "./App.css";
 
 function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
+  return <div></div>;
 }
 
 export default App;
diff --git a/src/Styled/carousel.css b/src/Styled/carousel.css
new file mode 100644
index 0000000..7fbf4a7
--- /dev/null
+++ b/src/Styled/carousel.css
@@ -0,0 +1,30 @@
+.carousel {
+  /* border: 2px solid black; */
+  margin: 30px;
+  margin-top: 50px;
+  margin-bottom: 40px;
+}
+.carousel h1{
+  font-size: 28px;
+}
+.slick-arrow.slick-prev,
+.slick-arrow.slick-next {
+  background: rgb(133, 120, 120);
+  width: 37px;
+  height: 64px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 10px;
+  z-index: 1;
+}
+.slick-prev{
+    left: 0;
+    border-top-right-radius: 5px;
+    border-bottom-right-radius: 5px;
+}
+.slick-next{
+    right: 0;
+    border-top-left-radius: 5px;
+    border-bottom-left-radius: 5px;
+}
\ No newline at end of file
diff --git a/src/Styled/dansko.module.css b/src/Styled/dansko.module.css
new file mode 100644
index 0000000..9649b82
--- /dev/null
+++ b/src/Styled/dansko.module.css
@@ -0,0 +1,38 @@
+.dansko {
+  border: 1px solid black;
+  height: 800px;
+  display: flex;
+  padding: 30px;
+}
+.dansko > div:first-child {
+  width: 30%;
+}
+.dansko > div:last-child {
+  width: 70%;
+  display: grid;
+  margin-left: 2%;
+  grid-template-columns: repeat(4,21%);
+  column-gap: 4%;
+}
+
+.dansko img {
+  width: 100%;
+}
+.dansko h1 {
+  font-size: 26px;
+}
+.dansko button {
+    border-radius: 4px;
+    font-size: 14px;
+    font-weight: 700;
+    background-color: #fff;
+    padding: 10px 20px;
+    cursor: pointer;
+    margin-bottom: 30px;
+    margin-top: 10px;
+}
+.dansko>div:first-child>div:first-child :hover {
+    background-color: #000;
+    color: #fff;
+    transition: all ease-in-out .3s;
+}
diff --git a/src/Styled/navbar.js b/src/Styled/navbar.js
new file mode 100644
index 0000000..50e641e
--- /dev/null
+++ b/src/Styled/navbar.js
@@ -0,0 +1,14 @@
+import styled from "styled-components";
+
+export const TopNav = styled.div`
+  height: 40px;
+  background-color: rgb(0, 118, 189);
+  display: flex;
+`;
+
+export const TopP = styled.p`
+  color: #fff;
+  font-size: 18px;
+  margin-left: 10%;
+  margin-top: 5px;
+`;
diff --git a/src/Styled/navbar.module.css b/src/Styled/navbar.module.css
new file mode 100644
index 0000000..8a21cc7
--- /dev/null
+++ b/src/Styled/navbar.module.css
@@ -0,0 +1,139 @@
+.searchNav {
+  /* border: 1px solid red; */
+  height: 100px;
+  display: flex;
+  align-items: center;
+  padding: 0px 24px;
+  justify-content: space-between;
+}
+.searchNav > div {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  /* border: 1px solid red; */
+}
+.searchNav img {
+  height: 60%;
+}
+
+input {
+  background: transparent;
+  margin: 0;
+  width: 400px;
+  padding: 7px 8px;
+  font-size: 16px;
+  color: inherit;
+  border: 2px solid grey;
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+input:focus {
+  border: 2px dashed #1183d6;
+  outline: none;
+}
+input::placeholder {
+  padding: 0px 10px;
+}
+input + button {
+  background-color: rgb(0, 57, 83);
+  color: #fff;
+  border: none;
+  font-weight: 500;
+  height: 42px;
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+input + button:hover {
+  background-color: #1183d6;
+  transition: all ease-in-out 0.3s;
+}
+.searchNav > div:nth-child(2) {
+  margin-right: 35%;
+}
+.searchNav > div:last-child {
+  width: 12%;
+}
+.searchNav > div:last-child button {
+  background: transparent;
+  border: 2px solid lightgreen;
+  color: rgb(0, 57, 83);
+  border-radius: 4px;
+  width: 100%;
+  font-weight: 600;
+}
+.searchNav > div:last-child button:hover {
+  background-color: lightgreen;
+  transition: all ease-in-out 0.3s;
+}
+/* dropdowns */
+.dropDownPart {
+  /* border: 1px solid blue; */
+  padding: 0px 24px;
+  height: 50px;
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  background-color: whitesmoke;
+  justify-content: space-between;
+}
+.dropDownPart > div {
+  font-size: 18px;
+  font-weight: 600;
+  color: rgb(0, 57, 83);
+  display: flex;
+  gap: 20px;
+  align-items: center;
+  height: 100%;
+}
+.dropDownPart > div > div {
+  height: 100%;
+  display: flex;
+  align-items: center;
+}
+.dropDownPart > div > div:hover {
+  cursor: pointer;
+  border-bottom: 2px solid rgb(0, 57, 83);
+}
+.dropDownPart > div:last-child:hover {
+  cursor: pointer;
+  border-bottom: 2px solid rgb(0, 57, 83);
+}
+.dropdown {
+  position: relative;
+}
+.dropdown:hover .dropdownContent {
+  display: flex;
+}
+.dropdownContent {
+  position: absolute;
+  display: flex;
+  gap: 50px;
+  display: none;
+  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+  top: 50px;
+  background-color: #fff;
+  padding: 15px 30px ;
+}
+.dropdownContent > div {
+  width: 150px;
+}
+.dropdownContent p {
+  font-weight: normal;
+  font-size: 15px;
+}
+.dropdownContent .dropdownHead {
+  font-weight: 600;
+  font-size: 17px;
+  padding-top: 5px;
+}
+.dropdownContent p:hover {
+  text-decoration: underline;
+  cursor: pointer;
+}
+
+.movingText {
+  height: 35px;
+  background-color: lavender;
+  text-align: center;
+}
diff --git a/src/Styled/newArrival.module.css b/src/Styled/newArrival.module.css
new file mode 100644
index 0000000..dc650db
--- /dev/null
+++ b/src/Styled/newArrival.module.css
@@ -0,0 +1,36 @@
+.newArrival {
+  height: 680px;
+  border: 1px solid black;
+  margin-top: 50px;
+  display: flex;
+  justify-content: space-between;
+  padding: 24px;
+}
+.newArrival > div {
+  width: 49%;
+  height: 100%;
+  /* border: 1px solid red; */
+  cursor: pointer;
+}
+.backImg {
+  background-image: url("https://m.media-amazon.com/images/G/01/2022/homepage5.02/COOP-UGG-NEW-ARRIVALS-DESKTOP-LEFT-1X-634x634_1.jpg");
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 6%;
+}
+.backImg p {
+  font-size: 18px;
+  text-align: center;
+  font-weight: 500;
+  margin-top: 2%;
+}
+.backImg button {
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 700;
+  background-color: rgb(243,247,111);
+  padding: 10px 20px;
+  cursor: pointer;
+}
diff --git a/src/Styled/shopPopular.module.css b/src/Styled/shopPopular.module.css
new file mode 100644
index 0000000..6832424
--- /dev/null
+++ b/src/Styled/shopPopular.module.css
@@ -0,0 +1,38 @@
+.popCate{
+    border: 1px solid black;
+    padding: 24px;
+    height: 370px;
+}
+.popCate h1{
+    font-size: 24px;
+}
+.flexBox{
+    /* border: 1px solid black; */
+    display: flex;
+    justify-content: space-between;
+}
+.flexChild{
+    /* border: 1px solid red; */
+    width: 16%;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+}
+.longImg{
+    width: 60%;
+}
+.shortImg{
+    width: 100%;
+}
+.flexChild p{
+    font-size: 15px;
+    font-weight: 600;
+    cursor: pointer;
+}
+.flexChild :hover{
+    cursor: pointer;
+    text-decoration: underline;
+    color: #1183d6;
+}
\ No newline at end of file
diff --git a/src/Styled/singlecarousel.module.css b/src/Styled/singlecarousel.module.css
new file mode 100644
index 0000000..cf37e77
--- /dev/null
+++ b/src/Styled/singlecarousel.module.css
@@ -0,0 +1,28 @@
+.parent{
+    /* border: 1px solid red; */
+    padding: 5px;
+}
+.parent>div{
+    /* border: 1px solid red; */
+    height: 250px;
+    background-color: whitesmoke;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.type{
+    font-weight: 600;
+    font-size: 16px;
+    margin-top: -20px;
+}
+.price{
+    color: rgb(0, 57, 83) ;
+    margin-top: -20px;
+}
+.parent :hover{
+    color: #1183d6;
+    cursor: pointer;
+}
+.rating{
+    margin-bottom: 5px;
+}
\ No newline at end of file
diff --git a/src/Styled/womenDeals.module.css b/src/Styled/womenDeals.module.css
new file mode 100644
index 0000000..96b2c15
--- /dev/null
+++ b/src/Styled/womenDeals.module.css
@@ -0,0 +1,34 @@
+.jarvis{
+    height: 570px;
+    border: 1px solid black;
+    display: flex;
+    justify-content: space-between;
+    padding: 24px;
+    margin-top: 50px;
+}
+.jarvis>div{
+    /* border: 1px solid red; */
+    height: 100%;
+    width: 32%;
+    text-align: center;
+    cursor: pointer;
+}
+.jarvis img{
+    width: 100%;
+}
+.jarvis h2{
+    font-size: 20px;
+}
+.jarvis p{
+    font-size: 14.5px;
+}
+.jarvis p+p {
+    text-decoration: underline;
+    color: rgb(0, 57, 83);
+    font-weight: 700;
+    font-size: 15px;
+    margin-top: -10px;
+}
+.jarvis>div:hover  p+p{
+    color: #1183d6;
+}
\ No newline at end of file
diff --git a/src/components/AfterPay.jsx b/src/components/AfterPay.jsx
new file mode 100644
index 0000000..9c56f89
--- /dev/null
+++ b/src/components/AfterPay.jsx
@@ -0,0 +1,21 @@
+import React from "react";
+import styled from "styled-components";
+
+const Parent = styled.div`
+  height: 250px;
+  width: 100%;
+  margin-top: 50px;
+  cursor: pointer;
+`;
+
+export const AfterPay = () => {
+  return (
+    <Parent>
+      <img
+        width={"100%"}
+        src="https://m.media-amazon.com/images/G/01/zopus2020v/ZAfterpay/Afterpay_Banner_CTA_1440x250.jpg"
+        alt=""
+      />
+    </Parent>
+  );
+};
diff --git a/src/components/Carousel.jsx b/src/components/Carousel.jsx
new file mode 100644
index 0000000..14b3763
--- /dev/null
+++ b/src/components/Carousel.jsx
@@ -0,0 +1,152 @@
+import React from "react";
+import Slider from "react-slick";
+import "slick-carousel/slick/slick.css";
+import "slick-carousel/slick/slick-theme.css";
+import "../Styled/carousel.css";
+import { MdArrowBackIos, MdArrowForwardIos } from "react-icons/md";
+import { SingleCarouselCard } from "./SingleCarouselCard";
+
+const popularItems = [
+  {
+    img: "https://m.media-amazon.com/images/I/816yoL1mI4L._AC_SX255_.jpg",
+    name: "Crocs",
+    price: "49.95",
+    ratings: 3563,
+    type: "Classic Clog",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/81gSaz30MSL._AC_SX255_.jpg",
+    name: "Crocs",
+    price: "49.95",
+    ratings: 2820,
+    type: "Classic Clog",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/61YmFwznaiL._AC_SX255_.jpg",
+    name: "Crocs",
+    price: "49.95",
+    ratings: 1942,
+    type: "Classic Clog",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/81NKoInBS7L._AC_SX255_.jpg",
+    name: "Crocs",
+    price: "59.95",
+    ratings: 3751,
+    type: "Classic Lined Clog",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/61TeInTmpvL._AC_SX255_.jpg",
+    name: "Crocs",
+    price: "35.00",
+    ratings: 815,
+    type: "Classic Tie-Dye Graphic..",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/51d8uWPVVRL._AC_SX255_.jpg",
+    name: "adidas Originals",
+    price: "63.00",
+    ratings: 230,
+    type: "Swift Run W",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/716nxTFtrtL._AC_SX255_.jpg",
+    name: "Under Armour",
+    price: "20.00",
+    ratings: 75,
+    type: "Essential 2.0 No Show...",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/51l1Jec3koL._AC_SX255_.jpg",
+    name: "Under Armour Kids",
+    price: "30.00",
+    ratings: 5,
+    type: "Performance Polo",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/718fPrLmdGL._AC_SX255_.jpg",
+    name: "Clarks",
+    price: "38.34",
+    ratings: 198,
+    type: "Fenner Nerice",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/611oCjO5-iL._AC_SX255_.jpg",
+    name: "Crocs",
+    price: "59.95",
+    ratings:1602 ,
+    type: "Classic Lined Clog",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/51mE7HTNrwL._AC_SX255_.jpg",
+    name: "Under Armour Kids",
+    price: "30.00",
+    ratings:11 ,
+    type: "Performance Polo",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/81kT4mVjONL._AC_SX255_.jpg",
+    name: "Carhartt",
+    price: "24.99",
+    ratings:106 ,
+    type: "Deluxe Lunch Cooler",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/7170XZI3LOL._AC_SX255_.jpg",
+    name: "Hanes",
+    price: "27.76",
+    ratings:5 ,
+    type: "Women's Jogger with Pock..",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/81a1VNoVB-L._AC_SX255_.jpg",
+    name: "Bali",
+    price: "29.99",
+    ratings:57 ,
+    type: "Comfort Flex Fit Wireless..",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/71I6eNeKHrS._AC_SX255_.jpg",
+    name: "adidas Originals",
+    price: "29.95",
+    ratings:27 ,
+    type: "Trefoil Tee",
+  },
+];
+
+const PreviousBtn = (props) => {
+  const { className, onClick } = props;
+  return (
+    <div className={className} onClick={onClick}>
+      <MdArrowBackIos />
+    </div>
+  );
+};
+const NextBtn = (props) => {
+  const { className, onClick } = props;
+  return (
+    <div className={className} onClick={onClick}>
+      <MdArrowForwardIos />
+    </div>
+  );
+};
+
+export const Carousels = () => {
+  return (
+    <div className="carousel">
+      <h1>Popular Items</h1>
+      <Slider
+        dots
+        prevArrow={<PreviousBtn />}
+        nextArrow={<NextBtn />}
+        slidesToShow={6}
+        slidesToScroll={6}
+        infinite={false}
+      >
+        {popularItems.map((el, index) => {
+          return <SingleCarouselCard key={index} {...el} />;
+        })}
+      </Slider>
+    </div>
+  );
+};
diff --git a/src/components/DanskoShoes.jsx b/src/components/DanskoShoes.jsx
new file mode 100644
index 0000000..e6a13bb
--- /dev/null
+++ b/src/components/DanskoShoes.jsx
@@ -0,0 +1,87 @@
+import React from "react";
+import styles from "../Styled/dansko.module.css";
+import { SingleCarouselCard } from "./SingleCarouselCard";
+
+const data = [
+  {
+    img: "https://m.media-amazon.com/images/I/61AnGbTHP7L._AC_UL320_.jpg",
+    name: "Dansko",
+    type: "LT Pro",
+    ratings: "22,242",
+    price: "$119.95",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/611+dT9IUOL._AC_UL320_.jpg",
+    name: "Dansko",
+    ratings: "10,352",
+    price: "$149.95",
+    type: "XP 2.0",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/81Att+yoRfL._AC_UL320_.jpg",
+    name: "Dansko",
+    ratings: "698",
+    price: "$139.95",
+    type: "Professional",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/61QCpf6F5TL._AC_UL320_.jpg",
+    name: "Dansko",
+    ratings: "8",
+    price: "$144.95",
+    type: "Kane",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/81l9nDv25fL._AC_UL320_.jpg",
+    name: "Dansko",
+    ratings: "22,242",
+    price: "$124.95",
+    type: "Sophie",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/61MmR1DVgxL._AC_UL320_.jpg",
+    name: "Dansko",
+    ratings: "2,356",
+    price: "$79.95",
+    type: "Season",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/61X6kNh+bOL._AC_UL320_.jpg",
+    name: "Dansko",
+    ratings: "3,004",
+    price: "$149.95",
+    type: "Reece",
+  },
+  {
+    img: "https://m.media-amazon.com/images/I/717YEr2xogL._AC_UL320_.jpg",
+    name: "Dansko",
+    ratings: "10,352",
+    price: "$144.95",
+    type: "Pace",
+  },
+];
+
+export const DanskoShoes = () => {
+  return (
+    <div className={styles.dansko}>
+      <div>
+        <div>
+          <h1>Dansko: On-Trend Comfort for Work & Beyond</h1>
+          <button>SHOP DANSKO</button>
+        </div>
+        <div>
+          <img
+            src="https://m.media-amazon.com/images/G/01/2022/homepage5.02/LT_Pro_hero_500x740.jpg"
+            alt=""
+          />
+        </div>
+      </div>
+      <div>
+        {/* <SingleCarouselCard data={data} /> */}
+        {data.map((el, index) => {
+          return <SingleCarouselCard key={index} {...el} />;
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/MainImg.jsx b/src/components/MainImg.jsx
new file mode 100644
index 0000000..0213392
--- /dev/null
+++ b/src/components/MainImg.jsx
@@ -0,0 +1,60 @@
+import React from "react";
+import styled from "styled-components";
+
+const ImgBox = styled.div`
+  height: 600px;
+  border: 1px solid black;
+  background-image: url("https://m.media-amazon.com/images/G/01/2022/womens/WOMENS-DRESSES-SKIRTS-MAY-HERO-1440x700.jpg");
+  background-size: contain;
+  width: 100%;
+  height: 650px;
+  margin-bottom: 20px ;
+`;
+const OnImage = styled.div`
+  height: 200px;
+  padding: 24px;
+  background: #fff;
+  width: 30%;
+  height: 35%;
+  color: #000;
+  margin: 16% 2%;
+`;
+
+const H1 = styled.h1`
+  font-size: 24px;
+`;
+
+const P = styled.p`
+  font-size: 18px;
+`;
+
+const Button = styled.button`
+  border-radius: 4px;
+  font-size: 14px;
+  font-weight: 700;
+  background-color: #fff;
+  padding: 10px 20px;
+  cursor: pointer;
+  &:hover {
+    background-color: #000;
+    color: #fff;
+    transition: all ease-in-out .3s;
+  }
+`;
+
+export const MainImg = () => {
+  return (
+    <>
+      <ImgBox>
+        <OnImage>
+          <H1>Dresses & Skirts: Spring Style Starts Here</H1>
+          <P>
+            Find whimsical fits, updated florals, pretty pastels, and electric
+            hues!
+          </P>
+          <Button>SHOP DRESSES & SKIRTS</Button>
+        </OnImage>
+      </ImgBox>
+    </>
+  );
+};
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
new file mode 100644
index 0000000..10e4b60
--- /dev/null
+++ b/src/components/Navbar.jsx
@@ -0,0 +1,278 @@
+import React from "react";
+import { TopNav, TopP } from "../Styled/navbar";
+import "bootstrap/dist/css/bootstrap.css";
+import { DropdownButton } from "react-bootstrap";
+import { ListGroupItem } from "react-bootstrap";
+import styles from "../Styled/navbar.module.css";
+import { AiOutlineSearch } from "react-icons/ai";
+import { MdOutlineShoppingCart } from "react-icons/md";
+import { RiArrowDropDownFill } from "react-icons/ri";
+
+export const Navbar = () => {
+  return (
+    <nav>
+      <TopNav>
+        <DropdownButton
+          style={{ background: "rgb(0,118,189)" }}
+          title="Customer Service"
+        >
+          <ListGroupItem key="1">Contact Info</ListGroupItem>
+          <ListGroupItem key="2">FAQ</ListGroupItem>
+          <ListGroupItem key="2">Give Us Feedback</ListGroupItem>
+        </DropdownButton>
+        <TopP>
+          Every Zappos order comes with FAST, FREE Shipping, plus a FREE 365-Day
+          Return Policy! <strong>More About Shipping & Returns</strong>
+        </TopP>
+      </TopNav>
+      <div className={styles.searchNav}>
+        <div>
+          <img
+            src="https://m.media-amazon.com/images/G/01/zappos/melody/zapposPBS._CB1509642213_.svg"
+            alt="company_logo"
+          />
+        </div>
+        <div>
+          <AiOutlineSearch
+            style={{ position: "absolute", width: "20px", height: "40px" }}
+          />
+          <input type="search" placeholder="Search for shoes, clothes, etc." />
+          <button>SEARCH</button>
+        </div>
+        <div>
+          <button>
+            <MdOutlineShoppingCart style={{ width: "20px", height: "40px" }} />{" "}
+            MY CART
+          </button>
+        </div>
+      </div>
+      {/* the dropdown starts */}
+      <div className={styles.dropDownPart}>
+        <div>
+          <div className={styles.dropdown}>
+            New <RiArrowDropDownFill />
+            <div className={styles.dropdownContent}>
+              <div>
+                <p className={styles.dropdownHead}>The Find</p>
+                <p>The Brightest, Boldest Springs Trends</p>
+                <p>Zappos X Beach Riot</p>
+                <p>The Ultimate Sneaker Guide</p>
+                <p>The Spring Sandal Edit</p>
+                <p>Fresh Spring Denim</p>
+                <p>Energizing Sporty Looks</p>
+                <p>Western-Inspired Wear</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>The Style Room</p>
+                <p>Brand Spotlight: Tory Burch</p>
+                <p>Need-to-know with AG Jeans</p>
+                <p>Collective Review: Sam Edelman</p>
+                <p>Retro Resort</p>
+                <p>Easy Does It</p>
+                <p>Secret Garden</p>
+                <p>Men's Retro Poolside</p>
+                <p></p>
+                <p>Men's AG Jeans</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>New Brands</p>
+                <p>Fairfax and Favor</p>
+                <p>Milwaukee Boot Co</p>
+                <p>Jambys</p>
+                <p>Moral Code</p>
+                <p>UGGⓇ Universal</p>
+                <p>Rebel Nell</p>
+                <p>MANGO</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>New Arrivals</p>
+                <p>Candles</p>
+                <p>Dining & Entertainment</p>
+                <p>Bedding & Blankets</p>
+                <p>Hunter Meets Mickey</p>
+                <p>Toys & Games</p>
+              </div>
+            </div>
+          </div>
+          <div className={styles.dropdown}>
+            Women <RiArrowDropDownFill />
+            <div className={styles.dropdownContent}>
+              <div>
+                <p className={styles.dropdownHead}>Shoes</p>
+                <p>Sneakers & Athletic</p>
+                <p>Sandals</p>
+                <p>Clogs & Mules</p>
+                <p>Heels</p>
+                <p>Boots & Booties</p>
+                <p>Slippers</p>
+                <p>Flats</p>
+                <p>Loafers</p>
+                <p>Comfort</p>
+                <p>Wide</p>
+                <p>Narrow</p>
+                <p>Single Shoes</p>
+                <p>Shop All Shoes</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>Clothing</p>
+                <p>Shirts & Tops</p>
+                <p>Swimwear</p>
+                <p>Dresses</p>
+                <p>Shorts</p>
+                <p>Jeans & Denim</p>
+                <p>Underwear & Intimates</p>
+                <p>Coats & Outerwear</p>
+                <p>Socks</p>
+                <p>Sleepwear</p>
+                <p>Activewear</p>
+                <p>Plus Size</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>Accessories & More</p>
+                <p>Bags & Handbags</p>
+                <p>Backpacks</p>
+                <p>Belt Bags</p>
+                <p>Hair</p>
+                <p>Sunglasses</p>
+                <p>Statement Earrings</p>
+                <p>Face Masks</p>
+                <p>Hats</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>Featured</p>
+                <p>The Find</p>
+                <p>The Style Room</p>
+                <p>UFC Shop</p>
+                <p>Female Founded</p>
+                <p>Influencer Favourites</p>
+                <p>Spring Sandal Guide</p>
+                <p>Wedding Shop</p>
+              </div>
+            </div>
+          </div>
+          <div className={styles.dropdown}>
+            Men
+            <RiArrowDropDownFill />
+            <div className={styles.dropdownContent}>
+              <div>
+                <p className={styles.dropdownHead}>Shoes</p>
+                <p>Sneakers & Athletic</p>
+                <p>Boots</p>
+                <p>Running Shoes</p>
+                <p>Oxfords</p>
+                <p>Loafers</p>
+                <p>Clogs</p>
+                <p>Slippers</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>Clothing</p>
+                <p>Shirts & Tops</p>
+                <p>Shorts</p>
+                <p>Swimwear</p>
+                <p>Pants</p>
+                <p>Jeans</p>
+                <p>Underwear</p>
+                <p>Activewear</p>
+                <p>Hoodies & Sweatshirts</p>
+                <p>Big & Tall</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>Accessories & More</p>
+                <p>Bags</p>
+                <p>Hats</p>
+                <p>Sunglasses</p>
+                <p>Belts</p>
+                <p>Watches</p>
+                <p>Ties & Pocket Squares</p>
+                <p>Gloves</p>
+                <p>Wallets</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>Featured</p>
+                <p>The Style Room</p>
+                <p>The Fan Shop</p>
+                <p>Big & Tall</p>
+                <p>UFC Shop</p>
+                <p>Flatheads</p>
+                <p>Men's Golf Shoes & Clothing</p>
+                <p>Penny Luck</p>
+                <p>Fitville</p>
+                <p>Breath Walker</p>
+                <p>c9 Champion: $40 and Under</p>
+              </div>
+            </div>
+          </div>
+          <div className={styles.dropdown}>
+            Kids <RiArrowDropDownFill />
+            <div className={styles.dropdownContent}>
+              <div>
+                <p className={styles.dropdownHead}>Girls</p>
+                <p>Sneakers</p>
+                <p>Sandals</p>
+                <p>Swimwear</p>
+                <p>Flats</p>
+                <p>Shirts & Tops</p>
+                <p>Dresses</p>
+                <p>Heels</p>
+                <p>Shorts</p>
+                <p>Clogs</p>
+                <p>Light Jackets</p>
+                <p>Boots</p>
+                <p>Shop All Girls</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>Boys</p>
+                <p>Sneakers</p>
+                <p>Sandals</p>
+                <p>Swimwear</p>
+                <p>Shirts & Tops</p>
+                <p>Pants</p>
+                <p>Dresses</p>
+                <p>Heels</p>
+                <p>Shorts</p>
+                <p>Clogs</p>
+                <p>Light Jackets</p>
+                <p>Boots</p>
+                <p>Shop All Boys</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>Accessories</p>
+                <p>Backpacks</p>
+                <p>Sunglasses</p>
+                <p>Hats</p>
+                <p>Toys & Games</p>
+              </div>
+              <div>
+                <p className={styles.dropdownHead}>Top Brands</p>
+                <p>Vans Kids</p>
+                <p>Crocs Kids</p>
+                <p>Native Kids</p>
+                <p>adidas Kids</p>
+                <p>SKECHERS KIDS</p>
+              </div>
+            </div>
+          </div>
+          <div>
+            Departments <RiArrowDropDownFill />
+          </div>
+          <div>
+            Brands <RiArrowDropDownFill />
+          </div>
+          <div>
+            Sale <RiArrowDropDownFill />
+          </div>
+          <div>
+            Clothing <RiArrowDropDownFill />
+          </div>
+        </div>
+        <div>Sign In / Register</div>
+      </div>
+      <div className={styles.movingText}>
+        <p>
+          Be the first to shop the newest home styles - Now on Zappos !{" "}
+          <strong>Shop Home Now</strong>
+        </p>
+      </div>
+    </nav>
+  );
+};
diff --git a/src/components/NewArrival.jsx b/src/components/NewArrival.jsx
new file mode 100644
index 0000000..779716f
--- /dev/null
+++ b/src/components/NewArrival.jsx
@@ -0,0 +1,28 @@
+import React from "react";
+import styles from "../Styled/newArrival.module.css";
+
+export const NewArrival = () => {
+  return (
+    <div className={styles.newArrival}>
+      <div className={styles.backImg}>
+        <img
+          src="https://m.media-amazon.com/images/G/01/2021/homepage11.01/COOP-NEW-ARRIVAL-LOGO-1X_3.svg"
+          alt=""
+        />
+        <p>
+          Have a Mommy & Me moment with UGGⓇ. Get matching brights for you and
+          your little -- all in comfy, playful styles you can dress up!
+        </p>
+        <button>SHOP NEW MATCHING UGGⓇ STYLES & MORE</button>
+      </div>
+      <div>
+        <img 
+          height="100%"
+          width={"100%"}
+          src="https://m.media-amazon.com/images/G/01/2022/homepage5.02/COOP-UGG-NEW-ARRIVALS-DESKTOP-RIGHT-1X-634x634_1.jpg"
+          alt=""
+        />
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/ShopPopularCategories.jsx b/src/components/ShopPopularCategories.jsx
new file mode 100644
index 0000000..80a3a98
--- /dev/null
+++ b/src/components/ShopPopularCategories.jsx
@@ -0,0 +1,69 @@
+import React from "react";
+import styles from "../Styled/shopPopular.module.css";
+
+const data = [
+  {
+    id: 1,
+    img: "https://m.media-amazon.com/images/I/614vcxz1sCL._AC_SX255_.jpg",
+    name: "Sneakers & Athletic Shoes",
+  },
+  {
+    id: 2,
+    img: "https://m.media-amazon.com/images/I/61lDBv3S0oL._AC_SX255_.jpg",
+    name: "Flat Sandals",
+  },
+  {
+    id: 3,
+    img: "https://m.media-amazon.com/images/I/71u0qDadJEL._AC_SX255_.jpg",
+    name: "Dresses",
+  },
+  {
+    id: 4,
+    img: "https://m.media-amazon.com/images/I/71Sv8FHil+L._AC_SX255_.jpg",
+    name: "Heeled Sandals",
+  },
+  {
+    id: 5,
+    img: "https://m.media-amazon.com/images/I/81flGLWN9YL._AC_SX255_.jpg",
+    name: "Swimwear",
+  },
+  {
+    id: 6,
+    img: "https://m.media-amazon.com/images/I/71gYrY5KThL._AC_SX255_.jpg",
+    name: "Clogs",
+  },
+];
+
+export const ShopPopularCategories = () => {
+  return (
+    <div className={styles.popCate}>
+    <h1>Shop Popular Categories</h1>
+      <div className={styles.flexBox}>
+        {data.map((el) => {
+          return (
+            <>
+              <div className={styles.flexChild} key={el.id}>
+                {el.id == 3 || el.id == 5 ? (
+                  <img className={styles.longImg} src={el.img} alt="" />
+                ) : (
+                  <img className={styles.shortImg} src={el.img} alt="" />
+                )}
+              </div>
+            </>
+          );
+        })}
+      </div>
+      <div className={styles.flexBox}>
+        {data.map((el) => {
+          return (
+            <>
+              <div className={styles.flexChild} key={el.id}>
+                <p>{el.name}</p>
+              </div>
+            </>
+          );
+        })}
+      </div>
+    </div>
+  );
+};
diff --git a/src/components/SingleCarouselCard.jsx b/src/components/SingleCarouselCard.jsx
new file mode 100644
index 0000000..e1b0ed7
--- /dev/null
+++ b/src/components/SingleCarouselCard.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "../Styled/singlecarousel.module.css";
+import { AiOutlineHeart } from "react-icons/ai";
+
+export const SingleCarouselCard = (props) => {
+  return (
+    <div className={styles.parent}>
+      <div>
+        <img
+          style={{ width: "80%", height: "150px", objectFit: "contain" }}
+          src={props.img}
+          alt=""
+        />
+      </div>
+      <p className={styles.rating}>
+        <AiOutlineHeart /> {props.ratings}
+      </p>
+      <p>{props.name}</p>
+      <p className={styles.type}>{props.type}</p>
+      <p className={styles.price}>${props.price}</p>
+    </div>
+  );
+};
diff --git a/src/components/WomensDeal.jsx b/src/components/WomensDeal.jsx
new file mode 100644
index 0000000..0b62705
--- /dev/null
+++ b/src/components/WomensDeal.jsx
@@ -0,0 +1,23 @@
+import React from "react";
+import styles from "../Styled/womenDeals.module.css";
+
+
+
+export const WomensDeal = (props) => {
+  // console.log(props.data);
+  const {data} = props ;
+  return (
+    <div className={styles.jarvis}>
+      {data.map((el) => {
+        return (
+          <div key={el.id}>
+            <img src={el.img} alt="" />
+            <h2>{el.title}</h2>
+            <p>{el.desc}</p>
+            <p>{el.link}</p>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/pages/Brands.js b/src/pages/Brands.js
deleted file mode 100644
index 3e3a7c5..0000000
--- a/src/pages/Brands.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Brands = () => {
-  return (
-    <div>Brands</div>
-  )
-}
-
-export default Brands
\ No newline at end of file
diff --git a/src/pages/Clothing.js b/src/pages/Clothing.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/Departments.js b/src/pages/Departments.js
deleted file mode 100644
index 72acc53..0000000
--- a/src/pages/Departments.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Departments = () => {
-  return (
-    <div>Departments</div>
-  )
-}
-
-export default Departments
\ No newline at end of file
diff --git a/src/pages/Kids.js b/src/pages/Kids.js
deleted file mode 100644
index 37ac508..0000000
--- a/src/pages/Kids.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Kids = () => {
-  return (
-    <div>Kids</div>
-  )
-}
-
-export default Kids
\ No newline at end of file
diff --git a/src/pages/Mens.js b/src/pages/Mens.js
deleted file mode 100644
index f67e944..0000000
--- a/src/pages/Mens.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Mens = () => {
-  return (
-    <div>Mens</div>
-  )
-}
-
-export default Mens
\ No newline at end of file
diff --git a/src/pages/New.js b/src/pages/New.js
deleted file mode 100644
index 56eaa16..0000000
--- a/src/pages/New.js
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react'
-
-const New = () => {
-  return (
-    <div>
-      
-    </div>
-  )
-}
-
-export default New
diff --git a/src/pages/Register.js b/src/pages/Register.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/Sign in.js b/src/pages/Sign in.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pages/Womens.js b/src/pages/Womens.js
deleted file mode 100644
index 34841ac..0000000
--- a/src/pages/Womens.js
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react'
-
-const Womens = () => {
-  return (
-    <div>Womens</div>
-  )
-}
-
-export default Womens
\ No newline at end of file
diff --git a/src/pages/sale.js b/src/pages/sale.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/product/Product.jsx b/src/product/Product.jsx
new file mode 100644
index 0000000..1b14c0e
--- /dev/null
+++ b/src/product/Product.jsx
@@ -0,0 +1,43 @@
+import React from "react";
+import styles from "./product.module.css";
+
+const data = {
+  name: "Crocs",
+  type: "Classic Clog",
+  price: "49",
+  img: "https://m.media-amazon.com/images/I/816yoL1mI4L._AC_SR920,736_.jpg",
+  ratings: "30,516",
+};
+
+export const Product = () => {
+  return (
+    <div className={styles.parent}>
+      {/* <h1>Product Info:</h1> */}
+      <div>
+        <img src={data.img} alt="" />
+      </div>
+      <div>
+        <h1>{data.name}</h1>
+        <h2>{data.type}</h2>
+        <div className={styles.priceFlex}>
+            $<p>{data.price}</p>95
+        </div>
+        <div>
+          <button className={styles.shippingBtn}>
+            <img
+              src="https://www.zappos.com/marty-assets/shipping-box.dfa1add9e27522acc3ee5d8e061339a9.svg"
+              alt=""
+            />
+            SHIPS FREE
+          </button>
+          ⭐⭐⭐⭐⭐ <span className={styles.ratingSpan}>({data.ratings})</span>
+        </div>
+        <button className={styles.cartBtn}>Add To Cart</button>
+        <div className={styles.lastBox}>
+          <strong>FREE</strong> upgraded shipping & returns with
+        </div>
+        <img width={"20%"} src="https://www.zappos.com/marty-assets/amazon-prime.2821774c351a0e9079f230ad4b312a71.svg" alt="" />
+      </div>
+    </div>
+  );
+};
diff --git a/src/product/product.module.css b/src/product/product.module.css
new file mode 100644
index 0000000..8cb15ff
--- /dev/null
+++ b/src/product/product.module.css
@@ -0,0 +1,81 @@
+.parent{
+    border: 1px solid black;
+    height: 600px;
+    display: flex;
+}
+.parent>div{
+    width: 40%;
+    border: 1px solid red;
+    padding: 2%;
+}
+.parent>div:first-child{
+    width: 60%;
+}
+.parent>div:first-child img{
+    width: 100%;
+    height: 100%;
+}
+.shippingBtn{
+    border: none;
+    background: rgb(0,118,189);
+    color: #fff;
+    font-size: 14px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+    padding: 5px 8px;
+    margin-right: 3%;
+}
+.parent>div:last-child>div{
+    display: flex;
+}
+h1{
+    margin-bottom: -20px;
+}
+
+.priceFlex{
+    /* border: 1px solid red; */
+    height: 80px;
+    display: flex;
+    align-items: flex-start;
+    font-size: 25px;
+    font-weight: 500;
+    color: darkslategray;
+}
+p{
+    font-size: 36px;
+    /* line-height: 0px; */
+    margin-top: 5px;
+    font-weight: 600;
+}
+.ratingSpan{
+    font-size: 14px;
+    font-weight: 700;
+    margin-left: 2%;
+}
+.cartBtn{
+    margin-top: 50px;
+    width: 100%;
+    background-color: lightgreen;
+    color: darkslategray;
+    border: none;
+    font-size: 15px;
+    border-radius: 5px;
+    cursor: pointer;
+    letter-spacing: 1px;
+    font-weight: 700;
+    padding: 2.5%;
+}
+.cartBtn:hover{
+    background-color: rgb(172, 219, 172);
+    transition: all ease-in-out .5s;
+}
+.lastBox{
+    width: 57%;
+    margin: auto;
+    margin-top: 15px;
+    margin-bottom: 5px;
+}
+.lastBox+img{
+    margin-left: 40%;
+}
\ No newline at end of file
diff --git a/src/redux/actionTypes.js b/src/redux/actionTypes.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/redux/actions.js b/src/redux/actions.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/redux/reducer.js b/src/redux/reducer.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/redux/store.js b/src/redux/store.js
deleted file mode 100644
index e69de29..0000000
diff --git a/src/routes/mainRoutes.js b/src/routes/mainRoutes.js
deleted file mode 100644
index e69de29..0000000