diff --git a/.eslintrc.json b/.eslintrc.json index bffb357..c5c108b 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,12 @@ { - "extends": "next/core-web-vitals" + "extends": [ + "next/core-web-vitals", + "eslint:recommended", + "plugin:react/recommended", + "plugin:@typescript-eslint/recommended", + "plugin:prettier/recommended" + ], + "rules": { + "prettier/prettier": ["error"] + } } diff --git a/.prettierrc b/.prettierrc new file mode 100644 index 0000000..f51cbcd --- /dev/null +++ b/.prettierrc @@ -0,0 +1,8 @@ +{ + "semi": false, + "singleQuote": true, + "printWidth": 80, + "tabWidth": 2, + "trailingComma": "es5" + } + \ No newline at end of file diff --git a/app/globals.css b/app/globals.css index 875c01e..8b13120 100644 --- a/app/globals.css +++ b/app/globals.css @@ -2,32 +2,151 @@ @tailwind components; @tailwind utilities; -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; +* { + margin: 0; + padding: 0; + box-sizing: border-box; + scroll-behavior: smooth; } -@media (prefers-color-scheme: dark) { - :root { - --foreground-rgb: 255, 255, 255; - --background-start-rgb: 0, 0, 0; - --background-end-rgb: 0, 0, 0; +@layer base { + body { + @apply font-inter; } } -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); -} - @layer utilities { - .text-balance { - text-wrap: balance; + .btn { + @apply py-4 px-4 bg-secondary hover:bg-opacity-70 rounded-[30px] text-white text-lg font-semibold; } -} + + .head-text { + @apply mt-4 text-6xl leading-[72px] font-bold tracking-[-1.2px] text-gray-900; + } + + .section-text { + @apply text-secondary text-[32px] font-semibold; + } + + .small-text { + @apply flex gap-2 text-sm font-medium text-primary; + } + + .paragraph-text { + @apply text-xl leading-[30px] text-gray-600; + } + + .hero-carousel { + @apply relative sm:px-10 py-5 sm:pt-20 pb-5 max-w-[560px] h-[700px] w-full bg-[#F2F4F7] rounded-[30px] sm:mx-auto; + } + + .carousel { + @apply flex flex-col-reverse h-[700px]; + } + + .carousel .control-dots { + @apply static !important; + } + + .carousel .control-dots .dot { + @apply w-[10px] h-[10px] bg-[#D9D9D9] rounded-full bottom-0 !important; + } + + .carousel .control-dots .dot.selected { + @apply bg-[#475467] !important; + } + + .trending-section { + @apply flex flex-col gap-10 px-6 md:px-20 py-24; + } + + /* PRODUCT DETAILS PAGE STYLES */ + .product-container { + @apply flex flex-col gap-16 flex-wrap px-6 md:px-20 py-24; + } + + .product-image { + @apply flex-grow xl:max-w-[50%] max-w-full py-16 border border-[#CDDBFF] rounded-[17px]; + } + + .product-info { + @apply flex items-center flex-wrap gap-10 py-6 border-y border-y-[#E4E4E4]; + } + + .product-hearts { + @apply flex items-center gap-2 px-3 py-2 bg-[#FFF0F0] rounded-10; + } + + .product-stars { + @apply flex items-center gap-2 px-3 py-2 bg-[#FBF3EA] rounded-[27px]; + } + + .product-reviews { + @apply flex items-center gap-2 px-3 py-2 bg-white-200 rounded-[27px]; + } + + /* MODAL */ + .dialog-container { + @apply fixed inset-0 z-10 overflow-y-auto bg-black bg-opacity-60; + } + + .dialog-content { + @apply p-6 bg-white inline-block w-full max-w-md my-8 overflow-hidden text-left align-middle transition-all transform shadow-xl rounded-2xl; + } + + .dialog-head_text { + @apply text-secondary text-lg leading-[24px] font-semibold mt-4; + } + + .dialog-input_container { + @apply px-5 py-3 mt-3 flex items-center gap-2 border border-gray-300 rounded-[27px]; + } + + .dialog-input { + @apply flex-1 pl-1 border-none text-gray-500 text-base focus:outline-none border border-gray-300 rounded-[27px] shadow-xs; + } + + .dialog-btn { + @apply px-5 py-3 text-white text-base font-semibold border border-secondary bg-secondary rounded-lg mt-8; + } + + /* NAVBAR */ + .nav { + @apply flex justify-between items-center px-6 md:px-20 py-4; + } + + .nav-logo { + @apply font-spaceGrotesk text-[21px] text-secondary font-bold; + } + + /* PRICE INFO */ + .price-info_card { + @apply flex-1 min-w-[200px] flex flex-col gap-2 border-l-[3px] rounded-10 bg-white-100 px-5 py-4; + } + + /* PRODUCT CARD */ + .product-card { + @apply sm:w-[292px] sm:max-w-[292px] w-full flex-1 flex flex-col gap-4 rounded-md; + } + + .product-card_img-container { + @apply flex-1 relative flex flex-col gap-5 p-4 rounded-md; + } + + .product-card_img { + @apply max-h-[250px] object-contain w-full h-full bg-transparent; + } + + .product-title { + @apply text-secondary text-xl leading-6 font-semibold truncate; + } + + /* SEARCHBAR INPUT */ + .searchbar-input { + @apply flex-1 min-w-[200px] w-full p-3 border border-gray-300 rounded-lg shadow-xs text-base text-gray-500 focus:outline-none; + } + + .searchbar-btn { + @apply bg-gray-900 border border-gray-900 rounded-lg shadow-xs px-5 py-3 text-white text-base font-semibold hover:opacity-90 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-40; + } +} \ No newline at end of file diff --git a/app/layout.tsx b/app/layout.tsx index 3314e47..43a2093 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -1,12 +1,18 @@ import type { Metadata } from "next"; -import { Inter } from "next/font/google"; +import { Inter, Space_Grotesk } from "next/font/google"; import "./globals.css"; +import { Navbar } from "@/components/Navbar"; const inter = Inter({ subsets: ["latin"] }); +const spaceGrotesk = Space_Grotesk({ + subsets: ["latin"], + weight: ["300", "400", "500", "600", "700"], +}); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Price Wise", + description: + "Track product prices effortlessly adn save money on online shopping", }; export default function RootLayout({ @@ -16,7 +22,12 @@ export default function RootLayout({ }>) { return ( - {children} + +
+ + {children} +
+ ); } diff --git a/app/page.tsx b/app/page.tsx index 5705d4e..1232809 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,113 +1,47 @@ -import Image from "next/image"; +import { HeroCarousel } from '@/components/HeroCarousel' +import SearchBar from '@/components/SearchBar' +import Image from 'next/image' +import React from 'react' -export default function Home() { +const Home = () => { return ( -
-
-

- Get started by editing  - app/page.tsx -

-
- - By{" "} - Vercel Logo - + <> +
+
+
+

+ Smart Shopping Start Here: + arrow-right +

+

+ Unleash the Power of + PriceWise +

+

+ Powerful, self-serve product and growth analytics to help you + convert, engage, and retain more. +

+ +
+
-
+ -
- Next.js Logo -
- -
- -

- Docs{" "} - - -> - -

-

- Find in-depth information about Next.js features and API. -

- - - -

- Learn{" "} - - -> - -

-

- Learn about Next.js in an interactive course with quizzes! -

- - - -

- Templates{" "} - - -> - -

-

- Explore starter templates for Next.js. -

- - - -

- Deploy{" "} - - -> - -

-

- Instantly deploy your Next.js site to a shareable URL with Vercel. -

- -
-
- ); +
+

Trending Products

+
+ {['Apple iphone15', 'Book', 'Toy', 'Shoes'].map((product) => ( +
{product}
+ ))} +
+
+ + ) } + +export default Home diff --git a/components/HeroCarousel.tsx b/components/HeroCarousel.tsx new file mode 100644 index 0000000..30be470 --- /dev/null +++ b/components/HeroCarousel.tsx @@ -0,0 +1,49 @@ +'use client' + +import 'react-responsive-carousel/lib/styles/carousel.min.css' +import { Carousel } from 'react-responsive-carousel' +import Image from 'next/image' + +const heroImages = [ + { imgUrl: '/assets/images/hero-1.svg', alt: 'smart watch' }, + { imgUrl: '/assets/images/hero-2.svg', alt: 'bag' }, + { imgUrl: '/assets/images/hero-3.svg', alt: 'lamp' }, + { imgUrl: '/assets/images/hero-4.svg', alt: 'air fryer' }, + { imgUrl: '/assets/images/hero-5.svg', alt: 'chair' }, +] + +export const HeroCarousel = () => { + return ( +
+ + {heroImages.map((image) => ( +
+ {image.alt} +
+ ))} + + + arrow +
+ ) +} diff --git a/components/Navbar.tsx b/components/Navbar.tsx new file mode 100644 index 0000000..a3942f2 --- /dev/null +++ b/components/Navbar.tsx @@ -0,0 +1,42 @@ +import Image from "next/image"; +import Link from "next/link"; +import React from "react"; + +const navIcons = [ + { src: "/assets/icons/search.svg", alt: "search" }, + { src: "/assets/icons/black-heart.svg", alt: "heart" }, + { src: "/assets/icons/user.svg", alt: "user" }, +]; +export const Navbar = () => { + return ( +
+ +
+ ); +}; diff --git a/components/SearchBar.tsx b/components/SearchBar.tsx new file mode 100644 index 0000000..9da758c --- /dev/null +++ b/components/SearchBar.tsx @@ -0,0 +1,21 @@ +'use client' + +const SearchBar = () => { + const handleSubmit = () => {} + + return ( +
+ + + +
+ ) +} + +export default SearchBar diff --git a/package-lock.json b/package-lock.json index 483d592..0ade086 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,15 +10,19 @@ "dependencies": { "next": "14.2.4", "react": "^18", - "react-dom": "^18" + "react-dom": "^18", + "react-responsive-carousel": "^3.2.23" }, "devDependencies": { "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", - "eslint": "^8", + "eslint": "^8.57.0", "eslint-config-next": "14.2.4", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-prettier": "^5.1.3", "postcss": "^8", + "prettier": "^3.3.2", "tailwindcss": "^3.4.1", "typescript": "^5" } @@ -424,6 +428,18 @@ "node": ">=14" } }, + "node_modules/@pkgr/core": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.1.1.tgz", + "integrity": "sha512-cq8o4cWH0ibXh9VGi5P20Tu9XF/0fFXl9EUinr9QfTM7a7p0oTA4iJRCQWppXR1Pg8dSM0UCItCkPwsk9qWWYA==", + "dev": true, + "engines": { + "node": "^12.20.0 || ^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/@rushstack/eslint-patch": { "version": "1.10.3", "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz", @@ -1087,6 +1103,11 @@ "node": ">= 6" } }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/client-only": { "version": "0.0.1", "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz", @@ -1592,6 +1613,18 @@ } } }, + "node_modules/eslint-config-prettier": { + "version": "9.1.0", + "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-9.1.0.tgz", + "integrity": "sha512-NSWl5BFQWEPi1j4TjVNItzYV7dZXZ+wP6I6ZhrBGpChQhZRUaElihE9uRRkcbRnNb76UMKDF3r+WTmNcGPKsqw==", + "dev": true, + "bin": { + "eslint-config-prettier": "bin/cli.js" + }, + "peerDependencies": { + "eslint": ">=7.0.0" + } + }, "node_modules/eslint-import-resolver-node": { "version": "0.3.9", "resolved": "https://registry.npmjs.org/eslint-import-resolver-node/-/eslint-import-resolver-node-0.3.9.tgz", @@ -1754,6 +1787,36 @@ "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8" } }, + "node_modules/eslint-plugin-prettier": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.1.3.tgz", + "integrity": "sha512-C9GCVAs4Eq7ZC/XFQHITLiHJxQngdtraXaM+LoUFoFp/lHNl2Zn8f3WQbe9HvTBBQ9YnKFB0/2Ajdqwo5D1EAw==", + "dev": true, + "dependencies": { + "prettier-linter-helpers": "^1.0.0", + "synckit": "^0.8.6" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/eslint-plugin-prettier" + }, + "peerDependencies": { + "@types/eslint": ">=8.0.0", + "eslint": ">=8.0.0", + "eslint-config-prettier": "*", + "prettier": ">=3.0.0" + }, + "peerDependenciesMeta": { + "@types/eslint": { + "optional": true + }, + "eslint-config-prettier": { + "optional": true + } + } + }, "node_modules/eslint-plugin-react": { "version": "7.34.2", "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.34.2.tgz", @@ -1929,6 +1992,12 @@ "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==", "dev": true }, + "node_modules/fast-diff": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz", + "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==", + "dev": true + }, "node_modules/fast-glob": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz", @@ -3203,7 +3272,6 @@ "version": "4.1.1", "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", - "dev": true, "engines": { "node": ">=0.10.0" } @@ -3661,11 +3729,37 @@ "node": ">= 0.8.0" } }, + "node_modules/prettier": { + "version": "3.3.2", + "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.3.2.tgz", + "integrity": "sha512-rAVeHYMcv8ATV5d508CFdn+8/pHPpXeIid1DdrPwXnaAdH7cqjVbpJaT5eq4yRAFU/lsbwYwSF/n5iNrdJHPQA==", + "dev": true, + "bin": { + "prettier": "bin/prettier.cjs" + }, + "engines": { + "node": ">=14" + }, + "funding": { + "url": "https://github.com/prettier/prettier?sponsor=1" + } + }, + "node_modules/prettier-linter-helpers": { + "version": "1.0.0", + "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", + "integrity": "sha512-GbK2cP9nraSSUF9N2XwUwqfzlAFlMNYYl+ShE/V+H8a9uNl/oUqB1w2EL54Jh0OlyRSd8RfWYJ3coVS4TROP2w==", + "dev": true, + "dependencies": { + "fast-diff": "^1.1.2" + }, + "engines": { + "node": ">=6.0.0" + } + }, "node_modules/prop-types": { "version": "15.8.1", "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", - "dev": true, "dependencies": { "loose-envify": "^1.4.0", "object-assign": "^4.1.1", @@ -3724,11 +3818,31 @@ "react": "^18.3.1" } }, + "node_modules/react-easy-swipe": { + "version": "0.0.21", + "resolved": "https://registry.npmjs.org/react-easy-swipe/-/react-easy-swipe-0.0.21.tgz", + "integrity": "sha512-OeR2jAxdoqUMHIn/nS9fgreI5hSpgGoL5ezdal4+oO7YSSgJR8ga+PkYGJrSrJ9MKlPcQjMQXnketrD7WNmNsg==", + "dependencies": { + "prop-types": "^15.5.8" + }, + "engines": { + "node": ">= 6" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", - "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==", - "dev": true + "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" + }, + "node_modules/react-responsive-carousel": { + "version": "3.2.23", + "resolved": "https://registry.npmjs.org/react-responsive-carousel/-/react-responsive-carousel-3.2.23.tgz", + "integrity": "sha512-pqJLsBaKHWJhw/ItODgbVoziR2z4lpcJg+YwmRlSk4rKH32VE633mAtZZ9kDXjy4wFO+pgUZmDKPsPe1fPmHCg==", + "dependencies": { + "classnames": "^2.2.5", + "prop-types": "^15.5.8", + "react-easy-swipe": "^0.0.21" + } }, "node_modules/read-cache": { "version": "1.0.0", @@ -4318,6 +4432,22 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/synckit": { + "version": "0.8.8", + "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.8.8.tgz", + "integrity": "sha512-HwOKAP7Wc5aRGYdKH+dw0PRRpbO841v2DENBtjnR5HFWoiNByAl7vrx3p0G/rCyYXQsrxqtX48TImFtPcIHSpQ==", + "dev": true, + "dependencies": { + "@pkgr/core": "^0.1.0", + "tslib": "^2.6.2" + }, + "engines": { + "node": "^14.18.0 || >=16.0.0" + }, + "funding": { + "url": "https://opencollective.com/unts" + } + }, "node_modules/tailwindcss": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz", diff --git a/package.json b/package.json index 3f13b72..75b9168 100644 --- a/package.json +++ b/package.json @@ -9,18 +9,22 @@ "lint": "next lint" }, "dependencies": { + "next": "14.2.4", "react": "^18", "react-dom": "^18", - "next": "14.2.4" + "react-responsive-carousel": "^3.2.23" }, "devDependencies": { - "typescript": "^5", "@types/node": "^20", "@types/react": "^18", "@types/react-dom": "^18", + "eslint": "^8.57.0", + "eslint-config-next": "14.2.4", + "eslint-config-prettier": "^9.1.0", + "eslint-plugin-prettier": "^5.1.3", "postcss": "^8", + "prettier": "^3.3.2", "tailwindcss": "^3.4.1", - "eslint": "^8", - "eslint-config-next": "14.2.4" + "typescript": "^5" } } diff --git a/public/assets/icons/arrow-down.svg b/public/assets/icons/arrow-down.svg new file mode 100644 index 0000000..4d4ed76 --- /dev/null +++ b/public/assets/icons/arrow-down.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/assets/icons/arrow-right.svg b/public/assets/icons/arrow-right.svg new file mode 100644 index 0000000..81c28ba --- /dev/null +++ b/public/assets/icons/arrow-right.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/arrow-up.svg b/public/assets/icons/arrow-up.svg new file mode 100644 index 0000000..c0cde3a --- /dev/null +++ b/public/assets/icons/arrow-up.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/assets/icons/bag.svg b/public/assets/icons/bag.svg new file mode 100644 index 0000000..ccec1af --- /dev/null +++ b/public/assets/icons/bag.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/black-heart.svg b/public/assets/icons/black-heart.svg new file mode 100644 index 0000000..0b98a03 --- /dev/null +++ b/public/assets/icons/black-heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/bookmark.svg b/public/assets/icons/bookmark.svg new file mode 100644 index 0000000..4f5e4bf --- /dev/null +++ b/public/assets/icons/bookmark.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/chart.svg b/public/assets/icons/chart.svg new file mode 100644 index 0000000..3ae9f83 --- /dev/null +++ b/public/assets/icons/chart.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/assets/icons/check.svg b/public/assets/icons/check.svg new file mode 100644 index 0000000..c67ca65 --- /dev/null +++ b/public/assets/icons/check.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/icons/chevron-down.svg b/public/assets/icons/chevron-down.svg new file mode 100644 index 0000000..0576b4b --- /dev/null +++ b/public/assets/icons/chevron-down.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/comment.svg b/public/assets/icons/comment.svg new file mode 100644 index 0000000..f7f7222 --- /dev/null +++ b/public/assets/icons/comment.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/frame.svg b/public/assets/icons/frame.svg new file mode 100644 index 0000000..fde44f4 --- /dev/null +++ b/public/assets/icons/frame.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/icons/hand-drawn-arrow.svg b/public/assets/icons/hand-drawn-arrow.svg new file mode 100644 index 0000000..1ed7a1c --- /dev/null +++ b/public/assets/icons/hand-drawn-arrow.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/logo.svg b/public/assets/icons/logo.svg new file mode 100644 index 0000000..d0ab5bc --- /dev/null +++ b/public/assets/icons/logo.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/assets/icons/mail.svg b/public/assets/icons/mail.svg new file mode 100644 index 0000000..481c246 --- /dev/null +++ b/public/assets/icons/mail.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/price-tag.svg b/public/assets/icons/price-tag.svg new file mode 100644 index 0000000..ef74631 --- /dev/null +++ b/public/assets/icons/price-tag.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/assets/icons/red-heart.svg b/public/assets/icons/red-heart.svg new file mode 100644 index 0000000..b1e0283 --- /dev/null +++ b/public/assets/icons/red-heart.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/search.svg b/public/assets/icons/search.svg new file mode 100644 index 0000000..b3ed674 --- /dev/null +++ b/public/assets/icons/search.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/share.svg b/public/assets/icons/share.svg new file mode 100644 index 0000000..123ccdc --- /dev/null +++ b/public/assets/icons/share.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/square.svg b/public/assets/icons/square.svg new file mode 100644 index 0000000..3a224ee --- /dev/null +++ b/public/assets/icons/square.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/star.svg b/public/assets/icons/star.svg new file mode 100644 index 0000000..7130223 --- /dev/null +++ b/public/assets/icons/star.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/user.svg b/public/assets/icons/user.svg new file mode 100644 index 0000000..19f0a4c --- /dev/null +++ b/public/assets/icons/user.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/icons/x-close.svg b/public/assets/icons/x-close.svg new file mode 100644 index 0000000..8626839 --- /dev/null +++ b/public/assets/icons/x-close.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/assets/images/details.svg b/public/assets/images/details.svg new file mode 100644 index 0000000..a2ac770 --- /dev/null +++ b/public/assets/images/details.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/images/hero-1.svg b/public/assets/images/hero-1.svg new file mode 100644 index 0000000..68514bd --- /dev/null +++ b/public/assets/images/hero-1.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/images/hero-2.svg b/public/assets/images/hero-2.svg new file mode 100644 index 0000000..e8feb7a --- /dev/null +++ b/public/assets/images/hero-2.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/images/hero-3.svg b/public/assets/images/hero-3.svg new file mode 100644 index 0000000..5688a81 --- /dev/null +++ b/public/assets/images/hero-3.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/images/hero-4.svg b/public/assets/images/hero-4.svg new file mode 100644 index 0000000..6ee7166 --- /dev/null +++ b/public/assets/images/hero-4.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/images/hero-5.svg b/public/assets/images/hero-5.svg new file mode 100644 index 0000000..ceebc1a --- /dev/null +++ b/public/assets/images/hero-5.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/public/assets/images/trending.svg b/public/assets/images/trending.svg new file mode 100644 index 0000000..72759d2 --- /dev/null +++ b/public/assets/images/trending.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/tailwind.config.ts b/tailwind.config.ts index 7e4bd91..1f87f2b 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -1,6 +1,5 @@ -import type { Config } from "tailwindcss"; - -const config: Config = { +/** @type {import('tailwindcss').Config} */ +module.exports = { content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", @@ -8,13 +7,38 @@ const config: Config = { ], theme: { extend: { - backgroundImage: { - "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", - "gradient-conic": - "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", + colors: { + primary: { + DEFAULT: "#E43030", + "orange": "#D48D3B", + "green": "#3E9242" + }, + secondary: "#282828", + "gray-200": "#EAECF0", + "gray-300": "D0D5DD", + "gray-500": "#667085", + "gray-600": "#475467", + "gray-700": "#344054", + "gray-900": "#101828", + "white-100": "#F4F4F4", + "white-200": "#EDF0F8", + "black-100": "#3D4258", + "neutral-black": "#23263B", }, + boxShadow: { + xs: "0px 1px 2px 0px rgba(16, 24, 40, 0.05)", + }, + maxWidth: { + "10xl": '1440px' + }, + fontFamily: { + inter: ['Inter', 'sans-serif'], + spaceGrotesk: ['Space Grotesk', 'sans-serif'], + }, + borderRadius: { + 10: "10px" + } }, }, plugins: [], -}; -export default config; +}; \ No newline at end of file