feat: complete home page

akshayraichur · May 14, 2023 · 68bdc78 · 68bdc78 · vercel · May 14, 2023
1 parent 9bd3fa5
commit 68bdc78
Show file tree

Hide file tree

Showing 10 changed files with 341 additions and 47 deletions.
diff --git a/index.html b/index.html
@@ -12,6 +12,13 @@
       href="https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap"
       rel="stylesheet"
     />
+
+    <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=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
+      rel="stylesheet"
+    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.jsx b/src/App.jsx
@@ -1,14 +1,11 @@
-import { Route, Routes } from "react-router-dom";
-import Home from "./screens/Home";
 import Navbar from "./Components/Navbar/Navbar";
+import RouteDetails from "./Utils/Routes";
 
 function App() {
   return (
     <>
       <Navbar />
-      <Routes>
-        <Route path="/" element={<Home />}></Route>
-      </Routes>
+      <RouteDetails />
     </>
   );
 }

diff --git a/src/Components/Card/Card.jsx b/src/Components/Card/Card.jsx
@@ -1,32 +1,73 @@
-import { StyledCard, StyledCategoryContents } from "./Card.styles";
+import { StyledCard, StyledCategoryContents, StyledProductContents } from "./Card.styles";
 import PropTypes from "prop-types";
+import Button from "../Button/Button";
 
-const CategoryContents = ({ title, img, subtitle }) => {
+const CardImageContainer = ({ img, title }) => (
+  <div className="img-container">
+    <img src={img} alt={title} className="img" loading="lazy" />
+  </div>
+);
+
+const CategoryContents = ({ title, subtitle, children }) => {
   return (
     <StyledCategoryContents>
-      <div className="img-container">
-        <img src={img} alt={title} className="category-img" />
-      </div>
-      <h2 className="category-title">{title}</h2>
-      <p className="category-subtitle">{subtitle}</p>
+      {children}
+      <h2 className="card-title">{title}</h2>
+      <p className="card-subtitle">{subtitle}</p>
     </StyledCategoryContents>
   );
 };
 
+const ProductContents = ({ title, price, children }) => {
+  return (
+    <StyledProductContents>
+      {children}
+      <h3 className="card-title">{title}</h3>
+      <h4 className="card-price">₹{price}/-</h4>
+      <div className="btn-container">
+        <Button variant="filled" color="orange">
+          Add to Cart
+        </Button>
+      </div>
+    </StyledProductContents>
+  );
+};
+
 const Card = (props) => {
-  const { children, variant, title, img, subtitle } = props;
+  const { children, variant, title, img, subtitle, price } = props;
   return (
     <StyledCard>
-      {variant === "category" && <CategoryContents title={title} img={img} subtitle={subtitle} />}
+      {variant === "category" && (
+        <CategoryContents title={title} img={img} subtitle={subtitle}>
+          <CardImageContainer img={img} title={title} />
+        </CategoryContents>
+      )}
+      {variant === "product" && (
+        <ProductContents title={title} img={img} price={price}>
+          <CardImageContainer img={img} title={title} />
+        </ProductContents>
+      )}
       {children}
     </StyledCard>
   );
 };
 
-CategoryContents.propTypes = {
+CardImageContainer.propTypes = {
   title: PropTypes.string,
   img: PropTypes.string,
+  children: PropTypes.node,
+};
+
+CategoryContents.propTypes = {
+  title: PropTypes.string,
   subtitle: PropTypes.string,
+  children: PropTypes.node,
+};
+
+ProductContents.propTypes = {
+  title: PropTypes.string,
+  price: PropTypes.string,
+  children: PropTypes.node,
 };
 
 Card.propTypes = {
@@ -36,6 +77,7 @@ Card.propTypes = {
   img: PropTypes.string,
   height: PropTypes.string,
   subtitle: PropTypes.string,
+  price: PropTypes.string,
 };
 
 Card.defaultProps = {

diff --git a/src/Components/Card/Card.styles.jsx b/src/Components/Card/Card.styles.jsx
@@ -1,6 +1,17 @@
 import styled, { css } from "styled-components";
 import { FadeInAnimation } from "../../Utils/GlobalStyles";
 
+const cardImageStyles = css`
+  height: 100%;
+  width: 100%;
+  object-fit: contain;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: scale(1.05);
+  }
+`;
+
 export const StyledCard = styled.div`
   cursor: pointer;
   padding: 1rem;
@@ -10,6 +21,27 @@ export const StyledCard = styled.div`
   transition: all 0.2s ease;
   ${FadeInAnimation}
 
+  &:hover {
+    border: 2px solid ${(props) => props.theme.colors.borderHoverColor};
+  }
+
+  .img-container {
+    height: 200px;
+    width: 100%;
+  }
+
+  .img {
+    ${cardImageStyles}
+  }
+
+  .card-title {
+    margin: 1rem 0 0.4rem 0;
+  }
+
+  .card-subtitle {
+    color: ${(props) => props.theme.colors.green};
+  }
+
   ${(props) =>
     props.height === "h-300" &&
     css`
@@ -22,28 +54,33 @@ export const StyledCategoryContents = styled.div`
   text-align: center;
   color: ${(props) => props.theme.colors.text};
   transition: all 0.3s ease;
+`;
 
+export const StyledProductContents = styled.div`
+  cursor: auto;
   .img-container {
-    height: 150px;
-    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .img {
+    width: 80%;
   }
 
-  .category-img {
-    height: 100%;
-    width: 100%;
-    object-fit: contain;
-    transition: all 0.3s ease;
-
-    &:hover {
-      transform: scale(1.05);
-    }
+  .card-title {
+    font-size: 1rem;
   }
 
-  .category-title {
-    margin: 1rem 0 0.4rem 0;
+  .card-price {
+    font-size: 1.5rem;
+    font-weight: 700;
+    margin: 0.5rem 0 0 0;
   }
 
-  .category-subtitle {
-    color: ${(props) => props.theme.colors.green};
+  .btn-container {
+    width: 100%;
+
+    button {
+      width: 100%;
+    }
   }
 `;
diff --git a/src/Constants/products.js b/src/Constants/products.js
@@ -0,0 +1,91 @@
+const MOBILE_PRODUCTS = [
+  {
+    id: Math.random().toString(),
+    title: "Apple iPhone 14 Pro Max",
+    desc: "The best in class smartphone from Apple",
+    category: "mobiles",
+    price: "1,27,999",
+    img: "https://rukminim1.flixcart.com/image/416/416/xif0q/mobile/6/x/j/-original-imaghxejqvpwfqh2.jpeg?q=70",
+    tag: "best-seller",
+  },
+  {
+    id: Math.random().toString(),
+    title: "Apple iPhone 14 Pro",
+    desc: "The best in class smartphone from Apple",
+    category: "mobiles",
+    price: "1,17,999",
+    img: "https://rukminim1.flixcart.com/image/416/416/xif0q/mobile/h/r/e/-original-imaghxeeme2n7hy7.jpeg?q=70",
+  },
+  {
+    id: Math.random().toString(),
+    title: "Apple iPhone 14 Plus",
+    desc: "The best in class smartphone from Apple",
+    category: "mobiles",
+    price: "95,999",
+    img: "https://rukminim1.flixcart.com/image/416/416/xif0q/mobile/c/4/d/-original-imaghx9qygjjg8hz.jpeg?q=70",
+  },
+  {
+    id: Math.random().toString(),
+    title: "Apple iPhone 14",
+    desc: "The best in class smartphone from Apple",
+    category: "mobiles",
+    price: "79,999",
+    img: "https://rukminim1.flixcart.com/image/416/416/xif0q/mobile/r/k/o/-original-imaghx9qtwbnhwvy.jpeg?q=70",
+  },
+  {
+    id: Math.random().toString(),
+    title: "Samsung Galaxy S23 Ultra",
+    desc: "The Samsung's best yet..",
+    category: "mobiles",
+    price: "1,27,999",
+    img: "https://rukminim1.flixcart.com/image/416/416/xif0q/mobile/2/s/7/-original-imagmg6gktts6sfy.jpeg?q=70",
+    tag: "best-seller",
+  },
+];
+
+const LAPTOP_PRODUCTS = [
+  {
+    id: Math.random().toString(),
+    title: "Apple MacBook Pro 16inch M1 Pro",
+    desc: "The best in class laptop from Apple",
+    category: "laptops",
+    price: "2,19,894",
+    img: "https://rukminim1.flixcart.com/image/416/416/kuyf8nk0/computer/z/k/q/mkgr3hn-a-thin-and-light-laptop-apple-original-imag7yzp78bpnzyg.jpeg?q=70",
+    tag: "best-seller",
+  },
+  {
+    id: Math.random().toString(),
+    title: "Apple MacBook Pro 14inch M1 Max",
+    desc: "The best in class laptop from Apple",
+    category: "laptops",
+    price: "2,19,894",
+    img: "https://rukminim1.flixcart.com/image/416/416/kuyf8nk0/computer/3/n/s/mk183hn-a-laptop-apple-original-imag7yzkbgbwvwq3.jpeg?q=70",
+    tag: "best-seller",
+  },
+  {
+    id: Math.random().toString(),
+    title: "Dell XPS 13 core i5 10th Gen",
+    desc: "Dell's pride",
+    category: "laptops",
+    price: "1,04,100",
+    img: "https://rukminim1.flixcart.com/image/416/416/kf2v3ww0/computer/h/t/m/dell-original-imafvm5ymhkzvdqu.jpeg?q=70",
+  },
+  {
+    id: Math.random().toString(),
+    title: "Dell Inspiron Core i5 11th Gen",
+    desc: "Dell's pride",
+    category: "laptops",
+    price: "53,490",
+    img: "https://rukminim1.flixcart.com/image/416/416/kf2v3ww0/computer/h/t/m/dell-original-imafvm5ymhkzvdqu.jpeg?q=70",
+  },
+  {
+    id: Math.random().toString(),
+    title: "Dell Inspiron Core i3 11th Gen",
+    desc: "Dell's pride",
+    category: "laptops",
+    price: "43,490",
+    img: "https://rukminim1.flixcart.com/image/416/416/xif0q/computer/n/o/s/-original-imaghzah9mjvukjz.jpeg?q=70",
+  },
+];
+
+export const PRODUCTS = [...MOBILE_PRODUCTS, ...LAPTOP_PRODUCTS];
diff --git a/src/Utils/GlobalStyles.jsx b/src/Utils/GlobalStyles.jsx
@@ -1,11 +1,10 @@
 import { createGlobalStyle, css } from "styled-components";
 
-import californiaParadise from "../assets/fonts/california-paradise.ttf";
-
 const deepColor = "#4f46e5";
-const borderColor = "#818cf8";
+const borderColor = "#a5b4fc";
 const orange = "#f97316";
 const green = "#22c55e";
+const containerColor = "#e0e7ff";
 
 export const Theme = {
   colors: {
@@ -14,6 +13,8 @@ export const Theme = {
     border: borderColor,
     btnBgColor: deepColor,
     containerBg: deepColor,
+    borderHoverColor: deepColor,
+    containerColor,
     green,
     orange,
   },
@@ -55,25 +56,20 @@ export const GlobalStyles = createGlobalStyle`
     padding: 0;
   }
 
-  @font-face {
-    font-family: 'california';
-    src: url(${californiaParadise}) format('truetype');
-  }
-
   body {
-    font-family: "Inter", sans-serif;
+    font-family: "Inter", sans-serif, 'Lora', serif;
     color: ${(props) => props.theme.colors.text};
     background-color: ${(props) => props.theme.colors.background};
   }
 
   h1 {
-    font-family: "california", "Inter", sans-serif;
-    letter-spacing: 10px;
+    font-family: 'Lora', serif;
+    letter-spacing: 5px;
     font-size: 2.5rem;
     text-transform: uppercase;
     margin: 0.4rem 0;
 
-    @media screen and (width <= 599px) {
+    @media screen and (width < 599px) {
       font-size: 1.6rem;
     }
   }

diff --git a/src/Utils/Routes.jsx b/src/Utils/Routes.jsx
@@ -0,0 +1,19 @@
+import { Route, Routes } from "react-router-dom";
+import Home from "../screens/Home";
+
+import ProductDetails from "../screens/ProductDetails";
+import CartDetails from "../screens/Cart";
+import Wishlist from "../screens/Wishlist";
+import Profile from "../screens/Profile";
+
+const RouteDetails = () => (
+  <Routes>
+    <Route path="/" element={<Home />}></Route>
+    <Route path="/products" element={<ProductDetails />}></Route>
+    <Route path="/cart" element={<CartDetails />}></Route>
+    <Route path="/wishlist" element={<Wishlist />}></Route>
+    <Route path="/profile" element={<Profile />}></Route>
+  </Routes>
+);
+
+export default RouteDetails;
diff --git a/src/screens/Cart.jsx b/src/screens/Cart.jsx
@@ -1,5 +1,5 @@
-const Cart = () => {
-  return <div>Cart</div>;
+const CartDetails = () => {
+  return <div>CartDetails</div>;
 };
 
-export default Cart;
+export default CartDetails;