React website

package.json

@@ -3,14 +3,18 @@
  "version": "0.1.0",
  "private": true,
  "dependencies": {
+ "@material-ui/core": "^4.12.4",
+ "@material-ui/icons": "^4.11.3",
  "@testing-library/jest-dom": "^5.11.4",
  "@testing-library/react": "^11.1.0",
  "@testing-library/user-event": "^12.1.10",
  "react": "^17.0.2",
  "react-dom": "^17.0.2",
- "react-scripts": "4.0.3",
- "styled-components": "^5.3.0",
- "web-vitals": "^1.0.1"
+ "react-router-dom": "^6.23.1",
+ "react-scripts": "5.0.1",
+ "styled-components": "^6.1.11",
+ "web-vitals": "^1.0.1",
+ "yarn": "^1.22.22"
  },
  "scripts": {
  "start": "react-scripts start",
@@ -35,5 +39,11 @@
  "last 1 firefox version",
  "last 1 safari version"
  ]
+ },
+ "devDependencies": {
+ "@babel/plugin-proposal-async-generator-functions": "^7.20.7",
+ "babel-core": "^6.26.3",
+ "babel-loader": "^9.1.3",
+ "babel-preset-react": "^6.24.1"
  }
 }

public/index.html

@@ -5,21 +5,19 @@
  <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" />
- <style>
- @font-face {
- font-family: "Glacial";
- src: url("./fonts/GlacialIndifference-Regular.otf");
- }
 
- @font-face {
- font-family: "Glacial";
- font-weight: bold;
- src: url("./fonts/GlacialIndifference-Bold.otf");
- }
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link rel="preconnect" href="https://fonts.googleapis.com">
+ <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Urbanist:ital,wght@0,100..900;1,100..900&display=swap"
+ rel="stylesheet">
 
+
+ <style>
  * {
  margin: 0;
- font-family: "Glacial";
+ font-family: "Urbanist", sans-serif;
  }
  </style>
  <title>React App</title>

src/App.jsx

@@ -1,78 +1,32 @@
-import styled, { css } from "styled-components";
-import Contact from "./components/Contact";
-import Feature from "./components/Feature";
-import Footer from "./components/Footer";
-import Intro from "./components/Intro";
-import Navbar from "./components/Navbar";
-import Price from "./components/Price";
-import Service from "./components/Service";
+import Home from "./pages/Home";
+import ProductList from "./pages/ProductList";
+import Product from "./pages/Product";
+import Cart from "./pages/Cart";
+import Login from "./pages/Login";
+import Register from "./pages/Register";
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 
-const Container = styled.div`
- height: 100vh;
- overflow: hidden;
- position: relative;
-`;
-
-const Shape = css`
- width: 100%;
- height: 100%;
- position: absolute;
- top: 0;
- left: 0;
- z-index: -1;
-`;
-
-const IntoShape = styled.div`
- ${Shape}
- clip-path: polygon(67% 0, 100% 0%, 100% 100%, 55% 100%);
- background-color: crimson;
-`;
-
-const FeatureShape = styled.div`
- ${Shape}
- clip-path: polygon(0 0, 55% 0%, 33% 100%, 0 100%);
- background-color: pink;
-`;
-
-const ServiceShape = styled.div`
- ${Shape}
- clip-path: polygon(0 0, 33% 0%, 33% 100%, 0 100%);
- background-color: #f88497;
-`;
-
-const PriceShape = styled.div`
- ${Shape}
- clip-path: polygon(33% 0, 100% 0%, 100% 100%, 67% 100%);
- background-color: crimson;
-`;
 
 const App = () => {
- const smallScreen = window.screen.width <= 480 ? true : false;
+ // const user = true
  return (
- <>
- <Container>
- <Navbar />
- <Intro />
- <IntoShape />
- </Container>
- <Container>
- <Feature />
- <FeatureShape />
- </Container>
- <Container>
- <Service />
- {!smallScreen && <ServiceShape />}
- </Container>
- <Container>
- <Price />
- <PriceShape />
- </Container>
- <Container>
- <Contact />
- <Footer />
- </Container>
- </>
+ <Router>
+ <Routes>
+ <Route exact path="/" element={<Home />}>
+ </Route>
+ <Route path="/products/:category" element={<ProductList />}>
+ </Route>
+ <Route path="/product/:id" element={<Product />}>
+ </Route>
+ <Route path="/cart" element={<Cart />}>
+ </Route>
+ <Route path="/login" element={<Login />}>
+ </Route>
+ <Route path="/register" element={<Register />}>
+ </Route>
+ </Routes>
+ </Router>
  );
 };
 
-export default App;
+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;
+ justify-content: 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/Categories.jsx

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { categories } from "../data"
+import CategoryItem from "./CategoryItem"
+import { mobile } from "../responsive";
+
+const Container = styled.div`
+ display: flex;
+ padding: 20px;
+ justify-content: space-between;
+ ${mobile({ padding: "0px", flexDirection: "column" })}
+
+`;
+
+const Categories = () => {
+ return <Container>
+ {categories.map(item => (
+ <CategoryItem item={item} key={item.id} />
+ ))}
+ </Container>;
+};
+
+export default Categories;

src/components/CategoryItem.jsx

@@ -0,0 +1,59 @@
+import styled from "styled-components";
+import { mobile } from "../responsive";
+import { Link } from "react-router-dom";
+
+const Container = styled.div`
+ flex:1;
+ margin: 3;
+ height: 70vh;
+ position: relative;
+`;
+const Image = styled.img`
+ width: 100%;
+ height: 100%;
+ object-fit: cover;
+ ${mobile({ height: "30vh" })}
+
+`;
+const Info = styled.div`
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+`;
+const Title = styled.h1`
+ color: white;
+ margin-bottom: 20px;
+
+`;
+const Button = styled.button`
+ border: none;
+ padding: 10px;
+ background-color: white;
+ color: gray;
+ cursor: pointer;
+ font-weight: 600;
+`;
+
+const CategoryItem = ({ item }) => {
+ return (
+ <Container>
+ <Link to={`/products/${item.cat}`}>
+ <Image src={item.img} />
+ <Info>
+ <Title>
+ {item.title}
+ </Title>
+ <Button>SHOP NOW</Button>
+ </Info>
+ </Link>
+ </Container>
+ )
+}
+
+export default CategoryItem