diff --git a/package-lock.json b/package-lock.json index bea1023..4f1aab4 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8,6 +8,9 @@ "name": "crud_app", "version": "0.1.0", "dependencies": { + "@splidejs/react-splide": "^0.7.12", + "@tanstack/react-query": "^4.29.7", + "@tanstack/react-query-devtools": "^4.29.7", "@types/node": "20.2.1", "@types/react": "18.2.6", "@types/react-dom": "18.2.4", @@ -18,6 +21,7 @@ "postcss": "8.4.23", "react": "18.2.0", "react-dom": "18.2.0", + "react-hook-form": "^7.43.9", "tailwindcss": "3.3.2", "typescript": "5.0.4" } @@ -378,6 +382,19 @@ "resolved": "https://registry.npmjs.org/@rushstack/eslint-patch/-/eslint-patch-1.2.0.tgz", "integrity": "sha512-sXo/qW2/pAcmT43VoRKOJbDOfV3cYpq3szSVfIThQXNt+E4DfKj361vaAt3c88U5tPUxzEswam7GW48PJqtKAg==" }, + "node_modules/@splidejs/react-splide": { + "version": "0.7.12", + "resolved": "https://registry.npmjs.org/@splidejs/react-splide/-/react-splide-0.7.12.tgz", + "integrity": "sha512-UfXH+j47jsMc4x5HA/aOwuuHPqn6y9+ZTNYPWDRD8iLKvIVMZlzq2unjUEvyDAU+TTVPZOXkG2Ojeoz0P4AkZw==", + "dependencies": { + "@splidejs/splide": "^4.1.3" + } + }, + "node_modules/@splidejs/splide": { + "version": "4.1.4", + "resolved": "https://registry.npmjs.org/@splidejs/splide/-/splide-4.1.4.tgz", + "integrity": "sha512-5I30evTJcAJQXt6vJ26g2xEkG+l1nXcpEw4xpKh0/FWQ8ozmAeTbtniVtVmz2sH1Es3vgfC4SS8B2X4o5JMptA==" + }, "node_modules/@swc/helpers": { "version": "0.5.1", "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.1.tgz", @@ -386,6 +403,75 @@ "tslib": "^2.4.0" } }, + "node_modules/@tanstack/match-sorter-utils": { + "version": "8.8.4", + "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz", + "integrity": "sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==", + "dependencies": { + "remove-accents": "0.4.2" + }, + "engines": { + "node": ">=12" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kentcdodds" + } + }, + "node_modules/@tanstack/query-core": { + "version": "4.29.7", + "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.29.7.tgz", + "integrity": "sha512-GXG4b5hV2Loir+h2G+RXhJdoZhJLnrBWsuLB2r0qBRyhWuXq9w/dWxzvpP89H0UARlH6Mr9DiVj4SMtpkF/aUA==", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + } + }, + "node_modules/@tanstack/react-query": { + "version": "4.29.7", + "resolved": "https://registry.npmjs.org/@tanstack/react-query/-/react-query-4.29.7.tgz", + "integrity": "sha512-ijBWEzAIo09fB1yd22slRZzprrZ5zMdWYzBnCg5qiXuFbH78uGN1qtGz8+Ed4MuhaPaYSD+hykn+QEKtQviEtg==", + "dependencies": { + "@tanstack/query-core": "4.29.7", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-native": "*" + }, + "peerDependenciesMeta": { + "react-dom": { + "optional": true + }, + "react-native": { + "optional": true + } + } + }, + "node_modules/@tanstack/react-query-devtools": { + "version": "4.29.7", + "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-4.29.7.tgz", + "integrity": "sha512-fckNnBV6Kfbtq6EJqQen8oBjPqGFcOPS9SJmNKLbFLQgd7OpNIlA4M0r37iJYUY9m14/ESKc1wzKd36VfeiPjg==", + "dependencies": { + "@tanstack/match-sorter-utils": "^8.7.0", + "superjson": "^1.10.0", + "use-sync-external-store": "^1.2.0" + }, + "funding": { + "type": "github", + "url": "https://github.com/sponsors/tannerlinsley" + }, + "peerDependencies": { + "@tanstack/react-query": "4.29.7", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@types/json5": { "version": "0.0.29", "resolved": "https://registry.npmjs.org/@types/json5/-/json5-0.0.29.tgz", @@ -996,6 +1082,20 @@ "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz", "integrity": "sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==" }, + "node_modules/copy-anything": { + "version": "3.0.5", + "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.5.tgz", + "integrity": "sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==", + "dependencies": { + "is-what": "^4.1.8" + }, + "engines": { + "node": ">=12.13" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/cross-spawn": { "version": "7.0.3", "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", @@ -2536,6 +2636,17 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/is-what": { + "version": "4.1.11", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.11.tgz", + "integrity": "sha512-gr9+qDrJvdwT4+N2TAACsZQIB4Ow9j2eefqlh3m9JUV41M1LoKhcE+/j+IVni/r6U8Jnc1PwhjdjVJr+Xmtb0A==", + "engines": { + "node": ">=12.13" + }, + "funding": { + "url": "https://github.com/sponsors/mesqueeb" + } + }, "node_modules/is-wsl": { "version": "2.2.0", "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz", @@ -3397,6 +3508,21 @@ "react": "^18.2.0" } }, + "node_modules/react-hook-form": { + "version": "7.43.9", + "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.43.9.tgz", + "integrity": "sha512-AUDN3Pz2NSeoxQ7Hs6OhQhDr6gtF9YRuutGDwPQqhSUAHJSgGl2VeY3qN19MG0SucpjgDiuMJ4iC5T5uB+eaNQ==", + "engines": { + "node": ">=12.22.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/react-hook-form" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -3442,6 +3568,11 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/remove-accents": { + "version": "0.4.2", + "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz", + "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==" + }, "node_modules/resolve": { "version": "1.22.2", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", @@ -3877,6 +4008,17 @@ "url": "https://github.com/sponsors/isaacs" } }, + "node_modules/superjson": { + "version": "1.12.3", + "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.12.3.tgz", + "integrity": "sha512-0j+U70KUtP8+roVPbwfqkyQI7lBt7ETnuA7KXbTDX3mCKiD/4fXs2ldKSMdt0MCfpTwiMxo20yFU3vu6ewETpQ==", + "dependencies": { + "copy-anything": "^3.0.2" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/supports-color": { "version": "7.2.0", "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz", @@ -4151,6 +4293,14 @@ "punycode": "^2.1.0" } }, + "node_modules/use-sync-external-store": { + "version": "1.2.0", + "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz", + "integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==", + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/util-deprecate": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz", diff --git a/package.json b/package.json index 67974e7..f59f2ca 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,9 @@ "lint": "next lint" }, "dependencies": { + "@splidejs/react-splide": "^0.7.12", + "@tanstack/react-query": "^4.29.7", + "@tanstack/react-query-devtools": "^4.29.7", "@types/node": "20.2.1", "@types/react": "18.2.6", "@types/react-dom": "18.2.4", @@ -19,6 +22,7 @@ "postcss": "8.4.23", "react": "18.2.0", "react-dom": "18.2.0", + "react-hook-form": "^7.43.9", "tailwindcss": "3.3.2", "typescript": "5.0.4" } diff --git a/public/favicon.ico b/public/favicon.ico deleted file mode 100644 index 718d6fe..0000000 Binary files a/public/favicon.ico and /dev/null differ diff --git a/public/images/banner/1.jpg b/public/images/banner/1.jpg new file mode 100644 index 0000000..c54b5bb Binary files /dev/null and b/public/images/banner/1.jpg differ diff --git a/public/images/banner/2.jpg b/public/images/banner/2.jpg new file mode 100644 index 0000000..2714367 Binary files /dev/null and b/public/images/banner/2.jpg differ diff --git a/public/images/banner/3.jpg b/public/images/banner/3.jpg new file mode 100644 index 0000000..b8092fc Binary files /dev/null and b/public/images/banner/3.jpg differ diff --git a/public/images/banner/4.jpg b/public/images/banner/4.jpg new file mode 100644 index 0000000..fc56dda Binary files /dev/null and b/public/images/banner/4.jpg differ diff --git a/public/images/banner/5.jpg b/public/images/banner/5.jpg new file mode 100644 index 0000000..9d58063 Binary files /dev/null and b/public/images/banner/5.jpg differ diff --git a/public/images/banner/6.jpg b/public/images/banner/6.jpg new file mode 100644 index 0000000..2dceb88 Binary files /dev/null and b/public/images/banner/6.jpg differ diff --git a/public/images/logo.png b/public/images/logo.png new file mode 100644 index 0000000..a60abdc Binary files /dev/null and b/public/images/logo.png differ diff --git a/public/images/products/1.jpg b/public/images/products/1.jpg new file mode 100644 index 0000000..4571fff Binary files /dev/null and b/public/images/products/1.jpg differ diff --git a/public/next.svg b/public/next.svg deleted file mode 100644 index 5174b28..0000000 --- a/public/next.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/public/vercel.svg b/public/vercel.svg deleted file mode 100644 index d2f8422..0000000 --- a/public/vercel.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/CardSlider/CardForSlider.tsx b/src/components/CardSlider/CardForSlider.tsx new file mode 100644 index 0000000..62bcd9c --- /dev/null +++ b/src/components/CardSlider/CardForSlider.tsx @@ -0,0 +1,23 @@ +import React from "react"; + +const CardForSlider = () => { + return ( +
+
+ +

مردانه

+
+
+

پلیور مردانه کروم مدل یقه اسکی

+
+
+

+ 1,144,500 + تومان +

+
+
+ ); +}; + +export default CardForSlider; diff --git a/src/components/CardSlider/CardSlider.tsx b/src/components/CardSlider/CardSlider.tsx new file mode 100644 index 0000000..0a2b303 --- /dev/null +++ b/src/components/CardSlider/CardSlider.tsx @@ -0,0 +1,21 @@ +import React from "react"; +import CardForSlider from "./CardForSlider"; + +const CardSlider = () => { + return ( +
+
+

زنانه

+ +
+
+ + + + +
+
+ ); +}; + +export default CardSlider; diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx new file mode 100644 index 0000000..3052ed1 --- /dev/null +++ b/src/components/Footer/Footer.tsx @@ -0,0 +1,33 @@ +import React from "react"; + +const Footer = () => { + return ( +
+
+

خرید

+ زنانه + مردانه + بچگانه + زیبایی و سلامت +
+
+

خدمات مشتریان

+ پاسخ به پرسش های متداول + رویه بازگرداندن کالا + شرایط استفاده + حریم خصوصی +
+
+

اطلاعات زاک استور

+ درباره زاک استور + تماس با زاک استور + همکاری با زاک استور +
+
+

خرید

+
+
+ ); +}; + +export default Footer; diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx new file mode 100644 index 0000000..039aa20 --- /dev/null +++ b/src/components/Navbar/Navbar.tsx @@ -0,0 +1,86 @@ +import React, { useState } from "react"; + +const Navbar = () => { + const [isDropdownOpen, setIsDropdownOpen] = useState(false); + + const toggleDropdown = () => { + setIsDropdownOpen(!isDropdownOpen); + }; + + return ( +
+
+
+
+ +
+
+ + +
+
+
+
+ + + + + +
+
+

همدان

+
+
+ {isDropdownOpen && ( +
+
+
+

زنانه

+ + تی شرت + + + پولوشرت + + + لباس راحتی و خواب + + + مانتو + + + شومیز + + + هودی + + + پالتو + + + پیراهن و لباس مجلسی + +
+
+

مردانه

+
+
+

بچگانه

+
+
+

ورزشی

+
+
+

زیبایی و سلامت

+
+
+
+ )} +
+
+ ); +}; + +export default Navbar; diff --git a/src/components/Slider/Slider.tsx b/src/components/Slider/Slider.tsx new file mode 100644 index 0000000..736e8d9 --- /dev/null +++ b/src/components/Slider/Slider.tsx @@ -0,0 +1,55 @@ +import React from "react"; +import { Splide, SplideSlide } from "@splidejs/react-splide"; +import "@splidejs/splide/dist/css/themes/splide-default.min.css"; + +const Slider = () => { + return ( + + + Slide 1 + + + Slide 2 + + + Slide 3 + + + Slide 4 + + + Slide 5 + + + Slide 6 + + + ); +}; + +export default Slider; + diff --git a/src/font/IRANSans.ttf b/src/font/IRANSans.ttf new file mode 100644 index 0000000..2cf3495 Binary files /dev/null and b/src/font/IRANSans.ttf differ diff --git a/src/font/IRANSansDN-Bold.ttf b/src/font/IRANSansDN-Bold.ttf new file mode 100644 index 0000000..0985e60 Binary files /dev/null and b/src/font/IRANSansDN-Bold.ttf differ diff --git a/src/font/IRANSansDN.ttf b/src/font/IRANSansDN.ttf new file mode 100644 index 0000000..6282c87 Binary files /dev/null and b/src/font/IRANSansDN.ttf differ diff --git a/src/font/IRANSansDN_Light.ttf b/src/font/IRANSansDN_Light.ttf new file mode 100644 index 0000000..b6b25f4 Binary files /dev/null and b/src/font/IRANSansDN_Light.ttf differ diff --git a/src/font/IRANSansWeb.eot b/src/font/IRANSansWeb.eot new file mode 100644 index 0000000..2d9f8e4 Binary files /dev/null and b/src/font/IRANSansWeb.eot differ diff --git a/src/font/IRANSansWeb.ttf b/src/font/IRANSansWeb.ttf new file mode 100644 index 0000000..f3a29b5 Binary files /dev/null and b/src/font/IRANSansWeb.ttf differ diff --git a/src/font/IRANSansWeb.woff b/src/font/IRANSansWeb.woff new file mode 100644 index 0000000..8446ffd Binary files /dev/null and b/src/font/IRANSansWeb.woff differ diff --git a/src/font/IRANSansWeb.woff2 b/src/font/IRANSansWeb.woff2 new file mode 100644 index 0000000..45ce329 Binary files /dev/null and b/src/font/IRANSansWeb.woff2 differ diff --git a/src/font/IRANSans_Black.ttf b/src/font/IRANSans_Black.ttf new file mode 100644 index 0000000..7765eb4 Binary files /dev/null and b/src/font/IRANSans_Black.ttf differ diff --git a/src/font/IRANSans_Bold.ttf b/src/font/IRANSans_Bold.ttf new file mode 100644 index 0000000..053ffc7 Binary files /dev/null and b/src/font/IRANSans_Bold.ttf differ diff --git a/src/font/IRANSans_Light.ttf b/src/font/IRANSans_Light.ttf new file mode 100644 index 0000000..2095056 Binary files /dev/null and b/src/font/IRANSans_Light.ttf differ diff --git a/src/font/IRANSans_Medium.ttf b/src/font/IRANSans_Medium.ttf new file mode 100644 index 0000000..4b0cf29 Binary files /dev/null and b/src/font/IRANSans_Medium.ttf differ diff --git a/src/font/IRANSans_UltraLight.ttf b/src/font/IRANSans_UltraLight.ttf new file mode 100644 index 0000000..30c6239 Binary files /dev/null and b/src/font/IRANSans_UltraLight.ttf differ diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx index 54e8bf3..b2fff8b 100644 --- a/src/pages/_document.tsx +++ b/src/pages/_document.tsx @@ -1,4 +1,4 @@ -import { Html, Head, Main, NextScript } from 'next/document' +import { Html, Head, Main, NextScript } from "next/document"; export default function Document() { return ( @@ -9,5 +9,5 @@ export default function Document() { - ) + ); } diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 57e2a8c..b432768 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,118 +1,15 @@ -import Image from 'next/image' -import { Inter } from 'next/font/google' - -const inter = Inter({ subsets: ['latin'] }) +import Navbar from "./../components/Navbar/Navbar"; +import Footer from "./../components/Footer/Footer"; +import Slider from "@/components/Slider/Slider"; +import CardSlider from "@/components/CardSlider/CardSlider"; export default function Home() { return ( -
-
-

- Get started by editing  - src/pages/index.tsx -

-
- - By{' '} - Vercel Logo - -
-
- -
- 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{' '} - - -> - -

-

- Discover and deploy boilerplate example Next.js projects. -

- - - -

- Deploy{' '} - - -> - -

-

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

- -
+
+ + + +
- ) + ); } diff --git a/src/styles/globals.css b/src/styles/globals.css index fd81e88..921bfbe 100644 --- a/src/styles/globals.css +++ b/src/styles/globals.css @@ -2,26 +2,20 @@ @tailwind components; @tailwind utilities; -:root { - --foreground-rgb: 0, 0, 0; - --background-start-rgb: 214, 219, 220; - --background-end-rgb: 255, 255, 255; -} - -@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 { + html { + font-family: "iransans"; + src: url(../font/IRANSansWeb.woff); } } - -body { - color: rgb(var(--foreground-rgb)); - background: linear-gradient( - to bottom, - transparent, - rgb(var(--background-end-rgb)) - ) - rgb(var(--background-start-rgb)); +.animation { + animation: nav 0.5s; +} +@keyframes nav { + from { + transform: scaleY(0); + } + to { + transform: scaleY(1); + } } diff --git a/tailwind.config.js b/tailwind.config.js index d53b2ea..f2fd34c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,18 +1,31 @@ /** @type {import('tailwindcss').Config} */ module.exports = { content: [ - './src/pages/**/*.{js,ts,jsx,tsx,mdx}', - './src/components/**/*.{js,ts,jsx,tsx,mdx}', - './src/app/**/*.{js,ts,jsx,tsx,mdx}', + "./src/pages/**/*.{js,ts,jsx,tsx,mdx}", + "./src/components/**/*.{js,ts,jsx,tsx,mdx}", + "./src/app/**/*.{js,ts,jsx,tsx,mdx}", ], theme: { extend: { + keyframes: { + nav: { + "0%": "height:'0%'", + "100%": "height:'100%'", + }, + }, + animation: { + openNav: "nav 10s", + }, + + fontFamily: { + iransans: ["sans-serif"], + }, backgroundImage: { - 'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))', - 'gradient-conic': - 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))', + "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", + "gradient-conic": + "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, }, }, plugins: [], -} +};