Initial commit

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 Mohammad Oftadeh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,146 @@
+[![Shopco Screenshot](https://github.com/mohammadoftadeh/repo-assets/blob/main/shopco-cover.png?raw=true)](https://your-demo-link.com)
+
+# Shopco
+
+Shopco is an open-source project that converts a Figma design of an e-commerce website into a fully responsive front-end application. It utilizes **Next.js 14 App Router**, **TypeScript**, **Tailwind CSS**, **Redux**, **Framer Motion**, and **ShadCN UI** to deliver a modern, scalable, and optimized solution based on industry standards.
+
+## Table of Contents
+
+- [Shopco](#shopco)
+  - [Table of Contents](#table-of-contents)
+  - [Overview](#overview)
+  - [Demo](#demo)
+  - [Features](#features)
+  - [Technologies](#technologies)
+  - [Installation](#installation)
+  - [Usage](#usage)
+  - [Project Structure](#project-structure)
+  - [Contributing](#contributing)
+  - [Issues](#issues)
+  - [License](#license)
+  - [Contact](#contact)
+
+## Overview
+
+Shopco bridges the gap between design and development by converting Figma designs into production-ready code. The project follows best practices for **SEO**, **performance optimization**, and **accessibility**, making it a perfect foundation for developers looking to create scalable and maintainable e-commerce front-ends.
+
+## Demo
+
+Check out the live demo: [Shopco Demo](https://your-demo-link.com)
+
+<!-- [![Shopco Screenshot](https://github.com/mohammadoftadeh/repo-assets/blob/main/shopco-cover.png?raw=true)](https://your-demo-link.com) -->
+
+## Features
+
+- **Next.js 14**: Server-side rendering (SSR), Static Site Generation (SSG), optimized routing, and API integrations.
+- **TypeScript**: Strongly typed code for better error detection and maintainability.
+- **Tailwind CSS**: Utility-first CSS framework for rapid UI development.
+- **Redux**: State management for managing the shopping cart and other global states.
+- **Framer Motion**: Smooth animations and transitions for an enhanced user experience.
+- **ShadCN UI**: Beautifully styled, accessible, and customizable UI components.
+- **Fully Responsive**: Mobile-first design ensuring the layout adapts across devices.
+- **Performance Optimized**: Best practices followed for fast loading and interaction.
+- **Accessible**: Built with accessibility standards to provide an inclusive experience.
+
+## Technologies
+
+- **Next.js 14** - A popular React framework with built-in SSR and optimization.
+- **TypeScript** - A superset of JavaScript for strong typing and code consistency.
+- **Tailwind CSS** - A utility-first CSS framework for fast, responsive design.
+- **Redux** - A state management library used for the shopping cart and global app state.
+- **Framer Motion** - A library for animations and interactions in React.
+- **ShadCN UI** - A collection of beautiful, accessible, and customizable UI components.
+- **Figma** - The design tool used as the source of the project’s layout. The [Figma file](https://www.figma.com/community/file/1273571982885059508/e-commerce-website-template-freebie) designed by [Hamza Naeem](https://www.figma.com/@hamzauix)
+
+## Installation
+
+To get started with Shopco locally, follow these steps:
+
+1. **Clone the repository:**
+
+   ```bash
+   git clone https://github.com/mohammadoftadeh/next-ecommerce-shopco.git
+   cd next-ecommerce-shopco
+   ```
+
+2. **Install dependencies:**
+
+   ```bash
+   npm install
+   ```
+
+   ```bash
+   yarn install
+   ```
+
+3. **Run the development server:**
+
+   ```bash
+   npm run dev
+   ```
+
+   ```bash
+   yarn dev
+   ```
+
+4. **Open in your browser:**
+   Navigate to [http://localhost:3000](http://localhost:3000) to view the app.
+
+## Usage
+
+- To explore or modify the code, navigate through the `components`, `features`, and `app` directories.
+- The shopping cart logic is managed using **Redux**. You can find the store configuration and cart actions in the `src/lib/features` directory.
+- **ShadCN UI** components are used across the app. They can be customized in the `src/components/ui` directory.
+- You can easily modify and extend the project to suit your needs, whether for personal use or professional projects.
+
+## Project Structure
+
+```bash
+Shopco/
+│
+├── public/                # Static assets
+├── src/
+│   ├── app/               # Next.js App Router
+│   ├── components/        # Reusable components (including ShadCN UI components)
+│   └── lib/
+│       ├── features/      # The Redux logics for features (e.g., shopping cart)
+│       ├── hooks/         # Custom React hooks
+│       ├── store.ts       # Redux store
+│       ├── utils.ts       # Utility functions
+│   ├── styles/            # Tailwind CSS styles (global, utilities and fonts)
+│   ├── types/             # TypeScript types
+│
+├── components.json         # ShadCN UI configuration
+├── next.config.mjs         # Next.js configuration
+├── package.json            # Node.js dependencies and scripts
+├── postcss.config.mjs      # Post CSS configuration
+└── README.md               # Project documentation
+├── tailwind.config.js      # Tailwind CSS configuration
+├── tsconfig.json           # TypeScript configuration
+```
+
+## Contributing
+
+Contributions are welcome! If you'd like to contribute, Please follow these steps to contribute to Shopco:
+
+1. Fork the repository.
+2. Create a new branch (`git checkout -b feature/your-feature-name`).
+3. Make your changes.
+4. Push to the branch (`git push origin feature/your-feature-name`).
+5. Open a pull request.
+
+## Issues
+
+Feel free to submit issues for any bugs, feature requests, or general questions related to the project. You can also reach out via [email](mailto:mr.mohammadoftadeh@gmail.com) for support.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](https://opensource.org/licenses/MIT) file for details.
+
+## Contact
+
+Feel free to reach out to:
+
+- **Name**: Mohammad Oftadeh
+- **Email**: [mr.mohammadoftadeh@gmail.com](mailto:mr.mohammadoftadeh@gmail.com)
+- **GitHub**: [https://github.com/mohammadoftadeh](https://github.com/mohammadoftadeh)

components.json

@@ -0,0 +1,20 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.ts",
+    "css": "src/styles/globals.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  }
+}

next.config.mjs

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;

package.json

@@ -0,0 +1,47 @@
+{
+  "name": "next-ecommerce-shopco",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@radix-ui/react-accordion": "^1.2.0",
+    "@radix-ui/react-dialog": "^1.1.1",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-navigation-menu": "^1.2.0",
+    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-separator": "^1.1.0",
+    "@radix-ui/react-slider": "^1.2.0",
+    "@radix-ui/react-slot": "^1.1.0",
+    "@reduxjs/toolkit": "^2.2.7",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "embla-carousel-react": "^8.2.1",
+    "framer-motion": "^11.5.4",
+    "holy-loader": "^2.3.7",
+    "lucide-react": "^0.438.0",
+    "next": "14.2.7",
+    "react": "^18",
+    "react-dom": "^18",
+    "react-icons": "^5.3.0",
+    "react-redux": "^9.1.2",
+    "react-simple-star-rating": "^5.1.7",
+    "redux-persist": "^6.0.0",
+    "tailwind-merge": "^2.5.2",
+    "tailwindcss-animate": "^1.0.7",
+    "usehooks-ts": "^3.1.0",
+    "vaul": "^0.9.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;

public/icons/Visa.svg

@@ -0,0 +1,3 @@
+<svg width="34" height="12" viewBox="0 0 34 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.0221 1.12099L14.8479 11.2845H12.2188L14.3933 1.12099H17.0221ZM28.0838 7.68363L29.468 3.86687L30.2645 7.68363H28.0838ZM31.0172 11.2845H33.4491L31.327 1.12099H29.0823C28.5779 1.12099 28.1523 1.41437 27.9628 1.86665L24.0184 11.2845H26.7794L27.3275 9.76684H30.7007L31.0172 11.2845ZM24.1554 7.96607C24.1667 5.28356 20.4458 5.13591 20.4715 3.93764C20.4792 3.57253 20.827 3.18523 21.5865 3.08583C21.9638 3.03661 23.0012 2.99897 24.1792 3.54101L24.6405 1.38574C24.0078 1.15605 23.1936 0.935059 22.1809 0.935059C19.5824 0.935059 17.7533 2.31668 17.7379 4.29503C17.7215 5.75804 19.0436 6.57447 20.0398 7.06085C21.0641 7.55914 21.4083 7.87825 21.4038 8.32378C21.397 9.00607 20.5867 9.30652 19.8307 9.31842C18.5086 9.33933 17.7414 8.96167 17.1299 8.67666L16.6535 10.9037C17.2676 11.1858 18.4015 11.4309 19.5779 11.4435C22.3395 11.4435 24.1464 10.0789 24.1554 7.96607ZM13.2652 1.12099L9.00549 11.2845H6.22584L4.12976 3.17332C4.00237 2.67375 3.89171 2.49104 3.50473 2.28033C2.87327 1.93774 1.82941 1.61574 0.911011 1.4163L0.973739 1.12099H5.44737C6.01739 1.12099 6.53047 1.50058 6.65979 2.15713L7.76702 8.03877L10.5029 1.12099H13.2652Z" fill="#1434CB"/>
+</svg>

public/icons/applePay.svg

@@ -0,0 +1,7 @@
+<svg width="28" height="12" viewBox="0 0 28 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M5.9199 2.08171C6.23089 1.69273 6.44193 1.17044 6.38627 0.636719C5.93102 0.659356 5.37548 0.937062 5.05385 1.32635C4.76506 1.65972 4.50945 2.20388 4.57609 2.71522C5.08713 2.75955 5.5977 2.45978 5.9199 2.08171Z" fill="#000008"/>
+<path d="M6.38048 2.81507C5.63833 2.77086 5.00732 3.23628 4.65291 3.23628C4.2983 3.23628 3.75557 2.83734 3.16857 2.8481C2.40455 2.85932 1.69562 3.2913 1.30791 3.97836C0.510465 5.35281 1.09747 7.39161 1.87295 8.51102C2.24953 9.06483 2.70339 9.67462 3.30141 9.65271C3.86644 9.63054 4.08791 9.28685 4.77473 9.28685C5.46105 9.28685 5.66054 9.65271 6.25866 9.64163C6.87893 9.63054 7.2667 9.08754 7.64329 8.5332C8.07531 7.90188 8.25216 7.29229 8.26328 7.25883C8.25216 7.24775 7.06724 6.79318 7.05625 5.43015C7.04506 4.28887 7.98654 3.74601 8.03085 3.71234C7.49919 2.92601 6.66848 2.83734 6.38048 2.81507Z" fill="#000008"/>
+<path d="M12.8425 1.27052C14.4556 1.27052 15.5788 2.38242 15.5788 4.00125C15.5788 5.62587 14.4325 6.74354 12.8021 6.74354H11.0161V9.58373H9.72578V1.27052L12.8425 1.27052ZM11.0161 5.66043H12.4967C13.6202 5.66043 14.2596 5.05559 14.2596 4.00703C14.2596 2.95859 13.6202 2.35941 12.5025 2.35941H11.0161V5.66043Z" fill="#000008"/>
+<path d="M15.9159 7.8612C15.9159 6.80109 16.7283 6.15013 18.1686 6.06945L19.8277 5.97156V5.50495C19.8277 4.83088 19.3725 4.42762 18.6122 4.42762C17.8919 4.42762 17.4426 4.77321 17.3332 5.31482H16.158C16.2271 4.22015 17.1603 3.41362 18.6582 3.41362C20.1273 3.41362 21.0663 4.19137 21.0663 5.40694V9.58371H19.8737V8.58705H19.845C19.4937 9.26112 18.7274 9.68739 17.9324 9.68739C16.7456 9.68739 15.9159 8.94998 15.9159 7.8612ZM19.8277 7.31392V6.83576L18.3355 6.92788C17.5923 6.97977 17.1719 7.30814 17.1719 7.82664C17.1719 8.35658 17.6097 8.70228 18.278 8.70228C19.1478 8.70228 19.8277 8.10311 19.8277 7.31392Z" fill="#000008"/>
+<path d="M22.1922 11.8133V10.8051C22.2842 10.8281 22.4915 10.8281 22.5953 10.8281C23.1714 10.8281 23.4825 10.5861 23.6725 9.96397C23.6725 9.95242 23.7821 9.59527 23.7821 9.58949L21.593 3.52307H22.9409L24.4735 8.45459H24.4964L26.029 3.52307H27.3425L25.0724 9.90052C24.5542 11.3697 23.955 11.8421 22.6991 11.8421C22.5953 11.8421 22.2842 11.8305 22.1922 11.8133Z" fill="#000008"/>
+</svg>

public/icons/arrowLeft.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.70406 0.454104L0.954061 7.2041C0.849182 7.30862 0.765966 7.43281 0.709186 7.56956C0.652405 7.7063 0.623175 7.85291 0.623175 8.00098C0.623175 8.14904 0.652405 8.29565 0.709186 8.4324C0.765966 8.56915 0.849182 8.69334 0.954061 8.79785L7.70406 15.5479C7.91541 15.7592 8.20205 15.8779 8.50094 15.8779C8.79982 15.8779 9.08647 15.7592 9.29781 15.5479C9.50916 15.3365 9.62789 15.0499 9.62789 14.751C9.62789 14.4521 9.50916 14.1654 9.29781 13.9541L4.46875 9.12504L18.25 9.12504C18.5484 9.12504 18.8345 9.00651 19.0455 8.79554C19.2565 8.58456 19.375 8.29841 19.375 8.00004C19.375 7.70167 19.2565 7.41552 19.0455 7.20455C18.8345 6.99357 18.5484 6.87504 18.25 6.87504L4.46875 6.87504L9.29875 2.04598C9.51009 1.83463 9.62883 1.54799 9.62883 1.2491C9.62883 0.950218 9.51009 0.663574 9.29875 0.45223C9.08741 0.240885 8.80076 0.122151 8.50187 0.122151C8.20299 0.122151 7.91634 0.240885 7.705 0.45223L7.70406 0.454104Z" fill="black"/>
+</svg>

public/icons/arrowRight.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.2959 0.454104L19.0459 7.2041C19.1508 7.30862 19.234 7.43281 19.2908 7.56956C19.3476 7.7063 19.3768 7.85291 19.3768 8.00098C19.3768 8.14904 19.3476 8.29565 19.2908 8.4324C19.234 8.56915 19.1508 8.69334 19.0459 8.79785L12.2959 15.5479C12.0846 15.7592 11.7979 15.8779 11.4991 15.8779C11.2002 15.8779 10.9135 15.7592 10.7022 15.5479C10.4908 15.3365 10.3721 15.0499 10.3721 14.751C10.3721 14.4521 10.4908 14.1654 10.7022 13.9541L15.5313 9.12504L1.75 9.12504C1.45163 9.12504 1.16548 9.00651 0.954505 8.79554C0.743527 8.58456 0.625 8.29841 0.625 8.00004C0.625 7.70167 0.743527 7.41552 0.954505 7.20455C1.16548 6.99357 1.45163 6.87504 1.75 6.87504L15.5313 6.87504L10.7013 2.04598C10.4899 1.83463 10.3712 1.54799 10.3712 1.2491C10.3712 0.950218 10.4899 0.663574 10.7013 0.45223C10.9126 0.240885 11.1992 0.122151 11.4981 0.122151C11.797 0.122151 12.0837 0.240885 12.295 0.45223L12.2959 0.454104Z" fill="black"/>
+</svg>

public/icons/big-star.svg

@@ -0,0 +1,3 @@
+<svg width="104" height="104" viewBox="0 0 104 104" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M52 0C53.7654 27.955 76.0448 50.2347 104 52C76.0448 53.7654 53.7654 76.0448 52 104C50.2347 76.0448 27.955 53.7654 0 52C27.955 50.2347 50.2347 27.955 52 0Z" fill="black"/>
+</svg>

public/icons/calvin-klein-logo.svg

@@ -0,0 +1,3 @@
+<svg width="208" height="34" viewBox="0 0 208 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M17.1298 30.4522C9.89114 30.4522 3.71249 23.8867 3.71249 16.7255C3.71249 9.59072 9.76182 2.89479 17.0778 2.89479C21.887 2.89479 25.3499 5.22146 28.1684 8.86674H31.7098C30.6498 6.95346 29.5125 5.19603 27.7805 3.82545C24.8072 1.42142 20.9552 0 17.1298 0C7.95243 0 0.481689 7.57464 0.481689 16.7C0.481689 25.8508 8.05633 33.3481 17.1817 33.3481C20.9044 33.3481 24.5497 31.9786 27.471 29.6774C29.3069 28.204 30.599 26.2907 31.8402 24.3255H28.2989C25.5058 27.9708 21.9389 30.4522 17.1298 30.4522ZM53.8391 13.0028C51.6163 10.1334 48.5911 8.32404 44.843 8.32404C38.1217 8.32404 32.5896 13.7798 32.5896 20.5012C32.5896 27.2214 38.1482 32.728 44.843 32.728C48.747 32.728 51.4605 31.0988 53.8391 28.1001V32.1842H56.7604V8.89216H53.8391V13.0028ZM44.6883 30.0388C39.5431 30.0388 35.4844 25.5668 35.4844 20.5266C35.4844 15.5107 39.5177 11.0132 44.6883 11.0132C49.8324 11.0132 53.8391 15.5118 53.8391 20.5266C53.8391 25.5668 49.8059 30.0388 44.6883 30.0388ZM60.3018 32.1842H63.4309V0.670921H60.3018V32.1842ZM75.2444 28.487L67.3337 8.89216H64.2312L73.7191 32.1842H76.8725L86.335 8.89216H83.2844L75.2444 28.487ZM87.6271 32.1842H90.7551V8.89216H87.6271V32.1842ZM87.6271 5.89348H90.7551V0.670921H87.6271V5.89348ZM104.224 8.32293C101.277 8.32293 99.1831 9.87478 97.2444 11.9428V8.89216H94.3485V32.1842H97.4245V17.991C97.3991 14.2429 100.501 11.0121 104.275 11.0121C109.005 11.0121 111.383 15.1228 111.383 19.3627V32.1853H114.278V19.3627C114.279 13.3134 110.739 8.32293 104.224 8.32293ZM143.311 0.670921L129.093 18.7415V0.670921H126.017V32.1842H129.093V23.5242L133.126 18.5094L143.389 32.1842H147.294L135.09 16.0269L147.294 0.670921H143.311ZM148.43 32.1842H151.482V0.670921H148.43V32.1842ZM176.738 14.7602C174.618 10.8043 170.378 8.32293 165.905 8.32293C159.236 8.32293 153.599 13.8815 153.599 20.5509C153.599 27.2711 159.287 32.7269 165.959 32.7269C169.137 32.7269 172.267 31.4602 174.566 29.2629C175.963 27.9443 176.79 26.2896 177.538 24.5576H174.256C172.601 27.7895 169.679 30.0377 165.904 30.0377C163.605 30.0377 161.355 29.107 159.65 27.5298C157.89 25.9282 157.115 23.9619 156.778 21.6363H178.263C178.264 19.2068 177.927 16.8802 176.738 14.7602ZM156.883 18.9482C157.816 14.5801 161.252 11.0121 165.959 11.0121C169.914 11.0121 174.154 13.4427 175.084 18.9482H156.883ZM180.539 32.1842H183.614V8.89216H180.539V32.1842ZM180.539 5.99738H183.614V0.670921H180.539V5.99738ZM197.136 8.32293C194.135 8.32293 192.042 9.87478 190.077 11.9428V8.89216H187.13V32.1842H190.232V17.991C190.207 14.2175 193.387 11.0121 197.186 11.0121C201.892 11.0121 204.375 15.1228 204.375 19.3627V32.1853H207.27V19.3627C207.27 13.3134 203.675 8.32293 197.136 8.32293Z" fill="white"/>
+</svg>

public/icons/cart.svg

@@ -0,0 +1,3 @@
+<svg width="23" height="22" viewBox="0 0 23 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.375 19.25C9.375 19.6208 9.26503 19.9834 9.059 20.2917C8.85298 20.6 8.56014 20.8404 8.21753 20.9823C7.87492 21.1242 7.49792 21.1613 7.1342 21.089C6.77049 21.0166 6.4364 20.838 6.17417 20.5758C5.91195 20.3136 5.73337 19.9795 5.66103 19.6158C5.58868 19.2521 5.62581 18.8751 5.76773 18.5325C5.90964 18.1899 6.14996 17.897 6.45831 17.691C6.76665 17.485 7.12916 17.375 7.5 17.375C7.99728 17.375 8.47419 17.5725 8.82582 17.9242C9.17745 18.2758 9.375 18.7527 9.375 19.25ZM17.25 17.375C16.8792 17.375 16.5166 17.485 16.2083 17.691C15.9 17.897 15.6596 18.1899 15.5177 18.5325C15.3758 18.8751 15.3387 19.2521 15.411 19.6158C15.4834 19.9795 15.662 20.3136 15.9242 20.5758C16.1864 20.838 16.5205 21.0166 16.8842 21.089C17.2479 21.1613 17.6249 21.1242 17.9675 20.9823C18.3101 20.8404 18.603 20.6 18.809 20.2917C19.015 19.9834 19.125 19.6208 19.125 19.25C19.125 18.7527 18.9275 18.2758 18.5758 17.9242C18.2242 17.5725 17.7473 17.375 17.25 17.375ZM22.0753 6.08094L19.5169 14.3966C19.3535 14.9343 19.0211 15.4051 18.569 15.739C18.1169 16.0729 17.5692 16.2521 17.0072 16.25H7.77469C7.2046 16.2482 6.65046 16.0616 6.1953 15.7183C5.74015 15.3751 5.40848 14.8936 5.25 14.3459L2.04469 3.125H1.125C0.826631 3.125 0.540483 3.00647 0.329505 2.7955C0.118526 2.58452 0 2.29837 0 2C0 1.70163 0.118526 1.41548 0.329505 1.2045C0.540483 0.993526 0.826631 0.875 1.125 0.875H2.32687C2.73407 0.876258 3.12988 1.00951 3.45493 1.25478C3.77998 1.50004 4.01674 1.84409 4.12969 2.23531L4.81312 4.625H21C21.1761 4.62499 21.3497 4.6663 21.5069 4.74561C21.664 4.82492 21.8004 4.94001 21.905 5.08164C22.0096 5.22326 22.0795 5.38746 22.1091 5.56102C22.1387 5.73458 22.1271 5.91266 22.0753 6.08094ZM19.4766 6.875H5.45531L7.41375 13.7281C7.43617 13.8065 7.48354 13.8755 7.54867 13.9245C7.6138 13.9736 7.69315 14.0001 7.77469 14H17.0072C17.0875 14.0002 17.1656 13.9746 17.2303 13.927C17.2949 13.8794 17.3426 13.8123 17.3662 13.7356L19.4766 6.875Z" fill="black"/>
+</svg>

public/icons/check.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="11" viewBox="0 0 14 11" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5306 2.03063L5.5306 10.0306C5.46092 10.1005 5.37813 10.156 5.28696 10.1939C5.1958 10.2317 5.09806 10.2512 4.99935 10.2512C4.90064 10.2512 4.8029 10.2317 4.71173 10.1939C4.62057 10.156 4.53778 10.1005 4.4681 10.0306L0.968098 6.53063C0.898333 6.46087 0.842993 6.37804 0.805236 6.28689C0.76748 6.19574 0.748047 6.09804 0.748047 5.99938C0.748047 5.90072 0.76748 5.80302 0.805236 5.71187C0.842993 5.62072 0.898333 5.53789 0.968098 5.46813C1.03786 5.39837 1.12069 5.34302 1.21184 5.30527C1.30299 5.26751 1.40069 5.24808 1.49935 5.24808C1.59801 5.24808 1.69571 5.26751 1.78686 5.30527C1.87801 5.34302 1.96083 5.39837 2.0306 5.46813L4.99997 8.4375L12.4693 0.969379C12.6102 0.828483 12.8013 0.749329 13.0006 0.749329C13.1999 0.749329 13.391 0.828483 13.5318 0.969379C13.6727 1.11028 13.7519 1.30137 13.7519 1.50063C13.7519 1.69989 13.6727 1.89098 13.5318 2.03188L13.5306 2.03063Z" fill="white"/>
+</svg>

public/icons/circleCheck.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="21" viewBox="0 0 20 21" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 0.829102C8.07164 0.829102 6.18657 1.40093 4.58319 2.47227C2.97982 3.54362 1.73013 5.06636 0.992179 6.84794C0.254225 8.62952 0.061142 10.5899 0.437348 12.4812C0.813554 14.3725 1.74215 16.1098 3.10571 17.4734C4.46928 18.837 6.20656 19.7656 8.09787 20.1418C9.98919 20.518 11.9496 20.3249 13.7312 19.5869C15.5127 18.849 17.0355 17.5993 18.1068 15.9959C19.1782 14.3925 19.75 12.5075 19.75 10.5791C19.7473 7.99408 18.7192 5.51571 16.8913 3.68783C15.0634 1.85994 12.585 0.831831 10 0.829102ZM14.2806 8.85973L9.03063 14.1097C8.96097 14.1795 8.87826 14.2348 8.78721 14.2725C8.69616 14.3103 8.59857 14.3297 8.5 14.3297C8.40144 14.3297 8.30385 14.3103 8.2128 14.2725C8.12175 14.2348 8.03903 14.1795 7.96938 14.1097L5.71938 11.8597C5.57865 11.719 5.49959 11.5281 5.49959 11.3291C5.49959 11.1301 5.57865 10.9392 5.71938 10.7985C5.86011 10.6577 6.05098 10.5787 6.25 10.5787C6.44903 10.5787 6.6399 10.6577 6.78063 10.7985L8.5 12.5188L13.2194 7.79848C13.2891 7.72879 13.3718 7.67352 13.4628 7.63581C13.5539 7.59809 13.6515 7.57868 13.75 7.57868C13.8486 7.57868 13.9461 7.59809 14.0372 7.63581C14.1282 7.67352 14.2109 7.72879 14.2806 7.79848C14.3503 7.86816 14.4056 7.95088 14.4433 8.04193C14.481 8.13297 14.5004 8.23056 14.5004 8.3291C14.5004 8.42765 14.481 8.52523 14.4433 8.61627C14.4056 8.70732 14.3503 8.79004 14.2806 8.85973Z" fill="#01AB31"/>
+</svg>

public/icons/dotsHorizontal.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="6" viewBox="0 0 22 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.625 3C13.625 3.51918 13.471 4.02669 13.1826 4.45837C12.8942 4.89005 12.4842 5.2265 12.0045 5.42518C11.5249 5.62386 10.9971 5.67585 10.4879 5.57456C9.97869 5.47328 9.51096 5.22327 9.14385 4.85616C8.77673 4.48904 8.52673 4.02131 8.42544 3.51211C8.32415 3.00291 8.37614 2.47511 8.57482 1.99546C8.7735 1.5158 9.10995 1.10583 9.54163 0.817392C9.97331 0.528953 10.4808 0.375 11 0.375C11.6962 0.375 12.3639 0.651562 12.8562 1.14384C13.3484 1.63613 13.625 2.30381 13.625 3ZM3.5 0.375C2.98083 0.375 2.47331 0.528953 2.04163 0.817392C1.60995 1.10583 1.2735 1.5158 1.07482 1.99546C0.876137 2.47511 0.824154 3.00291 0.92544 3.51211C1.02673 4.02131 1.27673 4.48904 1.64385 4.85616C2.01096 5.22327 2.47869 5.47328 2.98789 5.57456C3.49709 5.67585 4.02489 5.62386 4.50455 5.42518C4.9842 5.2265 5.39417 4.89005 5.68261 4.45837C5.97105 4.02669 6.125 3.51918 6.125 3C6.125 2.30381 5.84844 1.63613 5.35616 1.14384C4.86387 0.651562 4.19619 0.375 3.5 0.375ZM18.5 0.375C17.9808 0.375 17.4733 0.528953 17.0416 0.817392C16.61 1.10583 16.2735 1.5158 16.0748 1.99546C15.8761 2.47511 15.8242 3.00291 15.9254 3.51211C16.0267 4.02131 16.2767 4.48904 16.6438 4.85616C17.011 5.22327 17.4787 5.47328 17.9879 5.57456C18.4971 5.67585 19.0249 5.62386 19.5045 5.42518C19.9842 5.2265 20.3942 4.89005 20.6826 4.45837C20.971 4.02669 21.125 3.51918 21.125 3C21.125 2.65528 21.0571 2.31394 20.9252 1.99546C20.7933 1.67698 20.5999 1.3876 20.3562 1.14384C20.1124 0.900091 19.823 0.706735 19.5045 0.574816C19.1861 0.442897 18.8447 0.375 18.5 0.375Z" fill="black" fill-opacity="0.4"/>
+</svg>

public/icons/envelope.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="16" viewBox="0 0 22 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20 0.125H2C1.70163 0.125 1.41548 0.243526 1.2045 0.454505C0.993526 0.665483 0.875 0.951631 0.875 1.25V14C0.875 14.4973 1.07254 14.9742 1.42417 15.3258C1.77581 15.6775 2.25272 15.875 2.75 15.875H19.25C19.7473 15.875 20.2242 15.6775 20.5758 15.3258C20.9275 14.9742 21.125 14.4973 21.125 14V1.25C21.125 0.951631 21.0065 0.665483 20.7955 0.454505C20.5845 0.243526 20.2984 0.125 20 0.125ZM11 7.97375L4.89219 2.375H17.1078L11 7.97375ZM7.69906 8L3.125 12.1925V3.8075L7.69906 8ZM9.36406 9.52625L10.2397 10.3297C10.4472 10.52 10.7185 10.6255 11 10.6255C11.2815 10.6255 11.5528 10.52 11.7603 10.3297L12.6359 9.52625L17.1078 13.625H4.89219L9.36406 9.52625ZM14.3009 8L18.875 3.8075V12.1925L14.3009 8Z" fill="black" fill-opacity="0.4"/>
+</svg>

public/icons/facebook.svg

@@ -0,0 +1,3 @@
+<svg width="8" height="13" viewBox="0 0 8 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M2.70873 12.3038V6.75026H0.839844V4.58594H2.70873V2.98981C2.70873 1.13752 3.84005 0.128906 5.49242 0.128906C6.28392 0.128906 6.96418 0.187836 7.16243 0.214175V2.14993L6.01642 2.15045C5.11776 2.15045 4.94376 2.57748 4.94376 3.20411V4.58594H7.08696L6.80791 6.75026H4.94376V12.3038H2.70873Z" fill="black"/>
+</svg>

public/icons/github.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="13" viewBox="0 0 14 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.60685 0.226562C3.01591 0.226562 0.126953 3.11552 0.126953 6.70646C0.126953 9.56841 1.98992 11.9984 4.55488 12.8624C4.87888 12.9164 4.98688 12.7274 4.98688 12.5384C4.98688 12.3764 4.98688 11.9714 4.98688 11.4314C3.1779 11.8364 2.79991 10.5674 2.79991 10.5674C2.50291 9.81141 2.07092 9.62241 2.07092 9.62241C1.47693 9.21742 2.12492 9.21742 2.12492 9.21742C2.77291 9.27142 3.1239 9.89241 3.1239 9.89241C3.6909 10.8914 4.63588 10.5944 5.01387 10.4324C5.06787 10.0004 5.22987 9.73041 5.41887 9.56841C3.98789 9.40642 2.47592 8.83942 2.47592 6.35546C2.47592 5.65347 2.71891 5.05948 3.1509 4.62749C3.09691 4.46549 2.85391 3.8175 3.2049 2.89952C3.2049 2.89952 3.74489 2.73752 4.98688 3.57451C5.49987 3.43951 6.06686 3.35851 6.60685 3.35851C7.14684 3.35851 7.71383 3.43951 8.22682 3.57451C9.4688 2.73752 10.0088 2.89952 10.0088 2.89952C10.3598 3.79051 10.1438 4.43849 10.0628 4.62749C10.4678 5.08648 10.7378 5.65347 10.7378 6.35546C10.7378 8.83942 9.22581 9.37942 7.76783 9.54141C8.01083 9.73041 8.19982 10.1354 8.19982 10.7294C8.19982 11.5934 8.19982 12.2954 8.19982 12.5114C8.19982 12.6734 8.30782 12.8894 8.65882 12.8354C11.2238 11.9984 13.0867 9.56841 13.0867 6.70646C13.0867 3.11552 10.1978 0.226562 6.60685 0.226562Z" fill="black"/>
+</svg>

public/icons/googlePay.svg

@@ -0,0 +1,9 @@
+<svg width="29" height="13" viewBox="0 0 29 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.751 9.6143H12.7025V1.45605H15.482C16.1864 1.45605 16.7871 1.69086 17.2785 2.16048C17.7809 2.6301 18.0321 3.20347 18.0321 3.88059C18.0321 4.5741 17.7809 5.14747 17.2785 5.61163C16.7925 6.07578 16.1919 6.30513 15.482 6.30513H13.751V9.6143ZM13.751 2.46082V5.30583H15.5038C15.9188 5.30583 16.2683 5.16385 16.5414 4.88536C16.8198 4.60686 16.9618 4.2683 16.9618 3.88605C16.9618 3.50926 16.8198 3.17616 16.5414 2.89767C16.2683 2.60825 15.9243 2.46628 15.5038 2.46628H13.751V2.46082Z" fill="#3C4043"/>
+<path d="M20.7732 3.84783C21.5487 3.84783 22.1603 4.05533 22.608 4.47034C23.0558 4.88536 23.2797 5.45327 23.2797 6.17408V9.6143H22.2804V8.83888H22.2367C21.8053 9.47778 21.2265 9.7945 20.5057 9.7945C19.8886 9.7945 19.3753 9.6143 18.9603 9.24844C18.5453 8.88257 18.3378 8.42933 18.3378 7.88327C18.3378 7.30443 18.5562 6.84574 18.9931 6.50718C19.4299 6.16315 20.0142 5.99387 20.7405 5.99387C21.363 5.99387 21.8763 6.10855 22.2749 6.3379V6.09762C22.2749 5.73176 22.1329 5.42596 21.8435 5.16931C21.5541 4.91266 21.2156 4.78706 20.8279 4.78706C20.2436 4.78706 19.7794 5.03279 19.4408 5.52972L18.518 4.95088C19.0258 4.21369 19.7794 3.84783 20.7732 3.84783ZM19.419 7.89965C19.419 8.17268 19.5337 8.40203 19.7685 8.58223C19.9978 8.76243 20.2709 8.85527 20.5821 8.85527C21.0244 8.85527 21.4176 8.69145 21.7616 8.36381C22.1056 8.03616 22.2804 7.65392 22.2804 7.2116C21.9527 6.95495 21.4995 6.8239 20.9152 6.8239C20.4893 6.8239 20.1343 6.92765 19.8504 7.12969C19.561 7.34266 19.419 7.59931 19.419 7.89965Z" fill="#3C4043"/>
+<path d="M28.9807 4.02808L25.4858 12.0662H24.4046L25.7043 9.25395L23.3999 4.02808H24.5412L26.2012 8.03622H26.223L27.8394 4.02808H28.9807Z" fill="#3C4043"/>
+<path d="M9.58059 5.64439C9.58059 5.30256 9.55001 4.97546 9.49322 4.66093H5.09849V6.46295L7.6295 6.46349C7.52684 7.06308 7.19647 7.5742 6.69027 7.91494V9.08407H8.19686C9.07657 8.26989 9.58059 7.06635 9.58059 5.64439Z" fill="#4285F4"/>
+<path d="M6.6908 7.915C6.27143 8.19786 5.73137 8.36332 5.09957 8.36332C3.87912 8.36332 2.84378 7.54094 2.473 6.43242H0.918898V7.63814C1.68885 9.16604 3.27135 10.2145 5.09957 10.2145C6.36316 10.2145 7.42471 9.79893 8.1974 9.08358L6.6908 7.915Z" fill="#34A853"/>
+<path d="M2.32661 5.5379C2.32661 5.22664 2.37848 4.92576 2.47295 4.64289V3.43718H0.918851C0.600495 4.06898 0.421387 4.78214 0.421387 5.5379C0.421387 6.29366 0.601041 7.00682 0.918851 7.63862L2.47295 6.4329C2.37848 6.15004 2.32661 5.84916 2.32661 5.5379Z" fill="#FABB05"/>
+<path d="M5.09957 2.71201C5.78925 2.71201 6.40685 2.94955 6.89448 3.41371L8.22961 2.07966C7.41871 1.32445 6.36153 0.86084 5.09957 0.86084C3.27189 0.86084 1.6888 1.90928 0.918851 3.43718L2.47295 4.64289C2.84373 3.53438 3.87912 2.71201 5.09957 2.71201Z" fill="#E94235"/>
+</svg>

public/icons/instagram.svg

@@ -0,0 +1,5 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.00076 1.44721C8.80947 1.44721 9.02366 1.45398 9.73818 1.48656C10.1678 1.49182 10.5933 1.5707 10.9962 1.71979C11.2884 1.83248 11.5538 2.00511 11.7753 2.22656C11.9967 2.44802 12.1694 2.71339 12.282 3.00559C12.4311 3.40853 12.51 3.83406 12.5153 4.26366C12.5475 4.97817 12.5546 5.19237 12.5546 7.00108C12.5546 8.80979 12.5479 9.02398 12.5153 9.7385C12.51 10.1681 12.4311 10.5936 12.282 10.9966C12.1694 11.2888 11.9967 11.5541 11.7753 11.7756C11.5538 11.997 11.2884 12.1697 10.9962 12.2824C10.5933 12.4315 10.1678 12.5103 9.73818 12.5156C9.02398 12.5479 8.80979 12.5549 7.00076 12.5549C5.19172 12.5549 4.97753 12.5482 4.26334 12.5156C3.83373 12.5103 3.40821 12.4315 3.00527 12.2824C2.71307 12.1697 2.44769 11.997 2.22624 11.7756C2.00479 11.5541 1.83216 11.2888 1.71947 10.9966C1.57038 10.5936 1.4915 10.1681 1.48624 9.7385C1.45398 9.02398 1.44689 8.80979 1.44689 7.00108C1.44689 5.19237 1.45366 4.97817 1.48624 4.26366C1.4915 3.83406 1.57038 3.40853 1.71947 3.00559C1.83216 2.71339 2.00479 2.44802 2.22624 2.22656C2.44769 2.00511 2.71307 1.83248 3.00527 1.71979C3.40821 1.5707 3.83373 1.49182 4.26334 1.48656C4.97785 1.4543 5.19205 1.44721 7.00076 1.44721ZM7.00076 0.226562C5.16205 0.226562 4.93043 0.234304 4.20785 0.267208C3.64561 0.278391 3.08934 0.384847 2.56269 0.582046C2.11092 0.752261 1.70172 1.019 1.36366 1.36366C1.01869 1.70184 0.751722 2.11127 0.581401 2.56334C0.384201 3.08998 0.277746 3.64625 0.266563 4.2085C0.234304 4.93043 0.226562 5.16205 0.226562 7.00076C0.226562 8.83946 0.234304 9.07108 0.267208 9.79366C0.278391 10.3559 0.384847 10.9122 0.582046 11.4388C0.752178 11.8908 1.01892 12.3002 1.36366 12.6385C1.70191 12.9832 2.11133 13.25 2.56334 13.4201C3.08998 13.6173 3.64626 13.7238 4.2085 13.7349C4.93108 13.7672 5.16172 13.7756 7.0014 13.7756C8.84108 13.7756 9.07172 13.7679 9.7943 13.7349C10.3565 13.7238 10.9128 13.6173 11.4395 13.4201C11.8893 13.2457 12.2978 12.9794 12.6389 12.6381C12.98 12.2968 13.246 11.8882 13.4201 11.4382C13.6173 10.9115 13.7238 10.3553 13.735 9.79301C13.7672 9.07108 13.775 8.83946 13.775 7.00076C13.775 5.16205 13.7672 4.93043 13.7343 4.20785C13.7231 3.64561 13.6167 3.08934 13.4195 2.56269C13.2493 2.11068 12.9826 1.70126 12.6379 1.36301C12.2996 1.01828 11.8902 0.751533 11.4382 0.581401C10.9115 0.384201 10.3553 0.277746 9.79301 0.266563C9.07108 0.234304 8.83947 0.226562 7.00076 0.226562Z" fill="black"/>
+<path d="M7.00215 3.52344C6.31413 3.52344 5.64155 3.72746 5.06948 4.10971C4.49741 4.49195 4.05154 5.03525 3.78824 5.6709C3.52494 6.30655 3.45605 7.00601 3.59028 7.68081C3.72451 8.35561 4.05582 8.97546 4.54233 9.46197C5.02884 9.94847 5.64868 10.2798 6.32349 10.414C6.99829 10.5482 7.69774 10.4794 8.33339 10.2161C8.96904 9.95276 9.51234 9.50689 9.89459 8.93481C10.2768 8.36274 10.4809 7.69017 10.4809 7.00215C10.4809 6.07954 10.1144 5.19471 9.46197 4.54233C8.80958 3.88994 7.92476 3.52344 7.00215 3.52344ZM7.00215 9.26021C6.55555 9.26021 6.11897 9.12778 5.74764 8.87966C5.3763 8.63154 5.08688 8.27888 4.91597 7.86627C4.74506 7.45366 4.70034 6.99964 4.78747 6.56162C4.8746 6.1236 5.08966 5.72125 5.40546 5.40545C5.72125 5.08966 6.1236 4.8746 6.56162 4.78747C6.99964 4.70034 7.45367 4.74506 7.86627 4.91597C8.27888 5.08687 8.63154 5.3763 8.87966 5.74763C9.12778 6.11897 9.26021 6.55554 9.26021 7.00215C9.26021 7.60102 9.02231 8.17537 8.59884 8.59884C8.17537 9.02231 7.60102 9.26021 7.00215 9.26021Z" fill="black"/>
+<path d="M10.6176 4.19807C11.0665 4.19807 11.4305 3.83412 11.4305 3.38517C11.4305 2.93621 11.0665 2.57227 10.6176 2.57227C10.1686 2.57227 9.80469 2.93621 9.80469 3.38517C9.80469 3.83412 10.1686 4.19807 10.6176 4.19807Z" fill="black"/>
+</svg>

public/icons/keyboardArrowDown.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="7" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.5306 1.53063L6.53063 6.53063C6.46095 6.60055 6.37816 6.65602 6.28699 6.69388C6.19583 6.73173 6.09809 6.75122 5.99938 6.75122C5.90067 6.75122 5.80293 6.73173 5.71176 6.69388C5.6206 6.65602 5.53781 6.60055 5.46813 6.53063L0.468128 1.53063C0.327232 1.38973 0.248077 1.19864 0.248077 0.999378C0.248077 0.80012 0.327232 0.609024 0.468128 0.468128C0.609025 0.327231 0.800121 0.248077 0.999378 0.248077C1.19864 0.248077 1.38973 0.327231 1.53063 0.468128L6 4.9375L10.4694 0.467503C10.6103 0.326607 10.8014 0.247452 11.0006 0.247452C11.1999 0.247452 11.391 0.326607 11.5319 0.467503C11.6728 0.608399 11.7519 0.799496 11.7519 0.998753C11.7519 1.19801 11.6728 1.38911 11.5319 1.53L11.5306 1.53063Z" fill="black"/>
+</svg>

public/icons/keyboardArrowRight.svg

@@ -0,0 +1,3 @@
+<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.53073 0.469524L6.53073 5.46952C6.60065 5.5392 6.65613 5.622 6.69399 5.71316C6.73184 5.80432 6.75133 5.90206 6.75133 6.00077C6.75133 6.09948 6.73184 6.19722 6.69399 6.28839C6.65613 6.37955 6.60065 6.46235 6.53073 6.53202L1.53073 11.532C1.38984 11.6729 1.19874 11.7521 0.999484 11.7521C0.800227 11.7521 0.609131 11.6729 0.468235 11.532C0.327338 11.3911 0.248184 11.2 0.248184 11.0008C0.248184 10.8015 0.327338 10.6104 0.468235 10.4695L4.93761 6.00015L0.46761 1.53078C0.326714 1.38988 0.247559 1.19878 0.247559 0.999525C0.247559 0.800267 0.326714 0.609171 0.46761 0.468275C0.608506 0.327379 0.799603 0.248222 0.99886 0.248222C1.19812 0.248222 1.38921 0.327379 1.53011 0.468275L1.53073 0.469524Z" fill="black" fill-opacity="0.6"/>
+</svg>

public/icons/mastercard.svg

@@ -0,0 +1,6 @@
+<svg width="26" height="16" viewBox="0 0 26 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16.2699 1.84839H9.40663V14.1819H16.2699V1.84839Z" fill="#FF5F00"/>
+<path d="M9.84245 8.01514C9.84137 6.82733 10.1105 5.65485 10.6296 4.58644C11.1486 3.51804 11.9039 2.58173 12.8383 1.84838C11.6812 0.938865 10.2915 0.37325 8.82815 0.216185C7.36478 0.0591194 5.88674 0.316937 4.56296 0.96018C3.23919 1.60342 2.1231 2.60614 1.34226 3.8537C0.561418 5.10127 0.147339 6.54336 0.147339 8.01514C0.147339 9.48692 0.561418 10.929 1.34226 12.1766C2.1231 13.4241 3.23919 14.4269 4.56296 15.0701C5.88674 15.7133 7.36478 15.9712 8.82815 15.8141C10.2915 15.657 11.6812 15.0914 12.8383 14.1819C11.9039 13.4485 11.1486 12.5122 10.6296 11.4438C10.1105 10.3754 9.84137 9.20294 9.84245 8.01514Z" fill="#EB001B"/>
+<path d="M25.5289 8.01514C25.5289 9.48689 25.1149 10.929 24.3341 12.1765C23.5533 13.4241 22.4372 14.4268 21.1135 15.0701C19.7897 15.7133 18.3117 15.9712 16.8484 15.8141C15.385 15.657 13.9954 15.0914 12.8383 14.1819C13.7719 13.4478 14.5266 12.5113 15.0455 11.4431C15.5645 10.3749 15.8341 9.20275 15.8341 8.01514C15.8341 6.82752 15.5645 5.6554 15.0455 4.58717C14.5266 3.51893 13.7719 2.58247 12.8383 1.84838C13.9954 0.938864 15.385 0.373246 16.8484 0.216183C18.3117 0.0591193 19.7897 0.316948 21.1135 0.960198C22.4372 1.60345 23.5533 2.60616 24.3341 3.85373C25.1149 5.1013 25.5289 6.54338 25.5289 8.01514Z" fill="#F79E1B"/>
+<path d="M24.7805 12.8756V12.6231H24.8824V12.5716H24.6231V12.6231H24.7249V12.8756H24.7805ZM25.284 12.8756V12.5711H25.2045L25.1131 12.7805L25.0216 12.5711H24.9421V12.8756H24.9982V12.6459L25.0839 12.8439H25.1421L25.2279 12.6454V12.8756H25.284Z" fill="#F79E1B"/>
+</svg>

public/icons/menu.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="16" viewBox="0 0 20 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.375 8C19.375 8.29837 19.2565 8.58452 19.0455 8.79549C18.8345 9.00647 18.5484 9.125 18.25 9.125H1.75C1.45163 9.125 1.16548 9.00647 0.954505 8.79549C0.743526 8.58452 0.625 8.29837 0.625 8C0.625 7.70163 0.743526 7.41548 0.954505 7.2045C1.16548 6.99353 1.45163 6.875 1.75 6.875H18.25C18.5484 6.875 18.8345 6.99353 19.0455 7.2045C19.2565 7.41548 19.375 7.70163 19.375 8ZM1.75 3.125H18.25C18.5484 3.125 18.8345 3.00647 19.0455 2.7955C19.2565 2.58452 19.375 2.29837 19.375 2C19.375 1.70163 19.2565 1.41548 19.0455 1.2045C18.8345 0.993526 18.5484 0.875 18.25 0.875H1.75C1.45163 0.875 1.16548 0.993526 0.954505 1.2045C0.743526 1.41548 0.625 1.70163 0.625 2C0.625 2.29837 0.743526 2.58452 0.954505 2.7955C1.16548 3.00647 1.45163 3.125 1.75 3.125ZM18.25 12.875H1.75C1.45163 12.875 1.16548 12.9935 0.954505 13.2045C0.743526 13.4155 0.625 13.7016 0.625 14C0.625 14.2984 0.743526 14.5845 0.954505 14.7955C1.16548 15.0065 1.45163 15.125 1.75 15.125H18.25C18.5484 15.125 18.8345 15.0065 19.0455 14.7955C19.2565 14.5845 19.375 14.2984 19.375 14C19.375 13.7016 19.2565 13.4155 19.0455 13.2045C18.8345 12.9935 18.5484 12.875 18.25 12.875Z" fill="black"/>
+</svg>

public/icons/minus.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="4" viewBox="0 0 20 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.375 2C19.375 2.29837 19.2565 2.58452 19.0455 2.79549C18.8345 3.00647 18.5484 3.125 18.25 3.125H1.75C1.45163 3.125 1.16548 3.00647 0.954505 2.79549C0.743526 2.58452 0.625 2.29837 0.625 2C0.625 1.70163 0.743526 1.41548 0.954505 1.2045C1.16548 0.993526 1.45163 0.875 1.75 0.875H18.25C18.5484 0.875 18.8345 0.993526 19.0455 1.2045C19.2565 1.41548 19.375 1.70163 19.375 2Z" fill="black"/>
+</svg>

public/icons/outlineOffer.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M21.0766 10.4857L11.7653 1.17444C11.5917 0.999696 11.3851 0.861152 11.1576 0.766846C10.93 0.672541 10.686 0.62435 10.4397 0.625069H1.75001C1.45164 0.625069 1.16549 0.743595 0.954513 0.954574C0.743534 1.16555 0.625008 1.4517 0.625008 1.75007V10.4398C0.624289 10.6861 0.67248 10.9301 0.766785 11.1576C0.861091 11.3852 0.999635 11.5918 1.17438 11.7654L10.4856 21.0766C10.8372 21.4281 11.3141 21.6256 11.8113 21.6256C12.3084 21.6256 12.7853 21.4281 13.1369 21.0766L21.0766 13.1369C21.4281 12.7853 21.6255 12.3085 21.6255 11.8113C21.6255 11.3141 21.4281 10.8373 21.0766 10.4857ZM11.8113 19.2204L2.87501 10.2813V2.87507H10.2813L19.2175 11.8113L11.8113 19.2204ZM7.37501 5.87507C7.37501 6.17174 7.28703 6.46175 7.12221 6.70842C6.95739 6.9551 6.72312 7.14736 6.44903 7.26089C6.17494 7.37442 5.87334 7.40412 5.58237 7.34625C5.2914 7.28837 5.02413 7.14551 4.81435 6.93573C4.60457 6.72595 4.46171 6.45868 4.40383 6.1677C4.34595 5.87673 4.37566 5.57513 4.48919 5.30104C4.60272 5.02695 4.79498 4.79269 5.04165 4.62786C5.28833 4.46304 5.57834 4.37507 5.87501 4.37507C6.27283 4.37507 6.65436 4.5331 6.93567 4.81441C7.21697 5.09571 7.37501 5.47724 7.37501 5.87507Z" fill="black" fill-opacity="0.4"/>
+</svg>

public/icons/paypal.svg

@@ -0,0 +1,4 @@
+<svg width="35" height="10" viewBox="0 0 35 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.42569 0.645996H1.7382C1.55429 0.645996 1.39788 0.779641 1.3692 0.961111L0.282238 7.85185C0.260634 7.98786 0.365947 8.11042 0.503883 8.11042H1.78692C1.97083 8.11042 2.12724 7.97677 2.15592 7.79494L2.44908 5.93642C2.47736 5.75441 2.63416 5.62094 2.81768 5.62094H3.66845C5.4388 5.62094 6.46046 4.76433 6.72742 3.06692C6.84762 2.32431 6.73251 1.74081 6.38462 1.33205C6.00273 0.883467 5.32514 0.645996 4.42569 0.645996ZM4.73575 3.16274C4.58881 4.127 3.85198 4.127 3.13953 4.127H2.73398L3.01849 2.32613C3.03538 2.21739 3.12969 2.13721 3.23973 2.13721H3.4256C3.91092 2.13721 4.36877 2.13721 4.60536 2.41377C4.7463 2.57888 4.78958 2.82399 4.73575 3.16274ZM12.4593 3.13183H11.1723C11.0626 3.13183 10.9679 3.21202 10.951 3.32094L10.8941 3.68079L10.804 3.55041C10.5254 3.14601 9.90422 3.01091 9.2841 3.01091C7.86182 3.01091 6.64722 4.08791 6.41063 5.59876C6.28769 6.35227 6.46246 7.07288 6.88999 7.57546C7.28225 8.0375 7.84345 8.23006 8.51104 8.23006C9.6569 8.23006 10.2925 7.49327 10.2925 7.49327L10.235 7.85094C10.2134 7.98768 10.3187 8.11023 10.4558 8.11023H11.6151C11.7995 8.11023 11.955 7.97659 11.9841 7.79475L12.6797 3.3904C12.7017 3.25493 12.5968 3.13183 12.4593 3.13183ZM10.6653 5.63639C10.5411 6.37154 9.95751 6.86504 9.21336 6.86504C8.83965 6.86504 8.54086 6.74521 8.34919 6.51811C8.15897 6.29263 8.08659 5.97152 8.14715 5.61403C8.26317 4.88507 8.85656 4.37557 9.58944 4.37557C9.95478 4.37557 10.2519 4.49685 10.4476 4.72596C10.6436 4.95743 10.7215 5.28037 10.6653 5.63639ZM18.0202 3.13165H19.3135C19.4947 3.13165 19.6003 3.33476 19.4974 3.48332L15.196 9.69145C15.1263 9.792 15.0116 9.85183 14.889 9.85183H13.5973C13.4155 9.85183 13.3093 9.64708 13.4146 9.49816L14.7539 7.60783L13.3294 3.42785C13.2802 3.28257 13.3875 3.13165 13.542 3.13165H14.8128C14.978 3.13165 15.1236 3.24002 15.1713 3.39804L15.9272 5.9226L17.711 3.29548C17.7809 3.19293 17.8969 3.13165 18.0202 3.13165Z" fill="#253B80"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M32.0427 7.85123L33.1457 0.834488C33.1626 0.72557 33.257 0.645383 33.3666 0.64502H34.6083C34.7455 0.64502 34.8507 0.767938 34.8291 0.903949L33.7414 7.79432C33.7131 7.97615 33.5567 8.1098 33.3725 8.1098H32.2635C32.1264 8.1098 32.0211 7.98724 32.0427 7.85123ZM23.5958 0.64538H20.9078C20.7243 0.64538 20.5679 0.779028 20.5392 0.960497L19.4523 7.85123C19.4306 7.98724 19.5359 8.1098 19.6732 8.1098H21.0524C21.1806 8.1098 21.2903 8.01634 21.3103 7.88905L21.6187 5.93581C21.6471 5.75379 21.8038 5.62033 21.9873 5.62033H22.8377C24.6084 5.62033 25.6298 4.76371 25.897 3.0663C26.0176 2.3237 25.9017 1.7402 25.554 1.33144C25.1723 0.882855 24.4953 0.64538 23.5958 0.64538ZM23.9059 3.16213C23.7593 4.12639 23.0224 4.12639 22.3096 4.12639H21.9044L22.1893 2.32552C22.2063 2.21678 22.2997 2.13659 22.4101 2.13659H22.596C23.081 2.13659 23.5393 2.13659 23.7757 2.41316C23.9168 2.57826 23.9597 2.82338 23.9059 3.16213ZM31.6287 3.13122H30.3426C30.232 3.13122 30.1382 3.21141 30.1216 3.32032L30.0647 3.68017L29.9743 3.5498C29.6957 3.1454 29.0749 3.0103 28.4548 3.0103C27.0325 3.0103 25.8182 4.0873 25.5817 5.59815C25.4591 6.35166 25.6331 7.07226 26.0607 7.57485C26.4536 8.03689 27.0141 8.22945 27.6817 8.22945C28.8276 8.22945 29.463 7.49266 29.463 7.49266L29.4057 7.85033C29.384 7.98707 29.4893 8.10962 29.6274 8.10962H30.7861C30.9696 8.10962 31.126 7.97597 31.1548 7.79414L31.8507 3.38979C31.872 3.25432 31.7667 3.13122 31.6287 3.13122ZM29.8349 5.63578C29.7114 6.37093 29.1271 6.86443 28.3828 6.86443C28.0098 6.86443 27.7104 6.7446 27.5186 6.51749C27.3284 6.29202 27.2569 5.9709 27.3167 5.61342C27.4333 4.88445 28.026 4.37496 28.7588 4.37496C29.1243 4.37496 29.4213 4.49624 29.6172 4.72535C29.8139 4.95682 29.8918 5.27975 29.8349 5.63578Z" fill="#179BD7"/>
+</svg>

public/icons/plus.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M19.375 10C19.375 10.2984 19.2565 10.5845 19.0455 10.7955C18.8345 11.0065 18.5484 11.125 18.25 11.125H11.125V18.25C11.125 18.5484 11.0065 18.8345 10.7955 19.0455C10.5845 19.2565 10.2984 19.375 10 19.375C9.70163 19.375 9.41548 19.2565 9.2045 19.0455C8.99353 18.8345 8.875 18.5484 8.875 18.25V11.125H1.75C1.45163 11.125 1.16548 11.0065 0.954505 10.7955C0.743526 10.5845 0.625 10.2984 0.625 10C0.625 9.70163 0.743526 9.41548 0.954505 9.2045C1.16548 8.99353 1.45163 8.875 1.75 8.875H8.875V1.75C8.875 1.45163 8.99353 1.16548 9.2045 0.954505C9.41548 0.743526 9.70163 0.625 10 0.625C10.2984 0.625 10.5845 0.743526 10.7955 0.954505C11.0065 1.16548 11.125 1.45163 11.125 1.75V8.875H18.25C18.5484 8.875 18.8345 8.99353 19.0455 9.2045C19.2565 9.41548 19.375 9.70163 19.375 10Z" fill="black"/>
+</svg>

public/icons/prada-logo.svg

@@ -0,0 +1,10 @@
+<svg width="195" height="32" viewBox="0 0 195 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_22_367)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0.481689 0.90175L3.41386 4.20848V28.4106L1.24066 31.5774L14.5501 31.5978L12.1512 28.6839L11.9021 19.9679L24.7353 20.0375C28.6251 18.7425 32.6238 15.9815 32.8159 10.3996C32.7545 4.99032 29.452 1.52086 25.6177 0.830605L0.481689 0.90175ZM11.4265 2.44953V17.9977L21.2728 18.0689C23.5131 16.2623 25.2115 14.8787 25.1436 10.5411C25.1115 7.00433 24.3649 3.92011 21.0689 2.45029L11.4265 2.44953ZM38.9753 0.725402L41.9075 4.03289V28.2351L39.7343 31.4033L53.043 31.4222L50.6441 28.5083L50.395 19.7923H50.4483L64.1982 31.5206L75.6091 31.4275L65.1946 22.4193H56.5004L53.436 19.8089L63.2282 19.8619C67.118 18.5669 71.1159 15.8059 71.3088 10.224C71.2482 4.81548 67.9456 1.34527 64.1106 0.65577L38.9753 0.725402ZM49.9194 2.27318V17.8214L59.7657 17.8925C62.0068 16.0859 63.7044 14.7024 63.6365 10.364C63.6044 6.82798 62.8578 3.74301 59.5619 2.27318H49.9194ZM86.5949 0.690586H98.0708L113.009 28.4106C113.656 30.551 115.589 30.2869 116.88 31.2254H102.416L104.59 30.5457L104.454 28.4818L100.719 22.5011L88.0208 22.5722L85.3049 28.3418C85.2143 28.998 84.5123 29.496 85.0331 30.3111L86.0522 31.2958L79.805 31.155L82.5217 30.3111L92.7741 8.71181V7.23365L88.4423 1.45502L86.5949 0.690586ZM88.8236 20.5976L94.0977 10.6123L99.5888 20.5416L88.8236 20.5976ZM164.197 0.751135H175.672L190.611 28.4712C191.257 30.6116 193.191 30.3475 194.482 31.286H180.017L182.191 30.6048L182.055 28.5408L178.32 22.5616L165.622 22.6328L162.906 28.4008C162.815 29.0585 162.114 29.5565 162.634 30.3717L163.653 31.3563L157.407 31.2156L160.123 30.3717L170.376 8.77235V7.29345L166.044 1.51557L164.197 0.751135ZM166.425 20.6589L171.699 10.6736L177.191 20.6013L166.425 20.6589ZM120.849 0.402222L141.292 0.514994C147.875 2.05672 152.064 6.07868 153.363 13.0948L153.308 18.5669C152.108 24.8186 148.175 29.1319 141.238 31.3155L120.74 31.373L120.737 30.7107C123.853 30.4754 124.102 30.1196 124.11 28.2699V3.33506C124.075 1.96741 123.802 1.11594 120.794 1.02209L120.849 0.402222ZM132.469 2.53581L132.45 29.5134C135.146 29.5225 137.485 29.7753 138.806 29.1009C141.801 27.7333 143.191 25.633 143.319 23.6598L143.247 7.73016C143.248 5.1818 140.482 3.38274 138.885 2.91425C137.743 2.49116 135.465 2.47375 132.469 2.53581Z" fill="white" stroke="white" stroke-width="1.02419" stroke-miterlimit="2.613"/>
+</g>
+<defs>
+<clipPath id="clip0_22_367">
+<rect width="194" height="32" fill="white" transform="translate(0.481689)"/>
+</clipPath>
+</defs>
+</svg>

public/icons/search-black.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.7959 19.2041L16.3437 14.75C17.6787 13.0104 18.3019 10.8282 18.087 8.64607C17.8722 6.4639 16.8353 4.44516 15.1867 2.99937C13.5382 1.55357 11.4014 0.788988 9.20984 0.860713C7.01829 0.932437 4.93607 1.8351 3.38558 3.38559C1.83509 4.93608 0.932429 7.0183 0.860705 9.20985C0.78898 11.4014 1.55356 13.5382 2.99936 15.1867C4.44515 16.8353 6.46389 17.8722 8.64606 18.087C10.8282 18.3019 13.0104 17.6787 14.75 16.3438L19.2059 20.8006C19.3106 20.9053 19.4348 20.9883 19.5715 21.0449C19.7083 21.1016 19.8548 21.1307 20.0028 21.1307C20.1508 21.1307 20.2973 21.1016 20.4341 21.0449C20.5708 20.9883 20.695 20.9053 20.7997 20.8006C20.9043 20.696 20.9873 20.5717 21.044 20.435C21.1006 20.2983 21.1298 20.1517 21.1298 20.0037C21.1298 19.8558 21.1006 19.7092 21.044 19.5725C20.9873 19.4358 20.9043 19.3115 20.7997 19.2069L20.7959 19.2041ZM3.12499 9.5C3.12499 8.23915 3.49888 7.0066 4.19938 5.95824C4.89987 4.90988 5.89551 4.09278 7.06039 3.61027C8.22527 3.12776 9.50707 3.00151 10.7437 3.2475C11.9803 3.49348 13.1162 4.10064 14.0078 4.9922C14.8994 5.88376 15.5065 7.01967 15.7525 8.2563C15.9985 9.49293 15.8722 10.7747 15.3897 11.9396C14.9072 13.1045 14.0901 14.1001 13.0418 14.8006C11.9934 15.5011 10.7608 15.875 9.49999 15.875C7.80977 15.8733 6.18927 15.2011 4.99411 14.0059C3.79894 12.8107 3.12673 11.1902 3.12499 9.5Z" fill="black"/>
+</svg>

public/icons/search.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M20.7959 19.2041L16.3437 14.75C17.6787 13.0104 18.3019 10.8282 18.087 8.64607C17.8722 6.4639 16.8353 4.44516 15.1867 2.99937C13.5382 1.55357 11.4014 0.788988 9.20984 0.860713C7.01829 0.932437 4.93607 1.8351 3.38558 3.38559C1.83509 4.93608 0.932429 7.0183 0.860705 9.20985C0.78898 11.4014 1.55356 13.5382 2.99936 15.1867C4.44515 16.8353 6.46389 17.8722 8.64606 18.087C10.8282 18.3019 13.0104 17.6787 14.75 16.3438L19.2059 20.8006C19.3106 20.9053 19.4348 20.9883 19.5715 21.0449C19.7083 21.1016 19.8548 21.1307 20.0028 21.1307C20.1508 21.1307 20.2973 21.1016 20.4341 21.0449C20.5708 20.9883 20.695 20.9053 20.7997 20.8006C20.9043 20.696 20.9873 20.5717 21.044 20.435C21.1006 20.2983 21.1298 20.1517 21.1298 20.0037C21.1298 19.8558 21.1006 19.7092 21.044 19.5725C20.9873 19.4358 20.9043 19.3115 20.7997 19.2069L20.7959 19.2041ZM3.12499 9.5C3.12499 8.23915 3.49888 7.0066 4.19938 5.95824C4.89987 4.90988 5.89551 4.09278 7.06039 3.61027C8.22527 3.12776 9.50707 3.00151 10.7437 3.2475C11.9803 3.49348 13.1162 4.10064 14.0078 4.9922C14.8994 5.88376 15.5065 7.01967 15.7525 8.2563C15.9985 9.49293 15.8722 10.7747 15.3897 11.9396C14.9072 13.1045 14.0901 14.1001 13.0418 14.8006C11.9934 15.5011 10.7608 15.875 9.49999 15.875C7.80977 15.8733 6.18927 15.2011 4.99411 14.0059C3.79894 12.8107 3.12673 11.1902 3.12499 9.5Z" fill="black" fill-opacity="0.4"/>
+</svg>

public/icons/small-star.svg

@@ -0,0 +1,3 @@
+<svg width="56" height="56" viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M28 0C28.9506 15.0527 40.9472 27.0495 56 28C40.9472 28.9506 28.9506 40.9472 28 56C27.0495 40.9472 15.0527 28.9506 0 28C15.0527 27.0495 27.0495 15.0527 28 0Z" fill="black"/>
+</svg>

public/icons/times.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.2882 11.9617C13.4644 12.1378 13.5633 12.3767 13.5633 12.6258C13.5633 12.8749 13.4644 13.1137 13.2882 13.2898C13.1121 13.466 12.8733 13.5649 12.6242 13.5649C12.3751 13.5649 12.1362 13.466 11.9601 13.2898L6.99997 8.32812L2.03825 13.2883C1.86213 13.4644 1.62326 13.5633 1.37418 13.5633C1.12511 13.5633 0.886243 13.4644 0.710122 13.2883C0.534002 13.1122 0.435059 12.8733 0.435059 12.6242C0.435059 12.3751 0.534002 12.1363 0.710122 11.9602L5.67184 7L0.711685 2.03828C0.535564 1.86216 0.436621 1.62329 0.436621 1.37422C0.436621 1.12515 0.535564 0.886277 0.711685 0.710157C0.887805 0.534036 1.12668 0.435093 1.37575 0.435093C1.62482 0.435093 1.86369 0.534036 2.03981 0.710157L6.99997 5.67188L11.9617 0.709375C12.1378 0.533255 12.3767 0.434312 12.6257 0.434312C12.8748 0.434312 13.1137 0.533255 13.2898 0.709375C13.4659 0.885496 13.5649 1.12437 13.5649 1.37344C13.5649 1.62251 13.4659 1.86138 13.2898 2.0375L8.32809 7L13.2882 11.9617Z" fill="white"/>
+</svg>

public/icons/trash.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M17.25 3.5H13.5V2.75C13.5 2.15326 13.2629 1.58097 12.841 1.15901C12.419 0.737053 11.8467 0.5 11.25 0.5H6.75C6.15326 0.5 5.58097 0.737053 5.15901 1.15901C4.73705 1.58097 4.5 2.15326 4.5 2.75V3.5H0.75C0.551088 3.5 0.360322 3.57902 0.21967 3.71967C0.0790178 3.86032 0 4.05109 0 4.25C0 4.44891 0.0790178 4.63968 0.21967 4.78033C0.360322 4.92098 0.551088 5 0.75 5H1.5V18.5C1.5 18.8978 1.65804 19.2794 1.93934 19.5607C2.22064 19.842 2.60218 20 3 20H15C15.3978 20 15.7794 19.842 16.0607 19.5607C16.342 19.2794 16.5 18.8978 16.5 18.5V5H17.25C17.4489 5 17.6397 4.92098 17.7803 4.78033C17.921 4.63968 18 4.44891 18 4.25C18 4.05109 17.921 3.86032 17.7803 3.71967C17.6397 3.57902 17.4489 3.5 17.25 3.5ZM7.5 14.75C7.5 14.9489 7.42098 15.1397 7.28033 15.2803C7.13968 15.421 6.94891 15.5 6.75 15.5C6.55109 15.5 6.36032 15.421 6.21967 15.2803C6.07902 15.1397 6 14.9489 6 14.75V8.75C6 8.55109 6.07902 8.36032 6.21967 8.21967C6.36032 8.07902 6.55109 8 6.75 8C6.94891 8 7.13968 8.07902 7.28033 8.21967C7.42098 8.36032 7.5 8.55109 7.5 8.75V14.75ZM12 14.75C12 14.9489 11.921 15.1397 11.7803 15.2803C11.6397 15.421 11.4489 15.5 11.25 15.5C11.0511 15.5 10.8603 15.421 10.7197 15.2803C10.579 15.1397 10.5 14.9489 10.5 14.75V8.75C10.5 8.55109 10.579 8.36032 10.7197 8.21967C10.8603 8.07902 11.0511 8 11.25 8C11.4489 8 11.6397 8.07902 11.7803 8.21967C11.921 8.36032 12 8.55109 12 8.75V14.75ZM12 3.5H6V2.75C6 2.55109 6.07902 2.36032 6.21967 2.21967C6.36032 2.07902 6.55109 2 6.75 2H11.25C11.4489 2 11.6397 2.07902 11.7803 2.21967C11.921 2.36032 12 2.55109 12 2.75V3.5Z" fill="#FF3333"/>
+</svg>

public/icons/user.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 0.875C8.99747 0.875 7.0399 1.46882 5.37486 2.58137C3.70981 3.69392 2.41206 5.27523 1.64572 7.12533C0.879387 8.97543 0.678878 11.0112 1.06955 12.9753C1.46023 14.9393 2.42454 16.7435 3.84055 18.1595C5.25656 19.5755 7.06066 20.5398 9.02471 20.9305C10.9888 21.3211 13.0246 21.1206 14.8747 20.3543C16.7248 19.5879 18.3061 18.2902 19.4186 16.6251C20.5312 14.9601 21.125 13.0025 21.125 11C21.122 8.3156 20.0543 5.74199 18.1562 3.84383C16.258 1.94567 13.6844 0.877978 11 0.875ZM6.45969 17.4284C6.98195 16.7143 7.66528 16.1335 8.45418 15.7331C9.24308 15.3327 10.1153 15.124 11 15.124C11.8847 15.124 12.7569 15.3327 13.5458 15.7331C14.3347 16.1335 15.0181 16.7143 15.5403 17.4284C14.2134 18.3695 12.6268 18.875 11 18.875C9.37323 18.875 7.78665 18.3695 6.45969 17.4284ZM8.375 10.25C8.375 9.73082 8.52896 9.22331 8.8174 8.79163C9.10583 8.35995 9.5158 8.0235 9.99546 7.82482C10.4751 7.62614 11.0029 7.57415 11.5121 7.67544C12.0213 7.77672 12.489 8.02673 12.8562 8.39384C13.2233 8.76096 13.4733 9.22869 13.5746 9.73789C13.6759 10.2471 13.6239 10.7749 13.4252 11.2545C13.2265 11.7342 12.8901 12.1442 12.4584 12.4326C12.0267 12.721 11.5192 12.875 11 12.875C10.3038 12.875 9.63613 12.5984 9.14385 12.1062C8.65157 11.6139 8.375 10.9462 8.375 10.25ZM17.1875 15.8694C16.4583 14.9419 15.5289 14.1914 14.4688 13.6737C15.1444 12.9896 15.6026 12.1208 15.7858 11.1769C15.9689 10.2329 15.8688 9.25583 15.498 8.36861C15.1273 7.4814 14.5024 6.72364 13.702 6.19068C12.9017 5.65771 11.9616 5.37334 11 5.37334C10.0384 5.37334 9.09833 5.65771 8.29797 6.19068C7.49762 6.72364 6.87275 7.4814 6.50198 8.36861C6.13121 9.25583 6.0311 10.2329 6.21424 11.1769C6.39739 12.1208 6.85561 12.9896 7.53125 13.6737C6.4711 14.1914 5.54168 14.9419 4.8125 15.8694C3.89661 14.7083 3.32614 13.3129 3.1664 11.8427C3.00665 10.3725 3.2641 8.88711 3.90925 7.55644C4.55441 6.22578 5.5612 5.10366 6.81439 4.31855C8.06757 3.53343 9.5165 3.11703 10.9953 3.11703C12.4741 3.11703 13.9231 3.53343 15.1762 4.31855C16.4294 5.10366 17.4362 6.22578 18.0814 7.55644C18.7265 8.88711 18.984 10.3725 18.8242 11.8427C18.6645 13.3129 18.094 14.7083 17.1781 15.8694H17.1875Z" fill="black"/>
+</svg>

public/icons/versace-logo.svg

@@ -0,0 +1,3 @@
+<svg width="167" height="34" viewBox="0 0 167 34" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M150.179 0.655656H166.482V3.25336C166.008 3.09436 165.512 3.0124 165.013 3.01061H155.642V15.1491H164.758C165.413 15.1491 165.996 15.0772 166.481 14.9548V17.5411C166.068 17.4443 165.499 17.3952 164.794 17.3952H155.642V29.9466H164.733C165.232 29.9466 165.826 29.874 166.481 29.7159V32.508H150.203C150.333 32.017 150.399 31.511 150.398 31.003V2.19691C150.398 1.56617 150.325 1.04435 150.179 0.655656ZM146.405 8.92219L141.695 8.88659C141.464 6.23976 139.947 3.67765 136.609 3.20567C129.459 2.56211 127.444 10.415 127.626 16.1572C127.809 21.6922 128.694 30.2015 136.075 30.2015C139.171 30.2015 142.144 27.0207 142.047 24.3383L146.405 24.3027C146.089 29.8377 139.741 33.0419 136.718 33.1516C126.389 33.5039 122.066 26.6206 121.848 16.7993C121.654 7.90346 125.296 0 135.504 0C144.244 0.121734 145.931 5.29294 146.405 8.92219ZM72.9408 28.8901L76.0611 26.2803C77.687 28.9635 79.0225 30.1886 82.2517 30.1886C85.5286 30.1886 88.285 28.1982 88.285 24.6786C88.285 22.9423 87.5802 21.522 86.1849 20.4542C85.5528 19.9559 83.951 19.0945 81.4259 17.8928C77.6507 16.0846 73.9731 13.7289 73.9731 8.99551C73.9731 3.02271 79.0467 0.388695 84.3995 0.193636C87.5681 0.0726133 91.5014 1.82174 93.091 3.78728L89.9231 6.22695C89.3581 5.17255 88.5181 4.29083 87.4923 3.6754C86.4665 3.05998 85.2932 2.73381 84.0969 2.73154C80.0541 2.73154 76.8498 7.41724 80.2 10.6464C81.0493 11.4715 82.7863 12.4909 85.4324 13.7047C89.6561 15.6838 93.2612 18.0501 93.2612 23.2825C93.2612 25.0908 92.7878 26.7779 91.853 28.3199C89.9722 31.4273 86.8278 32.9814 82.4339 32.9814C77.3838 32.9814 76.3892 31.8281 72.9408 28.8901ZM28.4893 0.655656H44.7782V3.25336C44.3051 3.09442 43.8094 3.01246 43.3103 3.01061H33.9396V15.1491H43.0554C43.7111 15.1491 44.2941 15.0772 44.7789 14.9548V17.5411C44.366 17.4443 43.7958 17.3952 43.1046 17.3952H33.9396V29.9466H43.0312C43.5289 29.9466 44.124 29.874 44.7789 29.7159V32.508H28.5143C28.6332 32.0151 28.6941 31.5101 28.6958 31.003V2.19691C28.6958 1.56617 28.6225 1.04435 28.4893 0.655656ZM0 0.655656H5.92368V0.947533C5.92368 1.21449 6.0084 1.56617 6.15434 2.01538L14.5049 27.1545L23.0754 1.90574C23.2085 1.48145 23.2818 1.06856 23.2818 0.655656H26.1586C25.8674 1.16537 25.6489 1.61529 25.515 2.01538L15.7308 31.2095C15.6339 31.4886 15.5492 31.9257 15.4766 32.5087H10.6208C10.5474 32.0674 10.4379 31.6329 10.2933 31.2095L0.704065 2.24603C0.482555 1.71187 0.251627 1.18166 0.0113903 0.655656H0ZM62.9145 17.262C66.7986 16.4968 69.7729 13.5232 69.7729 9.27457C69.7729 3.70186 65.1114 0.654944 59.8918 0.654944H50.3509C50.4841 1.14117 50.5574 1.65089 50.5574 2.18481V30.9774C50.5574 31.5968 50.4841 32.1186 50.3509 32.5073H56.0319C55.8929 32.0093 55.8235 31.4944 55.8254 30.9774V17.7476L57.6457 17.9419L67.1631 32.5073H72.8803L62.9145 17.262ZM61.9314 14.8345C60.8998 15.562 59.6611 15.9258 58.2409 15.9258H55.8133V2.97572H57.986C59.8441 2.97572 61.2878 3.43632 62.32 4.35822C63.7282 5.63394 64.4443 7.35744 64.4443 9.51804C64.4443 11.8488 63.6064 13.6214 61.9314 14.8352M120.901 31.1853L110.293 1.71211C110.175 1.37134 110.105 1.01572 110.086 0.655656H105.497C105.497 1.03225 105.436 1.43233 105.29 1.83313L95.0096 31.1853C94.875 31.6089 94.6572 32.0467 94.366 32.508H97.3275C97.3161 32.0225 97.3766 31.5733 97.5105 31.1853L100.556 22.5294H112.27L115.281 31.186C115.439 31.658 115.511 32.0951 115.511 32.508H121.654C121.301 32.0104 121.047 31.5612 120.901 31.1853ZM101.358 20.1865L106.31 5.80266L111.397 20.1865H101.358Z" fill="white"/>
+</svg>

public/icons/verticalSlider.svg

@@ -0,0 +1,3 @@
+<svg width="22" height="20" viewBox="0 0 22 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.125 9.625V18.25C12.125 18.5484 12.0065 18.8345 11.7955 19.0455C11.5845 19.2565 11.2984 19.375 11 19.375C10.7016 19.375 10.4155 19.2565 10.2045 19.0455C9.99353 18.8345 9.875 18.5484 9.875 18.25V9.625C9.875 9.32663 9.99353 9.04048 10.2045 8.8295C10.4155 8.61853 10.7016 8.5 11 8.5C11.2984 8.5 11.5845 8.61853 11.7955 8.8295C12.0065 9.04048 12.125 9.32663 12.125 9.625ZM17.75 16C17.4516 16 17.1655 16.1185 16.9545 16.3295C16.7435 16.5405 16.625 16.8266 16.625 17.125V18.25C16.625 18.5484 16.7435 18.8345 16.9545 19.0455C17.1655 19.2565 17.4516 19.375 17.75 19.375C18.0484 19.375 18.3345 19.2565 18.5455 19.0455C18.7565 18.8345 18.875 18.5484 18.875 18.25V17.125C18.875 16.8266 18.7565 16.5405 18.5455 16.3295C18.3345 16.1185 18.0484 16 17.75 16ZM20 12.25H18.875V1.75C18.875 1.45163 18.7565 1.16548 18.5455 0.954505C18.3345 0.743526 18.0484 0.625 17.75 0.625C17.4516 0.625 17.1655 0.743526 16.9545 0.954505C16.7435 1.16548 16.625 1.45163 16.625 1.75V12.25H15.5C15.2016 12.25 14.9155 12.3685 14.7045 12.5795C14.4935 12.7905 14.375 13.0766 14.375 13.375C14.375 13.6734 14.4935 13.9595 14.7045 14.1705C14.9155 14.3815 15.2016 14.5 15.5 14.5H20C20.2984 14.5 20.5845 14.3815 20.7955 14.1705C21.0065 13.9595 21.125 13.6734 21.125 13.375C21.125 13.0766 21.0065 12.7905 20.7955 12.5795C20.5845 12.3685 20.2984 12.25 20 12.25ZM4.25 13C3.95163 13 3.66548 13.1185 3.4545 13.3295C3.24353 13.5405 3.125 13.8266 3.125 14.125V18.25C3.125 18.5484 3.24353 18.8345 3.4545 19.0455C3.66548 19.2565 3.95163 19.375 4.25 19.375C4.54837 19.375 4.83452 19.2565 5.0455 19.0455C5.25647 18.8345 5.375 18.5484 5.375 18.25V14.125C5.375 13.8266 5.25647 13.5405 5.0455 13.3295C4.83452 13.1185 4.54837 13 4.25 13ZM6.5 9.25H5.375V1.75C5.375 1.45163 5.25647 1.16548 5.0455 0.954505C4.83452 0.743526 4.54837 0.625 4.25 0.625C3.95163 0.625 3.66548 0.743526 3.4545 0.954505C3.24353 1.16548 3.125 1.45163 3.125 1.75V9.25H2C1.70163 9.25 1.41548 9.36853 1.2045 9.5795C0.993526 9.79048 0.875 10.0766 0.875 10.375C0.875 10.6734 0.993526 10.9595 1.2045 11.1705C1.41548 11.3815 1.70163 11.5 2 11.5H6.5C6.79837 11.5 7.08452 11.3815 7.2955 11.1705C7.50647 10.9595 7.625 10.6734 7.625 10.375C7.625 10.0766 7.50647 9.79048 7.2955 9.5795C7.08452 9.36853 6.79837 9.25 6.5 9.25ZM13.25 4.75H12.125V1.75C12.125 1.45163 12.0065 1.16548 11.7955 0.954505C11.5845 0.743526 11.2984 0.625 11 0.625C10.7016 0.625 10.4155 0.743526 10.2045 0.954505C9.99353 1.16548 9.875 1.45163 9.875 1.75V4.75H8.75C8.45163 4.75 8.16548 4.86853 7.9545 5.0795C7.74353 5.29048 7.625 5.57663 7.625 5.875C7.625 6.17337 7.74353 6.45952 7.9545 6.6705C8.16548 6.88147 8.45163 7 8.75 7H13.25C13.5484 7 13.8345 6.88147 14.0455 6.6705C14.2565 6.45952 14.375 6.17337 14.375 5.875C14.375 5.57663 14.2565 5.29048 14.0455 5.0795C13.8345 4.86853 13.5484 4.75 13.25 4.75Z" fill="black"/>
+</svg>

public/icons/xTwitter.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="10" viewBox="0 0 12 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.2071 1.9831C10.7881 2.16933 10.3458 2.28573 9.88023 2.35557C10.3458 2.07622 10.7183 1.63392 10.8812 1.0985C10.4389 1.35457 9.95006 1.5408 9.41465 1.6572C8.99562 1.2149 8.39037 0.935547 7.73856 0.935547C6.48149 0.935547 5.45721 1.95982 5.45721 3.21689C5.45721 3.40312 5.48049 3.56608 5.52705 3.72903C3.64145 3.63591 1.94208 2.72803 0.801411 1.33129C0.615178 1.68048 0.498783 2.05294 0.498783 2.47196C0.498783 3.26345 0.894527 3.96182 1.52306 4.38084C1.1506 4.35756 0.801411 4.26445 0.475504 4.10149V4.12477C0.475504 5.24216 1.26699 6.17333 2.31455 6.38284C2.12831 6.42939 1.9188 6.45267 1.70929 6.45267C1.56962 6.45267 1.40666 6.42939 1.26699 6.40612C1.56962 7.314 2.40766 7.98909 3.40866 7.98909C2.61717 8.59434 1.63945 8.96681 0.56862 8.96681C0.382388 8.96681 0.196156 8.96681 0.0332031 8.94353C1.05748 9.59534 2.24471 9.96781 3.54833 9.96781C7.76184 9.96781 10.0665 6.47595 10.0665 3.44968C10.0665 3.35656 10.0665 3.24017 10.0665 3.14705C10.5088 2.84443 10.9045 2.44868 11.2071 1.9831Z" fill="black"/>
+</svg>

public/icons/zara-logo.svg

@@ -0,0 +1,10 @@
+<svg width="92" height="38" viewBox="0 0 92 38" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_22_363)">
+<path d="M86.8141 36.8682L73.3318 0.0322557L73.3226 0.00787354H73.0566L70.2802 7.57753L65.2258 21.3583L65.214 21.3474C63.4622 19.8135 60.9908 18.8546 57.8782 18.4976L56.9289 18.4003L57.8707 18.2805C63.0036 17.3652 66.454 14.1482 66.454 10.2723C66.454 4.95736 61.4165 1.24757 54.2006 1.24757H39.1869V1.51668H43.5494V28.98L32.9544 0.0321654L32.9448 0.00787354H32.6788L29.9024 7.57753L19.194 36.7734L19.1281 36.781C18.9451 36.8034 18.7641 36.8212 18.585 36.8346C18.3157 36.8556 18.0479 36.8681 17.7792 36.8681H6.95934L27.5265 1.51659L27.6794 1.25091H2.52491V12.1867H2.79182C2.83914 6.86007 5.96517 1.51659 12.8719 1.51659H21.2043L0.481689 37.133H28.399V26.6557H28.1321C28.0957 31.2985 25.4436 35.7082 19.6764 36.7039L19.493 36.7349L23.8853 24.7547H36.1892L40.6227 36.8682H36.2492V37.1331H53.415V36.8682H49.0228V18.5956H54.0908C59.2482 18.5956 62.2062 20.8821 62.2062 24.8669V28.1082C62.2062 28.4653 62.2306 28.9875 62.2577 29.4242V29.4401L59.5337 36.8665H55.9751V37.1314H63.3413V36.8665H59.821L62.3016 30.104C62.3067 30.1694 62.3093 30.2088 62.3093 30.2088L62.3777 30.8181L62.4436 31.2212C62.8575 33.7149 63.8186 35.548 65.2993 36.6695L65.5122 36.8229C66.6372 37.5991 68.0352 37.9922 69.6695 37.9922C71.8344 37.9922 73.2779 37.4566 74.4697 36.196L74.3134 36.0501C73.2153 37.0559 72.2939 37.4633 71.1393 37.4633C69.172 37.4633 68.1425 35.0954 68.1425 32.7602V28.2188C68.1529 27.092 67.9751 25.9712 67.6162 24.9021L67.5673 24.7613V24.7563H76.5668L81.0003 36.8699H76.6268V37.1347H91.4817V36.8699L86.8141 36.8682ZM23.9832 24.4898L30.0444 7.96485L36.0921 24.4898H23.9832ZM49.0255 18.3299V1.51659H52.8939C58.0615 1.51659 60.7897 4.56507 60.7897 10.3294C60.7897 16.4599 59.2236 18.3299 54.0908 18.3299H49.0255ZM67.4624 24.4898L67.4362 24.4244C67.0363 23.4578 66.454 22.5759 65.7207 21.826L65.4673 21.5745L65.4403 21.5494L70.4186 7.96485L76.4663 24.4898H67.4624Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_22_363">
+<rect width="91" height="38" fill="white" transform="translate(0.481689)"/>
+</clipPath>
+</defs>
+</svg>

public/next.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>

public/vercel.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>

src/app/cart/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import BreadcrumbCart from "@/components/cart-page/BreadcrumbCart";
+import ProductCard from "@/components/cart-page/ProductCard";
+import { Button } from "@/components/ui/button";
+import InputGroup from "@/components/ui/input-group";
+import { cn } from "@/lib/utils";
+import { integralCF } from "@/styles/fonts";
+import { FaArrowRight } from "react-icons/fa6";
+import { MdOutlineLocalOffer } from "react-icons/md";
+import { TbBasketExclamation } from "react-icons/tb";
+import React from "react";
+import { RootState } from "@/lib/store";
+import { useAppSelector } from "@/lib/hooks/redux";
+import Link from "next/link";
+
+export default function CartPage() {
+  const { cart, totalPrice, adjustedTotalPrice } = useAppSelector(
+    (state: RootState) => state.carts
+  );
+
+  return (
+    <main className="pb-20">
+      <div className="max-w-frame mx-auto px-4 xl:px-0">
+        {cart && cart.items.length > 0 ? (
+          <>
+            <BreadcrumbCart />
+            <h2
+              className={cn([
+                integralCF.className,
+                "font-bold text-[32px] md:text-[40px] text-black uppercase mb-5 md:mb-6",
+              ])}
+            >
+              your cart
+            </h2>
+            <div className="flex flex-col lg:flex-row space-y-5 lg:space-y-0 lg:space-x-5 items-start">
+              <div className="w-full p-3.5 md:px-6 flex-col space-y-4 md:space-y-6 rounded-[20px] border border-black/10">
+                {cart?.items.map((product, idx, arr) => (
+                  <React.Fragment key={idx}>
+                    <ProductCard data={product} />
+                    {arr.length - 1 !== idx && (
+                      <hr className="border-t-black/10" />
+                    )}
+                  </React.Fragment>
+                ))}
+              </div>
+              <div className="w-full lg:max-w-[505px] p-5 md:px-6 flex-col space-y-4 md:space-y-6 rounded-[20px] border border-black/10">
+                <h6 className="text-xl md:text-2xl font-bold text-black">
+                  Order Summary
+                </h6>
+                <div className="flex flex-col space-y-5">
+                  <div className="flex items-center justify-between">
+                    <span className="md:text-xl text-black/60">Subtotal</span>
+                    <span className="md:text-xl font-bold">${totalPrice}</span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="md:text-xl text-black/60">
+                      Discount (-
+                      {Math.round(
+                        ((totalPrice - adjustedTotalPrice) / totalPrice) * 100
+                      )}
+                      %)
+                    </span>
+                    <span className="md:text-xl font-bold text-red-600">
+                      -${Math.round(totalPrice - adjustedTotalPrice)}
+                    </span>
+                  </div>
+                  <div className="flex items-center justify-between">
+                    <span className="md:text-xl text-black/60">
+                      Delivery Fee
+                    </span>
+                    <span className="md:text-xl font-bold">Free</span>
+                  </div>
+                  <hr className="border-t-black/10" />
+                  <div className="flex items-center justify-between">
+                    <span className="md:text-xl text-black">Total</span>
+                    <span className="text-xl md:text-2xl font-bold">
+                      ${Math.round(adjustedTotalPrice)}
+                    </span>
+                  </div>
+                </div>
+                <div className="flex space-x-3">
+                  <InputGroup className="bg-[#F0F0F0]">
+                    <InputGroup.Text>
+                      <MdOutlineLocalOffer className="text-black/40 text-2xl" />
+                    </InputGroup.Text>
+                    <InputGroup.Input
+                      type="text"
+                      name="code"
+                      placeholder="Add promo code"
+                      className="bg-transparent placeholder:text-black/40"
+                    />
+                  </InputGroup>
+                  <Button
+                    type="button"
+                    className="bg-black rounded-full w-full max-w-[119px] h-[48px]"
+                  >
+                    Apply
+                  </Button>
+                </div>
+                <Button
+                  type="button"
+                  className="text-sm md:text-base font-medium bg-black rounded-full w-full py-4 h-[54px] md:h-[60px] group"
+                >
+                  Go to Checkout{" "}
+                  <FaArrowRight className="text-xl ml-2 group-hover:translate-x-1 transition-all" />
+                </Button>
+              </div>
+            </div>
+          </>
+        ) : (
+          <div className="flex items-center flex-col text-gray-300 mt-32">
+            <TbBasketExclamation strokeWidth={1} className="text-6xl" />
+            <span className="block mb-4">Your shopping cart is empty.</span>
+            <Button className="rounded-full w-24" asChild>
+              <Link href="/shop">Shop</Link>
+            </Button>
+          </div>
+        )}
+      </div>
+    </main>
+  );
+}

src/app/layout.tsx

@@ -0,0 +1,37 @@
+import type { Metadata, Viewport } from "next";
+import "@/styles/globals.css";
+import { satoshi } from "@/styles/fonts";
+import TopBanner from "@/components/layout/Banner/TopBanner";
+import TopNavbar from "@/components/layout/Navbar/TopNavbar";
+import Footer from "@/components/layout/Footer";
+import HolyLoader from "holy-loader";
+import Providers from "./providers";
+
+export const metadata: Metadata = {
+  title: "Shopco",
+  description: "Generated by create next app",
+};
+
+export const viewport: Viewport = {
+  themeColor: "#000000",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={satoshi.className}>
+        <HolyLoader color="#868686" />
+        <TopBanner />
+        <Providers>
+          <TopNavbar />
+          {children}
+        </Providers>
+        <Footer />
+      </body>
+    </html>
+  );
+}

src/app/page.tsx

@@ -0,0 +1,236 @@
+import ProductListSec from "@/components/common/ProductListSec";
+import Brands from "@/components/homepage/Brands";
+import DressStyle from "@/components/homepage/DressStyle";
+import Header from "@/components/homepage/Header";
+import Reviews from "@/components/homepage/Reviews";
+import { Product } from "@/types/product.types";
+import { Review } from "@/types/review.types";
+
+export const newArrivalsData: Product[] = [
+  {
+    id: 1,
+    title: "T-shirt with Tape Details",
+    srcUrl: "/images/pic1.png",
+    gallery: ["/images/pic1.png", "/images/pic10.png", "/images/pic11.png"],
+    price: 120,
+    discount: {
+      amount: 0,
+      percentage: 0,
+    },
+    rating: 4.5,
+  },
+  {
+    id: 2,
+    title: "Skinny Fit Jeans",
+    srcUrl: "/images/pic2.png",
+    gallery: ["/images/pic2.png"],
+    price: 260,
+    discount: {
+      amount: 0,
+      percentage: 20,
+    },
+    rating: 3.5,
+  },
+  {
+    id: 3,
+    title: "Chechered Shirt",
+    srcUrl: "/images/pic3.png",
+    gallery: ["/images/pic3.png"],
+    price: 180,
+    discount: {
+      amount: 0,
+      percentage: 0,
+    },
+    rating: 4.5,
+  },
+  {
+    id: 4,
+    title: "Sleeve Striped T-shirt",
+    srcUrl: "/images/pic4.png",
+    gallery: ["/images/pic4.png", "/images/pic10.png", "/images/pic11.png"],
+    price: 160,
+    discount: {
+      amount: 0,
+      percentage: 30,
+    },
+    rating: 4.5,
+  },
+];
+
+export const topSellingData: Product[] = [
+  {
+    id: 5,
+    title: "Vertical Striped Shirt",
+    srcUrl: "/images/pic5.png",
+    gallery: ["/images/pic5.png", "/images/pic10.png", "/images/pic11.png"],
+    price: 232,
+    discount: {
+      amount: 0,
+      percentage: 20,
+    },
+    rating: 5.0,
+  },
+  {
+    id: 6,
+    title: "Courage Graphic T-shirt",
+    srcUrl: "/images/pic6.png",
+    gallery: ["/images/pic6.png", "/images/pic10.png", "/images/pic11.png"],
+    price: 145,
+    discount: {
+      amount: 0,
+      percentage: 0,
+    },
+    rating: 4.0,
+  },
+  {
+    id: 7,
+    title: "Loose Fit Bermuda Shorts",
+    srcUrl: "/images/pic7.png",
+    gallery: ["/images/pic7.png"],
+    price: 80,
+    discount: {
+      amount: 0,
+      percentage: 0,
+    },
+    rating: 3.0,
+  },
+  {
+    id: 8,
+    title: "Faded Skinny Jeans",
+    srcUrl: "/images/pic8.png",
+    gallery: ["/images/pic8.png"],
+    price: 210,
+    discount: {
+      amount: 0,
+      percentage: 0,
+    },
+    rating: 4.5,
+  },
+];
+
+export const relatedProductData: Product[] = [
+  {
+    id: 12,
+    title: "Polo with Contrast Trims",
+    srcUrl: "/images/pic12.png",
+    gallery: ["/images/pic12.png", "/images/pic10.png", "/images/pic11.png"],
+    price: 242,
+    discount: {
+      amount: 0,
+      percentage: 20,
+    },
+    rating: 4.0,
+  },
+  {
+    id: 13,
+    title: "Gradient Graphic T-shirt",
+    srcUrl: "/images/pic13.png",
+    gallery: ["/images/pic13.png", "/images/pic10.png", "/images/pic11.png"],
+    price: 145,
+    discount: {
+      amount: 0,
+      percentage: 0,
+    },
+    rating: 3.5,
+  },
+  {
+    id: 14,
+    title: "Polo with Tipping Details",
+    srcUrl: "/images/pic14.png",
+    gallery: ["/images/pic14.png"],
+    price: 180,
+    discount: {
+      amount: 0,
+      percentage: 0,
+    },
+    rating: 4.5,
+  },
+  {
+    id: 15,
+    title: "Black Striped T-shirt",
+    srcUrl: "/images/pic15.png",
+    gallery: ["/images/pic15.png"],
+    price: 150,
+    discount: {
+      amount: 0,
+      percentage: 30,
+    },
+    rating: 5.0,
+  },
+];
+
+export const reviewsData: Review[] = [
+  {
+    id: 1,
+    user: "Alex K.",
+    content:
+      '"Finding clothes that align with my personal style used to be a challenge until I discovered Shop.co. The range of options they offer is truly remarkable, catering to a variety of tastes and occasions.”',
+    rating: 5,
+    date: "August 14, 2023",
+  },
+  {
+    id: 2,
+    user: "Sarah M.",
+    content: `"I'm blown away by the quality and style of the clothes I received from Shop.co. From casual wear to elegant dresses, every piece I've bought has exceeded my expectations.”`,
+    rating: 5,
+    date: "August 15, 2023",
+  },
+  {
+    id: 3,
+    user: "Ethan R.",
+    content: `"This t-shirt is a must-have for anyone who appreciates good design. The minimalistic yet stylish pattern caught my eye, and the fit is perfect. I can see the designer's touch in every aspect of this shirt."`,
+    rating: 5,
+    date: "August 16, 2023",
+  },
+  {
+    id: 4,
+    user: "Olivia P.",
+    content: `"As a UI/UX enthusiast, I value simplicity and functionality. This t-shirt not only represents those principles but also feels great to wear. It's evident that the designer poured their creativity into making this t-shirt stand out."`,
+    rating: 5,
+    date: "August 17, 2023",
+  },
+  {
+    id: 5,
+    user: "Liam K.",
+    content: `"This t-shirt is a fusion of comfort and creativity. The fabric is soft, and the design speaks volumes about the designer's skill. It's like wearing a piece of art that reflects my passion for both design and fashion."`,
+    rating: 5,
+    date: "August 18, 2023",
+  },
+  {
+    id: 6,
+    user: "Samantha D.",
+    content: `"I absolutely love this t-shirt! The design is unique and the fabric feels so comfortable. As a fellow designer, I appreciate the attention to detail. It's become my favorite go-to shirt."`,
+    rating: 5,
+    date: "August 19, 2023",
+  },
+];
+
+export default function Home() {
+  return (
+    <>
+      <Header />
+      <Brands />
+      <main className="my-[50px] sm:my-[72px]">
+        <ProductListSec
+          title="NEW ARRIVALS"
+          data={newArrivalsData}
+          viewAllLink="/shop#new-arrivals"
+        />
+        <div className="max-w-frame mx-auto px-4 xl:px-0">
+          <hr className="h-[1px] border-t-black/10 my-10 sm:my-16" />
+        </div>
+        <div className="mb-[50px] sm:mb-20">
+          <ProductListSec
+            title="top selling"
+            data={topSellingData}
+            viewAllLink="/shop#top-selling"
+          />
+        </div>
+        <div className="mb-[50px] sm:mb-20">
+          <DressStyle />
+        </div>
+        <Reviews data={reviewsData} />
+      </main>
+    </>
+  );
+}

src/app/providers.tsx

@@ -0,0 +1,32 @@
+"use client";
+
+import React from "react";
+import { Provider } from "react-redux";
+import { makeStore } from "../lib/store";
+import { PersistGate } from "redux-persist/integration/react";
+import SpinnerbLoader from "@/components/ui/SpinnerbLoader";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const Providers = ({ children }: Props) => {
+  const { store, persistor } = makeStore();
+
+  return (
+    <Provider store={store}>
+      <PersistGate
+        loading={
+          <div className="flex items-center justify-center h-96">
+            <SpinnerbLoader className="w-10 border-2 border-gray-300 border-r-gray-600" />
+          </div>
+        }
+        persistor={persistor}
+      >
+        {children}
+      </PersistGate>
+    </Provider>
+  );
+};
+
+export default Providers;

src/app/shop/page.tsx

@@ -0,0 +1,138 @@
+import BreadcrumbShop from "@/components/shop-page/BreadcrumbShop";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import MobileFilters from "@/components/shop-page/filters/MobileFilters";
+import Filters from "@/components/shop-page/filters";
+import { FiSliders } from "react-icons/fi";
+import { newArrivalsData, relatedProductData, topSellingData } from "../page";
+import ProductCard from "@/components/common/ProductCard";
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+export default function ShopPage() {
+  return (
+    <main className="pb-20">
+      <div className="max-w-frame mx-auto px-4 xl:px-0">
+        <hr className="h-[1px] border-t-black/10 mb-5 sm:mb-6" />
+        <BreadcrumbShop />
+        <div className="flex md:space-x-5 items-start">
+          <div className="hidden md:block min-w-[295px] max-w-[295px] border border-black/10 rounded-[20px] px-5 md:px-6 py-5 space-y-5 md:space-y-6">
+            <div className="flex items-center justify-between">
+              <span className="font-bold text-black text-xl">Filters</span>
+              <FiSliders className="text-2xl text-black/40" />
+            </div>
+            <Filters />
+          </div>
+          <div className="flex flex-col w-full space-y-5">
+            <div className="flex flex-col lg:flex-row lg:justify-between">
+              <div className="flex items-center justify-between">
+                <h1 className="font-bold text-2xl md:text-[32px]">Casual</h1>
+                <MobileFilters />
+              </div>
+              <div className="flex flex-col sm:items-center sm:flex-row">
+                <span className="text-sm md:text-base text-black/60 mr-3">
+                  Showing 1-10 of 100 Products
+                </span>
+                <div className="flex items-center">
+                  Sort by:{" "}
+                  <Select defaultValue="most-popular">
+                    <SelectTrigger className="font-medium text-sm px-1.5 sm:text-base w-fit text-black bg-transparent shadow-none border-none">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      <SelectItem value="most-popular">Most Popular</SelectItem>
+                      <SelectItem value="low-price">Low Price</SelectItem>
+                      <SelectItem value="high-price">High Price</SelectItem>
+                    </SelectContent>
+                  </Select>
+                </div>
+              </div>
+            </div>
+            <div className="w-full grid grid-cols-1 xs:grid-cols-2 sm:grid-cols-3 md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-5">
+              {[
+                ...relatedProductData.slice(1, 4),
+                ...newArrivalsData.slice(1, 4),
+                ...topSellingData.slice(1, 4),
+              ].map((product) => (
+                <ProductCard key={product.id} data={product} />
+              ))}
+            </div>
+            <hr className="border-t-black/10" />
+            <Pagination className="justify-between">
+              <PaginationPrevious href="#" className="border border-black/10" />
+              <PaginationContent>
+                <PaginationItem>
+                  <PaginationLink
+                    href="#"
+                    className="text-black/50 font-medium text-sm"
+                    isActive
+                  >
+                    1
+                  </PaginationLink>
+                </PaginationItem>
+                <PaginationItem>
+                  <PaginationLink
+                    href="#"
+                    className="text-black/50 font-medium text-sm"
+                  >
+                    2
+                  </PaginationLink>
+                </PaginationItem>
+                <PaginationItem className="hidden lg:block">
+                  <PaginationLink
+                    href="#"
+                    className="text-black/50 font-medium text-sm"
+                  >
+                    3
+                  </PaginationLink>
+                </PaginationItem>
+                <PaginationItem>
+                  <PaginationEllipsis className="text-black/50 font-medium text-sm" />
+                </PaginationItem>
+                <PaginationItem className="hidden lg:block">
+                  <PaginationLink
+                    href="#"
+                    className="text-black/50 font-medium text-sm"
+                  >
+                    8
+                  </PaginationLink>
+                </PaginationItem>
+                <PaginationItem className="hidden sm:block">
+                  <PaginationLink
+                    href="#"
+                    className="text-black/50 font-medium text-sm"
+                  >
+                    9
+                  </PaginationLink>
+                </PaginationItem>
+                <PaginationItem>
+                  <PaginationLink
+                    href="#"
+                    className="text-black/50 font-medium text-sm"
+                  >
+                    10
+                  </PaginationLink>
+                </PaginationItem>
+              </PaginationContent>
+
+              <PaginationNext href="#" className="border border-black/10" />
+            </Pagination>
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

src/app/shop/product/[...slug]/page.tsx

@@ -0,0 +1,47 @@
+import {
+  newArrivalsData,
+  relatedProductData,
+  topSellingData,
+} from "@/app/page";
+import ProductListSec from "@/components/common/ProductListSec";
+import BreadcrumbProduct from "@/components/product-page/BreadcrumbProduct";
+import Header from "@/components/product-page/Header";
+import Tabs from "@/components/product-page/Tabs";
+import { Product } from "@/types/product.types";
+import { notFound } from "next/navigation";
+
+const data: Product[] = [
+  ...newArrivalsData,
+  ...topSellingData,
+  ...relatedProductData,
+];
+
+export default function ProductPage({
+  params,
+}: {
+  params: { slug: string[] };
+}) {
+  const productData = data.find(
+    (product) => product.id === Number(params.slug[0])
+  );
+
+  if (!productData?.title) {
+    notFound();
+  }
+
+  return (
+    <main>
+      <div className="max-w-frame mx-auto px-4 xl:px-0">
+        <hr className="h-[1px] border-t-black/10 mb-5 sm:mb-6" />
+        <BreadcrumbProduct title={productData?.title ?? "product"} />
+        <section className="mb-11">
+          <Header data={productData} />
+        </section>
+        <Tabs />
+      </div>
+      <div className="mb-[50px] sm:mb-20">
+        <ProductListSec title="You might also like" data={relatedProductData} />
+      </div>
+    </main>
+  );
+}

src/components/cart-page/BreadcrumbCart.tsx

@@ -0,0 +1,30 @@
+import React from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import Link from "next/link";
+
+const BreadcrumbCart = () => {
+  return (
+    <Breadcrumb className="mb-2 sm:mb-6">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/">Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Cart</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+export default BreadcrumbCart;

src/components/cart-page/ProductCard.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import React from "react";
+import { PiTrashFill } from "react-icons/pi";
+import Image from "next/image";
+import Link from "next/link";
+import CartCounter from "@/components/ui/CartCounter";
+import { Button } from "../ui/button";
+import {
+  addToCart,
+  CartItem,
+  remove,
+  removeCartItem,
+} from "@/lib/features/carts/cartsSlice";
+import { useAppDispatch } from "@/lib/hooks/redux";
+
+type ProductCardProps = {
+  data: CartItem;
+};
+
+const ProductCard = ({ data }: ProductCardProps) => {
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="flex items-start space-x-4">
+      <Link
+        href={`/shop/product/${data.id}/${data.name.split(" ").join("-")}`}
+        className="bg-[#F0EEED] rounded-lg w-full min-w-[100px] max-w-[100px] sm:max-w-[124px] aspect-square overflow-hidden"
+      >
+        <Image
+          src={data.srcUrl}
+          width={124}
+          height={124}
+          className="rounded-md w-full h-full object-cover hover:scale-110 transition-all duration-500"
+          alt={data.name}
+          priority
+        />
+      </Link>
+      <div className="flex w-full self-stretch flex-col">
+        <div className="flex items-center justify-between">
+          <Link
+            href={`/shop/product/${data.id}/${data.name.split(" ").join("-")}`}
+            className="text-black font-bold text-base xl:text-xl"
+          >
+            {data.name}
+          </Link>
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-5 w-5 md:h-9 md:w-9"
+            onClick={() =>
+              dispatch(
+                remove({
+                  id: data.id,
+                  attributes: data.attributes,
+                  quantity: data.quantity,
+                })
+              )
+            }
+          >
+            <PiTrashFill className="text-xl md:text-2xl text-red-600" />
+          </Button>
+        </div>
+        <div className="-mt-1">
+          <span className="text-black text-xs md:text-sm mr-1">Size:</span>
+          <span className="text-black/60 text-xs md:text-sm">
+            {data.attributes[0]}
+          </span>
+        </div>
+        <div className="mb-auto -mt-1.5">
+          <span className="text-black text-xs md:text-sm mr-1">Color:</span>
+          <span className="text-black/60 text-xs md:text-sm">
+            {data.attributes[1]}
+          </span>
+        </div>
+        <div className="flex items-center flex-wrap justify-between">
+          <div className="flex items-center space-x-[5px] xl:space-x-2.5">
+            {data.discount.percentage > 0 ? (
+              <span className="font-bold text-black text-xl xl:text-2xl">
+                {`$${Math.round(
+                  data.price - (data.price * data.discount.percentage) / 100
+                )}`}
+              </span>
+            ) : data.discount.amount > 0 ? (
+              <span className="font-bold text-black text-xl xl:text-2xl">
+                {`$${data.price - data.discount.amount}`}
+              </span>
+            ) : (
+              <span className="font-bold text-black text-xl xl:text-2xl">
+                ${data.price}
+              </span>
+            )}
+            {data.discount.percentage > 0 && (
+              <span className="font-bold text-black/40 line-through text-xl xl:text-2xl">
+                ${data.price}
+              </span>
+            )}
+            {data.discount.amount > 0 && (
+              <span className="font-bold text-black/40 line-through text-xl xl:text-2xl">
+                ${data.price}
+              </span>
+            )}
+            {data.discount.percentage > 0 ? (
+              <span className="font-medium text-[10px] xl:text-xs py-1.5 px-3.5 rounded-full bg-[#FF3333]/10 text-[#FF3333]">
+                {`-${data.discount.percentage}%`}
+              </span>
+            ) : (
+              data.discount.amount > 0 && (
+                <span className="font-medium text-[10px] xl:text-xs py-1.5 px-3.5 rounded-full bg-[#FF3333]/10 text-[#FF3333]">
+                  {`-$${data.discount.amount}`}
+                </span>
+              )
+            )}
+          </div>
+          <CartCounter
+            initialValue={data.quantity}
+            onAdd={() => dispatch(addToCart({ ...data, quantity: 1 }))}
+            onRemove={() =>
+              data.quantity === 1
+                ? dispatch(
+                    remove({
+                      id: data.id,
+                      attributes: data.attributes,
+                      quantity: data.quantity,
+                    })
+                  )
+                : dispatch(
+                    removeCartItem({ id: data.id, attributes: data.attributes })
+                  )
+            }
+            isZeroDelete
+            className="px-5 py-3 max-h-8 md:max-h-10 min-w-[105px] max-w-[105px] sm:max-w-32"
+          />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default ProductCard;

src/components/common/ProductCard.tsx

@@ -0,0 +1,84 @@
+import React from "react";
+import Rating from "../ui/Rating";
+import Image from "next/image";
+import Link from "next/link";
+import { Product } from "@/types/product.types";
+
+type ProductCardProps = {
+  data: Product;
+};
+
+const ProductCard = ({ data }: ProductCardProps) => {
+  return (
+    <Link
+      href={`/shop/product/${data.id}/${data.title.split(" ").join("-")}`}
+      className="flex flex-col items-start aspect-auto"
+    >
+      <div className="bg-[#F0EEED] rounded-[13px] lg:rounded-[20px] w-full lg:max-w-[295px] aspect-square mb-2.5 xl:mb-4 overflow-hidden">
+        <Image
+          src={data.srcUrl}
+          width={295}
+          height={298}
+          className="rounded-md w-full h-full object-contain hover:scale-110 transition-all duration-500"
+          alt={data.title}
+          priority
+        />
+      </div>
+      <strong className="text-black xl:text-xl">{data.title}</strong>
+      <div className="flex items-end mb-1 xl:mb-2">
+        <Rating
+          initialValue={data.rating}
+          allowFraction
+          SVGclassName="inline-block"
+          emptyClassName="fill-gray-50"
+          size={19}
+          readonly
+        />
+        <span className="text-black text-xs xl:text-sm ml-[11px] xl:ml-[13px] pb-0.5 xl:pb-0">
+          {data.rating.toFixed(1)}
+          <span className="text-black/60">/5</span>
+        </span>
+      </div>
+      <div className="flex items-center space-x-[5px] xl:space-x-2.5">
+        {data.discount.percentage > 0 ? (
+          <span className="font-bold text-black text-xl xl:text-2xl">
+            {`$${Math.round(
+              data.price - (data.price * data.discount.percentage) / 100
+            )}`}
+          </span>
+        ) : data.discount.amount > 0 ? (
+          <span className="font-bold text-black text-xl xl:text-2xl">
+            {`$${data.price - data.discount.amount}`}
+          </span>
+        ) : (
+          <span className="font-bold text-black text-xl xl:text-2xl">
+            ${data.price}
+          </span>
+        )}
+        {data.discount.percentage > 0 && (
+          <span className="font-bold text-black/40 line-through text-xl xl:text-2xl">
+            ${data.price}
+          </span>
+        )}
+        {data.discount.amount > 0 && (
+          <span className="font-bold text-black/40 line-through text-xl xl:text-2xl">
+            ${data.price}
+          </span>
+        )}
+        {data.discount.percentage > 0 ? (
+          <span className="font-medium text-[10px] xl:text-xs py-1.5 px-3.5 rounded-full bg-[#FF3333]/10 text-[#FF3333]">
+            {`-${data.discount.percentage}%`}
+          </span>
+        ) : (
+          data.discount.amount > 0 && (
+            <span className="font-medium text-[10px] xl:text-xs py-1.5 px-3.5 rounded-full bg-[#FF3333]/10 text-[#FF3333]">
+              {`-$${data.discount.amount}`}
+            </span>
+          )
+        )}
+      </div>
+    </Link>
+  );
+};
+
+export default ProductCard;

src/components/common/ProductListSec.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import * as motion from "framer-motion/client";
+import { cn } from "@/lib/utils";
+import { integralCF } from "@/styles/fonts";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+} from "@/components/ui/carousel";
+import ProductCard from "./ProductCard";
+import { Product } from "@/types/product.types";
+import Link from "next/link";
+
+type ProductListSecProps = {
+  title: string;
+  data: Product[];
+  viewAllLink?: string;
+};
+
+const ProductListSec = ({ title, data, viewAllLink }: ProductListSecProps) => {
+  return (
+    <section className="max-w-frame mx-auto text-center">
+      <motion.h2
+        initial={{ y: "100px", opacity: 0 }}
+        whileInView={{ y: "0", opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.6 }}
+        className={cn([
+          integralCF.className,
+          "text-[32px] md:text-5xl mb-8 md:mb-14 capitalize",
+        ])}
+      >
+        {title}
+      </motion.h2>
+      <motion.div
+        initial={{ y: "100px", opacity: 0 }}
+        whileInView={{ y: "0", opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ delay: 0.6, duration: 0.6 }}
+      >
+        <Carousel
+          opts={{
+            align: "start",
+          }}
+          className="w-full mb-6 md:mb-9"
+        >
+          <CarouselContent className="mx-4 xl:mx-0 space-x-4 sm:space-x-5">
+            {data.map((product) => (
+              <CarouselItem
+                key={product.id}
+                className="w-full max-w-[198px] sm:max-w-[295px] pl-0"
+              >
+                <ProductCard data={product} />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+        {viewAllLink && (
+          <div className="w-full px-4 sm:px-0 text-center">
+            <Link
+              href={viewAllLink}
+              className="w-full inline-block sm:w-[218px] px-[54px] py-4 border rounded-full hover:bg-black hover:text-white text-black transition-all font-medium text-sm sm:text-base border-black/10"
+            >
+              View All
+            </Link>
+          </div>
+        )}
+      </motion.div>
+    </section>
+  );
+};
+
+export default ProductListSec;

src/components/common/ReviewCard.tsx

@@ -0,0 +1,60 @@
+import React from "react";
+import Rating from "../ui/Rating";
+import { IoEllipsisHorizontal } from "react-icons/io5";
+import { Button } from "../ui/button";
+import { IoIosCheckmarkCircle } from "react-icons/io";
+import { Review } from "@/types/review.types";
+import { cn } from "@/lib/utils";
+
+type ReviewCardProps = {
+  blurChild?: React.ReactNode;
+  isAction?: boolean;
+  isDate?: boolean;
+  data: Review;
+  className?: string;
+};
+
+const ReviewCard = ({
+  blurChild,
+  isAction = false,
+  isDate = false,
+  data,
+  className,
+}: ReviewCardProps) => {
+  return (
+    <div
+      className={cn([
+        "relative flex flex-col items-start aspect-auto border border-black/10 rounded-[20px] p-6 sm:px-8 sm:py-7 overflow-hidden",
+        className,
+      ])}
+    >
+      {blurChild && blurChild}
+      <div className="w-full flex items-center justify-between mb-3 sm:mb-4">
+        <Rating
+          initialValue={data.rating}
+          allowFraction
+          SVGclassName="inline-block"
+          size={23}
+          readonly
+        />
+        {isAction && (
+          <Button variant="ghost" size="icon">
+            <IoEllipsisHorizontal className="text-black/40 text-2xl" />
+          </Button>
+        )}
+      </div>
+      <div className="flex items-center mb-2 sm:mb-3">
+        <strong className="text-black sm:text-xl mr-1">{data.user}</strong>
+        <IoIosCheckmarkCircle className="text-[#01AB31] text-xl sm:text-2xl" />
+      </div>
+      <p className="text-sm sm:text-base text-black/60">{data.content}</p>
+      {isDate && (
+        <p className="text-black/60 text-sm font-medium mt-4 sm:mt-6">
+          Posted on {data.date}
+        </p>
+      )}
+    </div>
+  );
+};
+
+export default ReviewCard;

src/components/homepage/Brands/index.tsx

@@ -0,0 +1,47 @@
+import Image from "next/image";
+import React from "react";
+
+const brandsData: { id: string; srcUrl: string }[] = [
+  {
+    id: "versace",
+    srcUrl: "/icons/versace-logo.svg",
+  },
+  {
+    id: "zara",
+    srcUrl: "/icons/zara-logo.svg",
+  },
+  {
+    id: "gucci",
+    srcUrl: "/icons/gucci-logo.svg",
+  },
+  {
+    id: "prada",
+    srcUrl: "/icons/prada-logo.svg",
+  },
+  {
+    id: "calvin-klein",
+    srcUrl: "/icons/calvin-klein-logo.svg",
+  },
+];
+
+const Brands = () => {
+  return (
+    <div className="bg-black">
+      <div className="max-w-frame mx-auto flex flex-wrap items-center justify-center md:justify-between py-5 md:py-0 sm:px-4 xl:px-0 space-x-7">
+        {brandsData.map((brand) => (
+          <Image
+            key={brand.id}
+            priority
+            src={brand.srcUrl}
+            height={0}
+            width={0}
+            alt={brand.id}
+            className="h-auto w-auto max-w-[116px] lg:max-w-48 max-h-[26px] lg:max-h-9 my-5 md:my-11"
+          />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default Brands;

src/components/homepage/DressStyle/DressStyleCard.tsx

@@ -0,0 +1,25 @@
+import { cn } from "@/lib/utils";
+import Link from "next/link";
+import React from "react";
+
+type DressStyleCardProps = {
+  title: string;
+  url: string;
+  className?: string;
+};
+
+const DressStyleCard = ({ title, url, className }: DressStyleCardProps) => {
+  return (
+    <Link
+      href={url}
+      className={cn([
+        "w-full md:h-full rounded-[20px] bg-white bg-top text-2xl md:text-4xl font-bold text-left py-4 md:py-[25px] px-6 md:px-9 bg-no-repeat bg-cover",
+        className,
+      ])}
+    >
+      {title}
+    </Link>
+  );
+};
+
+export default DressStyleCard;

src/components/homepage/DressStyle/index.tsx

@@ -0,0 +1,64 @@
+import { cn } from "@/lib/utils";
+import { integralCF } from "@/styles/fonts";
+import React from "react";
+import * as motion from "framer-motion/client";
+import DressStyleCard from "./DressStyleCard";
+
+const DressStyle = () => {
+  return (
+    <div className="px-4 xl:px-0">
+      <section className="max-w-frame mx-auto bg-[#F0F0F0] px-6 pb-6 pt-10 md:p-[70px] rounded-[40px] text-center">
+        <motion.h2
+          initial={{ y: "100px", opacity: 0 }}
+          whileInView={{ y: "0", opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.6 }}
+          className={cn([
+            integralCF.className,
+            "text-[32px] leading-[36px] md:text-5xl mb-8 md:mb-14 capitalize",
+          ])}
+        >
+          BROWSE BY dress STYLE
+        </motion.h2>
+        <motion.div
+          initial={{ y: "100px", opacity: 0 }}
+          whileInView={{ y: "0", opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ delay: 0.6, duration: 0.6 }}
+          className="flex flex-col sm:flex-row md:h-[289px] space-y-4 sm:space-y-0 sm:space-x-5 mb-4 sm:mb-5"
+        >
+          <DressStyleCard
+            title="Casual"
+            url="/shop#casual"
+            className="md:max-w-[260px] lg:max-w-[360px] xl:max-w-[407px] h-[190px] bg-[url('/images/dress-style-1.png')]"
+          />
+          <DressStyleCard
+            title="Formal"
+            url="/shop#formal"
+            className="md:max-w-[684px] h-[190px] bg-[url('/images/dress-style-2.png')]"
+          />
+        </motion.div>
+        <motion.div
+          initial={{ y: "100px", opacity: 0 }}
+          whileInView={{ y: "0", opacity: 1 }}
+          viewport={{ once: true }}
+          transition={{ delay: 1, duration: 0.6 }}
+          className="flex flex-col sm:flex-row md:h-[289px] space-y-5 sm:space-y-0 sm:space-x-5"
+        >
+          <DressStyleCard
+            title="Party"
+            url="/shop#party"
+            className="md:max-w-[684px] h-[190px] bg-[url('/images/dress-style-3.png')]"
+          />
+          <DressStyleCard
+            title="Gym"
+            url="/shop#gym"
+            className="md:max-w-[260px] lg:max-w-[360px] xl:max-w-[407px] h-[190px] bg-[url('/images/dress-style-4.png')]"
+          />
+        </motion.div>
+      </section>
+    </div>
+  );
+};
+
+export default DressStyle;

src/components/homepage/Header/index.tsx

@@ -0,0 +1,121 @@
+import AnimatedCounter from "@/components/ui/AnimatedCounter";
+import { Separator } from "@/components/ui/separator";
+import { cn } from "@/lib/utils";
+import { integralCF } from "@/styles/fonts";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+import * as motion from "framer-motion/client";
+
+const Header = () => {
+  return (
+    <header className="bg-[#F2F0F1] pt-10 md:pt-24 overflow-hidden">
+      <div className="md:max-w-frame mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2">
+        <section className="max-w-frame px-4">
+          <motion.h2
+            initial={{ y: "100px", opacity: 0, rotate: 10 }}
+            whileInView={{ y: "0", opacity: 1, rotate: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.6 }}
+            className={cn([
+              integralCF.className,
+              "text-4xl lg:text-[64px] lg:leading-[64px] mb-5 lg:mb-8",
+            ])}
+          >
+            FIND CLOTHES THAT MATCHES YOUR STYLE
+          </motion.h2>
+          <motion.p
+            initial={{ y: "100px", opacity: 0 }}
+            whileInView={{ y: "0", opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: 0.5, duration: 0.6 }}
+            className="text-black/60 text-sm lg:text-base mb-6 lg:mb-8 max-w-[545px]"
+          >
+            Browse through our diverse range of meticulously crafted garments,
+            designed to bring out your individuality and cater to your sense of
+            style.
+          </motion.p>
+          <motion.div
+            initial={{ y: "100px", opacity: 0 }}
+            whileInView={{ y: "0", opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: 1, duration: 0.6 }}
+          >
+            <Link
+              href="/shop"
+              className="w-full md:w-52 mb-5 md:mb-12 inline-block text-center bg-black hover:bg-black/80 transition-all text-white px-14 py-4 rounded-full hover:animate-pulse"
+            >
+              Shop Now
+            </Link>
+          </motion.div>
+          <motion.div
+            initial={{ y: "100px", opacity: 0 }}
+            whileInView={{ y: "0", opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ delay: 1.5, duration: 0.6 }}
+            className="flex md:h-full md:max-h-11 lg:max-h-[52px] xl:max-h-[68px] items-center justify-center md:justify-start flex-wrap sm:flex-nowrap md:space-x-3 lg:space-x-6 xl:space-x-8 md:mb-[116px]"
+          >
+            <div className="flex flex-col">
+              <span className="font-bold text-2xl md:text-xl lg:text-3xl xl:text-[40px] xl:mb-2">
+                <AnimatedCounter from={0} to={200} />+
+              </span>
+              <span className="text-xs xl:text-base text-black/60 text-nowrap">
+                International Brands
+              </span>
+            </div>
+            <Separator
+              className="ml-6 md:ml-0 h-12 md:h-full bg-black/10"
+              orientation="vertical"
+            />
+            <div className="flex flex-col ml-6 md:ml-0">
+              <span className="font-bold text-2xl md:text-xl lg:text-3xl xl:text-[40px] xl:mb-2">
+                <AnimatedCounter from={0} to={2000} />+
+              </span>
+              <span className="text-xs xl:text-base text-black/60 text-nowrap">
+                High-Quality Products
+              </span>
+            </div>
+            <Separator
+              className="hidden sm:block sm:h-12 md:h-full ml-6 md:ml-0 bg-black/10"
+              orientation="vertical"
+            />
+            <div className="flex flex-col w-full text-center sm:w-auto sm:text-left mt-3 sm:mt-0 sm:ml-6 md:ml-0">
+              <span className="font-bold text-2xl md:text-xl lg:text-3xl xl:text-[40px] xl:mb-2">
+                <AnimatedCounter from={0} to={3000} />+
+              </span>
+              <span className="text-xs xl:text-base text-black/60 text-nowrap">
+                Happy Customers
+              </span>
+            </div>
+          </motion.div>
+        </section>
+        <motion.section
+          initial={{ y: "100px", opacity: 0, rotate: 10 }}
+          whileInView={{ y: "0", opacity: 1, rotate: 0 }}
+          viewport={{ once: true }}
+          transition={{ delay: 2.3, duration: 0.8 }}
+          className="relative md:px-4 min-h-[448px] md:min-h-[428px] bg-cover bg-top xl:bg-[center_top_-1.6rem] bg-no-repeat bg-[url('/images/header-res-homepage.png')] md:bg-[url('/images/header-homepage.png')]"
+        >
+          <Image
+            priority
+            src="/icons/big-star.svg"
+            height={104}
+            width={104}
+            alt="big star"
+            className="absolute right-7 xl:right-0 top-12 max-w-[76px] max-h-[76px] lg:max-w-24 lg:max-h-max-w-24 xl:max-w-[104px] xl:max-h-[104px] animate-[spin_4s_infinite]"
+          />
+          <Image
+            priority
+            src="/icons/small-star.svg"
+            height={56}
+            width={56}
+            alt="small star"
+            className="absolute left-7 md:left-0 top-36 sm:top-64 md:top-44 lg:top-56 max-w-11 max-h-11 md:max-w-14 md:max-h-14 animate-[spin_3s_infinite]"
+          />
+        </motion.section>
+      </div>
+    </header>
+  );
+};
+
+export default Header;

src/components/homepage/Reviews/index.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import React from "react";
+import * as motion from "framer-motion/client";
+import { cn } from "@/lib/utils";
+import { integralCF } from "@/styles/fonts";
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+  type CarouselApi,
+} from "@/components/ui/carousel";
+import { FaArrowLeft, FaArrowRight } from "react-icons/fa6";
+import { useIsClient, useMediaQuery } from "usehooks-ts";
+import ReviewCard from "@/components/common/ReviewCard";
+import { Review } from "@/types/review.types";
+
+type ReviewsProps = { data: Review[] };
+
+const Reviews = ({ data }: ReviewsProps) => {
+  const [api, setApi] = React.useState<CarouselApi>();
+  const [current, setCurrent] = React.useState(0);
+  const [count, setCount] = React.useState(0);
+  const isDesktop = useMediaQuery("(min-width: 1024px)");
+  const isClient = useIsClient();
+
+  React.useEffect(() => {
+    if (!api) {
+      return;
+    }
+
+    setCount(api.scrollSnapList().length);
+    setCurrent(api.selectedScrollSnap() + 1);
+
+    api.on("select", () => {
+      setCurrent(api.selectedScrollSnap() + 1);
+    });
+  }, [api]);
+
+  if (!isClient) return null;
+
+  return (
+    <section className="overflow-hidden">
+      <motion.div
+        initial={{ x: "100px", opacity: 0 }}
+        whileInView={{ x: "0", opacity: 1 }}
+        viewport={{ once: true }}
+        transition={{ duration: 0.6 }}
+      >
+        <Carousel
+          setApi={setApi}
+          opts={{
+            align: "center",
+            loop: true,
+          }}
+          className="relative w-full mb-6 md:mb-9"
+        >
+          <div className="relative flex items-end sm:items-center max-w-frame mx-auto mb-6 md:mb-10 px-4 xl:px-0">
+            <motion.h2
+              initial={{ y: "100px", opacity: 0 }}
+              whileInView={{ y: "0", opacity: 1 }}
+              viewport={{ once: true }}
+              transition={{ delay: 0.6, duration: 0.6 }}
+              className={cn([
+                integralCF.className,
+                "text-[32px] leading-[36px] md:text-5xl capitalize mr-auto",
+              ])}
+            >
+              OUR HAPPY CUSTOMERS
+            </motion.h2>
+            <div className="flex items-center space-x-1 ml-2">
+              <CarouselPrevious variant="ghost" className="text-2xl">
+                <FaArrowLeft />
+              </CarouselPrevious>
+              <CarouselNext variant="ghost" className="text-2xl">
+                <FaArrowRight />
+              </CarouselNext>
+            </div>
+          </div>
+          <CarouselContent>
+            {data.map((review, index) => (
+              <CarouselItem
+                key={review.id}
+                className="w-full max-w-[358px] sm:max-w-[400px] pl-5"
+              >
+                <ReviewCard
+                  className="h-full"
+                  data={review}
+                  blurChild={
+                    data.length >= 6 && (
+                      <div
+                        className={cn([
+                          isDesktop
+                            ? (current + 1 === count
+                                ? 0
+                                : current + 1 > count
+                                ? 1
+                                : current + 1) === index &&
+                              "backdrop-blur-[2px]"
+                            : (current === count ? 0 : current) === index &&
+                              "backdrop-blur-[2px]",
+                          isDesktop
+                            ? (current === 1
+                                ? count - 2
+                                : current === 2
+                                ? count - 1
+                                : current - 3) === index &&
+                              "backdrop-blur-[2px]"
+                            : (current === 1
+                                ? count - 1
+                                : current === 2
+                                ? 0
+                                : current - 2) === index &&
+                              "backdrop-blur-[2px]",
+                          "absolute bg-white/10 right-0 top-0 h-full w-full z-10",
+                        ])}
+                      />
+                    )
+                  }
+                />
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+        </Carousel>
+      </motion.div>
+    </section>
+  );
+};
+
+export default Reviews;

src/components/layout/Banner/TopBanner.tsx

@@ -0,0 +1,36 @@
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+const TopBanner = () => {
+  return (
+    <div className="bg-black text-white text-center py-2 px-2 sm:px-4 xl:px-0">
+      <div className="relative max-w-frame mx-auto">
+        <p className="text-xs sm:text-sm">
+          Sign up and get 20% off to your first order.{" "}
+          <Link href="#" className="underline font-medium">
+            Sign Up Now
+          </Link>
+        </p>
+        <Button
+          variant="ghost"
+          className="hover:bg-transparent absolute right-0 top-1/2 -translate-y-1/2 w-fit h-fit p-1 hidden sm:flex"
+          size="icon"
+          type="button"
+          aria-label="close banner"
+        >
+          <Image
+            priority
+            src="/icons/times.svg"
+            height={13}
+            width={13}
+            alt="close banner"
+          />
+        </Button>
+      </div>
+    </div>
+  );
+};
+
+export default TopBanner;

src/components/layout/Footer/LayoutSpacing.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { usePathname } from "next/navigation";
+import React from "react";
+
+const LayoutSpacing = () => {
+  const pathname = usePathname();
+
+  if (!pathname.includes("product")) return;
+
+  return <div className="mb-20 md:mb-0" />;
+};
+
+export default LayoutSpacing;

src/components/layout/Footer/LinksSection.tsx

@@ -0,0 +1,139 @@
+import React from "react";
+import { FooterLinks } from "./footer.types";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+
+const footerLinksData: FooterLinks[] = [
+  {
+    id: 1,
+    title: "company",
+    children: [
+      {
+        id: 11,
+        label: "about",
+        url: "#",
+      },
+      {
+        id: 12,
+        label: "features",
+        url: "#",
+      },
+      {
+        id: 13,
+        label: "works",
+        url: "#",
+      },
+      {
+        id: 14,
+        label: "career",
+        url: "#",
+      },
+    ],
+  },
+  {
+    id: 2,
+    title: "help",
+    children: [
+      {
+        id: 21,
+        label: "customer support",
+        url: "#",
+      },
+      {
+        id: 22,
+        label: "delivery details",
+        url: "#",
+      },
+      {
+        id: 23,
+        label: "terms & conditions",
+        url: "#",
+      },
+      {
+        id: 24,
+        label: "privacy policy",
+        url: "#",
+      },
+    ],
+  },
+  {
+    id: 3,
+    title: "faq",
+    children: [
+      {
+        id: 31,
+        label: "account",
+        url: "#",
+      },
+      {
+        id: 32,
+        label: "manage deliveries",
+        url: "#",
+      },
+      {
+        id: 33,
+        label: "orders",
+        url: "#",
+      },
+      {
+        id: 34,
+        label: "payments",
+        url: "#",
+      },
+    ],
+  },
+  {
+    id: 4,
+    title: "resources",
+    children: [
+      {
+        id: 41,
+        label: "Free eBooks",
+        url: "#",
+      },
+      {
+        id: 42,
+        label: "development tutorial",
+        url: "#",
+      },
+      {
+        id: 43,
+        label: "How to - Blog",
+        url: "#",
+      },
+      {
+        id: 44,
+        label: "youtube playlist",
+        url: "#",
+      },
+    ],
+  },
+];
+
+const LinksSection = () => {
+  return (
+    <>
+      {footerLinksData.map((item) => (
+        <section className="flex flex-col mt-5" key={item.id}>
+          <h3 className="font-medium text-sm md:text-base uppercase tracking-widest mb-6">
+            {item.title}
+          </h3>
+          {item.children.map((link) => (
+            <Link
+              href={link.url}
+              key={link.id}
+              className={cn([
+                link.id !== 41 && link.id !== 43 && "capitalize",
+                "text-black/60 text-sm md:text-base mb-4 w-fit",
+              ])}
+            >
+              {link.label}
+            </Link>
+          ))}
+        </section>
+      ))}
+    </>
+  );
+};
+
+export default LinksSection;

src/components/layout/Footer/NewsLetterSection.tsx

@@ -0,0 +1,53 @@
+import { Button } from "@/components/ui/button";
+import InputGroup from "@/components/ui/input-group";
+import { cn } from "@/lib/utils";
+import { integralCF } from "@/styles/fonts";
+import Image from "next/image";
+import React from "react";
+
+const NewsLetterSection = () => {
+  return (
+    <div className="relative grid grid-cols-1 md:grid-cols-2 py-9 md:py-11 px-6 md:px-16 max-w-frame mx-auto bg-black rounded-[20px]">
+      <p
+        className={cn([
+          integralCF.className,
+          "font-bold text-[32px] md:text-[40px] text-white mb-9 md:mb-0",
+        ])}
+      >
+        STAY UP TO DATE ABOUT OUR LATEST OFFERS
+      </p>
+      <div className="flex items-center">
+        <div className="flex flex-col max-w-[349px] mx-auto">
+          <InputGroup className="flex bg-white mb-[14px]">
+            <InputGroup.Text>
+              <Image
+                priority
+                src="/icons/envelope.svg"
+                height={20}
+                width={20}
+                alt="email"
+                className="min-w-5 min-h-5"
+              />
+            </InputGroup.Text>
+            <InputGroup.Input
+              type="email"
+              name="email"
+              placeholder="Enter your email address"
+              className="bg-transparent placeholder:text-black/40 placeholder:text-sm sm:placeholder:text-base"
+            />
+          </InputGroup>
+          <Button
+            variant="secondary"
+            className="text-sm sm:text-base font-medium bg-white h-12 rounded-full px-4 py-3"
+            aria-label="Subscribe to Newsletter"
+            type="button"
+          >
+            Subscribe to Newsletter
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default NewsLetterSection;

src/components/layout/Footer/footer.types.ts

@@ -0,0 +1,24 @@
+import React from "react";
+
+export type SocialNetworks = {
+  id: number;
+  icon: React.ReactNode;
+  url: string;
+};
+
+export type FLink = {
+  id: number;
+  label: string;
+  url: string;
+};
+
+export type FooterLinks = {
+  id: number;
+  title: string;
+  children: FLink[];
+};
+
+export type PaymentBadge = {
+  id: number;
+  srcUrl: string;
+};

src/components/layout/Footer/index.tsx

@@ -0,0 +1,150 @@
+import { cn } from "@/lib/utils";
+import { integralCF } from "@/styles/fonts";
+import React from "react";
+import { PaymentBadge, SocialNetworks } from "./footer.types";
+import { FaFacebookF, FaGithub, FaInstagram, FaTwitter } from "react-icons/fa";
+import Link from "next/link";
+import LinksSection from "./LinksSection";
+import Image from "next/image";
+import NewsLetterSection from "./NewsLetterSection";
+import LayoutSpacing from "./LayoutSpacing";
+
+const socialsData: SocialNetworks[] = [
+  {
+    id: 1,
+    icon: <FaTwitter />,
+    url: "https://twitter.com",
+  },
+  {
+    id: 2,
+    icon: <FaFacebookF />,
+    url: "https://facebook.com",
+  },
+  {
+    id: 3,
+    icon: <FaInstagram />,
+    url: "https://instagram.com",
+  },
+  {
+    id: 4,
+    icon: <FaGithub />,
+    url: "https://github.com/mohammadoftadeh",
+  },
+];
+
+const paymentBadgesData: PaymentBadge[] = [
+  {
+    id: 1,
+    srcUrl: "/icons/visa.svg",
+  },
+  {
+    id: 2,
+    srcUrl: "/icons/mastercard.svg",
+  },
+  {
+    id: 3,
+    srcUrl: "/icons/paypal.svg",
+  },
+  {
+    id: 4,
+    srcUrl: "/icons/applePay.svg",
+  },
+  {
+    id: 5,
+    srcUrl: "/icons/googlePay.svg",
+  },
+];
+
+const Footer = () => {
+  return (
+    <footer className="mt-10">
+      <div className="relative">
+        <div className="absolute bottom-0 w-full h-1/2 bg-[#F0F0F0]"></div>
+        <div className="px-4">
+          <NewsLetterSection />
+        </div>
+      </div>
+      <div className="pt-8 md:pt-[50px] bg-[#F0F0F0] px-4 pb-4">
+        <div className="max-w-frame mx-auto">
+          <nav className="lg:grid lg:grid-cols-12 mb-8">
+            <div className="flex flex-col lg:col-span-3 lg:max-w-[248px]">
+              <h1
+                className={cn([
+                  integralCF.className,
+                  "text-[28px] lg:text-[32px] mb-6",
+                ])}
+              >
+                SHOP.CO
+              </h1>
+              <p className="text-black/60 text-sm mb-9">
+                We have clothes that suits your style and which you’re proud to
+                wear. From women to men.
+              </p>
+              <div className="flex items-center">
+                {socialsData.map((social) => (
+                  <Link
+                    href={social.url}
+                    key={social.id}
+                    className="bg-white hover:bg-black hover:text-white transition-all mr-3 w-7 h-7 rounded-full border border-black/20 flex items-center justify-center p-1.5"
+                  >
+                    {social.icon}
+                  </Link>
+                ))}
+              </div>
+            </div>
+            <div className="hidden lg:grid col-span-9 lg:grid-cols-4 lg:pl-10">
+              <LinksSection />
+            </div>
+            <div className="grid lg:hidden grid-cols-2 sm:grid-cols-4">
+              <LinksSection />
+            </div>
+          </nav>
+
+          <hr className="h-[1px] border-t-black/10 mb-6" />
+          <div className="flex flex-col sm:flex-row justify-center sm:justify-between items-center mb-2">
+            <p className="text-sm text-center sm:text-left text-black/60 mb-4 sm:mb-0 sm:mr-1">
+              Shop.co © Made by{" "}
+              <Link
+                href="https://github.com/mohammadoftadeh"
+                className="text-black font-medium"
+              >
+                Mohammad Oftadeh
+              </Link>
+              {", "}
+              Designed by{" "}
+              <Link
+                href="https://www.figma.com/@hamzauix"
+                className="text-black font-medium"
+              >
+                Hamza Naeem
+              </Link>
+            </p>
+            <div className="flex items-center">
+              {paymentBadgesData.map((badge, _, arr) => (
+                <span
+                  key={badge.id}
+                  className={cn([
+                    arr.length !== badge.id && "mr-3",
+                    "w-[46px] h-[30px] rounded-[5px] border-[#D6DCE5] bg-white flex items-center justify-center",
+                  ])}
+                >
+                  <Image
+                    priority
+                    src={badge.srcUrl}
+                    width={33}
+                    height={100}
+                    alt="user"
+                    className="max-h-[15px]"
+                  />
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+        <LayoutSpacing />
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

src/components/layout/Navbar/TopNavbar/CartBtn.tsx

@@ -0,0 +1,31 @@
+"use client";
+
+import { useAppSelector } from "@/lib/hooks/redux";
+import { RootState } from "@/lib/store";
+import Image from "next/image";
+import Link from "next/link";
+import React from "react";
+
+const CartBtn = () => {
+  const { cart } = useAppSelector((state: RootState) => state.carts);
+
+  return (
+    <Link href="/cart" className="relative mr-[14px] p-1">
+      <Image
+        priority
+        src="/icons/cart.svg"
+        height={100}
+        width={100}
+        alt="cart"
+        className="max-w-[22px] max-h-[22px]"
+      />
+      {cart && cart.totalQuantities > 0 && (
+        <span className="border bg-black text-white rounded-full w-fit-h-fit px-1 text-xs absolute -top-3 left-1/2 -translate-x-1/2">
+          {cart.totalQuantities}
+        </span>
+      )}
+    </Link>
+  );
+};
+
+export default CartBtn;

src/components/layout/Navbar/TopNavbar/MenuItem.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+import Link from "next/link";
+import {
+  NavigationMenuItem,
+  NavigationMenuLink,
+  navigationMenuTriggerStyle,
+} from "@/components/ui/navigation-menu";
+import { cn } from "@/lib/utils";
+
+type MenuItemProps = {
+  label: string;
+  url?: string;
+};
+
+export function MenuItem({ label, url }: MenuItemProps) {
+  return (
+    <NavigationMenuItem>
+      <Link href={url ?? "/"} legacyBehavior passHref>
+        <NavigationMenuLink
+          className={cn([navigationMenuTriggerStyle(), "font-normal px-3"])}
+        >
+          {label}
+        </NavigationMenuLink>
+      </Link>
+    </NavigationMenuItem>
+  );
+}

src/components/layout/Navbar/TopNavbar/MenuList.tsx

@@ -0,0 +1,61 @@
+import * as React from "react";
+import Link from "next/link";
+
+import { cn } from "@/lib/utils";
+import {
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuTrigger,
+} from "@/components/ui/navigation-menu";
+import { MenuListData } from "../navbar.types";
+
+export type MenuListProps = {
+  data: MenuListData;
+  label: string;
+};
+
+export function MenuList({ data, label }: MenuListProps) {
+  return (
+    <NavigationMenuItem>
+      <NavigationMenuTrigger className="font-normal px-3">
+        {label}
+      </NavigationMenuTrigger>
+      <NavigationMenuContent>
+        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+          {data.map((item) => (
+            <ListItem key={item.id} title={item.label} href={item.url ?? "/"}>
+              {item.description ?? ""}
+            </ListItem>
+          ))}
+        </ul>
+      </NavigationMenuContent>
+    </NavigationMenuItem>
+  );
+}
+
+const ListItem = React.forwardRef<
+  React.ElementRef<typeof Link>,
+  React.ComponentPropsWithoutRef<typeof Link>
+>(({ className, title, children, ...props }, ref) => {
+  return (
+    <li>
+      <NavigationMenuLink asChild>
+        <Link
+          ref={ref}
+          className={cn(
+            "block select-none space-y-1 rounded-md p-3 leading-none no-underline outline-none transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground",
+            className
+          )}
+          {...props}
+        >
+          <div className="text-sm font-medium leading-none">{title}</div>
+          <p className="line-clamp-2 text-sm leading-snug text-muted-foreground">
+            {children}
+          </p>
+        </Link>
+      </NavigationMenuLink>
+    </li>
+  );
+});
+ListItem.displayName = "ListItem";

src/components/layout/Navbar/TopNavbar/ResTopNavbar.tsx

@@ -0,0 +1,87 @@
+import React from "react";
+import {
+  Sheet,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+  SheetTrigger,
+} from "@/components/ui/sheet";
+import Image from "next/image";
+import Link from "next/link";
+import { cn } from "@/lib/utils";
+import { integralCF } from "@/styles/fonts";
+import { NavMenu } from "../navbar.types";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+} from "@/components/ui/accordion";
+
+const ResTopNavbar = ({ data }: { data: NavMenu }) => {
+  return (
+    <Sheet>
+      <SheetTrigger asChild className="cursor-pointer">
+        <Image
+          priority
+          src="/icons/menu.svg"
+          height={100}
+          width={100}
+          alt="menu"
+          className="max-w-[22px] max-h-[22px]"
+        />
+      </SheetTrigger>
+      <SheetContent side="left" className="overflow-y-auto">
+        <SheetHeader className="mb-10">
+          <SheetTitle asChild>
+            <SheetClose asChild>
+              <Link href="/" className={cn([integralCF.className, "text-2xl"])}>
+                SHOP.CO
+              </Link>
+            </SheetClose>
+          </SheetTitle>
+        </SheetHeader>
+        <div className="flex flex-col items-start">
+          {data.map((item) => (
+            <React.Fragment key={item.id}>
+              {item.type === "MenuItem" && (
+                <SheetClose asChild>
+                  <Link href={item.url ?? "/"} className="mb-4">
+                    {item.label}
+                  </Link>
+                </SheetClose>
+              )}
+              {item.type === "MenuList" && (
+                <div className="mb-4 w-full">
+                  <Accordion type="single" collapsible>
+                    <AccordionItem value={item.label} className="border-none">
+                      <AccordionTrigger className="text-left p-0 py-0.5 font-normal text-base">
+                        {item.label}
+                      </AccordionTrigger>
+                      <AccordionContent className="p-4 pb-0 border-l flex flex-col">
+                        {item.children.map((itemChild, idx) => (
+                          <SheetClose
+                            key={itemChild.id}
+                            asChild
+                            className="w-fit py-2 text-base"
+                          >
+                            <Link href={itemChild.url ?? "/"}>
+                              {itemChild.label}
+                            </Link>
+                          </SheetClose>
+                        ))}
+                      </AccordionContent>
+                    </AccordionItem>
+                  </Accordion>
+                </div>
+              )}
+            </React.Fragment>
+          ))}
+        </div>
+      </SheetContent>
+    </Sheet>
+  );
+};
+
+export default ResTopNavbar;

src/components/layout/Navbar/TopNavbar/index.tsx

@@ -0,0 +1,150 @@
+import { cn } from "@/lib/utils";
+import { integralCF } from "@/styles/fonts";
+import Link from "next/link";
+import React from "react";
+import { NavMenu } from "../navbar.types";
+import { MenuList } from "./MenuList";
+import {
+  NavigationMenu,
+  NavigationMenuList,
+} from "@/components/ui/navigation-menu";
+import { MenuItem } from "./MenuItem";
+import Image from "next/image";
+import InputGroup from "@/components/ui/input-group";
+import ResTopNavbar from "./ResTopNavbar";
+import CartBtn from "./CartBtn";
+
+const data: NavMenu = [
+  {
+    id: 1,
+    label: "Shop",
+    type: "MenuList",
+    children: [
+      {
+        id: 11,
+        label: "Men's clothes",
+        url: "/shop#men-clothes",
+        description: "In attractive and spectacular colors and designs",
+      },
+      {
+        id: 12,
+        label: "Women's clothes",
+        url: "/shop#women-clothes",
+        description: "Ladies, your style and tastes are important to us",
+      },
+      {
+        id: 13,
+        label: "Kids clothes",
+        url: "/shop#kids-clothes",
+        description: "For all ages, with happy and beautiful colors",
+      },
+      {
+        id: 14,
+        label: "Bags and Shoes",
+        url: "/shop#bag-shoes",
+        description: "Suitable for men, women and all tastes and styles",
+      },
+    ],
+  },
+  {
+    id: 2,
+    type: "MenuItem",
+    label: "On Sale",
+    url: "/shop#on-sale",
+    children: [],
+  },
+  {
+    id: 3,
+    type: "MenuItem",
+    label: "New Arrivals",
+    url: "/shop#new-arrivals",
+    children: [],
+  },
+  {
+    id: 4,
+    type: "MenuItem",
+    label: "Brands",
+    url: "/shop#brands",
+    children: [],
+  },
+];
+
+const TopNavbar = () => {
+  return (
+    <nav className="sticky top-0 bg-white z-20">
+      <div className="flex relative max-w-frame mx-auto items-center justify-between md:justify-start py-5 md:py-6 px-4 xl:px-0">
+        <div className="flex items-center">
+          <div className="block md:hidden mr-4">
+            <ResTopNavbar data={data} />
+          </div>
+          <Link
+            href="/"
+            className={cn([
+              integralCF.className,
+              "text-2xl lg:text-[32px] mb-2 mr-3 lg:mr-10",
+            ])}
+          >
+            SHOP.CO
+          </Link>
+        </div>
+        <NavigationMenu className="hidden md:flex mr-2 lg:mr-7">
+          <NavigationMenuList>
+            {data.map((item) => (
+              <React.Fragment key={item.id}>
+                {item.type === "MenuItem" && (
+                  <MenuItem label={item.label} url={item.url} />
+                )}
+                {item.type === "MenuList" && (
+                  <MenuList data={item.children} label={item.label} />
+                )}
+              </React.Fragment>
+            ))}
+          </NavigationMenuList>
+        </NavigationMenu>
+        <InputGroup className="hidden md:flex bg-[#F0F0F0] mr-3 lg:mr-10">
+          <InputGroup.Text>
+            <Image
+              priority
+              src="/icons/search.svg"
+              height={20}
+              width={20}
+              alt="search"
+              className="min-w-5 min-h-5"
+            />
+          </InputGroup.Text>
+          <InputGroup.Input
+            type="search"
+            name="search"
+            placeholder="Search for products..."
+            className="bg-transparent placeholder:text-black/40"
+          />
+        </InputGroup>
+        <div className="flex items-center">
+          <Link href="/search" className="block md:hidden mr-[14px] p-1">
+            <Image
+              priority
+              src="/icons/search-black.svg"
+              height={100}
+              width={100}
+              alt="search"
+              className="max-w-[22px] max-h-[22px]"
+            />
+          </Link>
+          <CartBtn />
+          <Link href="/#signin" className="p-1">
+            <Image
+              priority
+              src="/icons/user.svg"
+              height={100}
+              width={100}
+              alt="user"
+              className="max-w-[22px] max-h-[22px]"
+            />
+          </Link>
+        </div>
+      </div>
+    </nav>
+  );
+};
+
+export default TopNavbar;

src/components/layout/Navbar/navbar.types.ts

@@ -0,0 +1,19 @@
+import React from "react";
+
+export type MenuItem = {
+  id: number;
+  type: "MenuItem" | "MenuList";
+  label: string;
+  url?: string;
+  children:
+    | (Omit<MenuItem, "children" | "type"> & {
+        description?: string | React.ReactNode;
+      })[]
+    | [];
+};
+
+export type MenuListData = (Omit<MenuItem, "children" | "type"> & {
+  description?: string | React.ReactNode;
+})[];
+
+export type NavMenu = MenuItem[];

src/components/product-page/BreadcrumbProduct.tsx

@@ -0,0 +1,36 @@
+import React from "react";
+import {
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "@/components/ui/breadcrumb";
+import Link from "next/link";
+
+const BreadcrumbProduct = ({ title }: { title: string }) => {
+  return (
+    <Breadcrumb className="mb-5 sm:mb-9">
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/">Home</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink asChild>
+            <Link href="/shop">Shop</Link>
+          </BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>{title}</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  );
+};
+
+export default BreadcrumbProduct;

src/components/product-page/Header/AddToCardSection.tsx

@@ -0,0 +1,19 @@
+"use client";
+
+import CartCounter from "@/components/ui/CartCounter";
+import React, { useState } from "react";
+import AddToCartBtn from "./AddToCartBtn";
+import { Product } from "@/types/product.types";
+
+const AddToCardSection = ({ data }: { data: Product }) => {
+  const [quantity, setQuantity] = useState<number>(1);
+
+  return (
+    <div className="fixed md:relative w-full bg-white border-t md:border-none border-black/5 bottom-0 left-0 p-4 md:p-0 z-10 flex items-center justify-between sm:justify-start md:justify-center">
+      <CartCounter onAdd={setQuantity} onRemove={setQuantity} />
+      <AddToCartBtn data={{ ...data, quantity }} />
+    </div>
+  );
+};
+
+export default AddToCardSection;

src/components/product-page/Header/AddToCartBtn.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { addToCart } from "@/lib/features/carts/cartsSlice";
+import { useAppDispatch, useAppSelector } from "@/lib/hooks/redux";
+import { RootState } from "@/lib/store";
+import { Product } from "@/types/product.types";
+import React from "react";
+
+const AddToCartBtn = ({ data }: { data: Product & { quantity: number } }) => {
+  const dispatch = useAppDispatch();
+  const { sizeSelection, colorSelection } = useAppSelector(
+    (state: RootState) => state.products
+  );
+
+  return (
+    <button
+      type="button"
+      className="bg-black w-full ml-3 sm:ml-5 rounded-full h-11 md:h-[52px] text-sm sm:text-base text-white hover:bg-black/80 transition-all"
+      onClick={() =>
+        dispatch(
+          addToCart({
+            id: data.id,
+            name: data.title,
+            srcUrl: data.srcUrl,
+            price: data.price,
+            attributes: [sizeSelection, colorSelection.name],
+            discount: data.discount,
+            quantity: data.quantity,
+          })
+        )
+      }
+    >
+      Add to Cart
+    </button>
+  );
+};
+
+export default AddToCartBtn;

src/components/product-page/Header/ColorSelection.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import {
+  Color,
+  setColorSelection,
+} from "@/lib/features/products/productsSlice";
+import { useAppDispatch, useAppSelector } from "@/lib/hooks/redux";
+import { RootState } from "@/lib/store";
+import { cn } from "@/lib/utils";
+import React from "react";
+import { IoMdCheckmark } from "react-icons/io";
+
+const colorsData: Color[] = [
+  {
+    name: "Brown",
+    code: "bg-[#4F4631]",
+  },
+  {
+    name: "Green",
+    code: "bg-[#314F4A]",
+  },
+  {
+    name: "Blue",
+    code: "bg-[#31344F]",
+  },
+];
+
+const ColorSelection = () => {
+  const { colorSelection } = useAppSelector(
+    (state: RootState) => state.products
+  );
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="flex flex-col">
+      <span className="text-sm sm:text-base text-black/60 mb-4">
+        Select Colors
+      </span>
+      <div className="flex items-center flex-wrap space-x-3 sm:space-x-4">
+        {colorsData.map((color, index) => (
+          <button
+            key={index}
+            type="button"
+            className={cn([
+              color.code,
+              "rounded-full w-9 sm:w-10 h-9 sm:h-10 flex items-center justify-center",
+            ])}
+            onClick={() => dispatch(setColorSelection(color))}
+          >
+            {colorSelection.name === color.name && (
+              <IoMdCheckmark className="text-base text-white" />
+            )}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default ColorSelection;

src/components/product-page/Header/PhotoSection.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { Product } from "@/types/product.types";
+import Image from "next/image";
+import React, { useState } from "react";
+
+const PhotoSection = ({ data }: { data: Product }) => {
+  const [selected, setSelected] = useState<string>(data.srcUrl);
+
+  return (
+    <div className="flex flex-col-reverse lg:flex-row lg:space-x-3.5">
+      {data?.gallery && data.gallery.length > 0 && (
+        <div className="flex lg:flex-col space-x-3 lg:space-x-0 lg:space-y-3.5 w-full lg:w-fit items-center lg:justify-start justify-center">
+          {data.gallery.map((photo, index) => (
+            <button
+              key={index}
+              type="button"
+              className="bg-[#F0EEED] rounded-[13px] xl:rounded-[20px] w-full max-w-[111px] xl:max-w-[152px] max-h-[106px] xl:max-h-[167px] xl:min-h-[167px] aspect-square overflow-hidden"
+              onClick={() => setSelected(photo)}
+            >
+              <Image
+                src={photo}
+                width={152}
+                height={167}
+                className="rounded-md w-full h-full object-cover hover:scale-110 transition-all duration-500"
+                alt={data.title}
+                priority
+              />
+            </button>
+          ))}
+        </div>
+      )}
+
+      <div className="flex items-center justify-center bg-[#F0EEED] rounded-[13px] sm:rounded-[20px] w-full sm:w-96 md:w-full mx-auto h-full max-h-[530px] min-h-[330px] lg:min-h-[380px] xl:min-h-[530px] overflow-hidden mb-3 lg:mb-0">
+        <Image
+          src={selected}
+          width={444}
+          height={530}
+          className="rounded-md w-full h-full object-cover hover:scale-110 transition-all duration-500"
+          alt={data.title}
+          priority
+          unoptimized
+        />
+      </div>
+    </div>
+  );
+};
+
+export default PhotoSection;

src/components/product-page/Header/SizeSelection.tsx

@@ -0,0 +1,39 @@
+"use client";
+
+import { setSizeSelection } from "@/lib/features/products/productsSlice";
+import { useAppDispatch, useAppSelector } from "@/lib/hooks/redux";
+import { RootState } from "@/lib/store";
+import { cn } from "@/lib/utils";
+import React from "react";
+
+const SizeSelection = () => {
+  const { sizeSelection } = useAppSelector(
+    (state: RootState) => state.products
+  );
+  const dispatch = useAppDispatch();
+
+  return (
+    <div className="flex flex-col">
+      <span className="text-sm sm:text-base text-black/60 mb-4">
+        Choose Size
+      </span>
+      <div className="flex items-center flex-wrap lg:space-x-3">
+        {["Small", "Medium", "Large", "X-Large"].map((size, index) => (
+          <button
+            key={index}
+            type="button"
+            className={cn([
+              "bg-[#F0F0F0] flex items-center justify-center px-5 lg:px-6 py-2.5 lg:py-3 text-sm lg:text-base rounded-full m-1 lg:m-0 max-h-[46px]",
+              sizeSelection === size && "bg-black font-medium text-white",
+            ])}
+            onClick={() => dispatch(setSizeSelection(size))}
+          >
+            {size}
+          </button>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default SizeSelection;