├── .gitignore ├── README.md ├── bun.lockb ├── components.json ├── eslint.config.js ├── index.html ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── placeholder.svg └── robots.txt ├── src ├── App.css ├── App.tsx ├── components │ ├── home │ │ ├── AdSlider.tsx │ │ ├── CallToAction.tsx │ │ ├── CatererCard.tsx │ │ ├── FeaturedCaterers.tsx │ │ ├── HowItWorks.tsx │ │ └── Testimonials.tsx │ ├── layout │ │ ├── Footer.tsx │ │ ├── Header.tsx │ │ ├── Layout.tsx │ │ ├── Sidebar.tsx │ │ └── sidebar │ │ │ ├── FilterSection.tsx │ │ │ ├── NavigationLinks.tsx │ │ │ ├── SearchBar.tsx │ │ │ └── constants.ts │ └── ui │ │ ├── accordion.tsx │ │ ├── alert-dialog.tsx │ │ ├── alert.tsx │ │ ├── aspect-ratio.tsx │ │ ├── avatar.tsx │ │ ├── badge.tsx │ │ ├── breadcrumb.tsx │ │ ├── button.tsx │ │ ├── calendar.tsx │ │ ├── card.tsx │ │ ├── carousel.tsx │ │ ├── chart.tsx │ │ ├── checkbox.tsx │ │ ├── collapsible.tsx │ │ ├── command.tsx │ │ ├── context-menu.tsx │ │ ├── dialog.tsx │ │ ├── drawer.tsx │ │ ├── dropdown-menu.tsx │ │ ├── form.tsx │ │ ├── hover-card.tsx │ │ ├── input-otp.tsx │ │ ├── input.tsx │ │ ├── label.tsx │ │ ├── menubar.tsx │ │ ├── navigation-menu.tsx │ │ ├── pagination.tsx │ │ ├── popover.tsx │ │ ├── progress.tsx │ │ ├── radio-group.tsx │ │ ├── resizable.tsx │ │ ├── scroll-area.tsx │ │ ├── select.tsx │ │ ├── separator.tsx │ │ ├── sheet.tsx │ │ ├── sidebar.tsx │ │ ├── skeleton.tsx │ │ ├── slider.tsx │ │ ├── sonner.tsx │ │ ├── switch.tsx │ │ ├── table.tsx │ │ ├── tabs.tsx │ │ ├── textarea.tsx │ │ ├── toast.tsx │ │ ├── toaster.tsx │ │ ├── toggle-group.tsx │ │ ├── toggle.tsx │ │ ├── tooltip.tsx │ │ └── use-toast.ts ├── hooks │ ├── use-mobile.tsx │ └── use-toast.ts ├── index.css ├── lib │ └── utils.ts ├── main.tsx ├── pages │ ├── About.tsx │ ├── Cart.tsx │ ├── CatererDetail.tsx │ ├── Caterers.tsx │ ├── Contact.tsx │ ├── Index.tsx │ └── NotFound.tsx └── vite-env.d.ts ├── tailwind.config.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Welcome to your Lovable project 2 | 3 | ## Project info 4 | 5 | **URL**: https://lovable.dev/projects/7528566f-4a8d-482c-85bf-ce81d01ec6bc 6 | 7 | ## How can I edit this code? 8 | 9 | There are several ways of editing your application. 10 | 11 | **Use Lovable** 12 | 13 | Simply visit the [Lovable Project](https://lovable.dev/projects/7528566f-4a8d-482c-85bf-ce81d01ec6bc) and start prompting. 14 | 15 | Changes made via Lovable will be committed automatically to this repo. 16 | 17 | **Use your preferred IDE** 18 | 19 | If you want to work locally using your own IDE, you can clone this repo and push changes. Pushed changes will also be reflected in Lovable. 20 | 21 | The only requirement is having Node.js & npm installed - [install with nvm](https://github.com/nvm-sh/nvm#installing-and-updating) 22 | 23 | Follow these steps: 24 | 25 | ```sh 26 | # Step 1: Clone the repository using the project's Git URL. 27 | git clone 28 | 29 | # Step 2: Navigate to the project directory. 30 | cd 31 | 32 | # Step 3: Install the necessary dependencies. 33 | npm i 34 | 35 | # Step 4: Start the development server with auto-reloading and an instant preview. 36 | npm run dev 37 | ``` 38 | 39 | **Edit a file directly in GitHub** 40 | 41 | - Navigate to the desired file(s). 42 | - Click the "Edit" button (pencil icon) at the top right of the file view. 43 | - Make your changes and commit the changes. 44 | 45 | **Use GitHub Codespaces** 46 | 47 | - Navigate to the main page of your repository. 48 | - Click on the "Code" button (green button) near the top right. 49 | - Select the "Codespaces" tab. 50 | - Click on "New codespace" to launch a new Codespace environment. 51 | - Edit files directly within the Codespace and commit and push your changes once you're done. 52 | 53 | ## What technologies are used for this project? 54 | 55 | This project is built with: 56 | 57 | - Vite 58 | - TypeScript 59 | - React 60 | - shadcn-ui 61 | - Tailwind CSS 62 | 63 | ## How can I deploy this project? 64 | 65 | Simply open [Lovable](https://lovable.dev/projects/7528566f-4a8d-482c-85bf-ce81d01ec6bc) and click on Share -> Publish. 66 | 67 | ## Can I connect a custom domain to my Lovable project? 68 | 69 | Yes, you can! 70 | 71 | To connect a domain, navigate to Project > Settings > Domains and click Connect Domain. 72 | 73 | Read more here: [Setting up a custom domain](https://docs.lovable.dev/tips-tricks/custom-domain#step-by-step-guide) 74 | -------------------------------------------------------------------------------- /bun.lockb: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohanmistry231/event-feast-flow/71c9dfe912c6d340f22cdae470baa6ff64fa20e8/bun.lockb -------------------------------------------------------------------------------- /components.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://ui.shadcn.com/schema.json", 3 | "style": "default", 4 | "rsc": false, 5 | "tsx": true, 6 | "tailwind": { 7 | "config": "tailwind.config.ts", 8 | "css": "src/index.css", 9 | "baseColor": "slate", 10 | "cssVariables": true, 11 | "prefix": "" 12 | }, 13 | "aliases": { 14 | "components": "@/components", 15 | "utils": "@/lib/utils", 16 | "ui": "@/components/ui", 17 | "lib": "@/lib", 18 | "hooks": "@/hooks" 19 | } 20 | } -------------------------------------------------------------------------------- /eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from "@eslint/js"; 2 | import globals from "globals"; 3 | import reactHooks from "eslint-plugin-react-hooks"; 4 | import reactRefresh from "eslint-plugin-react-refresh"; 5 | import tseslint from "typescript-eslint"; 6 | 7 | export default tseslint.config( 8 | { ignores: ["dist"] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ["**/*.{ts,tsx}"], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | "react-hooks": reactHooks, 18 | "react-refresh": reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | "react-refresh/only-export-components": [ 23 | "warn", 24 | { allowConstantExport: true }, 25 | ], 26 | "@typescript-eslint/no-unused-vars": "off", 27 | }, 28 | } 29 | ); 30 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | event-feast-flow 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vite_react_shadcn_ts", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "build:dev": "vite build --mode development", 10 | "lint": "eslint .", 11 | "preview": "vite preview" 12 | }, 13 | "dependencies": { 14 | "@hookform/resolvers": "^3.9.0", 15 | "@radix-ui/react-accordion": "^1.2.0", 16 | "@radix-ui/react-alert-dialog": "^1.1.1", 17 | "@radix-ui/react-aspect-ratio": "^1.1.0", 18 | "@radix-ui/react-avatar": "^1.1.0", 19 | "@radix-ui/react-checkbox": "^1.1.1", 20 | "@radix-ui/react-collapsible": "^1.1.0", 21 | "@radix-ui/react-context-menu": "^2.2.1", 22 | "@radix-ui/react-dialog": "^1.1.2", 23 | "@radix-ui/react-dropdown-menu": "^2.1.1", 24 | "@radix-ui/react-hover-card": "^1.1.1", 25 | "@radix-ui/react-label": "^2.1.0", 26 | "@radix-ui/react-menubar": "^1.1.1", 27 | "@radix-ui/react-navigation-menu": "^1.2.0", 28 | "@radix-ui/react-popover": "^1.1.1", 29 | "@radix-ui/react-progress": "^1.1.0", 30 | "@radix-ui/react-radio-group": "^1.2.0", 31 | "@radix-ui/react-scroll-area": "^1.1.0", 32 | "@radix-ui/react-select": "^2.1.1", 33 | "@radix-ui/react-separator": "^1.1.0", 34 | "@radix-ui/react-slider": "^1.2.0", 35 | "@radix-ui/react-slot": "^1.1.0", 36 | "@radix-ui/react-switch": "^1.1.0", 37 | "@radix-ui/react-tabs": "^1.1.0", 38 | "@radix-ui/react-toast": "^1.2.1", 39 | "@radix-ui/react-toggle": "^1.1.0", 40 | "@radix-ui/react-toggle-group": "^1.1.0", 41 | "@radix-ui/react-tooltip": "^1.1.4", 42 | "@tanstack/react-query": "^5.56.2", 43 | "class-variance-authority": "^0.7.1", 44 | "clsx": "^2.1.1", 45 | "cmdk": "^1.0.0", 46 | "date-fns": "^3.6.0", 47 | "embla-carousel-react": "^8.3.0", 48 | "framer-motion": "^12.7.4", 49 | "input-otp": "^1.2.4", 50 | "lucide-react": "^0.462.0", 51 | "next-themes": "^0.3.0", 52 | "react": "^18.3.1", 53 | "react-day-picker": "^8.10.1", 54 | "react-dom": "^18.3.1", 55 | "react-hook-form": "^7.53.0", 56 | "react-resizable-panels": "^2.1.3", 57 | "react-router-dom": "^6.26.2", 58 | "recharts": "^2.12.7", 59 | "sonner": "^1.5.0", 60 | "tailwind-merge": "^2.5.2", 61 | "tailwindcss-animate": "^1.0.7", 62 | "vaul": "^0.9.3", 63 | "zod": "^3.23.8" 64 | }, 65 | "devDependencies": { 66 | "@eslint/js": "^9.9.0", 67 | "@tailwindcss/typography": "^0.5.15", 68 | "@types/node": "^22.5.5", 69 | "@types/react": "^18.3.3", 70 | "@types/react-dom": "^18.3.0", 71 | "@vitejs/plugin-react-swc": "^3.5.0", 72 | "autoprefixer": "^10.4.20", 73 | "eslint": "^9.9.0", 74 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 75 | "eslint-plugin-react-refresh": "^0.4.9", 76 | "globals": "^15.9.0", 77 | "lovable-tagger": "^1.1.7", 78 | "postcss": "^8.4.47", 79 | "tailwindcss": "^3.4.11", 80 | "typescript": "^5.5.3", 81 | "typescript-eslint": "^8.0.1", 82 | "vite": "^5.4.1" 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | export default { 2 | plugins: { 3 | tailwindcss: {}, 4 | autoprefixer: {}, 5 | }, 6 | } 7 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/rohanmistry231/event-feast-flow/71c9dfe912c6d340f22cdae470baa6ff64fa20e8/public/favicon.ico -------------------------------------------------------------------------------- /public/placeholder.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | User-agent: Googlebot 2 | Allow: / 3 | 4 | User-agent: Bingbot 5 | Allow: / 6 | 7 | User-agent: Twitterbot 8 | Allow: / 9 | 10 | User-agent: facebookexternalhit 11 | Allow: / 12 | 13 | User-agent: * 14 | Allow: / 15 | -------------------------------------------------------------------------------- /src/App.css: -------------------------------------------------------------------------------- 1 | #root { 2 | max-width: 1280px; 3 | margin: 0 auto; 4 | padding: 2rem; 5 | text-align: center; 6 | } 7 | 8 | .logo { 9 | height: 6em; 10 | padding: 1.5em; 11 | will-change: filter; 12 | transition: filter 300ms; 13 | } 14 | .logo:hover { 15 | filter: drop-shadow(0 0 2em #646cffaa); 16 | } 17 | .logo.react:hover { 18 | filter: drop-shadow(0 0 2em #61dafbaa); 19 | } 20 | 21 | @keyframes logo-spin { 22 | from { 23 | transform: rotate(0deg); 24 | } 25 | to { 26 | transform: rotate(360deg); 27 | } 28 | } 29 | 30 | @media (prefers-reduced-motion: no-preference) { 31 | a:nth-of-type(2) .logo { 32 | animation: logo-spin infinite 20s linear; 33 | } 34 | } 35 | 36 | .card { 37 | padding: 2em; 38 | } 39 | 40 | .read-the-docs { 41 | color: #888; 42 | } 43 | -------------------------------------------------------------------------------- /src/App.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Toaster } from "@/components/ui/toaster"; 3 | import { Toaster as Sonner } from "@/components/ui/sonner"; 4 | import { TooltipProvider } from "@/components/ui/tooltip"; 5 | import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; 6 | import { BrowserRouter, Routes, Route } from "react-router-dom"; 7 | import Index from "./pages/Index"; 8 | import Caterers from "./pages/Caterers"; 9 | import About from "./pages/About"; 10 | import Contact from "./pages/Contact"; 11 | import CatererDetail from "./pages/CatererDetail"; 12 | import Cart from "./pages/Cart"; 13 | import NotFound from "./pages/NotFound"; 14 | 15 | const queryClient = new QueryClient(); 16 | 17 | const App = () => ( 18 | 19 | 20 | 21 | 22 | 23 | 24 | } /> 25 | } /> 26 | } /> 27 | } /> 28 | } /> 29 | } /> 30 | } /> 31 | 32 | 33 | 34 | 35 | ); 36 | 37 | export default App; 38 | -------------------------------------------------------------------------------- /src/components/home/AdSlider.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { useState, useEffect } from "react"; 3 | import { motion, AnimatePresence } from "framer-motion"; 4 | import { Button } from "@/components/ui/button"; 5 | import { ChevronLeft, ChevronRight } from "lucide-react"; 6 | 7 | const slides = [ 8 | { 9 | id: 1, 10 | imageUrl: "https://images.unsplash.com/photo-1607478900766-efe13248b125?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&h=400&q=80", 11 | title: "Premium Corporate Catering", 12 | description: "Elevate your corporate events with our premium catering services", 13 | buttonText: "Explore Options", 14 | buttonLink: "/caterers", 15 | }, 16 | { 17 | id: 2, 18 | imageUrl: "https://images.unsplash.com/photo-1555244162-803834f70033?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&h=400&q=80", 19 | title: "Wedding Feast Packages", 20 | description: "Make your special day unforgettable with our delicious wedding catering", 21 | buttonText: "View Packages", 22 | buttonLink: "/wedding-packages", 23 | }, 24 | { 25 | id: 3, 26 | imageUrl: "https://images.unsplash.com/photo-1527529482837-4698179dc6ce?ixlib=rb-4.0.3&auto=format&fit=crop&w=1200&h=400&q=80", 27 | title: "Special Festive Offers", 28 | description: "Celebrate the season with our limited-time festive catering deals", 29 | buttonText: "Get Offers", 30 | buttonLink: "/offers", 31 | }, 32 | ]; 33 | 34 | export default function AdSlider() { 35 | const [currentSlide, setCurrentSlide] = useState(0); 36 | const [direction, setDirection] = useState(0); 37 | 38 | const goToNextSlide = () => { 39 | setDirection(1); 40 | setCurrentSlide((prev) => (prev === slides.length - 1 ? 0 : prev + 1)); 41 | }; 42 | 43 | const goToPrevSlide = () => { 44 | setDirection(-1); 45 | setCurrentSlide((prev) => (prev === 0 ? slides.length - 1 : prev - 1)); 46 | }; 47 | 48 | useEffect(() => { 49 | const timer = setTimeout(goToNextSlide, 5000); 50 | return () => clearTimeout(timer); 51 | }, [currentSlide]); 52 | 53 | const variants = { 54 | enter: (direction: number) => ({ 55 | x: direction > 0 ? 1000 : -1000, 56 | opacity: 0, 57 | }), 58 | center: { 59 | x: 0, 60 | opacity: 1, 61 | }, 62 | exit: (direction: number) => ({ 63 | x: direction < 0 ? 1000 : -1000, 64 | opacity: 0, 65 | }), 66 | }; 67 | 68 | return ( 69 |
70 | 71 | 81 |
85 |
86 |
87 | 93 | {slides[currentSlide].title} 94 | 95 | 101 | {slides[currentSlide].description} 102 | 103 | 108 | 114 | 115 |
116 |
117 |
118 | 119 | 120 | 121 | 129 | 130 | 138 | 139 |
140 | {slides.map((_, index) => ( 141 |
153 |
154 | ); 155 | } 156 | -------------------------------------------------------------------------------- /src/components/home/CallToAction.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { motion } from "framer-motion"; 3 | import { Button } from "@/components/ui/button"; 4 | 5 | export default function CallToAction() { 6 | return ( 7 |
8 |
9 |
10 |
11 | {/* Background decorative elements */} 12 |
13 | 35 | 57 |
58 | 59 |
60 | 66 |

67 | Planning a Special Event? 68 |

69 |

70 | Let Event Feast handle the catering so you can focus on what matters most. 71 | Our platform connects you with the best caterers for events with 25+ guests. 72 |

73 | 74 |
75 | 76 | 82 | 83 | 84 | 85 | 92 | 93 |
94 | 95 |
96 |
97 |
98 |
99 |
100 | ); 101 | } 102 | -------------------------------------------------------------------------------- /src/components/home/CatererCard.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { motion } from "framer-motion"; 3 | import { Star, MapPin } from "lucide-react"; 4 | import { Link } from "react-router-dom"; 5 | import { Badge } from "@/components/ui/badge"; 6 | 7 | interface CatererCardProps { 8 | id: string; 9 | name: string; 10 | logo: string; 11 | coverImage: string; 12 | description: string; 13 | rating: number; 14 | reviews: number; 15 | cuisines: string[]; 16 | location: string; 17 | minOrderSize: number; 18 | special?: string; 19 | } 20 | 21 | export default function CatererCard({ 22 | id, 23 | name, 24 | logo, 25 | coverImage, 26 | description, 27 | rating, 28 | reviews, 29 | cuisines, 30 | location, 31 | minOrderSize, 32 | special, 33 | }: CatererCardProps) { 34 | return ( 35 | 40 | 41 |
42 | {name} 47 | {special && ( 48 | 49 | {special} 50 | 51 | )} 52 |
53 |
54 |
55 | {`${name} 56 |
57 |
58 |

{name}

59 |
60 | 61 | {rating.toFixed(1)} 62 | ({reviews}) 63 |
64 |
65 |
66 |
67 |
68 | 69 |
70 |
71 | {cuisines.map((cuisine) => ( 72 | 73 | {cuisine} 74 | 75 | ))} 76 |
77 | 78 |

{description}

79 | 80 |
81 |
82 | 83 | {location} 84 |
85 |
86 | Min. Order: {minOrderSize}+ people 87 |
88 |
89 |
90 | 91 | 92 | ); 93 | } 94 | -------------------------------------------------------------------------------- /src/components/home/FeaturedCaterers.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { motion } from "framer-motion"; 3 | import CatererCard from "./CatererCard"; 4 | 5 | const caterers = [ 6 | { 7 | id: "royal-feasts", 8 | name: "Royal Feasts", 9 | logo: "https://images.unsplash.com/photo-1583394293214-28ded15ee548?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&h=200&q=80", 10 | coverImage: "https://images.unsplash.com/photo-1555244162-803834f70033?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&h=400&q=80", 11 | description: "Specializing in luxury wedding and corporate catering with a royal touch. Our chefs bring years of experience from 5-star hotels.", 12 | rating: 4.8, 13 | reviews: 142, 14 | cuisines: ["Indian", "Continental", "Asian Fusion"], 15 | location: "South Delhi", 16 | minOrderSize: 50, 17 | special: "Premium", 18 | }, 19 | { 20 | id: "taste-of-india", 21 | name: "Taste of India", 22 | logo: "https://images.unsplash.com/photo-1579871494447-9811cf80d66c?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&h=200&q=80", 23 | coverImage: "https://images.unsplash.com/photo-1529692236671-f1f6cf9683ba?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&h=400&q=80", 24 | description: "Authentic Indian flavors for your special occasions. We specialize in regional cuisines from across India.", 25 | rating: 4.6, 26 | reviews: 98, 27 | cuisines: ["North Indian", "South Indian", "Mughlai"], 28 | location: "Central Delhi", 29 | minOrderSize: 25, 30 | }, 31 | { 32 | id: "global-bites", 33 | name: "Global Bites", 34 | logo: "https://images.unsplash.com/photo-1581873372796-635b67ca2008?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&h=200&q=80", 35 | coverImage: "https://images.unsplash.com/photo-1555244162-803834f70033?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&h=400&q=80", 36 | description: "International cuisine for the global palate. Our diverse menu features dishes from around the world.", 37 | rating: 4.5, 38 | reviews: 76, 39 | cuisines: ["Italian", "Mexican", "Mediterranean"], 40 | location: "West Delhi", 41 | minOrderSize: 30, 42 | special: "New", 43 | }, 44 | { 45 | id: "green-eats", 46 | name: "Green Eats", 47 | logo: "https://images.unsplash.com/photo-1546069901-ba9599a7e63c?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&h=200&q=80", 48 | coverImage: "https://images.unsplash.com/photo-1607478900766-efe13248b125?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&h=400&q=80", 49 | description: "Sustainable, organic catering with a focus on plant-based options. Perfect for eco-conscious events.", 50 | rating: 4.7, 51 | reviews: 64, 52 | cuisines: ["Vegan", "Organic", "Health Food"], 53 | location: "North Delhi", 54 | minOrderSize: 25, 55 | }, 56 | { 57 | id: "spice-route", 58 | name: "Spice Route", 59 | logo: "https://images.unsplash.com/photo-1516714435131-44d6b64dc6a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&h=200&q=80", 60 | coverImage: "https://images.unsplash.com/photo-1606491956689-2ea866880c84?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&h=400&q=80", 61 | description: "Journey through the spice routes of Asia with our exquisite selection of pan-Asian delicacies.", 62 | rating: 4.4, 63 | reviews: 53, 64 | cuisines: ["Thai", "Chinese", "Japanese"], 65 | location: "East Delhi", 66 | minOrderSize: 30, 67 | }, 68 | { 69 | id: "urban-feast", 70 | name: "Urban Feast", 71 | logo: "https://images.unsplash.com/photo-1622021142947-da7dedc7c39a?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&h=200&q=80", 72 | coverImage: "https://images.unsplash.com/photo-1504674900247-0877df9cc836?ixlib=rb-4.0.3&auto=format&fit=crop&w=600&h=400&q=80", 73 | description: "Modern fusion catering for the urban sophisticate. Creative presentations and innovative flavor combinations.", 74 | rating: 4.9, 75 | reviews: 41, 76 | cuisines: ["Fusion", "Modern European", "Asian"], 77 | location: "South Delhi", 78 | minOrderSize: 40, 79 | special: "Trending", 80 | }, 81 | ]; 82 | 83 | export default function FeaturedCaterers() { 84 | const containerVariants = { 85 | hidden: { opacity: 0 }, 86 | visible: { 87 | opacity: 1, 88 | transition: { 89 | staggerChildren: 0.1, 90 | }, 91 | }, 92 | }; 93 | 94 | const itemVariants = { 95 | hidden: { y: 20, opacity: 0 }, 96 | visible: { 97 | y: 0, 98 | opacity: 1, 99 | transition: { 100 | type: "spring", 101 | stiffness: 100, 102 | }, 103 | }, 104 | }; 105 | 106 | return ( 107 |
108 | 114 |

Featured Caterers

115 |

116 | Discover our handpicked selection of premium caterers ready to make your next event unforgettable 117 |

118 | 119 | 120 | 127 | {caterers.map((caterer) => ( 128 | 129 | 130 | 131 | ))} 132 | 133 | 134 |
135 | 140 | View All Caterers 141 | 142 |
143 |
144 | ); 145 | } 146 | -------------------------------------------------------------------------------- /src/components/home/HowItWorks.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { motion } from "framer-motion"; 3 | import { Search, CheckCircle, Calendar, DollarSign } from "lucide-react"; 4 | 5 | const steps = [ 6 | { 7 | id: 1, 8 | icon: Search, 9 | title: "Find the Perfect Caterer", 10 | description: "Browse our curated selection of premium caterers specializing in event catering for 25+ people.", 11 | color: "bg-feast-500", 12 | }, 13 | { 14 | id: 2, 15 | icon: CheckCircle, 16 | title: "Customize Your Menu", 17 | description: "Work with caterers to create the perfect menu for your event, with options for dietary requirements.", 18 | color: "bg-mint-500", 19 | }, 20 | { 21 | id: 3, 22 | icon: Calendar, 23 | title: "Book Your Event", 24 | description: "Select your date, provide event details, and secure your booking with a simple payment process.", 25 | color: "bg-tomato-500", 26 | }, 27 | { 28 | id: 4, 29 | icon: DollarSign, 30 | title: "Enjoy Hassle-Free Catering", 31 | description: "Relax and enjoy your event while our professional caterers handle everything from setup to cleanup.", 32 | color: "bg-feast-700", 33 | }, 34 | ]; 35 | 36 | export default function HowItWorks() { 37 | const containerVariants = { 38 | hidden: { opacity: 0 }, 39 | visible: { 40 | opacity: 1, 41 | transition: { 42 | staggerChildren: 0.2, 43 | }, 44 | }, 45 | }; 46 | 47 | const itemVariants = { 48 | hidden: { y: 20, opacity: 0 }, 49 | visible: { 50 | y: 0, 51 | opacity: 1, 52 | transition: { 53 | type: "spring", 54 | stiffness: 100, 55 | }, 56 | }, 57 | }; 58 | 59 | return ( 60 |
61 |
62 | 69 |

How It Works

70 |

71 | Event Feast makes it easy to find and book the perfect catering for your next event 72 |

73 | 74 | 75 | 82 | {steps.map((step) => ( 83 | 88 |
89 |
90 | 91 |
92 |
93 |

{step.title}

94 |

{step.description}

95 |
96 | {step.id} 97 |
98 | 99 | ))} 100 | 101 | 102 | 109 |

Ready to start planning your event?

110 | 115 | Get Started 116 | 117 | 118 |
119 |
120 | ); 121 | } 122 | -------------------------------------------------------------------------------- /src/components/home/Testimonials.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { useState } from "react"; 3 | import { motion, AnimatePresence } from "framer-motion"; 4 | import { Star, ChevronLeft, ChevronRight } from "lucide-react"; 5 | import { Button } from "@/components/ui/button"; 6 | 7 | const testimonials = [ 8 | { 9 | id: 1, 10 | name: "Priya Sharma", 11 | role: "Wedding Planner", 12 | avatar: "https://randomuser.me/api/portraits/women/36.jpg", 13 | quote: "Event Feast made wedding catering stress-free. The caterer we booked was incredible - our guests are still talking about the food months later!", 14 | rating: 5, 15 | eventType: "Wedding" 16 | }, 17 | { 18 | id: 2, 19 | name: "Rahul Mehta", 20 | role: "Marketing Director", 21 | avatar: "https://randomuser.me/api/portraits/men/32.jpg", 22 | quote: "We've used Event Feast for three corporate events now. The process is seamless and the quality has been consistently excellent.", 23 | rating: 5, 24 | eventType: "Corporate Dinner" 25 | }, 26 | { 27 | id: 3, 28 | name: "Ananya Patel", 29 | role: "Event Coordinator", 30 | avatar: "https://randomuser.me/api/portraits/women/65.jpg", 31 | quote: "The ability to compare different caterers in one place saved us so much time. The food was outstanding and perfectly matched our requirements.", 32 | rating: 4, 33 | eventType: "Charity Gala" 34 | }, 35 | { 36 | id: 4, 37 | name: "Vikram Singh", 38 | role: "CEO", 39 | avatar: "https://randomuser.me/api/portraits/men/71.jpg", 40 | quote: "From menu customization to on-site service, everything was handled professionally. Will definitely be using Event Feast again.", 41 | rating: 5, 42 | eventType: "Product Launch" 43 | } 44 | ]; 45 | 46 | export default function Testimonials() { 47 | const [currentIndex, setCurrentIndex] = useState(0); 48 | const [direction, setDirection] = useState(0); 49 | 50 | const nextTestimonial = () => { 51 | setDirection(1); 52 | setCurrentIndex((prevIndex) => 53 | prevIndex === testimonials.length - 1 ? 0 : prevIndex + 1 54 | ); 55 | }; 56 | 57 | const prevTestimonial = () => { 58 | setDirection(-1); 59 | setCurrentIndex((prevIndex) => 60 | prevIndex === 0 ? testimonials.length - 1 : prevIndex - 1 61 | ); 62 | }; 63 | 64 | const variants = { 65 | enter: (direction: number) => ({ 66 | x: direction > 0 ? 300 : -300, 67 | opacity: 0, 68 | }), 69 | center: { 70 | x: 0, 71 | opacity: 1, 72 | }, 73 | exit: (direction: number) => ({ 74 | x: direction < 0 ? 300 : -300, 75 | opacity: 0, 76 | }), 77 | }; 78 | 79 | return ( 80 |
81 |
82 | 89 |

What Our Customers Say

90 |

91 | Hear from event planners who have found the perfect catering through Event Feast 92 |

93 | 94 | 95 |
96 |
97 | 98 |
99 | 100 | 110 |
111 |
112 | {testimonials[currentIndex].name} 117 |
118 | 119 |
120 |
121 | {[...Array(5)].map((_, i) => ( 122 | 130 | ))} 131 |
132 | 133 |
134 | "{testimonials[currentIndex].quote}" 135 |
136 | 137 |
138 |

139 | {testimonials[currentIndex].name} 140 |

141 |
142 | {testimonials[currentIndex].role} 143 | 144 | {testimonials[currentIndex].eventType} 145 |
146 |
147 |
148 |
149 | 150 | 151 |
152 | 153 |
154 | 162 | 163 | {testimonials.map((_, index) => ( 164 | 184 |
185 |
186 |
187 |
188 | ); 189 | } 190 | -------------------------------------------------------------------------------- /src/components/layout/Footer.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Link } from "react-router-dom"; 3 | import { motion } from "framer-motion"; 4 | import { Facebook, Instagram, Twitter } from "lucide-react"; 5 | 6 | export default function Footer() { 7 | const currentYear = new Date().getFullYear(); 8 | 9 | return ( 10 |
11 |
12 |
13 |
14 | 15 |
16 | EF 17 |
18 |
19 | Event 20 | Feast 21 |
22 | 23 |

24 | Your premier destination for bulk event catering, connecting you with the best caterers for groups of 25 or more people. 25 |

26 |
27 | 33 | 34 | 35 | 41 | 42 | 43 | 49 | 50 | 51 |
52 |
53 | 54 |
55 |

Quick Links

56 |
    57 |
  • 58 | 59 | Home 60 | 61 |
    • 62 |
  • 63 | 64 | Caterers 65 | 66 |
    • 67 |
  • 68 | 69 | About Us 70 | 71 |
    • 72 |
  • 73 | 74 | Contact 75 | 76 |
    • 77 |
  • 78 | 79 | Request a Quote 80 | 81 |
    • 82 |
83 |
84 | 85 |
86 |

Event Types

87 |
    88 |
  • 89 | 90 | Weddings 91 | 92 |
    • 93 |
  • 94 | 95 | Corporate Events 96 | 97 |
    • 98 |
  • 99 | 100 | Birthday Parties 101 | 102 |
    • 103 |
  • 104 | 105 | Social Gatherings 106 | 107 |
    • 108 |
  • 109 | 110 | Festivals & Fairs 111 | 112 |
    • 113 |
114 |
115 | 116 |
117 |

Support

118 |
    119 |
  • 120 | 121 | Help Center 122 | 123 |
    • 124 |
  • 125 | 126 | FAQs 127 | 128 |
    • 129 |
  • 130 | 131 | Privacy Policy 132 | 133 |
    • 134 |
  • 135 | 136 | Terms of Service 137 | 138 |
    • 139 |
  • 140 | 141 | For Caterers 142 | 143 |
    • 144 |
145 |
146 |
147 | 148 |
149 |

150 | © {currentYear} Event Feast. All rights reserved. 151 |

152 |
153 | 154 | Privacy Policy 155 | 156 | 157 | Terms of Service 158 | 159 | 160 | Sitemap 161 | 162 |
163 |
164 |
165 |
166 | ); 167 | } 168 | -------------------------------------------------------------------------------- /src/components/layout/Header.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { useState } from "react"; 3 | import { Link } from "react-router-dom"; 4 | import { motion } from "framer-motion"; 5 | import { Search, User, ShoppingCart, Menu, X } from "lucide-react"; 6 | import { Button } from "@/components/ui/button"; 7 | import { Badge } from "@/components/ui/badge"; 8 | import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet"; 9 | import { useIsMobile } from "@/hooks/use-mobile"; 10 | 11 | export default function Header() { 12 | const [isSearchExpanded, setIsSearchExpanded] = useState(false); 13 | const [cartCount, setCartCount] = useState(0); // Would be connected to a cart context in a real app 14 | const isMobile = useIsMobile(); 15 | 16 | return ( 17 |
18 |
19 |
20 | {isMobile && ( 21 | 22 | 23 | 26 | 27 | 28 |
29 |
30 |
31 |
32 | EF 33 |
34 |
35 | Event 36 | Feast 37 |
38 |
39 |
40 | 41 | 77 | 78 |
79 | 85 |
86 |
87 | 88 | 89 | )} 90 | 91 | 96 |
97 | EF 98 |
99 | 100 |
101 | Event 102 | Feast 103 |
104 | 105 |
106 | 107 |
108 | 115 |
116 | 117 |
118 | setIsSearchExpanded(true)} 125 | onBlur={() => setIsSearchExpanded(false)} 126 | /> 127 | 128 | 129 |
130 | 136 | 137 | 150 | 151 | 158 |
159 |
160 |
161 |
162 | ); 163 | } 164 | -------------------------------------------------------------------------------- /src/components/layout/Layout.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { useState, useEffect } from "react"; 3 | import { motion, AnimatePresence } from "framer-motion"; 4 | import { useIsMobile } from "@/hooks/use-mobile"; 5 | import Header from "./Header"; 6 | import Sidebar from "./Sidebar"; 7 | import Footer from "./Footer"; 8 | 9 | interface LayoutProps { 10 | children: React.ReactNode; 11 | showSidebar?: boolean; 12 | } 13 | 14 | export default function Layout({ children, showSidebar = true }: LayoutProps) { 15 | const [sidebarOpen, setSidebarOpen] = useState(false); 16 | const isMobile = useIsMobile(); 17 | 18 | // Close sidebar when switching to mobile view 19 | useEffect(() => { 20 | if (isMobile) { 21 | setSidebarOpen(false); 22 | } else { 23 | setSidebarOpen(true); 24 | } 25 | }, [isMobile]); 26 | 27 | const pageVariants = { 28 | initial: { 29 | opacity: 0, 30 | y: 10, 31 | }, 32 | animate: { 33 | opacity: 1, 34 | y: 0, 35 | transition: { 36 | duration: 0.5, 37 | ease: "easeInOut", 38 | }, 39 | }, 40 | exit: { 41 | opacity: 0, 42 | y: -10, 43 | transition: { 44 | duration: 0.3, 45 | }, 46 | }, 47 | }; 48 | 49 | return ( 50 |
51 |
52 | 53 |
54 | {showSidebar && !isMobile && ( 55 | 56 | 57 | 58 | )} 59 | 60 | 67 | {children} 68 | 69 |
70 | 71 |
72 |
73 | ); 74 | } 75 | -------------------------------------------------------------------------------- /src/components/layout/Sidebar.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { useState } from "react"; 3 | import { motion, AnimatePresence } from "framer-motion"; 4 | import { Filter } from "lucide-react"; 5 | import { Button } from "@/components/ui/button"; 6 | import { Separator } from "@/components/ui/separator"; 7 | import { useIsMobile } from "@/hooks/use-mobile"; 8 | import { NavigationLinks } from "./sidebar/NavigationLinks"; 9 | import { SearchBar } from "./sidebar/SearchBar"; 10 | import { FilterSection } from "./sidebar/FilterSection"; 11 | import { cuisineTypes, priceRanges, locations } from "./sidebar/constants"; 12 | 13 | export default function Sidebar() { 14 | const [isOpen, setIsOpen] = useState(true); 15 | const [expandedSections, setExpandedSections] = useState({ 16 | cuisine: true, 17 | price: false, 18 | location: false, 19 | }); 20 | const isMobile = useIsMobile(); 21 | 22 | const toggleSection = (section: keyof typeof expandedSections) => { 23 | setExpandedSections({ 24 | ...expandedSections, 25 | [section]: !expandedSections[section], 26 | }); 27 | }; 28 | 29 | const sidebarVariants = { 30 | open: { x: 0, opacity: 1 }, 31 | closed: { x: "-100%", opacity: 0 }, 32 | }; 33 | 34 | if (isMobile && !isOpen) { 35 | return ( 36 |
37 | 45 |
46 | ); 47 | } 48 | 49 | return ( 50 | 51 | 60 | {isMobile && ( 61 | 69 | )} 70 | 71 |
72 | 73 |
74 | 75 | 76 | 77 | 78 | 79 |
80 |

Filters

81 |
82 | 83 |
84 | toggleSection("cuisine")} 89 | /> 90 | toggleSection("price")} 95 | /> 96 | toggleSection("location")} 101 | /> 102 |
103 | 104 |
105 | 108 |
109 | 110 | 111 | ); 112 | } 113 | -------------------------------------------------------------------------------- /src/components/layout/sidebar/FilterSection.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { useState } from "react"; 3 | import { motion, AnimatePresence } from "framer-motion"; 4 | import { ChevronUp, ChevronDown } from "lucide-react"; 5 | import { Checkbox } from "@/components/ui/checkbox"; 6 | 7 | interface FilterSectionProps { 8 | title: string; 9 | items: { id: string; label: string }[]; 10 | expanded: boolean; 11 | onToggle: () => void; 12 | } 13 | 14 | export function FilterSection({ title, items, expanded, onToggle }: FilterSectionProps) { 15 | return ( 16 |
17 | 24 | 25 | {expanded && ( 26 | 33 |
34 | {items.map((item) => ( 35 |
36 | 37 | 43 |
44 | ))} 45 |
46 | 47 | )} 48 | 49 |
50 | ); 51 | } 52 | -------------------------------------------------------------------------------- /src/components/layout/sidebar/NavigationLinks.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Link } from "react-router-dom"; 3 | import { Home, Users, Info, Phone } from "lucide-react"; 4 | 5 | export function NavigationLinks() { 6 | return ( 7 |
8 | 9 | 10 | Home 11 | 12 | 13 | 14 | Caterers 15 | 16 | 17 | 18 | About Us 19 | 20 | 21 | 22 | Contact 23 | 24 |
25 | ); 26 | } 27 | -------------------------------------------------------------------------------- /src/components/layout/sidebar/SearchBar.tsx: -------------------------------------------------------------------------------- 1 | 2 | import { Search } from "lucide-react"; 3 | 4 | export function SearchBar() { 5 | return ( 6 |
7 |
8 | 9 | 14 |
15 |
16 | ); 17 | } 18 | -------------------------------------------------------------------------------- /src/components/layout/sidebar/constants.ts: -------------------------------------------------------------------------------- 1 | 2 | export const cuisineTypes = [ 3 | { id: "italian", label: "Italian" }, 4 | { id: "indian", label: "Indian" }, 5 | { id: "mexican", label: "Mexican" }, 6 | { id: "chinese", label: "Chinese" }, 7 | { id: "thai", label: "Thai" }, 8 | { id: "american", label: "American" }, 9 | ]; 10 | 11 | export const priceRanges = [ 12 | { id: "budget", label: "Budget (₹500-1000/person)" }, 13 | { id: "moderate", label: "Moderate (₹1000-1500/person)" }, 14 | { id: "premium", label: "Premium (₹1500+/person)" }, 15 | ]; 16 | 17 | export const locations = [ 18 | { id: "north", label: "North Delhi" }, 19 | { id: "south", label: "South Delhi" }, 20 | { id: "east", label: "East Delhi" }, 21 | { id: "west", label: "West Delhi" }, 22 | { id: "central", label: "Central Delhi" }, 23 | ]; 24 | -------------------------------------------------------------------------------- /src/components/ui/accordion.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as AccordionPrimitive from "@radix-ui/react-accordion" 3 | import { ChevronDown } from "lucide-react" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const Accordion = AccordionPrimitive.Root 8 | 9 | const AccordionItem = React.forwardRef< 10 | React.ElementRef, 11 | React.ComponentPropsWithoutRef 12 | >(({ className, ...props }, ref) => ( 13 | 18 | )) 19 | AccordionItem.displayName = "AccordionItem" 20 | 21 | const AccordionTrigger = React.forwardRef< 22 | React.ElementRef, 23 | React.ComponentPropsWithoutRef 24 | >(({ className, children, ...props }, ref) => ( 25 | 26 | svg]:rotate-180", 30 | className 31 | )} 32 | {...props} 33 | > 34 | {children} 35 | 36 | 37 | 38 | )) 39 | AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName 40 | 41 | const AccordionContent = React.forwardRef< 42 | React.ElementRef, 43 | React.ComponentPropsWithoutRef 44 | >(({ className, children, ...props }, ref) => ( 45 | 50 |
{children}
51 | 52 | )) 53 | 54 | AccordionContent.displayName = AccordionPrimitive.Content.displayName 55 | 56 | export { Accordion, AccordionItem, AccordionTrigger, AccordionContent } 57 | -------------------------------------------------------------------------------- /src/components/ui/alert-dialog.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog" 3 | 4 | import { cn } from "@/lib/utils" 5 | import { buttonVariants } from "@/components/ui/button" 6 | 7 | const AlertDialog = AlertDialogPrimitive.Root 8 | 9 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger 10 | 11 | const AlertDialogPortal = AlertDialogPrimitive.Portal 12 | 13 | const AlertDialogOverlay = React.forwardRef< 14 | React.ElementRef, 15 | React.ComponentPropsWithoutRef 16 | >(({ className, ...props }, ref) => ( 17 | 25 | )) 26 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName 27 | 28 | const AlertDialogContent = React.forwardRef< 29 | React.ElementRef, 30 | React.ComponentPropsWithoutRef 31 | >(({ className, ...props }, ref) => ( 32 | 33 | 34 | 42 | 43 | )) 44 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName 45 | 46 | const AlertDialogHeader = ({ 47 | className, 48 | ...props 49 | }: React.HTMLAttributes) => ( 50 |
57 | ) 58 | AlertDialogHeader.displayName = "AlertDialogHeader" 59 | 60 | const AlertDialogFooter = ({ 61 | className, 62 | ...props 63 | }: React.HTMLAttributes) => ( 64 |
71 | ) 72 | AlertDialogFooter.displayName = "AlertDialogFooter" 73 | 74 | const AlertDialogTitle = React.forwardRef< 75 | React.ElementRef, 76 | React.ComponentPropsWithoutRef 77 | >(({ className, ...props }, ref) => ( 78 | 83 | )) 84 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName 85 | 86 | const AlertDialogDescription = React.forwardRef< 87 | React.ElementRef, 88 | React.ComponentPropsWithoutRef 89 | >(({ className, ...props }, ref) => ( 90 | 95 | )) 96 | AlertDialogDescription.displayName = 97 | AlertDialogPrimitive.Description.displayName 98 | 99 | const AlertDialogAction = React.forwardRef< 100 | React.ElementRef, 101 | React.ComponentPropsWithoutRef 102 | >(({ className, ...props }, ref) => ( 103 | 108 | )) 109 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName 110 | 111 | const AlertDialogCancel = React.forwardRef< 112 | React.ElementRef, 113 | React.ComponentPropsWithoutRef 114 | >(({ className, ...props }, ref) => ( 115 | 124 | )) 125 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName 126 | 127 | export { 128 | AlertDialog, 129 | AlertDialogPortal, 130 | AlertDialogOverlay, 131 | AlertDialogTrigger, 132 | AlertDialogContent, 133 | AlertDialogHeader, 134 | AlertDialogFooter, 135 | AlertDialogTitle, 136 | AlertDialogDescription, 137 | AlertDialogAction, 138 | AlertDialogCancel, 139 | } 140 | -------------------------------------------------------------------------------- /src/components/ui/alert.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { cva, type VariantProps } from "class-variance-authority" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const alertVariants = cva( 7 | "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", 8 | { 9 | variants: { 10 | variant: { 11 | default: "bg-background text-foreground", 12 | destructive: 13 | "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", 14 | }, 15 | }, 16 | defaultVariants: { 17 | variant: "default", 18 | }, 19 | } 20 | ) 21 | 22 | const Alert = React.forwardRef< 23 | HTMLDivElement, 24 | React.HTMLAttributes & VariantProps 25 | >(({ className, variant, ...props }, ref) => ( 26 |
32 | )) 33 | Alert.displayName = "Alert" 34 | 35 | const AlertTitle = React.forwardRef< 36 | HTMLParagraphElement, 37 | React.HTMLAttributes 38 | >(({ className, ...props }, ref) => ( 39 |
44 | )) 45 | AlertTitle.displayName = "AlertTitle" 46 | 47 | const AlertDescription = React.forwardRef< 48 | HTMLParagraphElement, 49 | React.HTMLAttributes 50 | >(({ className, ...props }, ref) => ( 51 |
56 | )) 57 | AlertDescription.displayName = "AlertDescription" 58 | 59 | export { Alert, AlertTitle, AlertDescription } 60 | -------------------------------------------------------------------------------- /src/components/ui/aspect-ratio.tsx: -------------------------------------------------------------------------------- 1 | import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio" 2 | 3 | const AspectRatio = AspectRatioPrimitive.Root 4 | 5 | export { AspectRatio } 6 | -------------------------------------------------------------------------------- /src/components/ui/avatar.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import * as AvatarPrimitive from "@radix-ui/react-avatar" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const Avatar = React.forwardRef< 7 | React.ElementRef, 8 | React.ComponentPropsWithoutRef 9 | >(({ className, ...props }, ref) => ( 10 | 18 | )) 19 | Avatar.displayName = AvatarPrimitive.Root.displayName 20 | 21 | const AvatarImage = React.forwardRef< 22 | React.ElementRef, 23 | React.ComponentPropsWithoutRef 24 | >(({ className, ...props }, ref) => ( 25 | 30 | )) 31 | AvatarImage.displayName = AvatarPrimitive.Image.displayName 32 | 33 | const AvatarFallback = React.forwardRef< 34 | React.ElementRef, 35 | React.ComponentPropsWithoutRef 36 | >(({ className, ...props }, ref) => ( 37 | 45 | )) 46 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName 47 | 48 | export { Avatar, AvatarImage, AvatarFallback } 49 | -------------------------------------------------------------------------------- /src/components/ui/badge.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { cva, type VariantProps } from "class-variance-authority" 3 | 4 | import { cn } from "@/lib/utils" 5 | 6 | const badgeVariants = cva( 7 | "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", 8 | { 9 | variants: { 10 | variant: { 11 | default: 12 | "border-transparent bg-primary text-primary-foreground hover:bg-primary/80", 13 | secondary: 14 | "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80", 15 | destructive: 16 | "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80", 17 | outline: "text-foreground", 18 | }, 19 | }, 20 | defaultVariants: { 21 | variant: "default", 22 | }, 23 | } 24 | ) 25 | 26 | export interface BadgeProps 27 | extends React.HTMLAttributes, 28 | VariantProps {} 29 | 30 | function Badge({ className, variant, ...props }: BadgeProps) { 31 | return ( 32 |
33 | ) 34 | } 35 | 36 | export { Badge, badgeVariants } 37 | -------------------------------------------------------------------------------- /src/components/ui/breadcrumb.tsx: -------------------------------------------------------------------------------- 1 | import * as React from "react" 2 | import { Slot } from "@radix-ui/react-slot" 3 | import { ChevronRight, MoreHorizontal } from "lucide-react" 4 | 5 | import { cn } from "@/lib/utils" 6 | 7 | const Breadcrumb = React.forwardRef< 8 | HTMLElement, 9 | React.ComponentPropsWithoutRef<"nav"> & { 10 | separator?: React.ReactNode 11 | } 12 | >(({ ...props }, ref) =>