23 | 
30 |
34 |
35 | {name}
31 |{manufacturer}
32 |${price}
33 |
15 |
16 |
22 |
28 | Awesome Gear - Gaming Store
29 |
33 |
34 |
35 |
37 | {children}
38 |
41 |
42 | );
43 | };
44 |
45 | export default Layout;
46 |
--------------------------------------------------------------------------------
/components/FooterBanner.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | import { urlFor } from "../lib/client";
4 | import { motion } from "framer-motion";
5 |
6 | const FooterBanner = ({
7 | footerBanner: {
8 | largeText1,
9 | largeText2,
10 | smallText,
11 | midText,
12 | buttonText,
13 | image,
14 | desc,
15 | slug,
16 | },
17 | }) => {
18 | return (
19 |
24 |
37 |
25 |
28 | {largeText1}
26 |{largeText2}
27 |
29 |
36 | {smallText}
30 |{midText}
31 |{desc}
32 | 33 | 34 | 35 |
6 |
29 | );
30 | };
31 |
32 | export default Loader;
33 |
--------------------------------------------------------------------------------
/models/Order.js:
--------------------------------------------------------------------------------
1 | import mongoose from 'mongoose';
2 |
3 | const orderSchema = new mongoose.Schema(
4 | {
5 | user: { type: mongoose.Schema.Types.ObjectId, ref: 'User', required: true },
6 | orderItems: [
7 | {
8 | name: { type: String, required: true },
9 | quantity: { type: Number, required: true },
10 | image: { type: String, required: true },
11 | price: { type: Number, required: true },
12 | },
13 | ],
14 | shippingAddress: {
15 | fullName: { type: String, required: true },
16 | address: { type: String, required: true },
17 | city: { type: String, required: true },
18 | postalCode: { type: String, required: true },
19 | country: { type: String, required: true },
20 | },
21 | itemsPrice: { type: Number, required: true },
22 | shippingPrice: { type: Number, required: true },
23 | totalPrice: { type: Number, required: true },
24 | isPaid: { type: Boolean, required: true, default: false },
25 | paidAt: { type: Date },
26 | },
27 | {
28 | timestamps: true,
29 | }
30 | );
31 |
32 | const Order = mongoose.models.Order || mongoose.model('Order', orderSchema);
33 | export default Order;
--------------------------------------------------------------------------------
/pages/_app.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import "../styles/globals.css";
3 | import { Layout, Loader } from "../components";
4 | import { StateContext } from "../context/StateContext";
5 | import { Toaster } from "react-hot-toast";
6 | import { SessionProvider, useSession } from "next-auth/react";
7 | import { useRouter } from "next/router";
8 |
9 | function MyApp({ Component, pageProps: { session, ...pageProps } }) {
10 | const Auth = ({ children }) => {
11 | const router = useRouter();
12 | const { status } = useSession({
13 | required: true,
14 | onUnauthenticated() {
15 | router.push("/unauthorized?message=login required");
16 | },
17 | });
18 | if (status === "loading") {
19 | //TO-DO: add loader
20 | return
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
47 | );
48 | };
49 | Success.auth = true;
50 | export default Success;
51 |
--------------------------------------------------------------------------------
/components/HamburgerMenu.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | import { useSession } from "next-auth/react";
4 | import { FaUser } from "react-icons/fa";
5 |
6 | const HamburgerMenu = ({ logoutClickHandler }) => {
7 | const { status, data: session } = useSession();
8 |
9 | return (
10 |
30 |
46 |
31 |
33 | Thank you for your order!
34 |35 | If you have any questions, please email 36 | 37 | order@example.com 38 | 39 |
40 | 41 | 44 | 45 |
11 |
55 | );
56 | };
57 |
58 | export default HamburgerMenu;
59 |
--------------------------------------------------------------------------------
/components/FeaturedItems.jsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import Link from "next/link";
3 | import { urlFor } from "../lib/client";
4 | import { BsArrowRightCircle } from "react-icons/bs";
5 | import { motion } from "framer-motion";
6 |
7 | const Item = ({
8 | product: { image, name, slug, price, manufacturer },
9 | rotate = false,
10 | }) => {
11 | return (
12 |
12 | {session?.user ? (
13 | <>
14 |
54 |
15 |
22 |
23 |
16 |
18 |
19 | {session.user.name}
20 |
21 | Profile
24 |
25 |
26 | ) : (
27 |
28 | Login
29 |
30 | )}
31 |
32 |
33 |
34 | Mice
35 |
36 |
37 | Keyboards
38 |
39 |
40 | Headsets
41 |
42 |
43 | Mouse pads
44 |
45 | {session?.user ? (
46 | <>
47 |
48 |
49 | Logout
50 |
51 |
52 | ) : null}
53 |
13 |
14 |
36 | );
37 | };
38 |
39 | const FeaturedItems = ({ featuredItems }) => {
40 | return (
41 |
15 |
26 |
34 |
35 | {name}
27 |{manufacturer}
28 |${price}
29 |
30 |
33 | Buy Now!
32 | Featured Gears:
48 | FEATURED
49 |
11 |
28 |
29 |
30 | );
31 | };
32 |
33 | const CategoryMenu = ({ categoryMenuItems }) => {
34 | return (
35 | <>
36 | Starting from:
12 | $ {price}
13 | {category}
14 | {category}
15 | 16 |
17 |
20 |
21 |
22 | BROWSE
19 | Checkout our products!
32 |
28 |
103 | );
104 | };
105 |
106 | export const getStaticPaths = async () => {
107 | const query = `*[_type =="product"] {
108 | slug {
109 | current
110 | }
111 | }`;
112 |
113 | const products = await client.fetch(query);
114 |
115 | const paths = products.map((product) => ({
116 | params: {
117 | slug: product.slug.current,
118 | },
119 | }));
120 | return {
121 | paths,
122 | fallback: "blocking",
123 | };
124 | };
125 |
126 | export const getStaticProps = async ({ params: { slug } }) => {
127 | const query = `*[_type == "product" && slug.current == "${slug}"][0]`;
128 | const productsQuery = "*[_type == 'product']";
129 |
130 | const product = await client.fetch(query);
131 | const products = await client.fetch(productsQuery);
132 |
133 | return {
134 | props: { product, products },
135 | };
136 | };
137 |
138 | export default ProductDetails;
139 |
--------------------------------------------------------------------------------
/context/StateContext.js:
--------------------------------------------------------------------------------
1 | import React, { createContext, useContext, useState } from "react";
2 | import { toast } from "react-hot-toast";
3 |
4 | const Context = createContext();
5 |
6 | export const StateContext = ({ children }) => {
7 | const [showCart, setShowCart] = useState(false);
8 | const [cartItems, setCartItems] = useState([]);
9 | const [totalPrice, setTotalPrice] = useState(0);
10 | const [totalQuantities, setTotalQuantities] = useState(0);
11 | const [qty, setQty] = useState(1);
12 | const [inCheckoutProcess, setInCheckoutProcess] = useState(false);
13 | const [lightTheme, setLightTheme] = useState(false);
14 |
15 | let foundProduct;
16 | let index;
17 |
18 | const round = (number) => {
19 | return Math.round((number + Number.EPSILON) * 100) / 100;
20 | };
21 |
22 | const onAdd = (product, quantity) => {
23 | const checkProductInCart = cartItems.find(
24 | (item) => item._id === product._id
25 | );
26 |
27 | setTotalPrice((prevTotalPrice) =>
28 | round(prevTotalPrice + product.price * quantity)
29 | );
30 | setTotalQuantities((prevTotalQuantities) => prevTotalQuantities + quantity);
31 | if (checkProductInCart) {
32 | const updatedCardItems = cartItems.map((cartProduct) => {
33 | if (cartProduct._id === product._id)
34 | return {
35 | ...cartProduct,
36 | quantity: cartProduct.quantity + quantity,
37 | };
38 | });
39 | setCartItems(updatedCardItems);
40 | } else {
41 | product.quantity = quantity;
42 |
43 | setCartItems([...cartItems, { ...product }]);
44 | }
45 | toast.success(`${qty} ${product.name} added to the cart.`);
46 | };
47 |
48 | const onRemove = (product) => {
49 | foundProduct = cartItems.find((item) => item._id === product._id);
50 | const newCartItems = cartItems.filter((item) => item._id !== product._id);
51 | setCartItems(newCartItems);
52 | setTotalPrice((prev) => round(prev - foundProduct.price * foundProduct.quantity));
53 | setTotalQuantities((prev) => prev - foundProduct.quantity);
54 | };
55 |
56 | const toggleCartItemQuantity = (id, value) => {
57 | foundProduct = cartItems.find((item) => item._id === id);
58 | index = cartItems.findIndex((product) => product._id === id);
59 | let newCartItems = cartItems.filter((item) => item._id !== id);
60 |
61 | if (value === "inc") {
62 | newCartItems.splice(index, 0, {
63 | ...foundProduct,
64 | quantity: foundProduct.quantity + 1,
65 | });
66 |
67 | setCartItems(newCartItems);
68 | setTotalPrice((prev) => round(prev + foundProduct.price));
69 | setTotalQuantities((prev) => prev + 1);
70 | } else if (value === "dec") {
71 | if (foundProduct.quantity > 1) {
72 | newCartItems.splice(index, 0, {
73 | ...foundProduct,
74 | quantity: foundProduct.quantity - 1,
75 | });
76 |
77 | setCartItems(newCartItems);
78 | setTotalPrice((prev) => round(prev - foundProduct.price));
79 | setTotalQuantities((prev) => prev - 1);
80 | }
81 | }
82 | };
83 |
84 | const incQty = () => {
85 | setQty((prev) => prev + 1);
86 | };
87 | const decQty = () => {
88 | setQty((prevQty) => {
89 | if (prevQty > 1) return prevQty - 1;
90 | else return 1;
91 | });
92 | };
93 |
94 | // useEffect(()=>{
95 | // setTotalPrice(prev=>(Math.round((prev + Number.EPSILON) * 100) / 100))
96 | // },[totalPrice])
97 |
98 | return (
99 |
29 |
92 |
30 |
50 |
51 |
31 |
36 |
37 |
38 | {image?.map((item, i) => (
39 | })
setIndex(i)}
46 | />
47 | ))}
48 |
49 |
52 |
91 | {name}
53 |
54 |
63 |
55 |
61 | (20)
62 |Details:
64 |{details}
65 |${price}
66 |
67 |
78 | Quantity
68 |
69 |
70 |
79 |
86 |
89 |
90 |
93 |
102 | You may also like
94 |
95 |
101 |
96 | {products.map((item) => (
97 |
100 |
46 |
129 | );
130 | };
131 |
132 | OrderScreen.auth = true;
133 | export default OrderScreen;
134 |
--------------------------------------------------------------------------------
/pages/profile.js:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import React, { useEffect, useState } from "react";
3 | import { getData, putData } from "../lib/utils";
4 | import { useForm } from "react-hook-form";
5 | import { toast } from "react-hot-toast";
6 | import { Loader } from "../components";
7 |
8 | const Profile = () => {
9 | const [isLoading, setIsLoading] = useState(true);
10 | const [orders, setOrders] = useState([]);
11 |
12 | const {
13 | handleSubmit,
14 | register,
15 | formState: { errors },
16 | } = useForm();
17 |
18 |
19 | //this is needed to show the new name after an update but to make it work
20 | //the SessionProvider property "refetchOnWindowFocus" need to be true,
21 | //but that makes it auto-update the session when a user switches windows and i don't want that
22 | // const reloadSession = () => {
23 | // const event = new Event("visibilitychange");
24 | // document.dispatchEvent(event);
25 | // };
26 |
27 | const handleUpdate = async ({ name }) => {
28 | try {
29 | const updateRes = await putData("/api/auth/update", { name });
30 | const updateData = await updateRes.json();
31 | console.log(updateData);
32 | toast.success("Name updated successfully!");
33 | toast("SignIn again to see the changes");
34 | //reloadSession();
35 | if (updateData.error) {
36 | toast.error(updateData.error);
37 | }
38 | } catch (error) {
39 | toast.error(error);
40 | }
41 | };
42 |
43 | useEffect(() => {
44 | const fetchOrders = async () => {
45 | try {
46 | const res = await getData(`/api/orders/history`);
47 | const data = await res.json();
48 | if (data.error) {
49 | console.log(data.error);
50 | } else {
51 | setIsLoading(false);
52 | }
53 | setOrders(data);
54 | } catch (error) {
55 | console.log(error);
56 | }
57 | };
58 | fetchOrders();
59 | }, []);
60 | return (
61 | <>
62 | {`Order Details`}
47 |{`ID: ${orderId}`}
48 | {isLoading ? ( 49 |Shipping Address
53 |54 | {shippingAddress.fullName}, {shippingAddress.address}, {shippingAddress.city}, {shippingAddress.postalCode}, {shippingAddress.country} 55 |
56 | 57 | 58 |Payment
59 |Paid with Stripe at {paidAt.replace(regex,"")}
60 |
61 |
62 | Order Items
63 |
64 |
65 |
66 |
101 |
102 |
103 | | Item | 68 |Quantity | 69 |Price | 70 |Subtotal | 71 |
|---|---|---|---|
|
77 |
78 | |
88 | 89 | {item.quantity} 90 | | 91 |92 | ${item.price} 93 | | 94 |95 | ${item.quantity * item.price} 96 | | 97 |
104 |
126 |
127 | )}
128 | Order Summary
105 |-
106 |
-
107 | 108 |111 |Items109 |${itemsPrice}110 |
112 |
-
113 | 114 |117 |Shipping115 |${shippingPrice}116 |
118 |
-
119 | 120 |123 |Total121 |${totalPrice}122 |
124 |
63 |
84 |
85 |
131 |
132 | );
133 | };
134 |
135 | Profile.auth = true;
136 | export default Profile;
137 |
--------------------------------------------------------------------------------
/components/HeroBanner.jsx:
--------------------------------------------------------------------------------
1 | import Link from "next/link";
2 | import React, { useState, useEffect } from "react";
3 | import { urlFor } from "../lib/client";
4 | import { FaChevronLeft, FaChevronRight } from "react-icons/fa";
5 | import { motion, AnimatePresence } from "framer-motion";
6 |
7 | const HeroBanner = ({ heroBannerData }) => {
8 | const [heroItem, setHeroItem] = useState(0);
9 | const [direction, setDirection] = useState(1);
10 |
11 | const heroBannerUpdate = (action) => {
12 | if (action === "right") {
13 | if (direction !== 1) {
14 | setDirection((prev) => prev * -1);
15 | }
16 | if (heroItem === 2) {
17 | setHeroItem(0);
18 | } else {
19 | setHeroItem((prev) => prev + 1);
20 | }
21 | }
22 | if (action === "left") {
23 | if (direction === 1) {
24 | setDirection((prev) => prev * -1);
25 | }
26 | if (heroItem === 0) {
27 | setHeroItem(2);
28 | } else {
29 | setHeroItem((prev) => prev - 1);
30 | }
31 | }
32 | };
33 | //i being the order of animation
34 | const imageAnimation = (i) => {
35 | return {
36 | initial: { translateX: -50 * direction, opacity: 0 },
37 | animate: { translateX: 0, opacity: 1 },
38 | transition: { duration: 0.6, delay: 1+ 0.55 * i },
39 | exit: {
40 | translateX: 50 * direction,
41 | opacity: 0,
42 | transition: { duration: 0.1, delay: 0.3},
43 | },
44 | };
45 | };
46 | const leftSidAnimation = (initialMovement, i) => {
47 |
48 | return {
49 | initial: { translateX: -50 * initialMovement, opacity: 0 },
50 | animate: { translateX: 0, opacity: 1 },
51 | transition: { duration: 0.45, delay: 1.1 + 0.25* i },
52 | exit: {
53 | translateX: 50,
54 | opacity: 0,
55 | transition: { duration: 0.1, delay: 0.2 },
56 | },
57 | };
58 | };
59 | //im actually using this one for the image, the product name and description
60 | const rightSideAnimation = (i) => {
61 | return {
62 | initial: { opacity: 0 },
63 | animate: { opacity: 1 },
64 | transition: { duration: 0.55, delay: 1.5 + 0.2* i },
65 | };
66 | };
67 |
68 | const heroBanner = heroBannerData[heroItem];
69 | return (
70 | Order History
86 | {isLoading ? ( 87 |
90 | You don't have orders yet
91 |
92 | ) : (
93 |
94 |
95 |
96 |
128 |
129 | )}
130 | | ID | 98 |DATE | 99 |TOTAL | 100 |PAID | 101 |ACTION | 102 |
|---|---|---|---|---|
| 108 | {order._id.substring(20, 24)} 109 | | 110 |111 | {order.createdAt.substring(0, 10)} 112 | | 113 |${order.totalPrice} | 114 |115 | {order.isPaid 116 | ? `${order.paidAt.substring(0, 10)}` 117 | : "not paid"} 118 | | 119 |120 | 121 | Details 122 | 123 | | 124 |
71 |
159 | );
160 | };
161 |
162 | export default HeroBanner;
163 |
--------------------------------------------------------------------------------
/components/Cart.jsx:
--------------------------------------------------------------------------------
1 | import React, { useRef } from "react";
2 | import Link from "next/link";
3 | import {
4 | AiOutlineMinus,
5 | AiOutlinePlus,
6 | AiOutlineLeft,
7 | AiOutlineShopping,
8 | } from "react-icons/ai";
9 | import { TiDeleteOutline } from "react-icons/ti";
10 | import toast from "react-hot-toast";
11 | import { useStateContext } from "../context/StateContext";
12 | import { urlFor } from "../lib/client";
13 | import { useSession, signIn } from "next-auth/react";
14 | import { useRouter } from "next/router";
15 | import getError from "../lib/error";
16 | import { motion } from "framer-motion";
17 |
18 | const Cart = () => {
19 | const cartRef = useRef();
20 | const {
21 | totalPrice,
22 | totalQuantities,
23 | cartItems,
24 | setShowCart,
25 | toggleCartItemQuantity,
26 | onRemove,
27 | setInCheckoutProcess,
28 | } = useStateContext();
29 |
30 | const { data: session } = useSession();
31 | const router = useRouter();
32 | const { redirect } = router.query;
33 | const loginDemo = async (email, password) => {
34 | try {
35 | const result = await signIn("credentials", {
36 | redirect: false,
37 | email,
38 | password,
39 | });
40 | if (result.error) {
41 | toast.error(result.error);
42 | }
43 | } catch (err) {
44 | toast.error(getError(err));
45 | }
46 | };
47 |
48 | const handlePlaceOrder = async () => {
49 | setShowCart(false);
50 |
51 | if (!session?.user) {
52 | const asDemo = confirm("Do you want to login with a Demo Account?");
53 | if (asDemo) {
54 | await loginDemo("user1@example.com", "123456");
55 | router.push(redirect || "/checkout");
56 | } else {
57 | toast("Please login before placing an order");
58 | setInCheckoutProcess(true);
59 | setTimeout(() => router.push("/login"), 600);
60 | }
61 | } else {
62 | router.push("/checkout");
63 | }
64 | };
65 |
66 | const variants = {
67 | initial: { opacity: 0, x: "100%" },
68 | animate: { opacity: 1, x: 0 },
69 | transition: { duration: 0.5 },
70 | };
71 |
72 | return (
73 |
72 |
73 |
78 | {heroBanner.smallText}
79 |
80 |
84 | {heroBanner.midText}
85 |
86 |
90 | {heroBanner.largeText1}
91 |
92 |
97 | ${heroBanner.oldPrice}
98 |
99 |
104 | ${heroBanner.price}
105 |
106 |
107 |
115 |
116 |
158 |
117 |
118 |
119 |
124 | {heroBanner.buttonText}
125 |
126 |
127 |
132 | {heroBanner.product}
133 |
134 |
135 |
136 |
137 | heroBannerUpdate("right")}
140 | />
141 | heroBannerUpdate("left")}
144 | />
145 |
146 |
147 |
152 |
155 |
156 |
157 | Description
153 |{heroBanner.desc}
154 |
74 |
75 |
84 | {cartItems.length < 1 && (
85 |
162 |
163 | );
164 | };
165 |
166 | export default Cart;
167 |
--------------------------------------------------------------------------------
/pages/register.js:
--------------------------------------------------------------------------------
1 | import React, { useEffect } from "react";
2 | import Link from "next/link";
3 | import { signIn, useSession } from "next-auth/react";
4 | import { useForm } from "react-hook-form";
5 | import toast from "react-hot-toast";
6 | import { useRouter } from "next/router";
7 | import getError from "../lib/error";
8 | import { useStateContext } from "../context/StateContext";
9 | import { postData } from "../lib/utils";
10 |
11 | const Register = () => {
12 | const { data: session } = useSession();
13 |
14 | const router = useRouter();
15 | const { redirect } = router.query;
16 | const { inCheckoutProcess, setInCheckoutProcess } = useStateContext();
17 |
18 | useEffect(() => {
19 | if (session?.user) {
20 | if (!inCheckoutProcess) {
21 | router.push(redirect || "/");
22 | } else {
23 | setInCheckoutProcess(false);
24 | router.push(redirect || "/checkout");
25 | }
26 | }
27 | }, [router, session, redirect]);
28 | const {
29 | handleSubmit,
30 | register,
31 | getValues,
32 | formState: { errors },
33 | } = useForm();
34 |
35 | const submitHandler = async ({ name, email, password }) => {
36 | const userData = {
37 | name,
38 | email,
39 | password,
40 | };
41 | try {
42 | const res = await postData("/api/auth/signup",userData);
43 | const data = await res.json();
44 | if(res.error){
45 | toast.error(res.error)
46 | return;
47 | } else {
48 | toast.success(data.msg)
49 | }
50 | } catch (error) {
51 | toast.error(getError(error));
52 | return;
53 | }
54 | try {
55 | const result = await signIn("credentials", {
56 | redirect: false,
57 | email,
58 | password,
59 | });
60 | if (result.error) {
61 | toast.error(result.error);
62 | }
63 | } catch (error) {
64 | toast.error(getError(error));
65 | }
66 | };
67 | return (
68 | <>
69 |
164 |
165 | );
166 | };
167 |
168 | export default Register;
169 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Ecommerce - Awesome Gear
2 |
3 | 
4 |
5 | Ecommerce website built with NextJs.
6 |
7 | - Demo live: https://awesome-gear-shop.vercel.app/
8 |
9 | ## Features
10 |
11 | - Registration
12 | - Input validation on forms
13 | - Authentication
14 | - Protected routes
15 | - Smooth animations
16 | - Product data managed by Sanity (headless CMS)
17 | - User and order data managed with MongoDB
18 | - Checkout with Stripe
19 | - User profile with order history
20 | - Server Side Rendered homepage for better SEO
21 | - Static Site Generated individual product pages for the fastest response
22 | - Product filtering on shop page
23 | - Light/Dark theme
24 | - Responsive design
25 |
26 | ## Chrome lighthouse scores:
27 |
28 | ---
29 |
30 | These are the scores of the test while using incognito mode:
31 |
32 | 
33 |
34 | ## Environment Variables
35 |
36 | ---
37 |
38 | To run this project, you will need these environment variables on your .env:
39 |
40 | `NEXT_PUBLIC_SANITY_TOKEN`
41 |
42 | `NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY`
43 |
44 | `NEXT_PUBLIC_STRIPE_SECRET_KEY`
45 |
46 | `NEXTAUTH_SECRET`
47 |
48 | `MONGODB_URI`
49 |
50 | First, run the development server:
51 |
52 | ```bash
53 | npm install --legacy-peer-deps
54 | # to avoid deps bugs
55 |
56 | ```
57 |
58 | Next:
59 |
60 | ```bash
61 | npm install -g @sanity/cli
62 | cd sanity_ecommerce
63 | npm install --legacy-peer-deps
64 | sanity start
65 | ```
66 |
67 | Open [http://localhost:3333](http://localhost:3333) with your browser to see the sanity studio where you can add the products.
68 | You can find the images and data of the products i used in the assets folder
69 |
70 | Then:
71 |
72 | ```bash
73 | npm run dev
74 | ```
75 |
76 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
77 |
78 | ## Technologies used for this project:
79 |
80 | ---
81 |
82 | - Next.js
83 | - NextAuth.js
84 | - Sanity
85 | - MongoDB
86 | - Framer Motion
87 |
88 | ## Deployment:
89 |
90 | ---
91 |
92 | This project is deployed in Vercel, the DB is hosted using MongoDB Atlas
93 |
94 | ## Decisions:
95 |
96 | ---
97 |
98 | - ### Why did you build this project?
99 |
100 | I wanted to try Next Js and check why is it so popular and what a better way to learn how to use a tool than building something with it. I gave it some thought and decided between 3 options:
101 |
102 | 1. An app that helps to manage inventories, profits, clients, and tracks issues for any shop dedicated to fix electronics, I've worked in this field in the past and i really wanted one app like that with a modern UI.
103 | 2. An online Shop where i can sell anything i want, AKA, an Ecommerce.
104 | 3. An app dedicated to solve a problem i have with a video game i like.
105 |
106 | At the end i went with the 2nd option, because is more general and more people might need something like that, that been said i plan to build the other apps anyways because those a problems that need a solution and programming is fun.
107 |
108 | - ### TypeScript vs JavaScript
109 |
110 | When i started this project Next.Js 12 had a warning in their documentation about that using TypeScript with ServerSideProps could bring some issues, as a new dev diving into Next.Js i wasn't going to take the risk of adding bugs to my code for free. So for this project i decided to go with JavaScript.
111 |
112 | - ### Design
113 |
114 | I took inspiration from some designs i saw on dribbble and added my own personal style. I know it has room for improvement (Im not a designer) but im still proud of the visuals.
115 |
116 | - ### Styling
117 |
118 | For this project i could have used Tailwind Css but i stayed with vanilla CSS just to not throw some old code i had. For anything i build with vanilla CSS i always use BEM convention, too good not to use it.
119 |
120 | - ### Why MongoDB with Sanity?
121 |
122 | At the beginning of this project i didn't want to build a full backend so i went with Sanity but after some time i decided to take this project to the next level, many features i wanted required a database, for me that don't know SQL, MongoDB was an easy pick.
123 |
124 | - ### Are you going to add different authentication methods?
125 |
126 | Yes, Im gonna add authentication with Google and Facebook but not now because Next Auth requires an "adapter" to save the users data in the database and for MongoDB it uses the "mongodb" module as adapter and currently Im using Mongoose as a driver to connect with MongoDB Atlas, which creates a conflict with the models if i try to install both, there's actually an issue about this topic in Next Auth's repository in github.
127 |
128 | - ### Testing
129 |
130 | For this project i didn't use any testing strategy, that said as soon as I finish building my personal portfolio, i plan to refactor some code,add new features and expand this project even more. That's why i believe adding unit and E2E testing to some specific parts that i plan to refactor will help deliver more reliable code.
131 |
132 | ## Next Steps
133 |
134 | ---
135 |
136 | For now Im gonna leave this project as it is, because I need to focus in another projects, but as soon Im done with those I plan to go work on these:
137 |
138 | - Migrate this project to TypeScript and NextJs 13.
139 | - Take Sanity out of the project and use MongoDB to manage the product's data.
140 | - Refactor some CSS code, maybe split it into modules.
141 | - Improve the design and animations.
142 | - Add an Admin panel, for products, users and orders management.
143 | - Create a webhook to monitor stripe payment confirmation.
144 | - Separate shipping address, payment and checkout in to different pages.
145 |
--------------------------------------------------------------------------------
/pages/shop.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from "react";
2 | import { client } from "../lib/client";
3 | import { Product } from "../components";
4 | import { useRouter } from "next/router";
5 | import { motion, AnimatePresence } from "framer-motion";
6 | // import { useForm } from "react-hook-form";
7 |
8 | const Shop = ({ products }) => {
9 | const router = useRouter();
10 | const [category, setCategory] = useState("All");
11 | const [manufacturer, setManufacturer] = useState("All");
12 | const [productsList, setProductsList] = useState(products);
13 | const [query, setQuery] = useState("");
14 | const [isOpen, setIsOpen] = useState(false);
15 | const [sort, setSort] = useState("featured");
16 |
17 | const manufacturersList = ["All", "ASUS", "Logitech G", "Corsair"];
18 | const categoriesList = ["All", "Mouse pad", "Mouse", "Keyboard", "Headset"];
19 |
20 | useEffect(() => {
21 | if (!router.query.category) return;
22 | if (router.query.category === "Mousepad") {
23 | setCategory("Mouse pad");
24 | } else {
25 | setCategory(router.query.category);
26 | }
27 | }, [router.query.category]);
28 |
29 | const handleCategory = (e) => {
30 | setCategory(e.target.value);
31 | };
32 | const handleManufacturer = (e) => {
33 | setManufacturer(e.target.value);
34 | };
35 | const handleSort = (e) => {
36 | setSort(e.target.value);
37 | };
38 | const showFilterHandler = () => {
39 | setIsOpen((prev) => !prev);
40 | console.log(isOpen);
41 | };
42 | const sortProducts = (products, filter) => {
43 | //lets just say the original order is by "featured"
44 | //sort array method doesn't make a copy, it changes the array in place
45 | //normally i would make a deepcopy with JSON stringify and parse but in this case isn't needed
46 | if (filter === "featured") return products;
47 | if (filter === "low to high") {
48 | return products.sort((a, b) => a.price - b.price);
49 | }
50 | if (filter === "high to low") {
51 | return products.sort((a, b) => b.price - a.price);
52 | }
53 | };
54 | const filterProducts = (products) => {
55 | let updatedList = [...products];
56 | if (query.length > 0) {
57 | updatedList = updatedList.filter((product) =>
58 | product.name.toLowerCase().includes(query.toLowerCase())
59 | );
60 | }
61 | if (category !== "All") {
62 | updatedList = updatedList.filter(
63 | (product) => product.category === category.toLowerCase()
64 | );
65 | }
66 | if (manufacturer !== "All") {
67 | updatedList = updatedList.filter(
68 | (product) => product.manufacturer === manufacturer
69 | );
70 | }
71 | return updatedList;
72 | };
73 | useEffect(() => {
74 | let updatedList = filterProducts(products);
75 | updatedList = sortProducts(updatedList, sort);
76 | setProductsList(updatedList);
77 | }, [category, manufacturer, query, sort]);
78 |
79 | return (
80 |
86 |
98 | )}
99 |
100 | Your shopping bag is empty
88 | 89 | 96 | 97 |
101 | {cartItems.length >= 1 &&
102 | cartItems.map((item, index) => (
103 |
148 | {cartItems.length >= 1 && (
149 |
104 | })
109 |
146 | ))}
147 |
110 |
145 |
111 |
114 | {item.name}
112 |${item.price}
113 |
115 |
144 |
116 |
136 |
143 |
117 |
120 | toggleCartItemQuantity(item._id, "dec")
121 | }
122 | >
123 |
150 |
160 | )}
161 |
151 |
154 | Subtotal:
152 |${totalPrice}
153 |
155 |
158 |
159 |
81 |
163 | );
164 | };
165 |
166 | export const getServerSideProps = async () => {
167 | const query = '*[_type == "product"]';
168 | const products = await client.fetch(query);
169 |
170 | return {
171 | props: { products },
172 | };
173 | };
174 | export default Shop;
175 |
--------------------------------------------------------------------------------
/components/Navbar.jsx:
--------------------------------------------------------------------------------
1 | import React, { useEffect, useState } from "react";
2 | import Link from "next/link";
3 | import { useSession, signOut } from "next-auth/react";
4 | import { FaShoppingCart, FaUser, FaMoon, FaSun } from "react-icons/fa";
5 | import { GiHamburgerMenu } from "react-icons/gi";
6 | import Cart from "./Cart";
7 | import { useStateContext } from "../context/StateContext";
8 | import { Menu } from "@headlessui/react";
9 | import { deleteData, paymentNotification } from "../lib/utils";
10 | import { useRouter } from "next/router";
11 | import { motion } from "framer-motion";
12 | import HamburgerMenu from "./HamburgerMenu";
13 | // import { HamburgerMenu } from ""
14 |
15 | const Navbar = () => {
16 | const [showHamMenu, setShowHamMenu] = useState(false);
17 | const {
18 | showCart,
19 | setShowCart,
20 | totalQuantities,
21 | setCartItems,
22 | setTotalPrice,
23 | setTotalQuantities,
24 | lightTheme,
25 | setLightTheme,
26 | } = useStateContext();
27 | const router = useRouter();
28 | const { status, data: session } = useSession();
29 | const { status: queryStatus, orderid: orderId } = router.query;
30 |
31 | const logoutClickHandler = () => {
32 | setCartItems([]);
33 | setTotalPrice(0);
34 | setTotalQuantities(0);
35 | signOut({ callbackUrl: "/login" });
36 | };
37 | useEffect(() => {
38 | if (
39 | (queryStatus && queryStatus === "canceled") ||
40 | queryStatus === "success"
41 | ) {
42 | paymentNotification(queryStatus, orderId);
43 | }
44 | const deleteCanceledOrder = async () => {
45 | if (queryStatus && orderId && queryStatus === "canceled") {
46 | try {
47 | const res = await deleteData(`/api/orders/${orderId}/delete`, {
48 | orderId,
49 | });
50 | const data = await res.json();
51 | console.log(data);
52 | } catch (error) {
53 | console.log(error);
54 | }
55 | }
56 | };
57 | deleteCanceledOrder();
58 | }, [queryStatus]);
59 |
60 | return (
61 |
82 |
84 |
87 | {
91 | setQuery(e.target.value);
92 | }}
93 | autoFocus
94 | />
95 |
98 | High Quality Products
83 |
99 |
155 |
156 | {productsList?.map((product) => (
157 |
160 |
161 |
162 |
102 | {
103 |
149 |
150 |
104 |
107 |
116 |
119 |
132 |
135 |
146 |
147 | }
148 |
62 |
63 |
69 | 
70 |
72 |
73 |
207 | );
208 | };
209 |
210 | export default Navbar;
211 |
--------------------------------------------------------------------------------
/pages/checkout.js:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useForm } from "react-hook-form";
3 | import getStripe from "../lib/getStripe";
4 | import { useStateContext } from "../context/StateContext";
5 | import toast from "react-hot-toast";
6 | import { urlFor } from "../lib/client";
7 | import {
8 | AiOutlineMinus,
9 | AiOutlinePlus,
10 | AiOutlineShopping,
11 | } from "react-icons/ai";
12 | import { TiDeleteOutline } from "react-icons/ti";
13 | import Link from "next/link";
14 | import { getImage, postData, putData } from "../lib/utils";
15 | import getError from "../lib/error";
16 |
17 | const Checkout = () => {
18 | const {
19 | totalPrice,
20 | cartItems,
21 | setShowCart,
22 | toggleCartItemQuantity,
23 | onRemove,
24 | } = useStateContext();
25 | const {
26 | handleSubmit,
27 | register,
28 | formState: { errors },
29 | } = useForm();
30 |
31 | const handleCheckout = async (data) => {
32 | const orderItems = cartItems.map((item) => ({
33 | name: item.name,
34 | quantity: item.quantity,
35 | image: getImage(item),
36 | price: item.price,
37 | }));
38 | const shippingAddress = { ...data };
39 | const order = {
40 | orderItems,
41 | shippingAddress,
42 | itemsPrice: totalPrice,
43 | shippingPrice: 0,
44 | totalPrice,
45 | isPaid: false,
46 | paidAt: undefined,
47 | };
48 | try {
49 |
50 | // TO-DO: isPaid should be changed to true After the payment is successful
51 |
52 | const orderResponse = await postData("/api/orders", order);
53 | const orderData = await orderResponse.json();
54 | console.log("orderResponse", orderResponse, "orderData", orderData)
55 | const orderId = orderData.order._id;
56 | if (orderResponse.error) {
57 | toast.error(orderResponse.error);
58 | return;
59 | } else {
60 | toast.success(orderData.msg);
61 | }
62 |
63 | const stripe = await getStripe();
64 | const res = await postData("/api/stripe", {cartItems, orderId});
65 | const data = await res.json();
66 | console.log("stripe res",res);
67 | console.log("stripe data", data);
68 |
69 |
70 | if (res.statusCode === 500) return;
71 |
72 | toast.loading("Redirecting to Stripe...");
73 | //yes, im updating the isPaid status and its not even successful yet,
74 | //TO-DO: create a webhook with stripe api and wait for success
75 | //but for now i made the api for update and im gonna use it,
76 | //either way if its canceled the order its gonna be deleted
77 | const updateResult = await putData(`/api/orders/${orderId}/pay`,{orderId})
78 | const dataPaymentUpdate = await updateResult.json();
79 |
80 | console.log(dataPaymentUpdate.message);
81 | stripe.redirectToCheckout({ sessionId: data.id });
82 | } catch (error) {
83 | toast.error(getError(error));
84 | }
85 | };
86 |
87 | return (
88 |
70 | AwesomeGear
71 |
74 |
75 |
81 | Mice
82 |
83 |
84 |
85 |
86 |
92 | Keyboards
93 |
94 |
95 |
96 |
102 | Headsets
103 |
104 |
105 |
106 |
112 | Mouse pads
113 |
114 |
115 |
116 |
117 | setLightTheme((prev) => !prev)}
125 | >
126 | {lightTheme ? (
127 |
132 |
133 | {
141 | setShowCart(true);
142 | if (showHamMenu) setShowHamMenu(false);
143 | }}
144 | >
145 |
148 |
154 |
204 |
205 | {showCart &&
155 |
203 |
156 |
168 | {status === "loading" ? (
169 | setShowHamMenu((prev) => !prev)}
159 | >
160 |
161 |
162 |
163 |
164 | {showHamMenu && (
165 | Loading
170 | ) : session?.user ? (
171 |
197 | ) : (
198 |
199 | Login
200 |
201 | )}
202 |
89 |
239 |
240 | );
241 | };
242 | Checkout.auth = true;
243 | export default Checkout;
244 |
--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
1 | /*========== GOOGLE FONTS ================*/
2 | @import url("https://fonts.googleapis.com/css2?family=Cabin:wght@400;700&display=swap");
3 |
4 | /*=====================CSS VARIABLES =======================*/
5 | :root {
6 | --header-height: 3rem;
7 |
8 | /*================= Colors ============*/
9 | /* Main color*/
10 | --hue-color: 237;
11 |
12 | /* Colors in HSL*/
13 | --first-color: hsl(237, 77%, 65%);
14 | --first-color-second: hsl(237, 69%, 67%);
15 | --first-color-alt: hsl(237, 57%, 53%);
16 | --first-color-lighter: hsl(237, 83%, 70%);
17 | --text-color: hsl(237, 77%, 97%);
18 | --text-color-darker: hsl(237, 8%, 75%);
19 | --bg-color-light: hsl(237, 45%, 79%);
20 | --secondary-color: hsl(237, 26%, 64%);
21 | --secondary-color-light: hsl(237, 65%, 84%);
22 | --secondary-color-darker: hsl(237, 12%, 44%);
23 | --third-color: hsl(237, 4%, 5%);
24 | --bg-color: hsl(237, 9%, 19%);
25 | --scroll-bar-color: hsl(237, 12%, 90%);
26 | --scroll-thumb-color: hsl(237, 12%, 80%);
27 |
28 | /*=============== Font and typography==========*/
29 | --body-font: "Cabin", sans-serif;
30 |
31 | /* .5rem = 8px, 1rem = 16px....*/
32 | --big-font-size-XL: 2rem;
33 | --big-font-size: 1.4rem;
34 | --h1-font-size: 1.5rem;
35 | --h2-font-size: 1.25rem;
36 | --h3-font-size: 1.125rem;
37 | --normal-font-size: 0.938rem;
38 | --small-font-size: 0.813rem;
39 | --smaller-font-size: 0.75rem;
40 |
41 | /*================= Font Weight================*/
42 | --font-medium: 500;
43 | --font-semi-bold: 600;
44 | --font-bold: 700;
45 |
46 | /*================ Margins Bottom =============*/
47 | --mb-0-25: 0.25rem;
48 | --mb-0-5: 0.5rem;
49 | --mb-0-75: 0.75rem;
50 | --mb-1: 1rem;
51 | --mb-1-5: 1.5rem;
52 | --mb-2: 2rem;
53 | --mb-2-5: 2.5rem;
54 | --mb-3: 3rem;
55 | }
56 |
57 | /*================ Variables light theme ====================*/
58 | .light-theme {
59 | /* Colors in HSL*/
60 | /* --first-color-second: hsl(237, 30%, 8%);
61 | --title-color: hsl(237, 8%, 95%); */
62 | --bg-color: hsl(237, 70%, 96%);
63 | --text-color: hsl(237, 13%, 24%);
64 | /* --input-color: hsl(237, 29%, 16%);
65 | --body-color: hsl(237, 28%, 12%);
66 | --container-color: hsl(237, 29%, 16%);
67 | --scroll-bar-color: hsl(237, 12%, 48%);
68 | --scroll-thumb-color: hsl(237, 12%, 36%); */
69 | }
70 |
71 | html,
72 | body,
73 | * {
74 | padding: 0;
75 | margin: 0;
76 | font-family: var(--body-font);
77 | box-sizing: border-box;
78 | }
79 | /* ::-webkit-scrollbar {
80 | width: 0px;
81 | } */
82 |
83 | a {
84 | color: inherit;
85 | text-decoration: none;
86 | }
87 |
88 | .main-container {
89 | margin: auto;
90 | width: 100%;
91 | background-color: var(--bg-color);
92 | }
93 |
94 | ul {
95 | list-style: none;
96 | }
97 |
98 | a {
99 | text-decoration: none;
100 | }
101 |
102 | .body {
103 | background-color: var(--bg-color);
104 | min-height: 100vh;
105 | /* width: 100vw; */
106 | transition: background 0.6s ease;
107 | }
108 |
109 | /*======================== Navbar =======================*/
110 | .navbar-container {
111 | display: flex;
112 | justify-content: space-between;
113 | padding: 8px 19px;
114 | position: relative;
115 | /* background-color: var(--bg-color); */
116 | padding-top: 13px;
117 | max-width: 1400px;
118 | margin-left: auto;
119 | margin-right: auto;
120 | z-index: 2;
121 | }
122 |
123 | .logo-container {
124 | color: var(--text-color);
125 | padding: 5px;
126 | font-size: var(--big-font-size);
127 | cursor: pointer;
128 | display: flex;
129 | justify-content: center;
130 | align-items: center;
131 | }
132 | .logo {
133 | height: 45px;
134 | width: 45px;
135 | object-fit: contain;
136 | }
137 |
138 | .navbar-buttons-container {
139 | display: flex;
140 | flex-direction: row;
141 | align-items: center;
142 | color: var(--text-color);
143 | font-size: var(--h3-font-size);
144 | }
145 |
146 | .navbar-button {
147 | padding: 8px 20px;
148 | /* background-color: var(--first-color-lighter); */
149 | cursor: pointer;
150 | transition: transform 0.5s ease;
151 | z-index: 2;
152 | }
153 |
154 | .navbar-button:hover {
155 | text-shadow: 1px 2px 10px var(--first-color);
156 | transform: scale(1.05, 1.05);
157 | }
158 |
159 | .navbar-user-container {
160 | display: flex;
161 | flex-direction: row;
162 | justify-content: space-between;
163 | position: relative;
164 | }
165 |
166 | .navbar-hamburger-container {
167 | display: flex;
168 | justify-content: space-between;
169 | align-items: center;
170 | height: 40px;
171 | }
172 | /* ------------------------- */
173 | .navbar-hamburger-menu-wrapper {
174 | width: 20vw;
175 | min-width: 180px;
176 | /* background: rgba(0, 0, 0, 0.5); */
177 | background-color: var(--bg-color);
178 | border: 3px solid var(--first-color);
179 | border-radius: 15px;
180 | position: fixed;
181 | right: 0;
182 | top: 92px;
183 | z-index: 100;
184 | will-change: transform;
185 | transition: all 1s ease-in-out;
186 | max-height: 60vh;
187 | cursor: auto;
188 | }
189 |
190 | /* .navbar-hamburger-menu-items-container {
191 | height: 600px;
192 | width: 300px;
193 | background-color: var(--bg-color);
194 | float: right;
195 | padding: 40px 10px;
196 | position: relative;
197 | } */
198 |
199 | .hamburger-menu-item {
200 | display: block;
201 | min-width: 150px;
202 | text-align: left;
203 | padding-top: 0.5rem;
204 | padding-left: 0.9rem;
205 | clear: both;
206 | width: 100%;
207 | margin-bottom: 0.5rem;
208 | transition: all 0.3s ease;
209 | cursor: pointer;
210 | }
211 | .hamburger-menu-item:hover {
212 | padding-left: 1.3rem;
213 | color: var(--first-color);
214 | }
215 | .hamburger-separator {
216 | width: 100%;
217 | height: 2px;
218 | margin: 8px 0;
219 | background-color: var(--first-color);
220 | }
221 | .hamburger-menu-user {
222 | display: flex;
223 | justify-content: center;
224 | align-items: center;
225 | margin-top: 10px;
226 | padding-left: 0.9rem;
227 | gap: 0.4rem;
228 | }
229 | .hamburger-menu-user-name {
230 | color: var(--first-color);
231 | }
232 |
233 | /* --------------------- */
234 | .navbar-hamburger-container {
235 | display: none;
236 | position: relative;
237 | height: 60px;
238 | }
239 |
240 | .navbar-hamburger-container .hamburger-lines {
241 | display: block;
242 | height: 20px;
243 | width: 26px;
244 | position: absolute;
245 | top: 21px;
246 | left: -5px;
247 | z-index: 2;
248 | display: flex;
249 | flex-direction: column;
250 | justify-content: space-between;
251 | }
252 |
253 | .navbar-hamburger-container .hamburger-lines .line {
254 | display: block;
255 | height: 4px;
256 | width: 100%;
257 | border-radius: 10px;
258 | background: var(--secondary-color);
259 | }
260 |
261 | .navbar-hamburger-container .hamburger-lines .line1 {
262 | transform-origin: 0% 0%;
263 | transition: transform 0.4s ease-in-out;
264 | }
265 |
266 | .navbar-hamburger-container .hamburger-lines .line2 {
267 | transition: transform 0.2s ease-in-out;
268 | }
269 |
270 | .navbar-hamburger-container .hamburger-lines .line3 {
271 | transform-origin: 0% 100%;
272 | transition: transform 0.4s ease-in-out;
273 | }
274 |
275 | .navbar-hamburger-container .hamburger-lines.active .line1 {
276 | transform: rotate(45deg);
277 | }
278 |
279 | .navbar-hamburger-container .hamburger-lines.active .line2 {
280 | transform: scaleY(0);
281 | }
282 |
283 | .navbar-hamburger-container .hamburger-lines.active .line3 {
284 | transform: rotate(-45deg);
285 | }
286 |
287 | .cart-icon-btn {
288 | font-size: 25px;
289 | color: var(--secondary-color);
290 | margin-right: 12px;
291 | cursor: pointer;
292 | position: relative;
293 | transition: transform 0.4s ease;
294 | border: none;
295 | background-color: transparent;
296 | width: 24px;
297 | }
298 | .cart-icon {
299 | position: absolute;
300 | top: 16px;
301 | right: -10px;
302 | }
303 | .cart-icon:hover {
304 | transform: scale(1.1, 1.1);
305 | }
306 | .cart-item-qty {
307 | position: absolute;
308 | right: -19px;
309 | top: 13px;
310 | font-size: 12px;
311 | color: #eee;
312 | background-color: var(--first-color);
313 | width: 18px;
314 | height: 18px;
315 | border-radius: 50%;
316 | text-align: center;
317 | font-weight: 600;
318 | }
319 |
320 | .user-container {
321 | display: flex;
322 | flex-direction: row;
323 | align-items: center;
324 | padding-left: 10px;
325 | height: 40px;
326 | margin: 5px 12px;
327 | border-left: 2px solid var(--first-color);
328 | cursor: pointer;
329 | }
330 |
331 | .user-icon {
332 | border: 3px solid var(--first-color);
333 | font-size: var(--h2-font-size);
334 | border-radius: 50%;
335 | margin: 0 2px;
336 | width: fit-content;
337 | padding: 0 3px;
338 | }
339 | .burger-icon {
340 | margin-top: 8px;
341 | font-size: 1.9rem;
342 | display: none;
343 | }
344 |
345 | .fa-icon {
346 | color: var(--secondary-color);
347 | }
348 |
349 | .user-name {
350 | margin-left: 5px;
351 | color: var(--text-color);
352 | font-size: var(--h3-font-size);
353 | }
354 |
355 | /*=========================== Home Page ===============================*/
356 | /*=====================Hero Banner ==================*/
357 | /*
358 | .logo{
359 | color: gray;
360 | font-size: 18px;
361 |
362 | }*/
363 |
364 | .hero-banner-container {
365 | padding: 100px 40px;
366 | border-radius: 15px;
367 | position: relative;
368 | max-width: 1400px;
369 | height: 500px;
370 | line-height: 0.9;
371 | width: 100%;
372 | margin: auto;
373 | color: var(--first-color);
374 | z-index: 0;
375 | overflow: hidden;
376 | }
377 | .hero-banner-container .top-small-text {
378 | font-size: 25px;
379 | }
380 |
381 | .hero-banner-container h3 {
382 | font-size: 4rem;
383 | margin-top: 4px;
384 | }
385 | .hero-banner-container h1 {
386 | color: var(--text-color);
387 | font-size: 7em;
388 | /* margin-left: -20px; */
389 | text-transform: uppercase;
390 | }
391 |
392 | .hero-banner-container .old-price {
393 | font-size: 25px;
394 | color: var(--secondary-color-light);
395 | text-decoration: line-through;
396 | }
397 | .light-theme .hero-banner-container .old-price {
398 | font-size: 25px;
399 | color: var(--secondary-color);
400 | text-decoration: line-through;
401 | }
402 |
403 | .hero-banner-container .new-price {
404 | margin-top: 10px;
405 | font-size: 25px;
406 | color: var(--text-color);
407 | }
408 |
409 | .hero-banner-container button {
410 | border-radius: 15px;
411 | padding: 10px 16px;
412 | background-color: var(--first-color);
413 | color: var(--text-color);
414 | border: none;
415 | margin-top: 25px;
416 | font-size: 28px;
417 | font-weight: var(--font-semi-bold);
418 | cursor: pointer;
419 | transition: transform 0.4s ease;
420 | /* z-index:10000 !important; */
421 | }
422 | .hero-banner-container button:hover {
423 | transform: scale(1.1, 1.1);
424 | }
425 |
426 | .hero-banner-image {
427 | position: absolute;
428 | top: -15%;
429 | right: 20%;
430 | width: 650px;
431 | height: 650px;
432 | object-fit: contain;
433 | pointer-events: none;
434 | z-index: -1;
435 | }
436 | .smallerImage {
437 | width: 450px;
438 | height: 450px;
439 | right: 32%;
440 | top: 0;
441 | }
442 |
443 | .hero-product-name {
444 | position: absolute;
445 | right: 5%;
446 | top: 17%;
447 | width: 300px;
448 | line-height: 1.3;
449 | display: flex;
450 | flex-direction: column;
451 | color: var(--text-color);
452 | font-size: var(--big-font-size-XL);
453 | }
454 |
455 | .right-icon,
456 | .left-icon {
457 | position: absolute;
458 | right: 12%;
459 | font-size: 3rem;
460 | color: var(--first-color);
461 | cursor: pointer;
462 | transition: transform 0.4s ease;
463 | }
464 |
465 | .right-icon {
466 | top: 35%;
467 | }
468 |
469 | .left-icon {
470 | top: 48%;
471 | }
472 |
473 | .right-icon:hover,
474 | .left-icon:hover {
475 | transform: scale(1.1, 1.1);
476 | }
477 |
478 | .desc {
479 | position: absolute;
480 | right: 10%;
481 | bottom: 5%;
482 | width: 300px;
483 | line-height: 1.3;
484 | display: flex;
485 | flex-direction: column;
486 | color: var(--first-color);
487 | }
488 | .desc p {
489 | color: var(--text-color-darker);
490 | font-weight: 100;
491 | text-align: end;
492 | display: -webkit-box;
493 | overflow: hidden;
494 | -webkit-line-clamp: 5;
495 | line-clamp: 5;
496 | -webkit-box-orient: vertical;
497 | }
498 | .desc h5 {
499 | margin-bottom: 12px;
500 | font-weight: 700;
501 | font-size: 16px;
502 | align-self: flex-end;
503 | }
504 |
505 | /*==================== Marquee (Slug / Product details) ===================*/
506 | .marquee-text {
507 | font-size: 29px;
508 | font-weight: 600;
509 | margin: 60px 0px;
510 | color: var(--first-color);
511 | }
512 | .marquee {
513 | position: relative;
514 | height: 400px;
515 | width: 100%;
516 | overflow-x: hidden;
517 | }
518 |
519 | .track {
520 | position: absolute;
521 | white-space: nowrap;
522 | will-change: transform;
523 | animation: marquee 15s linear infinite;
524 | width: 180%;
525 | }
526 | .track:hover {
527 | animation-play-state: paused;
528 | }
529 | @keyframes marquee {
530 | from {
531 | transform: translateX(0);
532 | }
533 | to {
534 | transform: translateX(-50%);
535 | }
536 | }
537 |
538 | span.text-red {
539 | -webkit-text-stroke: 1px var(--first-color);
540 | margin-left: 6px;
541 | }
542 |
543 | .shop-products {
544 | display: flex;
545 | max-height: 80vh;
546 | overflow: hidden;
547 | width: 100%;
548 | }
549 | .products-filters {
550 | border: 3px solid var(--first-color);
551 | border-left: 0px;
552 | border-top-right-radius: 15px;
553 | width: 280px;
554 | height: 75vh;
555 | margin-top: 20px;
556 | display: flex;
557 | flex-direction: column;
558 | padding: 2rem 20px;
559 | color: var(--text-color);
560 | transition: 1s;
561 | overflow: hidden;
562 | }
563 |
564 | .filter-label {
565 | font-size: 1.2rem;
566 | margin: 20px 0;
567 | }
568 | .products-filters select {
569 | font-size: 1rem;
570 | /* transition: 0.3s all ease; */
571 | }
572 |
573 |
574 | .products-container {
575 | display: flex;
576 | flex-wrap: wrap;
577 | justify-content: flex-start;
578 | gap: 15px;
579 | margin-top: 20px;
580 | width: 100%;
581 | max-height: 75vh;
582 | overflow: auto;
583 | padding: 0 1.5rem;
584 | }
585 | .product-card {
586 | cursor: pointer;
587 | transform: scale(1, 1);
588 | transition: transform 0.5s ease;
589 | color: var(--first-color);
590 | width: 250px;
591 | overflow: hidden;
592 | }
593 | .product-card:hover {
594 | transform: scale(1.1, 1.1);
595 | }
596 | .product-image {
597 | border-radius: 15px;
598 | background-color: var(--bg-color-light);
599 | transform: scale(1, 1);
600 | transition: transform 0.5s ease;
601 | object-fit: contain;
602 | }
603 |
604 | .product-name {
605 | font-weight: 500;
606 | }
607 | .product-manufacturer {
608 | color: var(--first-color-lighter);
609 | }
610 | .product-price {
611 | font-weight: 800;
612 | margin-top: 6px;
613 | color: var(--text-color);
614 | }
615 |
616 | .products-heading {
617 | text-align: center;
618 | margin: 40px 0px;
619 | color: var(--first-color);
620 | }
621 | .products-heading h2 {
622 | font-size: 40px;
623 | font-weight: 800;
624 | }
625 | .products-heading p {
626 | font-size: 16px;
627 | font-weight: 200;
628 | }
629 | .footer-banner-container {
630 | padding: 100px 40px;
631 | background-color: var(--first-color);
632 | border-radius: 15px;
633 | position: relative;
634 | height: 450px;
635 | max-width: 1300px;
636 | margin-left: auto;
637 | margin-right: auto;
638 | line-height: 1;
639 | color: var(--text-color);
640 | width: 95%;
641 | margin-top: 80px;
642 | overflow: hidden;
643 | z-index: 4;
644 | }
645 | .banner-desc {
646 | display: flex;
647 | justify-content: flex-start;
648 | max-width: 100%;
649 | }
650 | .banner-desc button {
651 | border-radius: 15px;
652 | padding: 10px 16px;
653 | background-color: var(--text-color);
654 | color: var(--first-color);
655 | border: none;
656 | margin-top: 40px;
657 | font-size: 20px;
658 | font-weight: var(--font-bold);
659 | cursor: pointer;
660 | }
661 | .banner-desc .left {
662 | max-width: 340px;
663 | }
664 | .banner-desc .left h3 {
665 | font-weight: 900;
666 | font-size: 70px;
667 | margin-left: 25px;
668 | }
669 | .banner-desc .left p {
670 | margin: 18px;
671 | }
672 | .footer-banner-image {
673 | position: absolute;
674 | /* top: -35%;
675 | left: 8%; */
676 | top: -15%;
677 | right: 0;
678 | width: 550px;
679 | height: 550px;
680 | object-fit: contain;
681 | pointer-events: none;
682 | z-index: -1;
683 | }
684 | .banner-desc .right {
685 | line-height: 1.4;
686 | max-width: 100%;
687 | }
688 | .banner-desc .right h3 {
689 | font-weight: 800;
690 | font-size: 60px;
691 | }
692 | .banner-desc .right p {
693 | font-size: 23px;
694 | max-width: 750px;
695 | }
696 | /* .banner-desc .right .company-desc{
697 | font-size: 14px;
698 | font-weight: 300;
699 | } */
700 | .light-theme .light-theme .banner-desc button {
701 | color: var(--first-color);
702 | }
703 | .light-theme .hero-banner-container button,
704 | .light-theme .footer-banner-container {
705 | color: var(--bg-color);
706 | }
707 | .light-theme .link-search-products-container .checkout-products,
708 | .light-theme .link-search-products-container svg {
709 | color: var(--bg-color);
710 | }
711 | .light-theme .footer-banner-container button {
712 | background-color: var(--bg-color);
713 | }
714 | .light-theme .hero-banner-container .desc p {
715 | color: var(--secondary-color-darker);
716 | }
717 |
718 | .cart-wrapper {
719 | width: 100vw;
720 | background: rgba(0, 0, 0, 0.5);
721 | position: fixed;
722 | right: 0;
723 | top: 0;
724 | z-index: 100;
725 | /* will-change: transform; */
726 | transition: all 1s ease-in-out;
727 | }
728 | .cart-container {
729 | height: 100vh;
730 | width: 600px;
731 | background-color: var(--bg-color);
732 | float: right;
733 | padding: 40px 10px;
734 | position: relative;
735 | }
736 |
737 | .footer-container {
738 | color: var(--text-color);
739 | background-color: var(--bg-color);
740 | text-align: center;
741 | padding: 30px 10px;
742 | font-weight: 700;
743 | display: flex;
744 | flex-direction: column;
745 | align-items: center;
746 | gap: 10px;
747 | justify-content: center;
748 | min-height: 156px;
749 | }
750 | .footer-container .icons {
751 | font-size: 30px;
752 | display: flex;
753 | gap: 10px;
754 | }
755 | .cart-heading {
756 | display: flex;
757 | align-items: center;
758 | font-size: 18px;
759 | font-weight: 500;
760 | cursor: pointer;
761 | gap: 2px;
762 | margin-left: 10px;
763 | border: none;
764 | background-color: transparent;
765 | color: var(--text-color);
766 | }
767 |
768 | .cart-heading .heading {
769 | margin-left: 10px;
770 | color: var(--text-color);
771 | }
772 | .cart-num-items {
773 | margin-left: 10px;
774 | color: var(--first-color);
775 | }
776 | .empty-cart {
777 | margin: 40px;
778 | text-align: center;
779 | color: var(--text-color);
780 | }
781 | .empty-cart h3 {
782 | font-weight: 600;
783 | font-size: 20px;
784 | }
785 | .cancel {
786 | cursor: pointer;
787 | }
788 | .shop-container {
789 | display: flex;
790 | flex-direction: column;
791 | justify-content: center;
792 | align-items: center;
793 | }
794 | .product-container {
795 | margin-top: 15px;
796 | overflow: auto;
797 | max-height: 70vh;
798 | padding: 20px 10px;
799 | }
800 | .search-label {
801 | margin-bottom: 1rem;
802 | font-size: var(--h1-font-size);
803 | font-weight: var(--font-bold);
804 | line-height: 1.75rem;
805 | text-align: center;
806 | color: var(--text-color);
807 | }
808 | .products-search {
809 | margin-top: 0.6rem;
810 | height: 2rem;
811 | width: 90%;
812 | max-width: 800px;
813 | border-radius: 8px;
814 | font-size: 1.2rem;
815 | transition: all 0.4s ease;
816 | }
817 |
818 | .products-search:focus {
819 | outline: none;
820 | border: 3px solid var(--first-color);
821 | box-shadow: 0 0 10px var(--first-color);
822 | }
823 |
824 | .product {
825 | display: flex;
826 | gap: 30px;
827 | padding: 20px;
828 | }
829 | .product .cart-product-image {
830 | width: 150px;
831 | height: 150px;
832 | border-radius: 15px;
833 | background-color: #ebebeb;
834 | object-fit: contain;
835 | }
836 | .item-desc .flex {
837 | display: flex;
838 | justify-content: space-between;
839 | width: 350px;
840 | color: var(--text-color);
841 | }
842 | .item-desc .bottom {
843 | margin-top: 60px;
844 | }
845 | .flex h5 {
846 | font-size: 24px;
847 | }
848 | .flex h4 {
849 | font-size: 20px;
850 | }
851 | .total {
852 | display: flex;
853 | justify-content: space-between;
854 | color: var(--text-color);
855 | }
856 | .total h3 {
857 | font-size: 22px;
858 | }
859 | .remove-item {
860 | font-size: 24px;
861 | color: #f02d34;
862 | cursor: pointer;
863 | background: transparent;
864 | border: none;
865 | }
866 | .cart-bottom {
867 | position: absolute;
868 | bottom: 12px;
869 | right: 5px;
870 | width: 100%;
871 | padding: 30px 65px;
872 | }
873 |
874 | .btn-container {
875 | width: 400px;
876 | margin: auto;
877 | }
878 | .btn {
879 | width: 100%;
880 | max-width: 400px;
881 | padding: 10px 12px;
882 | border-radius: 15px;
883 | border: none;
884 | font-size: 20px;
885 | margin-top: 40px;
886 | text-transform: uppercase;
887 | background-color: var(--first-color);
888 | color: var(--text-color);
889 | cursor: pointer;
890 | transform: scale(1, 1);
891 | transition: transform 0.5s ease;
892 | }
893 | .btn:hover {
894 | transform: scale(1.1, 1.1);
895 | }
896 |
897 | .product-detail-container {
898 | display: flex;
899 | max-width: 1400px;
900 | gap: 40px;
901 | margin: auto;
902 | margin-top: 60px;
903 | color: var(--text-color);
904 | /* overflow: hidden; */
905 | }
906 |
907 | .product-detail-image {
908 | border-radius: 15px;
909 | background-color: #ebebeb;
910 |
911 | width: 400px;
912 | height: 400px;
913 | cursor: pointer;
914 | transition: 0.3s ease-in-out;
915 | object-fit: contain;
916 | }
917 | .product-detail-image:hover {
918 | background-color: var(--first-color);
919 | }
920 | .small-images-container {
921 | display: flex;
922 | gap: 10px;
923 | margin-top: 20px;
924 | }
925 | .small-image {
926 | border-radius: 8px;
927 | background-color: #ebebeb;
928 | width: 70px;
929 | height: 70px;
930 | cursor: pointer;
931 | }
932 |
933 | .selected-image {
934 | background-color: var(--first-color);
935 | }
936 | .reviews {
937 | color: var(--first-color);
938 | margin-top: 10px;
939 | display: flex;
940 | gap: 5px;
941 | align-items: center;
942 | }
943 |
944 | .product-detail-desc h4 {
945 | margin-top: 10px;
946 | }
947 | .product-detail-desc p {
948 | margin-top: 10px;
949 | }
950 | .reviews p {
951 | color: var(--text-color);
952 | margin-top: 0px;
953 | }
954 | .product-detail-desc .price {
955 | font-weight: 700;
956 | font-size: 26px;
957 | margin-top: 30px;
958 | color: var(--first-color);
959 | }
960 | .price .old-price,
961 | .product-price .old-price,
962 | .price .old-price {
963 | color: gray;
964 | text-decoration: line-through;
965 | }
966 | .product-detail-desc .quantity {
967 | display: flex;
968 | gap: 20px;
969 | margin-top: 10px;
970 | align-items: center;
971 | }
972 | .product-detail-desc .buttons {
973 | display: flex;
974 | gap: 30px;
975 | }
976 | .buttons .add-to-cart {
977 | padding: 10px 20px;
978 | border: 1px solid var(--first-color);
979 | margin-top: 40px;
980 | font-size: 18px;
981 | font-weight: 500;
982 | background-color: white;
983 | color: var(--first-color-alt);
984 | cursor: pointer;
985 | width: 200px;
986 | transform: scale(1, 1);
987 | transition: transform 0.5s ease;
988 | border-radius: 0.5rem;
989 | }
990 | .buttons .add-to-cart:hover {
991 | transform: scale(1.1, 1.1);
992 | }
993 | .buttons .buy-now {
994 | width: 200px;
995 |
996 | padding: 10px 20px;
997 | background-color: var(--first-color-alt);
998 | color: white;
999 | border: none;
1000 | margin-top: 40px;
1001 | font-size: 18px;
1002 | font-weight: 500;
1003 | cursor: pointer;
1004 | transform: scale(1, 1);
1005 | transition: transform 0.5s ease;
1006 | border-radius: 0.5rem;
1007 | }
1008 | .buttons .buy-now:hover {
1009 | transform: scale(1.1, 1.1);
1010 | }
1011 | .quantity-desc {
1012 | border: 1px solid gray;
1013 | padding: 6px;
1014 | }
1015 | .quantity-desc span {
1016 | font-size: 16px;
1017 | padding: 6px 12px;
1018 | cursor: pointer;
1019 | }
1020 | .quantity-desc .minus {
1021 | border-right: 1px solid gray;
1022 | color: var(--first-color);
1023 | }
1024 | .quantity-desc .num {
1025 | border-right: 1px solid gray;
1026 | font-size: 20px;
1027 | }
1028 | .quantity-desc .plus {
1029 | color: var(--first-color);
1030 | }
1031 |
1032 | .maylike-products-wrapper {
1033 | margin-top: 120px;
1034 | }
1035 | .maylike-products-wrapper h2 {
1036 | text-align: center;
1037 | margin: 50px;
1038 | color: var(--text-color);
1039 |
1040 | font-size: 28px;
1041 | }
1042 | .maylike-products-container {
1043 | display: flex;
1044 | justify-content: center;
1045 | gap: 15px;
1046 | margin-top: 20px;
1047 | }
1048 | .max-qty {
1049 | font-weight: 500;
1050 | color: var(--first-color);
1051 | }
1052 | .success-wrapper,
1053 | .cancel-wrapper {
1054 | background-color: var(--bg-color);
1055 | min-height: 60vh;
1056 | /* height: 40rem; */
1057 | /* max-height: 90vh; */
1058 |
1059 | /* height: 800px; */
1060 | color: var(--text-color);
1061 | margin-top: 20vh;
1062 | }
1063 | .success,
1064 | .cancel {
1065 | width: 1000px;
1066 | max-width: 95%;
1067 | margin: auto;
1068 | margin-top: 160px;
1069 | background-color: var(--secondary-color-darker);
1070 | padding: 50px;
1071 | border-radius: 15px;
1072 | display: flex;
1073 | justify-content: center;
1074 | align-items: center;
1075 | flex-direction: column;
1076 | }
1077 |
1078 | .success .icon {
1079 | color: green;
1080 | font-size: 40px;
1081 | }
1082 | .success h2 {
1083 | text-transform: capitalize;
1084 | margin-top: 15px 0px;
1085 | font-weight: 900;
1086 | font-size: 40px;
1087 | color: var(--text-color);
1088 | }
1089 | .success .email-msg {
1090 | font-size: var(--h3-font-size);
1091 | font-weight: 600;
1092 | text-align: center;
1093 | }
1094 | .cancel p {
1095 | font-size: 20px;
1096 | font-weight: 600;
1097 | }
1098 | .success .description {
1099 | font-size: var(--h3-font-size);
1100 | font-weight: 600;
1101 | text-align: center;
1102 | margin: 10px;
1103 | margin-top: 30px;
1104 | }
1105 | .success .description .email {
1106 | margin-left: 5px;
1107 | color: var(--first-color-lighter);
1108 | }
1109 | .product-max-qty {
1110 | margin-top: 10px;
1111 | }
1112 |
1113 | .category-menu-container {
1114 | min-width: 700px;
1115 | max-width: 1100px;
1116 | display: flex;
1117 | flex-wrap: wrap;
1118 | color: var(--text-color);
1119 | margin: auto;
1120 | justify-content: center;
1121 | align-items: center;
1122 | }
1123 | .category-menu-item {
1124 | height: 400px;
1125 | min-width: 550px;
1126 | /* width: 550px; */
1127 | /* max-width: 550px; */
1128 | border-style: solid;
1129 | border-width: 0.05rem;
1130 | border-color: var(--secondary-color);
1131 | overflow: hidden;
1132 | position: relative;
1133 | z-index: 2;
1134 | }
1135 | .category-menu-text {
1136 | position: absolute;
1137 | top: 8%;
1138 | left: 8%;
1139 | font-size: 1.2rem;
1140 | }
1141 |
1142 | .category-menu-lowest-price {
1143 | position: absolute;
1144 | top: 15%;
1145 | left: 8%;
1146 | color: var(--first-color);
1147 | font-weight: var(--font-bold);
1148 | font-size: 1.8rem;
1149 | }
1150 | .category-menu-bg-text {
1151 | position: absolute;
1152 | color: var(--secondary-color-darker);
1153 | top: 40%;
1154 | left: -7%;
1155 | font-size: 9rem;
1156 | font-weight: bolder;
1157 | opacity: 0.45;
1158 | z-index: -3;
1159 | }
1160 | .category-menu-item h1 {
1161 | position: absolute;
1162 | bottom: 30%;
1163 | left: 5%;
1164 | font-size: 2.5rem;
1165 | }
1166 | .category-item-image {
1167 | position: absolute;
1168 | height: 500px;
1169 | width: 500px;
1170 | object-fit: contain;
1171 | z-index: -1;
1172 | }
1173 | .category-menu-button-container {
1174 | position: absolute;
1175 | bottom: 5%;
1176 | left: 8%;
1177 | display: flex;
1178 | justify-content: center;
1179 | align-items: center;
1180 | gap: 0.5rem;
1181 | cursor: pointer;
1182 | transition: 0.2s ease-in-out;
1183 | }
1184 | .category-menu-button-container:hover {
1185 | left: 10%;
1186 | }
1187 |
1188 | .category-arrow-icon {
1189 | color: var(--first-color);
1190 | font-size: 2.5rem;
1191 | }
1192 | .featured-items-container {
1193 | position: relative;
1194 | display: flex;
1195 | align-items: center;
1196 | justify-content: center;
1197 | flex-wrap: wrap;
1198 | min-height: 550px;
1199 | max-width: 1100px;
1200 | overflow: hidden;
1201 | z-index: 4;
1202 | margin: auto;
1203 | }
1204 |
1205 | .featured-product-card {
1206 | cursor: pointer;
1207 | transform: scale(1, 1);
1208 | transition: transform 0.5s ease;
1209 | color: var(--first-color);
1210 | width: 250px;
1211 | display: flex;
1212 | flex-direction: column;
1213 | align-items: center;
1214 | font-size: var(--h2-font-size);
1215 | margin: 0.5rem 0.5rem;
1216 | }
1217 | .featured-product-card:hover {
1218 | transform: scale(1.1, 1.1);
1219 | }
1220 | .featured-product-image {
1221 | transform: scale(1, 1);
1222 | transition: transform 0.5s ease;
1223 | object-fit: contain;
1224 | }
1225 |
1226 | .featured-product-name {
1227 | font-weight: 500;
1228 | white-space: nowrap;
1229 | overflow: hidden;
1230 | text-overflow: ellipsis;
1231 | }
1232 | .featured-product-manufacturer {
1233 | color: var(--first-color-lighter);
1234 | }
1235 | .featured-product-price {
1236 | font-weight: 800;
1237 | margin-top: 6px;
1238 | color: var(--text-color);
1239 | }
1240 |
1241 | .rotate {
1242 | transform: rotate(90deg);
1243 | }
1244 | .featured-product-button-container {
1245 | display: flex;
1246 | justify-content: center;
1247 | align-items: center;
1248 | column-gap: 0.5rem;
1249 | margin-top: 0.45rem;
1250 | }
1251 | .featured-product-button-text {
1252 | color: var(--text-color);
1253 | }
1254 | .featured-arrow-icon {
1255 | font-size: 2rem;
1256 | }
1257 | .featured-top-text {
1258 | position: absolute;
1259 | top: 7%;
1260 | left: 4%;
1261 | color: var(--text-color);
1262 | font-size: 2.5rem;
1263 | margin-bottom: 1rem;
1264 | }
1265 | .featured-bg-text {
1266 | position: absolute;
1267 | color: var(--secondary-color-darker);
1268 | font-size: 16rem;
1269 | font-weight: bolder;
1270 | left: 0;
1271 | right: 0;
1272 | margin-left: auto;
1273 | margin-right: auto;
1274 | /* overflow: hidden; */
1275 | width: 1100px;
1276 | opacity: 0.45;
1277 | z-index: -3;
1278 | }
1279 |
1280 | .link-search-products-container {
1281 | display: flex;
1282 | align-items: center;
1283 | justify-content: center;
1284 | margin: 3rem auto;
1285 | column-gap: 1rem;
1286 | cursor: pointer;
1287 | max-width: max-content;
1288 | padding: 0.85rem;
1289 | border-radius: 15px;
1290 | background-color: var(--first-color);
1291 | }
1292 | .checkout-products {
1293 | font-size: 2.5rem;
1294 | color: var(--text-color);
1295 | }
1296 | .checkout-arrow-icon {
1297 | color: var(--text-color);
1298 | font-size: 2.8rem;
1299 | transition: 0.2s ease-in-out;
1300 | }
1301 | .link-search-products-container:hover .checkout-arrow-icon {
1302 | transform: translateX(0.5rem);
1303 | }
1304 |
1305 | .login-form-container,
1306 | .register-form-container {
1307 | margin: 24vh auto;
1308 | max-width: 400px;
1309 | color: var(--text-color);
1310 | font-size: var(--h2-font-size);
1311 | /* height: 65vh; */
1312 | }
1313 | .login-form-top-text,
1314 | .register-form-top-text {
1315 | margin-bottom: 1rem;
1316 | font-size: var(--h1-font-size);
1317 | font-weight: var(--font-bold);
1318 | line-height: 1.75rem;
1319 | text-align: center;
1320 | }
1321 | .login-email,
1322 | .login-password,
1323 | .login-button {
1324 | margin-bottom: 1rem;
1325 | }
1326 | .email-input,
1327 | .password-input {
1328 | margin-top: 0.6rem;
1329 | height: 2rem;
1330 | width: 100%;
1331 | border-radius: 8px;
1332 | font-size: 1.2rem;
1333 | transition: all 0.4s ease;
1334 | }
1335 |
1336 | .email-input:focus,
1337 | .password-input:focus {
1338 | outline: none;
1339 | border: 3px solid var(--first-color);
1340 | box-shadow: 0 0 10px var(--first-color);
1341 | }
1342 |
1343 | .login-btn {
1344 | border-radius: 15px;
1345 | background-color: var(--first-color);
1346 | font-size: 1.5rem;
1347 | border-style: none;
1348 | color: var(--text-color);
1349 | padding: 0.4rem;
1350 | width: 7rem;
1351 | cursor: pointer;
1352 | }
1353 | .login-botton-text .link,
1354 | .dropdown-button {
1355 | color: var(--first-color);
1356 | }
1357 | .register-input-item {
1358 | margin-bottom: 1rem;
1359 | }
1360 | .register-input {
1361 | margin-top: 0.6rem;
1362 | height: 2rem;
1363 | width: 100%;
1364 | border-radius: 8px;
1365 | font-size: 1.2rem;
1366 | transition: all 0.4s ease;
1367 | }
1368 | .register-input:focus {
1369 | outline: none;
1370 | border: 3px solid var(--first-color);
1371 | box-shadow: 0 0 10px var(--first-color);
1372 | }
1373 | .dropdown-button {
1374 | display: flex;
1375 | background-color: var(--bg-color);
1376 | border-style: none;
1377 | font-size: 1.2rem;
1378 | justify-content: center;
1379 | align-items: center;
1380 | cursor: pointer;
1381 | }
1382 | .dropdown-menu-container {
1383 | position: relative;
1384 | display: inline-block;
1385 | background-color: var(--bg-color);
1386 | }
1387 | .dropdown-menu-items {
1388 | position: absolute;
1389 | padding-right: 0;
1390 | right: 0;
1391 | top: 2rem;
1392 | z-index: 3;
1393 | background-color: var(--bg-color);
1394 | border-style: solid;
1395 | border-color: var(--first-color);
1396 | border-radius: 10px;
1397 | }
1398 | .dropdown-menu-item {
1399 | display: block;
1400 | min-width: 150px;
1401 | text-align: left;
1402 | padding-top: 0.5rem;
1403 | padding-left: 0.4rem;
1404 | clear: both;
1405 | width: 100%;
1406 | margin-bottom: 0.5rem;
1407 | transition: all 0.3s ease;
1408 | }
1409 | .dropdown-menu-item:hover {
1410 | padding-left: 0.8rem;
1411 | color: var(--first-color);
1412 | }
1413 | .dropdown-button-text {
1414 | margin-left: 4px;
1415 | }
1416 | .checkout-container {
1417 | padding-top: 12vh;
1418 | padding-bottom: 12vh;
1419 | }
1420 | .shipping-form-container {
1421 | margin: auto auto;
1422 | max-width: 600px;
1423 | color: var(--text-color);
1424 | font-size: var(--h2-font-size);
1425 | /* height: 65vh; */
1426 | }
1427 | .checkout-title-text {
1428 | margin-top: 1rem;
1429 | margin-bottom: 1rem;
1430 | padding-top: 2rem;
1431 | padding-bottom: 0.8rem;
1432 | /* padding-bottom: 2rem; */
1433 | font-size: 2rem;
1434 | font-weight: var(--font-bold);
1435 | /* line-height: 1.75rem; */
1436 | text-align: center;
1437 | border-bottom: 4px solid var(--first-color);
1438 | }
1439 | .shipping-form-item {
1440 | margin-bottom: 1rem;
1441 | display: flex;
1442 | flex-direction: column;
1443 | justify-content: flex-start;
1444 | }
1445 | .shipping-form-item label {
1446 | margin-bottom: 0.8rem;
1447 | }
1448 |
1449 | .shipping-form-item input {
1450 | margin-top: 0.6rem;
1451 | height: 2rem;
1452 | width: 100%;
1453 | border-radius: 8px;
1454 | font-size: 1.2rem;
1455 | transition: all 0.4s ease;
1456 | }
1457 | .shipping-form-item input:focus {
1458 | outline: none;
1459 | border: 3px solid var(--first-color);
1460 | box-shadow: 0 0 10px var(--first-color);
1461 | }
1462 | .input-error-message {
1463 | color: #e44e53;
1464 | }
1465 | .checkout-cart-bottom {
1466 | /* position: absolute; */
1467 | bottom: 12px;
1468 | right: 5px;
1469 | width: 100%;
1470 | padding: 30px 65px;
1471 | }
1472 | .place-order-button {
1473 | display: flex;
1474 | justify-content: center;
1475 | }
1476 | .order-history-title {
1477 | color: var(--text-color);
1478 | }
1479 | .table-container {
1480 | color: var(--text-color);
1481 | overflow: auto;
1482 | }
1483 | .column-title {
1484 | text-align: left;
1485 | padding: 1.3rem;
1486 | }
1487 | .table {
1488 | font-size: 1.4rem;
1489 | margin-bottom: 2rem;
1490 | border-collapse: collapse;
1491 | border-radius: 15px;
1492 | /* box-shadow: 0 0 12px 5px var(--first-color); */
1493 | border: 0.2rem solid var(--first-color);
1494 | }
1495 | .table-head {
1496 | background-color: var(--first-color);
1497 | /* ba */
1498 | /* border-color: var(--first-color); */
1499 | }
1500 | .table-item {
1501 | padding: 1.4rem;
1502 | }
1503 | .table-row {
1504 | border: 0.1px solid var(--first-color);
1505 | /* color: var(--first-color); */
1506 | }
1507 | .table-row .details {
1508 | color: var(--first-color);
1509 | }
1510 | .order-history-empty {
1511 | font-size: 1.2rem;
1512 | }
1513 | .order-history {
1514 | min-height: 30vh;
1515 | overflow: auto;
1516 | }
1517 |
1518 | .profile-container {
1519 | max-width: 1100px;
1520 | margin: 0.5rem auto;
1521 | color: var(--text-color);
1522 | margin-left: 15vw;
1523 | }
1524 | .profile-title {
1525 | margin-top: 10vh;
1526 | margin-bottom: 0.7rem;
1527 | font-size: 2rem;
1528 | }
1529 | .update-input {
1530 | margin-bottom: 1.5rem;
1531 | max-width: 350px;
1532 | font-size: 1.2rem;
1533 | }
1534 | .update-button {
1535 | max-width: 400px;
1536 | }
1537 |
1538 | .update-btn {
1539 | width: 90%;
1540 | max-width: 220px;
1541 | padding: 10px 12px;
1542 | border-radius: 15px;
1543 | border: none;
1544 | font-size: 1.2rem;
1545 | margin-top: 16px;
1546 | /* text-transform: uppercase; */
1547 | background-color: var(--first-color);
1548 | color: var(--text-color);
1549 | cursor: pointer;
1550 | transform: scale(1, 1);
1551 | transition: transform 0.5s ease;
1552 | }
1553 | .update-btn:hover {
1554 | transform: scale(1.1, 1.1);
1555 | }
1556 | .order-details-container {
1557 | margin-top: 10vh;
1558 | margin-left: 5vw;
1559 | color: var(--text-color);
1560 | max-width: 740px;
1561 | width: 80vw;
1562 | margin-right: auto;
1563 | margin-left: auto;
1564 | }
1565 | .order-details-title {
1566 | margin-bottom: 1rem;
1567 | font-size: 2rem;
1568 | }
1569 | .order-details-address {
1570 | font-size: 1.2rem;
1571 | margin-bottom: 0.9rem;
1572 | }
1573 | .order-details-id {
1574 | font-size: 1.2rem;
1575 | margin-bottom: 1rem;
1576 | }
1577 | .order-details-subtitle {
1578 | font-size: 1.6rem;
1579 | margin: 1.5rem 0;
1580 | border-bottom: 3px solid var(--first-color);
1581 | padding-bottom: 0.3rem;
1582 | }
1583 | .order-details-image-container {
1584 | display: flex;
1585 | justify-content: center;
1586 | align-items: center;
1587 | }
1588 | .order-details-card {
1589 | margin-top: 1.5rem;
1590 | border: 3px solid var(--first-color);
1591 | padding: 0.3rem;
1592 | width: max-content;
1593 | border-radius: 15px;
1594 | }
1595 | .order-details-table-container {
1596 | width: 100%;
1597 | overflow: scroll;
1598 | }
1599 | .order-details-table-head {
1600 | font-size: 1.3rem;
1601 | }
1602 | .order-details-table-body {
1603 | font-size: 1.1rem;
1604 | }
1605 |
1606 | .order-details-table-column-item,
1607 | .order-details-table-column-title {
1608 | text-align: center;
1609 | padding: 0.8rem;
1610 | }
1611 | .order-details-summary {
1612 | width: 180px;
1613 | }
1614 | .order-details-summary-item {
1615 | display: flex;
1616 | justify-content: space-between;
1617 | margin-bottom: 0.8rem;
1618 | }
1619 | .order-details-summary-item.bold {
1620 | font-size: 1.2rem;
1621 | font-weight: var(--font-bold);
1622 | }
1623 | .order-details-payment {
1624 | font-size: 1.2rem;
1625 | }
1626 | .unauthorized-page-container{
1627 | min-height: 70vh;
1628 | margin: auto;
1629 | color: var(--text-color);
1630 | display: flex;
1631 | align-items: center;
1632 | justify-content: center;
1633 | }
1634 | .unauthorized-title{
1635 | font-size: 2.5rem;
1636 | text-align: center;
1637 | }
1638 | .unauthorized-message{
1639 | font-size: 1.4rem;
1640 | text-align: center;
1641 | }
1642 | /* ==============Loader Component=========== */
1643 | .loader-container {
1644 | margin: 0;
1645 | padding: 0;
1646 | box-sizing: border-box;
1647 | display: flex;
1648 | justify-content: center;
1649 | align-items: center;
1650 | min-height: 50vh;
1651 | background-color: var(--bg-color);
1652 | /* animation: animateBg 10s linear infinite; */
1653 | }
1654 | /* @keyframes animateBg {
1655 | 0%
1656 | {
1657 | filter: hue-rotate(0deg);
1658 | }
1659 |
1660 | } */
1661 |
1662 | .loader-container .loader {
1663 | position: relative;
1664 | width: 120px;
1665 | height: 120px;
1666 | }
1667 | .loader-container .loader span {
1668 | position: absolute;
1669 | top: 0;
1670 | left: 0;
1671 | width: 100%;
1672 | height: 100%;
1673 | }
1674 | /* if there is a better way to do this without SASS let know */
1675 | .loader-container .loader :nth-child(1) {
1676 | transform: rotate(calc(18deg * 1));
1677 | }
1678 | .loader-container .loader :nth-child(2) {
1679 | transform: rotate(calc(18deg * 2));
1680 | }
1681 | .loader-container .loader :nth-child(3) {
1682 | transform: rotate(calc(18deg * 3));
1683 | }
1684 | .loader-container .loader :nth-child(4) {
1685 | transform: rotate(calc(18deg * 4));
1686 | }
1687 | .loader-container .loader :nth-child(5) {
1688 | transform: rotate(calc(18deg * 5));
1689 | }
1690 | .loader-container .loader :nth-child(6) {
1691 | transform: rotate(calc(18deg * 6));
1692 | }
1693 | .loader-container .loader :nth-child(7) {
1694 | transform: rotate(calc(18deg * 7));
1695 | }
1696 | .loader-container .loader :nth-child(8) {
1697 | transform: rotate(calc(18deg * 8));
1698 | }
1699 | .loader-container .loader :nth-child(9) {
1700 | transform: rotate(calc(18deg * 9));
1701 | }
1702 | .loader-container .loader :nth-child(10) {
1703 | transform: rotate(calc(18deg * 10));
1704 | }
1705 | .loader-container .loader :nth-child(11) {
1706 | transform: rotate(calc(18deg * 11));
1707 | }
1708 | .loader-container .loader :nth-child(12) {
1709 | transform: rotate(calc(18deg * 12));
1710 | }
1711 | .loader-container .loader :nth-child(13) {
1712 | transform: rotate(calc(18deg * 13));
1713 | }
1714 | .loader-container .loader :nth-child(14) {
1715 | transform: rotate(calc(18deg * 14));
1716 | }
1717 | .loader-container .loader :nth-child(15) {
1718 | transform: rotate(calc(18deg * 15));
1719 | }
1720 | .loader-container .loader :nth-child(16) {
1721 | transform: rotate(calc(18deg * 16));
1722 | }
1723 | .loader-container .loader :nth-child(17) {
1724 | transform: rotate(calc(18deg * 17));
1725 | }
1726 | .loader-container .loader :nth-child(18) {
1727 | transform: rotate(calc(18deg * 18));
1728 | }
1729 | .loader-container .loader :nth-child(19) {
1730 | transform: rotate(calc(18deg * 19));
1731 | }
1732 | .loader-container .loader :nth-child(20) {
1733 | transform: rotate(calc(18deg * 20));
1734 | }
1735 | .loader-container .loader :nth-child(1)::before {
1736 | animation-delay: calc(0.1s * 1);
1737 | }
1738 | .loader-container .loader :nth-child(2)::before {
1739 | animation-delay: calc(0.1s * 2);
1740 | }
1741 | .loader-container .loader :nth-child(3)::before {
1742 | animation-delay: calc(0.1s * 3);
1743 | }
1744 | .loader-container .loader :nth-child(4)::before {
1745 | animation-delay: calc(0.1s * 4);
1746 | }
1747 | .loader-container .loader :nth-child(5)::before {
1748 | animation-delay: calc(0.1s * 5);
1749 | }
1750 | .loader-container .loader :nth-child(6)::before {
1751 | animation-delay: calc(0.1s * 6);
1752 | }
1753 | .loader-container .loader :nth-child(7)::before {
1754 | animation-delay: calc(0.1s * 7);
1755 | }
1756 | .loader-container .loader :nth-child(8)::before {
1757 | animation-delay: calc(0.1s * 8);
1758 | }
1759 | .loader-container .loader :nth-child(9)::before {
1760 | animation-delay: calc(0.1s * 9);
1761 | }
1762 | .loader-container .loader :nth-child(10)::before {
1763 | animation-delay: calc(0.1s * 10);
1764 | }
1765 | .loader-container .loader :nth-child(11)::before {
1766 | animation-delay: calc(0.1s * 11);
1767 | }
1768 | .loader-container .loader :nth-child(12)::before {
1769 | animation-delay: calc(0.1s * 12);
1770 | }
1771 | .loader-container .loader :nth-child(13)::before {
1772 | animation-delay: calc(0.1s * 13);
1773 | }
1774 | .loader-container .loader :nth-child(14)::before {
1775 | animation-delay: calc(0.1s * 14);
1776 | }
1777 | .loader-container .loader :nth-child(15)::before {
1778 | animation-delay: calc(0.1s * 15);
1779 | }
1780 | .loader-container .loader :nth-child(16)::before {
1781 | animation-delay: calc(0.1s * 16);
1782 | }
1783 | .loader-container .loader :nth-child(17)::before {
1784 | animation-delay: calc(0.1s * 17);
1785 | }
1786 | .loader-container .loader :nth-child(18)::before {
1787 | animation-delay: calc(0.1s * 18);
1788 | }
1789 | .loader-container .loader :nth-child(19)::before {
1790 | animation-delay: calc(0.1s * 19);
1791 | }
1792 | .loader-container .loader :nth-child(20)::before {
1793 | animation-delay: calc(0.1s * 20);
1794 | }
1795 | .loader-container .loader span::before {
1796 | content: "";
1797 | position: absolute;
1798 | top: 0;
1799 | left: 0;
1800 | width: 15px;
1801 | height: 15px;
1802 | border-radius: 50%;
1803 | background-color: var(--first-color);
1804 | box-shadow: 0 0 10px var(--first-color), 0 0 20px var(--first-color),
1805 | 0 0 40px var(--first-color), 0 0 60px var(--first-color),
1806 | 0 0 80px var(--first-color), 0 0 100px var(--first-color);
1807 | animation: animate 2s linear infinite;
1808 | animation-delay: calc();
1809 | }
1810 | .btn.show-filters-btn {
1811 | display: none;
1812 | }
1813 | @keyframes animate {
1814 | 0% {
1815 | transform: scale(1);
1816 | }
1817 | 80%,
1818 | 100% {
1819 | transform: scale(0);
1820 | }
1821 | }
1822 | @media screen and (max-width: 1066px) {
1823 | .footer-banner-container {
1824 | height: 500px;
1825 | }
1826 | .btn.show-filters-btn{
1827 | width: 180px;
1828 | font-size: 1rem;
1829 | display: inline;
1830 | }
1831 |
1832 | .banner-desc h3 {
1833 | font-size: 20px;
1834 | }
1835 | .banner-desc .right p {
1836 | display: -webkit-box;
1837 | overflow: hidden;
1838 | -webkit-line-clamp: 4;
1839 | line-clamp: 4;
1840 | -webkit-box-orient: vertical;
1841 | }
1842 |
1843 | .featured-items-container {
1844 | padding-top: 4rem;
1845 | max-width: 760px;
1846 | }
1847 | .featured-bg-text {
1848 | font-size: 10rem;
1849 | }
1850 | .featured-top-text {
1851 | /* position: absolute; */
1852 | top: 3%;
1853 | left: 4%;
1854 | font-size: 2rem;
1855 | }
1856 | .closed .products-filters {
1857 | display: none;
1858 | }
1859 | .show-filter-btn {
1860 | display: inline-block;
1861 | }
1862 | .products-container.closed {
1863 | justify-content: center;
1864 | }
1865 | /* .closed .products-filters{
1866 | display: none;
1867 | } */
1868 | }
1869 | @media screen and (max-width: 880px) {
1870 | .buttons .add-to-cart {
1871 | width: 150px;
1872 | }
1873 | .buttons .buy-now {
1874 | width: 150px;
1875 | }
1876 | .navbar-buttons-container,
1877 | .dropdown-button-text,
1878 | .dropdown-menu-container,
1879 | .login {
1880 | display: none;
1881 | }
1882 | .navbar-hamburger-container {
1883 | display: block;
1884 | }
1885 | }
1886 |
1887 | @media screen and (max-width: 768px) {
1888 | .hero-banner-container {
1889 | height: 560px;
1890 | overflow: hidden;
1891 | }
1892 | .hero-banner-image {
1893 | width: 80%;
1894 | height: 73%;
1895 | top: 12%;
1896 | right: 15%;
1897 | }
1898 |
1899 | .hero-banner-container {
1900 | line-height: 1.3;
1901 | }
1902 | .hero-banner-container h1 {
1903 | font-size: 60px;
1904 | }
1905 | .hero-banner-container h3 {
1906 | font-size: 40px;
1907 | }
1908 | .hero-banner-container button {
1909 | margin-top: 90px;
1910 | z-index: 10000;
1911 | }
1912 | .desc {
1913 | bottom: 60px;
1914 | }
1915 | .product-detail-container {
1916 | flex-wrap: wrap;
1917 | }
1918 | .product-detail-container .product-detail-image {
1919 | width: 350px;
1920 | height: 350px;
1921 | }
1922 | .image-container {
1923 | display: flex;
1924 | align-items: center;
1925 | justify-content: center;
1926 | }
1927 | .cart-container {
1928 | width: 415px;
1929 | padding: 4px;
1930 | }
1931 | .cart-heading {
1932 | margin-top: 35px;
1933 | }
1934 | .product-container {
1935 | margin-top: 10px;
1936 | }
1937 | .product {
1938 | padding: 20px 5px;
1939 | }
1940 | .checkout-product {
1941 | justify-content: space-around;
1942 | gap: 10px;
1943 | }
1944 | .product .cart-product-image {
1945 | width: 25%;
1946 | height: 25%;
1947 | }
1948 | .product-detail-container {
1949 | margin: 20px;
1950 | }
1951 |
1952 | .item-desc .flex {
1953 | width: 200px;
1954 | }
1955 | .top {
1956 | flex-wrap: wrap;
1957 | gap: 10px;
1958 | }
1959 | .item-desc .bottom {
1960 | margin-top: 30px;
1961 | }
1962 | .flex h5 {
1963 | font-size: 16px;
1964 | color: var(--text-color);
1965 | }
1966 | .flex h4 {
1967 | font-size: 16px;
1968 | }
1969 | .cart-bottom {
1970 | padding: 30px;
1971 | }
1972 |
1973 | .total h3 {
1974 | font-size: 20px;
1975 | }
1976 | .track {
1977 | animation: marquee 10s linear infinite;
1978 | width: 550%;
1979 | }
1980 | .success-wrapper,
1981 | .cancel-wrapper {
1982 | min-height: 69vh;
1983 | }
1984 | .success,
1985 | .cancel {
1986 | width: 370px;
1987 | margin-top: 100px;
1988 | padding: 20px;
1989 | }
1990 | .success {
1991 | height: 350px;
1992 | }
1993 | .success h2 {
1994 | font-size: 17px;
1995 | }
1996 | .btn-container {
1997 | width: 300px;
1998 | margin: auto;
1999 | }
2000 | .link-search-products-container {
2001 | margin: 3rem auto;
2002 | column-gap: 0.3rem;
2003 | width: fit-content;
2004 | max-width: 90%;
2005 | padding: 0.85rem;
2006 | border-radius: 15px;
2007 | flex-wrap: wrap;
2008 | }
2009 | .checkout-products {
2010 | font-size: 1.7rem;
2011 | }
2012 | .checkout-arrow-icon {
2013 | font-size: 2.8rem;
2014 | }
2015 |
2016 | .category-menu-container {
2017 | min-width: 230px;
2018 | max-width: 550px;
2019 | }
2020 |
2021 | .category-menu-item {
2022 | width: 95%;
2023 | min-width: 250px;
2024 | max-width: 550px;
2025 | }
2026 |
2027 | .category-item-image {
2028 | height: 400px;
2029 | width: 400px;
2030 | }
2031 | /* .featured-items-container{
2032 | padding-top: 4rem;
2033 | } */
2034 |
2035 | .featured-bg-text {
2036 | font-size: 10rem;
2037 | }
2038 |
2039 | .footer-banner-container {
2040 | height: 480px;
2041 | margin-top: 80px;
2042 | overflow: hidden;
2043 | }
2044 | .footer-banner-image {
2045 | width: 80%;
2046 | left: 30%;
2047 | top: 6%;
2048 | height: 59%;
2049 | }
2050 | .banner-desc .left h3 {
2051 | font-weight: 900;
2052 | font-size: 50px;
2053 | margin-left: 5px;
2054 | }
2055 | .banner-desc .left p {
2056 | margin: 18px;
2057 | }
2058 | .banner-desc .right h3 {
2059 | font-size: 35px;
2060 | }
2061 | .banner-desc .right p {
2062 | font-size: 18px;
2063 | }
2064 | .banner-desc .right .company-desc {
2065 | font-size: 14px;
2066 | }
2067 | .banner-desc {
2068 | flex-wrap: wrap;
2069 | gap: 20px;
2070 | }
2071 | .banner-desc .right p {
2072 | display: -webkit-box;
2073 | overflow: hidden;
2074 | -webkit-line-clamp: 3;
2075 | line-clamp: 3;
2076 | -webkit-box-orient: vertical;
2077 | }
2078 | .profile-container {
2079 | margin: 0.5rem auto;
2080 | margin-left: 5vw;
2081 | margin-right: 5vw;
2082 | overflow-x: scroll;
2083 | }
2084 |
2085 | .table {
2086 | width: 500px;
2087 | }
2088 | }
2089 |
2090 | /* 320-480 mobile , 481-768 tablet, 769-1024 small scr
2091 | , 1025- 1200 big stuff*/
2092 | @media screen and (max-width: 480px) {
2093 | /* .link-search-products-container{
2094 | flex-direction: column;
2095 | } */
2096 | .navbar-shop-name {
2097 | display: none;
2098 | }
2099 | .hero-banner-container {
2100 | height: 500px;
2101 | margin-bottom: 0;
2102 | }
2103 | .hero-banner-image {
2104 | width: 80%;
2105 | height: 73%;
2106 | top: 12%;
2107 | right: 5%;
2108 | }
2109 | .hero-product-name {
2110 | height: 100px;
2111 | top: 72%;
2112 | left: 10%;
2113 | font-size: 1.4rem;
2114 | /* bottom: 25%; */
2115 | }
2116 | .desc {
2117 | display: none;
2118 | }
2119 | .hero-banner-container h1 {
2120 | font-size: 50px;
2121 | }
2122 | .checkout-arrow-icon {
2123 | font-size: 2.5rem;
2124 | }
2125 |
2126 | .category-item-image {
2127 | height: 350px;
2128 | width: 350px;
2129 | }
2130 | .featured-top-text {
2131 | top: 2%;
2132 | }
2133 | .footer-banner-container {
2134 | height: 550px;
2135 | }
2136 | .banner-desc .left {
2137 | max-width: 300px;
2138 | }
2139 | .product-detail-container .product-detail-image {
2140 | width: 260px;
2141 | height: 260px;
2142 | }
2143 | .small-images-container {
2144 | gap: 7px;
2145 | margin-top: 20px;
2146 | }
2147 | .small-image {
2148 | border-radius: 8px;
2149 | width: 53px;
2150 | height: 53px;
2151 | }
2152 | .product-detail-desc h1 {
2153 | font-size: 1.4rem;
2154 | }
2155 | .product-detail-desc .buttons {
2156 | gap: 9px;
2157 | }
2158 | .buttons .add-to-cart,
2159 | .buttons .buy-now {
2160 | padding: 10px 13px;
2161 | }
2162 |
2163 | .cart-container {
2164 | width: 325px;
2165 | }
2166 |
2167 | .product-container {
2168 | max-height: 70vh;
2169 | padding: 10px 5px;
2170 | max-width: 95vw;
2171 | margin-left: auto;
2172 | }
2173 | .product {
2174 | gap: 10px;
2175 | padding: 10px;
2176 | }
2177 |
2178 | .btn-container {
2179 | width: 210px;
2180 | }
2181 | .cart-bottom {
2182 | padding: 65px;
2183 | }
2184 | .quantity-desc span {
2185 | padding: 6px 6px;
2186 | }
2187 | .item-desc .flex {
2188 | width: 160px;
2189 | }
2190 | .products-container {
2191 | justify-content: center;
2192 | }
2193 | }
2194 | @media screen and (max-width: 327px) {
2195 | .hero-product-name {
2196 | left: 15%;
2197 | font-size: 1.2rem;
2198 | }
2199 |
2200 | .right-icon,
2201 | .left-icon {
2202 | font-size: 2.5rem;
2203 | }
2204 | .right-icon {
2205 | top: 45%;
2206 | }
2207 |
2208 | .left-icon {
2209 | top: 55%;
2210 | }
2211 |
2212 | .link-search-products-container {
2213 | width: 190px;
2214 | }
2215 | .checkout-arrow-icon {
2216 | font-size: 2.6rem;
2217 | }
2218 | }
2219 |
--------------------------------------------------------------------------------