├── .eslintrc.json ├── public ├── Logo.png ├── demo.png ├── card1.png ├── card2.png ├── card3.png ├── card4.png ├── demo1.png ├── demo2.png ├── demo3.png ├── herobg.png ├── Arrow 12.png ├── favicon.png ├── shorcut.png ├── Herosection.png └── bgdemo.svg ├── next.config.js ├── postcss.config.js ├── app ├── About │ └── page.tsx ├── Collections │ └── page.tsx ├── Shop │ └── page.tsx ├── layout.tsx ├── page.tsx └── globals.css ├── lib └── utils.ts ├── components.json ├── .gitignore ├── tsconfig.json ├── package.json ├── components ├── ui │ ├── popover.tsx │ ├── button.tsx │ └── dialog.tsx ├── Demo.tsx ├── HomeSection.tsx ├── Collections.tsx └── Navbar.tsx ├── README.md └── tailwind.config.js /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals" 3 | } 4 | -------------------------------------------------------------------------------- /public/Logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/Logo.png -------------------------------------------------------------------------------- /public/demo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/demo.png -------------------------------------------------------------------------------- /public/card1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/card1.png -------------------------------------------------------------------------------- /public/card2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/card2.png -------------------------------------------------------------------------------- /public/card3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/card3.png -------------------------------------------------------------------------------- /public/card4.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/card4.png -------------------------------------------------------------------------------- /public/demo1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/demo1.png -------------------------------------------------------------------------------- /public/demo2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/demo2.png -------------------------------------------------------------------------------- /public/demo3.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/demo3.png -------------------------------------------------------------------------------- /public/herobg.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/herobg.png -------------------------------------------------------------------------------- /public/Arrow 12.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/Arrow 12.png -------------------------------------------------------------------------------- /public/favicon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/favicon.png -------------------------------------------------------------------------------- /public/shorcut.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/shorcut.png -------------------------------------------------------------------------------- /public/Herosection.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Iqtidartara/Main-Plume/HEAD/public/Herosection.png -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('next').NextConfig} */ 2 | const nextConfig = {} 3 | 4 | module.exports = nextConfig 5 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /app/About/page.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const page = () => { 4 | return ( 5 |
About Section
6 | ) 7 | } 8 | 9 | export default page -------------------------------------------------------------------------------- /app/Collections/page.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const page = () => { 4 | return ( 5 |
collection section is here
6 | ) 7 | } 8 | 9 | export default page -------------------------------------------------------------------------------- /app/Shop/page.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | 3 | const page = () => { 4 | return ( 5 |
page of shop section routing
6 | ) 7 | } 8 | 9 | export default page -------------------------------------------------------------------------------- /lib/utils.ts: -------------------------------------------------------------------------------- 1 | import { type ClassValue, clsx } from "clsx" 2 | import { twMerge } from "tailwind-merge" 3 | 4 | export function cn(...inputs: ClassValue[]) { 5 | return twMerge(clsx(inputs)) 6 | } 7 | -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": true, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.js", 8 | "css": "app/globals.css", 9 | "baseColor": "slate", 10 | "cssVariables": true 11 | }, 12 | "aliases": { 13 | "components": "@/components", 14 | "utils": "@/lib/utils" 15 | } 16 | } -------------------------------------------------------------------------------- /public/bgdemo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | .yarn/install-state.gz 8 | 9 | # testing 10 | /coverage 11 | 12 | # next.js 13 | /.next/ 14 | /out/ 15 | 16 | # production 17 | /build 18 | 19 | # misc 20 | .DS_Store 21 | *.pem 22 | 23 | # debug 24 | npm-debug.log* 25 | yarn-debug.log* 26 | yarn-error.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /app/layout.tsx: -------------------------------------------------------------------------------- 1 | import type { Metadata } from 'next' 2 | import { Manrope } from 'next/font/google' 3 | import './globals.css' 4 | 5 | 6 | const manrope = Manrope({ subsets: ['latin'] }) 7 | 8 | export const metadata: Metadata = { 9 | icons:"/favicon.png", 10 | title: 'MainPlume', 11 | description: 'Generated by create next app', 12 | } 13 | 14 | export default function RootLayout({ 15 | children, 16 | }: { 17 | children: React.ReactNode 18 | }) { 19 | return ( 20 | 21 | 22 | {children} 23 | 24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /app/page.tsx: -------------------------------------------------------------------------------- 1 | import Collections from "@/components/Collections"; 2 | import Demo from "@/components/Demo"; 3 | import HomeSection from "@/components/HomeSection"; 4 | import Navbar from "@/components/Navbar"; 5 | 6 | 7 | export default function Home() { 8 | return ( 9 |
10 |
18 | 19 | 20 |
21 | 22 | 23 |
24 | ) 25 | } 26 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "es5", 4 | "lib": ["dom", "dom.iterable", "esnext"], 5 | "allowJs": true, 6 | "skipLibCheck": true, 7 | "strict": true, 8 | "noEmit": true, 9 | "esModuleInterop": true, 10 | "module": "esnext", 11 | "moduleResolution": "bundler", 12 | "resolveJsonModule": true, 13 | "isolatedModules": true, 14 | "jsx": "preserve", 15 | "incremental": true, 16 | "plugins": [ 17 | { 18 | "name": "next" 19 | } 20 | ], 21 | "paths": { 22 | "@/*": ["./*"] 23 | } 24 | }, 25 | "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"], 26 | "exclude": ["node_modules"] 27 | } 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "sd", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "dev": "next dev", 7 | "build": "next build", 8 | "start": "next start", 9 | "lint": "next lint" 10 | }, 11 | "dependencies": { 12 | "@headlessui/react": "^1.7.17", 13 | "@radix-ui/react-dialog": "^1.0.5", 14 | "@radix-ui/react-popover": "^1.0.7", 15 | "@radix-ui/react-slot": "^1.0.2", 16 | "class-variance-authority": "^0.7.0", 17 | "clsx": "^2.0.0", 18 | "lucide-react": "^0.299.0", 19 | "next": "14.0.4", 20 | "react": "^18", 21 | "react-dom": "^18", 22 | "tailwind-merge": "^2.1.0", 23 | "tailwindcss-animate": "^1.0.7" 24 | }, 25 | "devDependencies": { 26 | "@types/node": "^20", 27 | "@types/react": "^18", 28 | "@types/react-dom": "^18", 29 | "autoprefixer": "^10.0.1", 30 | "eslint": "^8", 31 | "eslint-config-next": "14.0.4", 32 | "postcss": "^8", 33 | "tailwindcss": "^3.3.0", 34 | "typescript": "^5" 35 | } 36 | } 37 | -------------------------------------------------------------------------------- /components/ui/popover.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as PopoverPrimitive from "@radix-ui/react-popover" 5 | 6 | import { cn } from "@/lib/utils" 7 | 8 | const Popover = PopoverPrimitive.Root 9 | 10 | const PopoverTrigger = PopoverPrimitive.Trigger 11 | 12 | const PopoverContent = React.forwardRef< 13 | React.ElementRef, 14 | React.ComponentPropsWithoutRef 15 | >(({ className, align = "center", sideOffset = 4, ...props }, ref) => ( 16 | 17 | 27 | 28 | )) 29 | PopoverContent.displayName = PopoverPrimitive.Content.displayName 30 | 31 | export { Popover, PopoverTrigger, PopoverContent } 32 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). 2 | 3 | ## Getting Started 4 | 5 | First, run the development server: 6 | 7 | ```bash 8 | npm run dev 9 | # or 10 | yarn dev 11 | # or 12 | pnpm dev 13 | # or 14 | bun dev 15 | ``` 16 | 17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. 18 | 19 | You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file. 20 | 21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font. 22 | 23 | ## Learn More 24 | 25 | To learn more about Next.js, take a look at the following resources: 26 | 27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. 28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. 29 | 30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! 31 | 32 | ## Deploy on Vercel 33 | 34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. 35 | 36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. 37 | -------------------------------------------------------------------------------- /app/globals.css: -------------------------------------------------------------------------------- 1 | @tailwind base; 2 | @tailwind components; 3 | @tailwind utilities; 4 | 5 | @layer base { 6 | :root { 7 | --background: 0 0% 100%; 8 | --foreground: 222.2 84% 4.9%; 9 | 10 | --card: 0 0% 100%; 11 | --card-foreground: 222.2 84% 4.9%; 12 | 13 | --popover: 0 0% 100%; 14 | --popover-foreground: 222.2 84% 4.9%; 15 | 16 | --primary: 222.2 47.4% 11.2%; 17 | --primary-foreground: 210 40% 98%; 18 | 19 | --secondary: 210 40% 96.1%; 20 | --secondary-foreground: 222.2 47.4% 11.2%; 21 | 22 | --muted: 210 40% 96.1%; 23 | --muted-foreground: 215.4 16.3% 46.9%; 24 | 25 | --accent: 210 40% 96.1%; 26 | --accent-foreground: 222.2 47.4% 11.2%; 27 | 28 | --destructive: 0 84.2% 60.2%; 29 | --destructive-foreground: 210 40% 98%; 30 | 31 | --border: 214.3 31.8% 91.4%; 32 | --input: 214.3 31.8% 91.4%; 33 | --ring: 222.2 84% 4.9%; 34 | 35 | --radius: 0.5rem; 36 | } 37 | 38 | .dark { 39 | --background: 222.2 84% 4.9%; 40 | --foreground: 210 40% 98%; 41 | 42 | --card: 222.2 84% 4.9%; 43 | --card-foreground: 210 40% 98%; 44 | 45 | --popover: 222.2 84% 4.9%; 46 | --popover-foreground: 210 40% 98%; 47 | 48 | --primary: 210 40% 98%; 49 | --primary-foreground: 222.2 47.4% 11.2%; 50 | 51 | --secondary: 217.2 32.6% 17.5%; 52 | --secondary-foreground: 210 40% 98%; 53 | 54 | --muted: 217.2 32.6% 17.5%; 55 | --muted-foreground: 215 20.2% 65.1%; 56 | 57 | --accent: 217.2 32.6% 17.5%; 58 | --accent-foreground: 210 40% 98%; 59 | 60 | --destructive: 0 62.8% 30.6%; 61 | --destructive-foreground: 210 40% 98%; 62 | 63 | --border: 217.2 32.6% 17.5%; 64 | --input: 217.2 32.6% 17.5%; 65 | --ring: 212.7 26.8% 83.9%; 66 | } 67 | } 68 | 69 | @layer base { 70 | * { 71 | @apply border-border; 72 | } 73 | body { 74 | @apply bg-background text-foreground; 75 | } 76 | } -------------------------------------------------------------------------------- /components/Demo.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import React from "react"; 3 | import { Button } from "./ui/button"; 4 | import { url } from "inspector"; 5 | 6 | const Demo = () => { 7 | return ( 8 |
9 |
21 | {/* main div where I give flex property */} 22 | 23 |
24 | {/* first image */} 25 |
26 | 27 |
28 | 29 | {/* buttons and image */} 30 |
31 | 32 |
33 | 43 | 44 |
45 | 46 |
47 | 48 | {/* last image */} 49 |
50 | 51 |
52 |
53 |
54 |
55 | ); 56 | }; 57 | 58 | export default Demo; 59 | 60 | -------------------------------------------------------------------------------- /components/ui/button.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { cva, type VariantProps } from "class-variance-authority" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const buttonVariants = cva( 8 | "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50", 9 | { 10 | variants: { 11 | variant: { 12 | default: "bg-primary text-primary-foreground hover:bg-primary/90", 13 | destructive: 14 | "bg-destructive text-destructive-foreground hover:bg-destructive/90", 15 | outline: 16 | "border border-input bg-background hover:bg-accent hover:text-accent-foreground", 17 | secondary: 18 | "bg-secondary text-secondary-foreground hover:bg-secondary/80", 19 | ghost: "hover:bg-accent hover:text-accent-foreground", 20 | link: "text-primary underline-offset-4 hover:underline", 21 | }, 22 | size: { 23 | default: "h-10 px-4 py-2", 24 | sm: "h-9 rounded-md px-3", 25 | lg: "h-11 rounded-md px-8", 26 | icon: "h-10 w-10", 27 | }, 28 | }, 29 | defaultVariants: { 30 | variant: "default", 31 | size: "default", 32 | }, 33 | } 34 | ) 35 | 36 | export interface ButtonProps 37 | extends React.ButtonHTMLAttributes, 38 | VariantProps { 39 | asChild?: boolean 40 | } 41 | 42 | const Button = React.forwardRef( 43 | ({ className, variant, size, asChild = false, ...props }, ref) => { 44 | const Comp = asChild ? Slot : "button" 45 | return ( 46 | 51 | ) 52 | } 53 | ) 54 | Button.displayName = "Button" 55 | 56 | export { Button, buttonVariants } 57 | -------------------------------------------------------------------------------- /components/HomeSection.tsx: -------------------------------------------------------------------------------- 1 | import Image from "next/image"; 2 | import React from "react"; 3 | import { Button } from "./ui/button"; 4 | 5 | const HomeSection = () => { 6 | return ( 7 |
8 |
9 | {/* content div */} 10 |
11 |

12 | Dive into a world of endless fashion possibilities 13 |

14 |

15 | Dive into a realm of endless fashion possibilities. Explore our 16 | diverse collections and redefine your style. Your fashion journey 17 | begins here 18 |

19 | 20 |
21 | 22 | 25 | 28 |
29 |

30 | 20% discount over 47$ use code 7djk#8hH7 31 |

32 |
33 | {/* image div */} 34 |
35 | Fashion 42 |
43 | 44 |
45 |
46 | ); 47 | }; 48 | 49 | export default HomeSection; 50 | -------------------------------------------------------------------------------- /tailwind.config.js: -------------------------------------------------------------------------------- 1 | /** @type {import('tailwindcss').Config} */ 2 | module.exports = { 3 | darkMode: ["class"], 4 | content: [ 5 | './pages/**/*.{ts,tsx}', 6 | './components/**/*.{ts,tsx}', 7 | './app/**/*.{ts,tsx}', 8 | './src/**/*.{ts,tsx}', 9 | ], 10 | theme: { 11 | container: { 12 | center: true, 13 | padding: "2rem", 14 | screens: { 15 | "2xl": "1400px", 16 | }, 17 | }, 18 | extend: { 19 | colors: { 20 | border: "hsl(var(--border))", 21 | input: "hsl(var(--input))", 22 | ring: "hsl(var(--ring))", 23 | background: "hsl(var(--background))", 24 | foreground: "hsl(var(--foreground))", 25 | primary: { 26 | DEFAULT: "hsl(var(--primary))", 27 | foreground: "hsl(var(--primary-foreground))", 28 | }, 29 | secondary: { 30 | DEFAULT: "hsl(var(--secondary))", 31 | foreground: "hsl(var(--secondary-foreground))", 32 | }, 33 | destructive: { 34 | DEFAULT: "hsl(var(--destructive))", 35 | foreground: "hsl(var(--destructive-foreground))", 36 | }, 37 | muted: { 38 | DEFAULT: "hsl(var(--muted))", 39 | foreground: "hsl(var(--muted-foreground))", 40 | }, 41 | accent: { 42 | DEFAULT: "hsl(var(--accent))", 43 | foreground: "hsl(var(--accent-foreground))", 44 | }, 45 | popover: { 46 | DEFAULT: "hsl(var(--popover))", 47 | foreground: "hsl(var(--popover-foreground))", 48 | }, 49 | card: { 50 | DEFAULT: "hsl(var(--card))", 51 | foreground: "hsl(var(--card-foreground))", 52 | }, 53 | }, 54 | borderRadius: { 55 | lg: "var(--radius)", 56 | md: "calc(var(--radius) - 2px)", 57 | sm: "calc(var(--radius) - 4px)", 58 | }, 59 | keyframes: { 60 | "accordion-down": { 61 | from: { height: 0 }, 62 | to: { height: "var(--radix-accordion-content-height)" }, 63 | }, 64 | "accordion-up": { 65 | from: { height: "var(--radix-accordion-content-height)" }, 66 | to: { height: 0 }, 67 | }, 68 | }, 69 | animation: { 70 | "accordion-down": "accordion-down 0.2s ease-out", 71 | "accordion-up": "accordion-up 0.2s ease-out", 72 | }, 73 | }, 74 | }, 75 | plugins: [require("tailwindcss-animate")], 76 | } -------------------------------------------------------------------------------- /components/Collections.tsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | import { Button } from "./ui/button"; 3 | import Image from "next/image"; 4 | 5 | const cardData = [ 6 | { 7 | title: "Women", 8 | description: 9 | "Elevate Your Winter Style: Must-Have Fashion Essentials for Women. Stay Chic and Cozy with Our Latest Winter Collection", 10 | imageSrc: "/card1.png", 11 | buttonText: "Shop Now", 12 | }, 13 | { 14 | title: "Children", 15 | description: 16 | "Our enchanting dresses offer comfort and charm, perfect for your child's special occasions", 17 | imageSrc: "/card2.png", 18 | buttonText: "Shop Now", 19 | }, 20 | { 21 | title: "Men", 22 | description: 23 | "Revamp your look with our contemporary men's fashion, where comfort meets style. Elevate your confidence, one outfit at a time.", 24 | imageSrc: "/card3.png", 25 | buttonText: "Shop Now", 26 | }, 27 | { 28 | title: "New Collection", 29 | description: 30 | "Elevate your style with our stunning new collection. From timeless classics to bold trends, we have something for everyone.", 31 | imageSrc: "/card4.png", 32 | buttonText: "Shop Now", 33 | }, 34 | // Add more card data as needed 35 | ]; 36 | 37 | const Collections: React.FC = () => { 38 | return ( 39 |
40 |
41 |
42 |

43 | Our Winter collection 44 |

45 |

46 | Discover the Cozy Chic: Our Winter Collection 2023. Stay
47 | warm while looking fabulous this season! 48 |

49 | 50 | {/* Map over cardData to render each card */} 51 |
52 | {cardData.map((card, index) => ( 53 |
57 | {/* Card content */} 58 |
59 |

60 | {card.title} 61 |

62 |

63 | {card.description} 64 |

65 | 68 |
69 | 70 | {/* Card image */} 71 |
72 | {`Card 79 |
80 |
81 | ))} 82 |
83 |
84 |
85 |
86 | ); 87 | }; 88 | 89 | export default Collections; 90 | -------------------------------------------------------------------------------- /components/ui/dialog.tsx: -------------------------------------------------------------------------------- 1 | "use client" 2 | 3 | import * as React from "react" 4 | import * as DialogPrimitive from "@radix-ui/react-dialog" 5 | import { X } from "lucide-react" 6 | 7 | import { cn } from "@/lib/utils" 8 | 9 | const Dialog = DialogPrimitive.Root 10 | 11 | const DialogTrigger = DialogPrimitive.Trigger 12 | 13 | const DialogPortal = DialogPrimitive.Portal 14 | 15 | const DialogClose = DialogPrimitive.Close 16 | 17 | const DialogOverlay = React.forwardRef< 18 | React.ElementRef, 19 | React.ComponentPropsWithoutRef 20 | >(({ className, ...props }, ref) => ( 21 | 29 | )) 30 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName 31 | 32 | const DialogContent = React.forwardRef< 33 | React.ElementRef, 34 | React.ComponentPropsWithoutRef 35 | >(({ className, children, ...props }, ref) => ( 36 | 37 | 38 | 46 | {children} 47 | 48 | 49 | Close 50 | 51 | 52 | 53 | )) 54 | DialogContent.displayName = DialogPrimitive.Content.displayName 55 | 56 | const DialogHeader = ({ 57 | className, 58 | ...props 59 | }: React.HTMLAttributes) => ( 60 |
67 | ) 68 | DialogHeader.displayName = "DialogHeader" 69 | 70 | const DialogFooter = ({ 71 | className, 72 | ...props 73 | }: React.HTMLAttributes) => ( 74 |
81 | ) 82 | DialogFooter.displayName = "DialogFooter" 83 | 84 | const DialogTitle = React.forwardRef< 85 | React.ElementRef, 86 | React.ComponentPropsWithoutRef 87 | >(({ className, ...props }, ref) => ( 88 | 96 | )) 97 | DialogTitle.displayName = DialogPrimitive.Title.displayName 98 | 99 | const DialogDescription = React.forwardRef< 100 | React.ElementRef, 101 | React.ComponentPropsWithoutRef 102 | >(({ className, ...props }, ref) => ( 103 | 108 | )) 109 | DialogDescription.displayName = DialogPrimitive.Description.displayName 110 | 111 | export { 112 | Dialog, 113 | DialogPortal, 114 | DialogOverlay, 115 | DialogClose, 116 | DialogTrigger, 117 | DialogContent, 118 | DialogHeader, 119 | DialogFooter, 120 | DialogTitle, 121 | DialogDescription, 122 | } 123 | -------------------------------------------------------------------------------- /components/Navbar.tsx: -------------------------------------------------------------------------------- 1 | "use client"; 2 | import { cn } from "@/lib/utils"; 3 | import { Popover } from "@headlessui/react"; 4 | import { Menu, X } from "lucide-react"; 5 | import Image from "next/image"; 6 | import Link from "next/link"; 7 | import { usePathname } from "next/navigation"; 8 | import React, { useState } from "react"; 9 | 10 | 11 | 12 | import { Button } from "@/components/ui/button"; 13 | 14 | 15 | 16 | const Navbar = () => { 17 | 18 | const [menuOpen, setMenuOpen] = useState(false); 19 | const pathname = usePathname(); 20 | const handleLinkClick = () => { 21 | 22 | setMenuOpen(false); 23 | }; 24 | 25 | const links = [ 26 | { href: "/", label: "HOME" }, 27 | { href: "/About", label: "ABOUT US" }, 28 | { href: "/Shop", label: "SHOP" }, 29 | { href: "/Collections", label: "COLLECTIONS" }, 30 | ]; 31 | 32 | 33 | return ( 34 |
35 | 36 | logo 43 |
44 |
45 | {links.map((link, index) => ( 46 | 56 | {link.label} 57 | 58 | ))} 59 |
60 |
61 | 62 |
63 | setMenuOpen(!menuOpen)} 66 | > 67 | Open menu 68 |
71 | 72 |
77 |
78 |
79 |
80 | logo 87 |
88 | setMenuOpen(false)} 91 | > 92 | Close menu 93 | 95 |
96 |
97 |
98 | 116 |
117 | 118 |
119 |
120 |
121 | 122 |
123 | 124 | 125 | 126 |
127 | 128 |
129 | ); 130 | }; 131 | 132 | export default Navbar; --------------------------------------------------------------------------------