wehub-resource-sync
702 lines
514 KiB
JSON
702 lines
514 KiB
JSON
{
|
|
"$schema": "https://ui.shadcn.com/schema/registry-item.json",
|
|
"name": "blocks",
|
|
"type": "registry:block",
|
|
"description": "All blocks from @creative-tim/blocks",
|
|
"dependencies": [
|
|
"date-fns"
|
|
],
|
|
"registryDependencies": [
|
|
"accordion",
|
|
"avatar",
|
|
"badge",
|
|
"button",
|
|
"calendar",
|
|
"card",
|
|
"checkbox",
|
|
"dialog",
|
|
"dropdown-menu",
|
|
"input",
|
|
"label",
|
|
"popover",
|
|
"progress",
|
|
"radio-group",
|
|
"scroll-area",
|
|
"select",
|
|
"separator",
|
|
"slider",
|
|
"software-purchase-card",
|
|
"switch",
|
|
"tabs",
|
|
"textarea",
|
|
"tooltip"
|
|
],
|
|
"files": [
|
|
{
|
|
"path": "blocks/software-purchase-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/software-purchase/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Separator } from \"@/components/ui/separator\"\nimport { SoftwarePurchaseCard } from \"@/components/ui/software-purchase-card\"\n\nexport default function Page() {\n const handleApprove = () => {\n console.log(\"Purchase approved\")\n }\n\n const handleDiscard = () => {\n console.log(\"Purchase discarded\")\n }\n\n return (\n <div className=\"flex min-h-screen w-full items-center justify-center p-6\">\n <div className=\"flex w-full max-w-6xl flex-col gap-8 lg:flex-row\">\n {/* Left side - Purchase Details */}\n <div className=\"flex flex-1 flex-col gap-6\">\n <div className=\"flex flex-col gap-2\">\n <h1 className=\"text-3xl font-bold\">Software Purchase Request</h1>\n <p className=\"text-muted-foreground\">\n Review and approve the software purchase details below\n </p>\n </div>\n\n <Separator />\n\n <div className=\"flex flex-col gap-6\">\n <div>\n <h2 className=\"mb-4 text-xl font-semibold\">Purchase Details</h2>\n <div className=\"grid gap-4\">\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">Software Name</span>\n <span className=\"text-muted-foreground\">\n Enterprise Cloud Suite\n </span>\n </div>\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">Vendor</span>\n <span className=\"text-muted-foreground\">\n CloudTech Solutions Inc.\n </span>\n </div>\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">License Type</span>\n <span className=\"text-muted-foreground\">\n Commercial License\n </span>\n </div>\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">Contract Duration</span>\n <span className=\"text-muted-foreground\">12 months</span>\n </div>\n </div>\n </div>\n\n <Separator />\n\n <div>\n <h2 className=\"mb-4 text-xl font-semibold\">\n Billing Information\n </h2>\n <div className=\"grid gap-4\">\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">Billing Cycle</span>\n <span className=\"text-muted-foreground\">Monthly</span>\n </div>\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">Payment Method</span>\n <span className=\"text-muted-foreground\">\n Corporate Credit Card\n </span>\n </div>\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">Cost Center</span>\n <span className=\"text-muted-foreground\">\n Engineering Department\n </span>\n </div>\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">Annual Total</span>\n <span className=\"text-muted-foreground font-semibold\">\n $30,000\n </span>\n </div>\n </div>\n </div>\n\n <Separator />\n\n <div>\n <h2 className=\"mb-4 text-xl font-semibold\">\n Additional Information\n </h2>\n <div className=\"grid gap-4\">\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">Requested By</span>\n <span className=\"text-muted-foreground\">\n John Smith (Engineering Manager)\n </span>\n </div>\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">Request Date</span>\n <span className=\"text-muted-foreground\">\n December 28, 2024\n </span>\n </div>\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">Status</span>\n <Badge variant=\"secondary\" className=\"w-fit\">\n Pending Approval\n </Badge>\n </div>\n <div className=\"flex flex-col gap-1.5\">\n <span className=\"text-sm font-medium\">Justification</span>\n <p className=\"text-muted-foreground text-sm leading-relaxed\">\n This software is critical for our cloud infrastructure\n management and will enable the engineering team to scale\n operations more efficiently. The per-seat pricing model\n aligns with our team growth projections for Q1 2025.\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n {/* Right side - Software Purchase Card */}\n <div className=\"flex items-start justify-center lg:sticky lg:top-6 lg:h-fit lg:w-[400px]\">\n <SoftwarePurchaseCard\n softwareName=\"Enterprise Cloud Suite\"\n startDate=\"2025-01-15\"\n seats={50}\n pricingType=\"per-seat\"\n price=\"$2,500\"\n onApprove={handleApprove}\n onDiscard={handleDiscard}\n />\n </div>\n </div>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/billing-information-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/billing-information/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Building2, Pencil, Plus, Trash2 } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardAction,\n CardContent,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\n\ninterface BillingCardProps {\n company: string\n contact: string\n email: string\n vat: string\n}\n\nfunction BillingCard({ company, contact, email, vat }: BillingCardProps) {\n return (\n <Card className=\"border\">\n <CardHeader>\n <div className=\"flex items-center gap-3\">\n <div className=\"bg-background grid h-12 w-12 shrink-0 place-items-center rounded border\">\n <Building2 className=\"h-6 w-6\" />\n </div>\n <div className=\"space-y-1\">\n <CardTitle className=\"text-sm\">{company}</CardTitle>\n <p className=\"text-muted-foreground text-sm\">Company</p>\n </div>\n </div>\n <CardAction>\n <div className=\"flex items-center gap-2\">\n <Button size=\"sm\" variant=\"ghost\">\n <Pencil className=\"mr-2 h-4 w-4\" />\n Edit\n </Button>\n <Button\n size=\"sm\"\n variant=\"ghost\"\n className=\"text-destructive hover:text-destructive\"\n >\n <Trash2 className=\"mr-2 h-4 w-4\" />\n Delete\n </Button>\n </div>\n </CardAction>\n </CardHeader>\n <CardContent className=\"space-y-2\">\n <div className=\"text-sm\">\n <span className=\"text-muted-foreground font-semibold\">Contact: </span>\n <span className=\"font-medium\">{contact}</span>\n </div>\n <div className=\"text-sm\">\n <span className=\"text-muted-foreground font-semibold\">\n Email Address:{\" \"}\n </span>\n <span className=\"font-medium\">{email}</span>\n </div>\n <div className=\"text-sm\">\n <span className=\"text-muted-foreground font-semibold\">\n VAT Number:{\" \"}\n </span>\n <span className=\"font-medium\">{vat}</span>\n </div>\n </CardContent>\n </Card>\n )\n}\n\nexport default function BillingInformation01() {\n return (\n <div className=\"mx-auto max-w-3xl p-6\">\n <div className=\"flex flex-col items-start justify-between gap-4 sm:flex-row\">\n <div>\n <h2 className=\"font-semibold\">Billing Information</h2>\n <p className=\"text-muted-foreground text-sm\">\n View and update your billing details quickly and easily.\n </p>\n </div>\n <Button variant=\"outline\" className=\"w-full sm:w-auto\">\n <Plus className=\"mr-2 h-4 w-4\" /> Add New Billing\n </Button>\n </div>\n <div className=\"mt-6 space-y-4\">\n <BillingCard\n company=\"Burrito Vikings\"\n contact=\"Emma Roberts\"\n email=\"emma@mail.com\"\n vat=\"FRB1235476\"\n />\n <BillingCard\n company=\"Stone Tech Zone\"\n contact=\"Marcel Glock\"\n email=\"marcel@mail.com\"\n vat=\"FRB1235476\"\n />\n <BillingCard\n company=\"Fiber Notion\"\n contact=\"Misha Stam\"\n email=\"misha@mail.com\"\n vat=\"FRB1235476\"\n />\n </div>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/card-display-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/card-display/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Wifi } from \"lucide-react\"\n\nimport { Card } from \"@/components/ui/card\"\n\ninterface CreditCardProps {\n variant?: \"dark\" | \"light\"\n number: string\n holder: string\n expires: string\n}\n\nfunction CreditCard({\n variant = \"light\",\n number,\n holder,\n expires,\n}: CreditCardProps) {\n const isDark = variant === \"dark\"\n\n return (\n <Card\n className={`group relative overflow-hidden transition-all duration-300 hover:scale-[1.02] hover:shadow-2xl ${\n isDark\n ? \"bg-black text-white\"\n : \"border-border/50 bg-white text-black shadow-lg\"\n }`}\n >\n <div className=\"absolute inset-0 bg-gradient-to-tr from-transparent via-white/5 to-white/10 opacity-0 transition-opacity duration-300 group-hover:opacity-100\" />\n\n <div className=\"relative m-0 flex w-full items-center justify-between p-6\">\n <div\n className={`rounded-lg p-2 ${isDark ? \"bg-white/10\" : \"bg-gray-100\"}`}\n >\n <Wifi className=\"h-6 w-6\" />\n </div>\n <div\n className={`h-10 w-14 rounded ${isDark ? \"bg-gradient-to-br from-yellow-400 to-yellow-600\" : \"bg-gradient-to-br from-yellow-300 to-yellow-500\"}`}\n >\n <div className=\"h-full w-full rounded bg-gradient-to-tr from-transparent via-white/20 to-white/40\" />\n </div>\n </div>\n\n <div className=\"relative px-6 py-4\">\n <p className=\"text-lg font-bold tracking-[0.2em]\">\n {String(number)\n .match(/.{1,4}/g)\n ?.join(\" \")}\n </p>\n </div>\n\n <div className=\"relative flex items-end justify-between gap-6 p-6 pt-2\">\n <div className=\"flex gap-6\">\n <div className=\"space-y-1\">\n <p\n className={`text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-gray-400\" : \"text-gray-500\"}`}\n >\n Card Holder\n </p>\n <p className=\"text-sm font-bold\">{holder}</p>\n </div>\n <div className=\"space-y-1\">\n <p\n className={`text-xs font-semibold tracking-wider uppercase ${isDark ? \"text-gray-400\" : \"text-gray-500\"}`}\n >\n Expires\n </p>\n <p className=\"text-sm font-bold\">{expires}</p>\n </div>\n </div>\n <div className=\"flex items-center\">\n <img\n src=\"https://v3.material-tailwind.com/mastercard.webp\"\n alt=\"mastercard logo\"\n className=\"h-10 w-auto transition-transform group-hover:scale-110\"\n />\n </div>\n </div>\n </Card>\n )\n}\n\nexport default function CardDisplay01() {\n return (\n <div className=\"mx-auto grid max-w-5xl grid-cols-1 gap-8 p-6 md:grid-cols-2\">\n <CreditCard\n variant=\"dark\"\n expires=\"10/25\"\n holder=\"Jack Peterson\"\n number=\"4562112245947852\"\n />\n <CreditCard\n variant=\"light\"\n expires=\"10/26\"\n holder=\"Jack Peterson\"\n number=\"4562112245948844\"\n />\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/payment-method-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/payment-method/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Check, Pencil, Plus, Trash2 } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport {\n Tooltip,\n TooltipContent,\n TooltipProvider,\n TooltipTrigger,\n} from \"@/components/ui/tooltip\"\n\ninterface PaymentMethodProps {\n type: \"visa\" | \"mastercard\"\n number: string\n isDefault?: boolean\n}\n\nfunction PaymentMethod({ type, number, isDefault }: PaymentMethodProps) {\n const cardImg =\n type === \"visa\"\n ? \"https://v3.material-tailwind.com/visa.webp\"\n : \"https://v3.material-tailwind.com/mastercard.webp\"\n\n return (\n <Card className=\"group hover:border-primary/50 relative flex flex-col gap-4 border p-6 transition-all hover:shadow-md\">\n {isDefault && (\n <div className=\"bg-primary absolute -top-px -right-px rounded-tr-lg rounded-bl-lg px-3 py-1\">\n <div className=\"flex items-center gap-1.5 text-xs font-semibold text-white\">\n <Check className=\"h-3 w-3\" />\n Default\n </div>\n </div>\n )}\n\n <div className=\"flex items-center gap-3\">\n <div className=\"flex h-12 w-16 items-center justify-center rounded-lg bg-gray-50 p-2\">\n <img\n src={cardImg}\n alt={type}\n className=\"h-full w-auto object-contain\"\n />\n </div>\n\n <div className=\"flex flex-1 flex-col gap-1\">\n <p className=\"text-base font-bold tracking-wider\">\n **** **** **** {number}\n </p>\n <p className=\"text-muted-foreground text-sm capitalize\">\n {type} Card\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-1\">\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button size=\"icon\" variant=\"ghost\" className=\"h-9 w-9\">\n <Pencil className=\"h-4 w-4\" />\n </Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>Edit Card</p>\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n\n <TooltipProvider>\n <Tooltip>\n <TooltipTrigger asChild>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n className=\"text-destructive hover:bg-destructive/10 hover:text-destructive h-9 w-9\"\n >\n <Trash2 className=\"h-4 w-4\" />\n </Button>\n </TooltipTrigger>\n <TooltipContent>\n <p>Remove Card</p>\n </TooltipContent>\n </Tooltip>\n </TooltipProvider>\n </div>\n </Card>\n )\n}\n\nexport default function PaymentMethod01() {\n return (\n <div className=\"mx-auto max-w-4xl p-6\">\n <div className=\"flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center\">\n <div>\n <h2 className=\"text-2xl font-bold\">Payment Methods</h2>\n <p className=\"text-muted-foreground mt-1 text-sm\">\n Manage your preferred payment methods securely and conveniently.\n </p>\n </div>\n <Button className=\"w-full sm:w-auto\">\n <Plus className=\"mr-2 h-4 w-4\" /> Add New Card\n </Button>\n </div>\n\n <div className=\"mt-8 grid grid-cols-1 gap-4 md:grid-cols-2\">\n <PaymentMethod type=\"mastercard\" number=\"7852\" isDefault />\n <PaymentMethod type=\"visa\" number=\"9831\" />\n <PaymentMethod type=\"visa\" number=\"8362\" />\n <PaymentMethod type=\"mastercard\" number=\"0098\" />\n </div>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/transaction-history-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/transaction-history/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport { CalendarIcon, ChevronDown, ChevronUp, Clock } from \"lucide-react\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Card } from \"@/components/ui/card\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\n\nconst DATA = {\n \"March 2023\": [\n {\n name: \"Netflix\",\n date: \"27 March 2026, at 12:30 PM\",\n value: 2500,\n status: \"decreasing\" as const,\n },\n {\n name: \"Apple\",\n date: \"27 March 2026, at 04:30 AM\",\n value: 2000,\n status: \"increasing\" as const,\n },\n ],\n \"February 2023\": [\n {\n name: \"Stripe\",\n date: \"26 March 2026, at 13:45 PM\",\n value: 2500,\n status: \"decreasing\" as const,\n },\n {\n name: \"HubSpot\",\n date: \"26 March 2023, at 12:30 PM\",\n value: 750,\n status: \"increasing\" as const,\n },\n {\n name: \"Figma\",\n date: \"26 March 2023, at 08:30 AM\",\n value: 1400,\n status: \"increasing\" as const,\n },\n {\n name: \"Webflow\",\n date: \"26 March 2023, at 05:00 AM\",\n value: 0,\n status: \"pending\" as const,\n },\n ],\n}\n\nconst ICONS = {\n increasing: ChevronUp,\n decreasing: ChevronDown,\n pending: Clock,\n}\n\nconst COLORS = {\n increasing: \"text-green-600\",\n decreasing: \"text-red-600\",\n pending: \"text-muted-foreground\",\n}\n\nconst ICON_COLORS = {\n increasing: \"text-green-600\",\n decreasing: \"text-red-600\",\n pending: \"text-black dark:text-white\",\n}\n\nconst PREFIX = {\n increasing: \"+\",\n decreasing: \"-\",\n pending: \"\",\n}\n\nexport default function TransactionHistory01() {\n const [date, setDate] = React.useState<Date>(new Date(2024, 9, 10))\n\n return (\n <div className=\"mx-auto max-w-xl p-6\">\n <div className=\"dark:bg-card rounded-xl border bg-white p-6 shadow-sm\">\n <div className=\"flex flex-wrap items-start justify-between gap-4\">\n <div>\n <h2 className=\"font-semibold\">History Transactions</h2>\n <p className=\"text-muted-foreground text-sm\">\n Track and monitor your financial activity.\n </p>\n </div>\n <Popover>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n className={cn(\n \"w-full justify-start text-left font-normal sm:w-48\",\n !date && \"text-muted-foreground\"\n )}\n >\n <CalendarIcon className=\"mr-2 h-4 w-4\" />\n {date ? format(date, \"PPP\") : <span>Pick a date</span>}\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\n <Calendar\n mode=\"single\"\n selected={date}\n onSelect={(day) => day && setDate(day)}\n initialFocus\n />\n </PopoverContent>\n </Popover>\n </div>\n <div className=\"mt-6\">\n {(Object.keys(DATA) as Array<keyof typeof DATA>).map((month, key) => {\n return (\n <div key={key} className=\"mb-6 last:mb-0\">\n <p className=\"text-muted-foreground mb-2 ml-2.5 font-semibold\">\n {month}\n </p>\n <div className=\"space-y-2\">\n {DATA[month].map(({ name, value, date, status }) => {\n const Icon = ICONS[status]\n\n return (\n <div\n key={name}\n className=\"flex items-center gap-4 rounded-lg border p-4\"\n >\n <div className=\"bg-card text-card-foreground hidden h-12 w-12 shrink-0 items-center justify-center rounded-xl border shadow-sm sm:flex\">\n <Icon\n className={cn(\"h-5 w-5\", ICON_COLORS[status])}\n />\n </div>\n <div className=\"mx-0 space-y-0.5 sm:mx-2\">\n <p className=\"font-semibold\">{name}</p>\n <p className=\"text-muted-foreground text-sm\">\n {date}\n </p>\n </div>\n <p\n className={cn(\n \"mx-2 ml-auto text-sm font-semibold\",\n COLORS[status]\n )}\n >\n {PREFIX[status]}{\" \"}\n {value\n ? new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(value)\n : \"Pending\"}\n </p>\n </div>\n )\n })}\n </div>\n </div>\n )\n })}\n </div>\n </div>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/invoices-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/invoices/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Download } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst DATA = [\n {\n name: \"INV-24 #MS-415646\",\n date: \"October 15, 2024\",\n amount: 2500,\n badge: \"24 Days\",\n isOverdue: false,\n },\n {\n name: \"INV-23 #MS-415740\",\n date: \"October 10, 2024\",\n amount: 1750,\n badge: \"20 Days\",\n isOverdue: false,\n },\n {\n name: \"INV-22 #MS-946285\",\n date: \"September 15, 2024\",\n amount: 1500,\n badge: \"18 Days\",\n isOverdue: false,\n },\n {\n name: \"INV-21 #MS-739734\",\n date: \"September 10, 2024\",\n amount: 2990,\n badge: \"3 Days Overdue\",\n isOverdue: true,\n },\n {\n name: \"INV-20 #MS-848649\",\n date: \"August 15, 2024\",\n amount: 3500,\n badge: \"3 Days Overdue\",\n isOverdue: true,\n },\n]\n\nexport default function Invoices01() {\n return (\n <div className=\"mx-auto max-w-xl p-6\">\n <div className=\"dark:bg-card rounded-xl border bg-white p-6 shadow-sm\">\n <div className=\"flex items-start justify-between gap-4\">\n <div>\n <h2 className=\"font-semibold\">Invoices</h2>\n <p className=\"text-muted-foreground text-sm\">\n Track and monitor your financial activity.\n </p>\n </div>\n <Button size=\"sm\" variant=\"outline\">\n Export\n </Button>\n </div>\n <div className=\"mt-6\">\n {DATA.map(({ name, date, amount, badge, isOverdue }, index) => (\n <div key={name}>\n <div className=\"flex flex-wrap items-center justify-between gap-6 py-6\">\n <div className=\"basis-full space-y-0.5 sm:basis-auto\">\n <p className=\"text-lg font-semibold\">{name}</p>\n <p className=\"text-muted-foreground text-sm\">{date}</p>\n </div>\n <Badge\n variant={isOverdue ? \"destructive\" : \"default\"}\n className={\n isOverdue\n ? \"w-max sm:ml-auto\"\n : \"w-max bg-green-100 text-green-800 hover:bg-green-100 sm:ml-auto\"\n }\n >\n {badge}\n </Badge>\n <p className=\"text-end text-sm font-semibold\">\n {new Intl.NumberFormat(\"en-US\", {\n style: \"currency\",\n currency: \"USD\",\n }).format(amount)}\n </p>\n <Button size=\"icon\" variant=\"ghost\" className=\"h-8 w-8\">\n <Download className=\"h-5 w-5\" />\n </Button>\n </div>\n {index < DATA.length - 1 && <Separator />}\n </div>\n ))}\n </div>\n </div>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/simple-blog-content-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/simple-blog-content/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\n\nconst POSTS = [\n {\n img: \"https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&auto=format&fit=crop\",\n tag: \"House\",\n title: \"Shared Coworking\",\n desc: \"Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.\",\n date: \"Posted on 26 May\",\n author: {\n img: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&auto=format&fit=crop\",\n name: \"Otto Gonzalez\",\n },\n },\n {\n img: \"https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=800&auto=format&fit=crop\",\n tag: \"Office\",\n title: \"Really Housekeeping\",\n desc: \"Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.\",\n date: \"Posted on 03 May\",\n author: {\n img: \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&auto=format&fit=crop\",\n name: \"Chriss Smahos\",\n },\n },\n {\n img: \"https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=800&auto=format&fit=crop\",\n tag: \"Hub\",\n title: \"Coworking Office\",\n desc: \"Use border utilities to quickly style the border and border-radius of an element. Great for images, buttons.\",\n date: \"Posted on 12 April\",\n author: {\n img: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&auto=format&fit=crop\",\n name: \"Elijah Miller\",\n },\n },\n]\n\nexport default function SimpleBlogContent01() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto grid grid-cols-1 items-start gap-6 md:grid-cols-2 lg:grid-cols-3\">\n {POSTS.map(({ img, tag, title, desc, date, author }) => (\n <Card key={title} className=\"overflow-hidden py-0\">\n <CardHeader className=\"p-4 pb-0\">\n <div className=\"relative h-60 w-full overflow-hidden rounded-lg\">\n <img\n src={img}\n alt={title}\n className=\"h-full w-full object-cover object-center\"\n />\n </div>\n </CardHeader>\n <CardContent className=\"px-6\">\n <Badge variant=\"secondary\" className=\"mb-2\">\n {tag}\n </Badge>\n <CardTitle className=\"mb-2 text-xl\">{title}</CardTitle>\n <CardDescription>{desc}</CardDescription>\n </CardContent>\n <CardFooter className=\"flex items-center gap-3 p-6 pt-0\">\n <Avatar>\n <AvatarImage src={author.img} alt={author.name} />\n <AvatarFallback>{author.name.charAt(0)}</AvatarFallback>\n </Avatar>\n <div className=\"space-y-0.5\">\n <p className=\"text-sm font-semibold\">{author.name}</p>\n <p className=\"text-muted-foreground text-xs\">{date}</p>\n </div>\n </CardFooter>\n </Card>\n ))}\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/blog-cards-layout-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/blog-cards-layout/page.tsx",
|
|
"content": "\"use client\"\n\nimport { ArrowDown } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\n\nconst POSTS = [\n {\n img: \"https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&auto=format&fit=crop\",\n tag: \"Enterprise\",\n title: \"Autodesk and Figma looks to future of 3D printing with Project Escher\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n date: \"10 September 2022\",\n author: {\n img: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&auto=format&fit=crop\",\n name: \"Ryan Samuel\",\n },\n },\n {\n img: \"https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=800&auto=format&fit=crop\",\n tag: \"Startups\",\n title: \"Bolt launching cross-platform service this week\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n date: \"12 September 2022\",\n author: {\n img: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&auto=format&fit=crop\",\n name: \"Nora Hazel\",\n },\n },\n {\n img: \"https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=800&auto=format&fit=crop\",\n tag: \"Trending\",\n title: \"6 insights into the French Fashion landscape view\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n date: \"16 September 2022\",\n author: {\n img: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&auto=format&fit=crop\",\n name: \"Otto Gonzalez\",\n },\n },\n {\n img: \"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&auto=format&fit=crop\",\n tag: \"Enterprise\",\n title: \"Autodesk looks to future of 3D printing with Project Escher\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n date: \"18 September 2022\",\n author: {\n img: \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&auto=format&fit=crop\",\n name: \"Ryan Samuel\",\n },\n },\n {\n img: \"https://images.unsplash.com/photo-1497215728101-856f4ea42174?w=800&auto=format&fit=crop\",\n tag: \"Lifestyle\",\n title: \"Lyft launching cross-platform service this week\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n date: \"18 September 2022\",\n author: {\n img: \"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=400&h=400&auto=format&fit=crop\",\n name: \"Nora Hazel\",\n },\n },\n {\n img: \"https://images.unsplash.com/photo-1497366412874-3415097a27e7?w=800&auto=format&fit=crop\",\n tag: \"Startups\",\n title: \"6 insights into the French Fashion landscape\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n date: \"22 September 2022\",\n author: {\n img: \"https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=400&h=400&auto=format&fit=crop\",\n name: \"Otto Gonzalez\",\n },\n },\n]\n\nexport default function BlogCardsLayout01() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto mb-12 text-center\">\n <p className=\"text-primary mb-2 text-sm font-semibold\">\n Latest Blog Posts\n </p>\n <h2 className=\"my-4 text-3xl font-bold\">Blog Posts</h2>\n <p className=\"text-muted-foreground mx-auto max-w-3xl text-lg\">\n This is the paragraph where you can write more details about blogs.\n Keep you user engaged by providing meaningful information.\n </p>\n </div>\n <div className=\"container mx-auto grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">\n {POSTS.map(({ img, tag, title, desc, date, author }) => (\n <Card key={title} className=\"overflow-hidden py-0\">\n <CardHeader className=\"p-3 pb-0\">\n <img\n src={img}\n alt={title}\n className=\"h-56 w-full rounded-lg object-cover object-center\"\n />\n </CardHeader>\n <CardContent className=\"px-6\">\n <Badge variant=\"secondary\" className=\"mb-2\">\n {tag}\n </Badge>\n <CardTitle className=\"mb-2 text-xl\">{title}</CardTitle>\n <CardDescription>{desc}</CardDescription>\n </CardContent>\n <CardFooter className=\"flex items-center gap-3 p-6 pt-0\">\n <Avatar className=\"h-8 w-8\">\n <AvatarImage src={author.img} alt={author.name} />\n <AvatarFallback>{author.name.charAt(0)}</AvatarFallback>\n </Avatar>\n <div className=\"flex flex-col\">\n <p className=\"text-sm font-semibold\">{author.name}</p>\n <p className=\"text-muted-foreground text-xs\">{date}</p>\n </div>\n </CardFooter>\n </Card>\n ))}\n </div>\n <div className=\"mt-12 text-center\">\n <Button variant=\"ghost\">\n <ArrowDown className=\"mr-2 h-4 w-4\" />\n View More\n </Button>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/blog-post-preview-tags-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/blog-post-preview-tags/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\n\nconst POSTS = [\n {\n img: \"https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&auto=format&fit=crop\",\n category: \"Otto Gonzalez\",\n title: \"Autodesk looks to future of 3D printing with Project\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n tags: [\"Product\", \"Design\", \"UX\"],\n },\n {\n img: \"https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=800&auto=format&fit=crop\",\n category: \"Ryan Samuel\",\n title: \"Lyft launching cross-platform service this week\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n tags: [\"Product\", \"Design\", \"UX\"],\n },\n {\n img: \"https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=800&auto=format&fit=crop\",\n category: \"Nora Hazel\",\n title: \"6 insights into the French Fashion landscape\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n tags: [\"Product\", \"Design\", \"UX\"],\n },\n]\n\nexport default function BlogPostPreviewTags01() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto mb-16 text-center\">\n <p className=\"text-primary mb-2 text-sm font-semibold\">\n Latest Blog Posts\n </p>\n <h2 className=\"my-4 text-3xl font-bold\">Explore Our Places</h2>\n <p className=\"text-muted-foreground mx-auto max-w-3xl text-lg\">\n This is the paragraph where you can write more details about blogs.\n Keep you user engaged by providing meaningful information.\n </p>\n </div>\n <div className=\"container mx-auto grid grid-cols-1 items-start gap-16 md:grid-cols-2 lg:grid-cols-3\">\n {POSTS.map(({ img, category, title, desc, tags }) => (\n <div key={title} className=\"space-y-6\">\n <div className=\"relative h-56 w-full overflow-hidden rounded-lg shadow-lg\">\n <img\n src={img}\n alt={title}\n className=\"h-full w-full object-cover object-center\"\n />\n </div>\n <div className=\"space-y-4\">\n <p className=\"text-primary text-sm font-semibold\">{category}</p>\n <h3 className=\"text-2xl font-bold\">{title}</h3>\n <p className=\"text-muted-foreground\">{desc}</p>\n </div>\n <div className=\"flex flex-wrap items-center gap-2\">\n {tags.map((tag) => (\n <Badge key={tag} variant=\"secondary\">\n {tag}\n </Badge>\n ))}\n </div>\n </div>\n ))}\n </div>\n <div className=\"mt-24 text-center\">\n <Button>View More</Button>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/highlighted-blog-posts-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/highlighted-blog-posts/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Globe, Heart, Mic, Puzzle } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardDescription,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\n\nconst POSTS = [\n {\n img: \"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=800&auto=format&fit=crop\",\n icon: Heart,\n title: \"Cultural\",\n desc: \"257 spots\",\n },\n {\n img: \"https://images.unsplash.com/photo-1511593358241-7eea1f3c84e5?w=800&auto=format&fit=crop\",\n icon: Puzzle,\n title: \"Modern Life\",\n desc: \"117 spots\",\n },\n {\n img: \"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=800&auto=format&fit=crop\",\n icon: Globe,\n title: \"Popularity\",\n desc: \"363 spots\",\n },\n {\n img: \"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=800&auto=format&fit=crop\",\n icon: Mic,\n title: \"Good Vibes\",\n desc: \"215 spots\",\n },\n]\n\nexport default function HighlightedBlogPosts01() {\n return (\n <section className=\"container mx-auto py-16\">\n <div className=\"mb-16 grid place-items-center text-center\">\n <h2 className=\"my-4 text-3xl font-bold\">Check out what's new</h2>\n <p className=\"text-muted-foreground mx-auto max-w-xl\">\n We get insulted by others, lose trust for those others. We get back\n freezes every winter\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-x-0 gap-y-6 md:grid-cols-3 md:gap-x-6\">\n <Card className=\"bg-primary text-primary-foreground flex flex-col justify-between py-0\">\n <CardHeader className=\"p-6 sm:p-8\">\n <p className=\"block text-center font-semibold opacity-80\">\n Landscape\n </p>\n </CardHeader>\n <CardContent className=\"p-6 sm:p-8\">\n <CardTitle className=\"text-center text-2xl\">\n Nature's Light\n </CardTitle>\n <CardDescription className=\"py-6 text-center opacity-80\">\n It really matters and then like it really doesn't matter.\n What matters is the people who are sparked by it.\n </CardDescription>\n </CardContent>\n <CardFooter className=\"p-6 text-center sm:p-8\">\n <Button\n size=\"sm\"\n variant=\"secondary\"\n className=\"bg-background text-foreground hover:bg-background/90\"\n >\n Read More\n </Button>\n </CardFooter>\n </Card>\n <div className=\"col-span-2 grid grid-cols-1 gap-6 sm:grid-cols-2\">\n {POSTS.map(({ img, icon: Icon, title, desc }) => (\n <Card\n key={title}\n className=\"relative grid min-h-48 w-full overflow-hidden border-0 py-0\"\n >\n <img\n src={img}\n alt={title}\n className=\"absolute inset-0 h-full w-full object-cover object-center\"\n />\n <div className=\"absolute inset-0 h-full w-full bg-black/60\" />\n <CardContent className=\"relative flex h-full flex-col justify-between p-6\">\n <Icon className=\"h-8 w-8 stroke-2 text-white\" />\n <div className=\"space-y-0.5\">\n <CardTitle className=\"text-xl text-white\">{title}</CardTitle>\n <CardDescription className=\"text-sm text-white/80\">\n {desc}\n </CardDescription>\n </div>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/blog-rectangular-images-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/blog-rectangular-images/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\n\nconst POSTS = [\n {\n img: \"https://images.unsplash.com/photo-1497366216548-37526070297c?w=800&auto=format&fit=crop\",\n tag: \"Enterprise\",\n title: \"Autodesk looks to future of 3D printing with Project\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n date: \"10 September 2022\",\n author: {\n img: \"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=400&h=400&auto=format&fit=crop\",\n name: \"Ryan Samuel\",\n },\n },\n {\n img: \"https://images.unsplash.com/photo-1497366811353-6870744d04b2?w=800&auto=format&fit=crop\",\n tag: \"Startups\",\n title: \"Lyft launching cross-platform service this week\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n date: \"12 September 2022\",\n author: {\n img: \"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=400&h=400&auto=format&fit=crop\",\n name: \"Nora Hazel\",\n },\n },\n {\n img: \"https://images.unsplash.com/photo-1497366754035-f200968a6e72?w=800&auto=format&fit=crop\",\n tag: \"Trending\",\n title: \"6 insights into the French Fashion landscape\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n date: \"16 September 2022\",\n author: {\n img: \"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&auto=format&fit=crop\",\n name: \"Otto Gonzalez\",\n },\n },\n {\n img: \"https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?w=800&auto=format&fit=crop\",\n tag: \"Lifestyle\",\n title: \"Autodesk looks to future of 3D printing with Project\",\n desc: \"Don't be scared of the truth because we need to restart the human foundation in truth And I love you like Kanye loves Kanye I love Rick Owens bed design but the back is too high for the beams and angle of the ceiling.\",\n date: \"18 September 2022\",\n author: {\n img: \"https://images.unsplash.com/photo-1500648767791-00dcc994a43e?w=400&h=400&auto=format&fit=crop\",\n name: \"Ryan Samuel\",\n },\n },\n]\n\nexport default function BlogRectangularImages01() {\n return (\n <section className=\"py-16\">\n <div className=\"container my-auto grid grid-cols-1 gap-8 lg:grid-cols-2\">\n {POSTS.map(({ img, tag, title, desc, date, author }) => (\n <div key={title} className=\"grid items-center gap-4 sm:grid-cols-2\">\n <div className=\"h-full max-h-72 overflow-hidden rounded-lg lg:max-h-full\">\n <img\n src={img}\n alt={title}\n className=\"h-full w-full object-cover object-center\"\n />\n </div>\n <div className=\"space-y-4 p-2\">\n <Badge variant=\"secondary\">{tag}</Badge>\n <h3 className=\"text-xl font-semibold\">{title}</h3>\n <p className=\"text-muted-foreground text-sm\">{desc}</p>\n <div className=\"mt-6 flex items-center gap-3 md:mt-8\">\n <Avatar>\n <AvatarImage src={author.img} alt={author.name} />\n <AvatarFallback>{author.name.charAt(0)}</AvatarFallback>\n </Avatar>\n <div className=\"flex flex-col\">\n <p className=\"mb-1 text-sm font-semibold\">{author.name}</p>\n <p className=\"text-muted-foreground text-xs\">{date}</p>\n </div>\n </div>\n </div>\n </div>\n ))}\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/large-blog-preview-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/large-blog-preview/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\n\nexport default function LargeBlogPreview01() {\n return (\n <div className=\"container mx-auto grid h-full w-full grid-cols-1 items-center gap-x-16 gap-y-6 py-16 lg:grid-cols-2\">\n <img\n alt=\"blog preview\"\n src=\"https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&auto=format&fit=crop\"\n className=\"h-full w-full rounded-lg object-cover object-center shadow-lg\"\n />\n <div>\n <p className=\"text-primary block font-semibold\">Business</p>\n <h2 className=\"my-4 text-3xl font-bold lg:text-4xl\">\n Autodesk looks to future of 3D with Project Escher\n </h2>\n <p className=\"text-muted-foreground mb-6 w-full max-w-lg text-lg\">\n Warner Music Group announced today it's acquiring the selected\n assets of the music platform Songkick, including its app for finding\n concerts and the company's trademark. Songkick has been involved\n in a lawsuit against the major…{\" \"}\n <a\n href=\"#\"\n className=\"text-foreground ml-2 inline-block font-semibold hover:underline\"\n >\n Read More\n </a>\n </p>\n <div className=\"flex items-center gap-3\">\n <Avatar>\n <AvatarImage\n src=\"https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=400&h=400&auto=format&fit=crop\"\n alt=\"Otto Gonzalez\"\n />\n <AvatarFallback>OG</AvatarFallback>\n </Avatar>\n <div className=\"space-y-0.5\">\n <p className=\"text-sm font-semibold\">Otto Gonzalez</p>\n <p className=\"text-muted-foreground text-xs\">10 October 2024</p>\n </div>\n </div>\n </div>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/simple-product-details-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/simple-product-details/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Heart } from \"lucide-react\"\n\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst SIZES = [\"XS\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"]\n\nconst SIMILAR_ITEMS = [\n {\n name: \"Black Bustier Top\",\n price: \"€49.95\",\n image:\n \"https://images.unsplash.com/photo-1661327930345-9c6714b603b3?auto=format&fit=crop&q=80&w=400&h=400\",\n sizes: \"Available in 5 size\",\n },\n {\n name: \"Black High-Waist Jeans\",\n price: \"€49.95\",\n image:\n \"https://images.unsplash.com/photo-1578508637199-240a8f25eff6?auto=format&fit=crop&q=80&w=400&h=400\",\n sizes: \"Available in 8 taille\",\n },\n]\n\nexport default function SimpleProductDetails01() {\n const [selectedSize, setSelectedSize] = useState(\"M\")\n const [isFavorite, setIsFavorite] = useState(false)\n\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n {/* Main Product Section */}\n <div className=\"mb-16 grid grid-cols-1 items-start gap-x-8 gap-y-10 md:grid-cols-2\">\n <div className=\"bg-muted/30 h-full max-h-[32rem] w-full overflow-hidden rounded-xl border\">\n <img\n alt=\"Pink Blouse\"\n src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=973\"\n className=\"h-full w-full object-cover\"\n />\n </div>\n <div className=\"md:p-2\">\n <h3 className=\"text-3xl font-bold\">Pink Blouse</h3>\n <p className=\"text-primary my-4 text-3xl font-bold\">$1,490</p>\n <p className=\"text-muted-foreground leading-relaxed [text-wrap:_balance]\">\n Whether you're closing deals or attending formal events, its\n breathable lining and natural stretch keep you comfortable and\n sharp from day to night.\n </p>\n\n <div className=\"my-6 flex items-center gap-2\">\n <div className=\"flex\">\n {[1, 2, 3, 4].map((star) => (\n <svg\n key={star}\n className=\"h-5 w-5 fill-yellow-400\"\n viewBox=\"0 0 20 20\"\n >\n <path d=\"M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z\" />\n </svg>\n ))}\n <svg className=\"h-5 w-5 fill-gray-300\" viewBox=\"0 0 20 20\">\n <path d=\"M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z\" />\n </svg>\n </div>\n <p className=\"text-sm font-semibold\">100 Reviews</p>\n </div>\n\n <div className=\"mb-6\">\n <h4 className=\"mb-3 text-lg font-semibold\">Size</h4>\n <div className=\"flex flex-wrap gap-2\">\n {SIZES.map((size) => (\n <Button\n key={size}\n variant={selectedSize === size ? \"default\" : \"outline\"}\n size=\"sm\"\n className=\"min-w-[3rem]\"\n onClick={() => setSelectedSize(size)}\n >\n {size}\n </Button>\n ))}\n </div>\n </div>\n\n <div className=\"mb-6\">\n <h4 className=\"mb-3 text-lg font-semibold\">Color</h4>\n <div className=\"flex gap-2\">\n <div className=\"h-8 w-8 cursor-pointer rounded-full border-2 border-gray-300 bg-black transition-transform hover:scale-110\" />\n <div className=\"h-8 w-8 cursor-pointer rounded-full border-2 border-gray-300 bg-white transition-transform hover:scale-110\" />\n <div className=\"h-8 w-8 cursor-pointer rounded-full border-2 border-gray-300 bg-gray-200 transition-transform hover:scale-110\" />\n </div>\n </div>\n\n <div className=\"mt-8 flex items-center gap-3\">\n <Button className=\"w-full max-w-sm\" size=\"lg\">\n Add to Cart\n </Button>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className={`h-11 w-11 ${\n isFavorite\n ? \"text-red-500 hover:text-red-600\"\n : \"text-muted-foreground hover:text-red-500\"\n }`}\n onClick={() => setIsFavorite(!isFavorite)}\n >\n <Heart\n className={`h-5 w-5 ${isFavorite ? \"fill-current\" : \"\"}`}\n />\n </Button>\n </div>\n </div>\n </div>\n\n {/* More Info & Similar Items Section */}\n <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-2\">\n {/* More Info Section */}\n <div>\n <h3 className=\"mb-6 text-2xl font-bold\">More Info</h3>\n <Accordion\n type=\"single\"\n collapsible\n defaultValue=\"description\"\n className=\"w-full\"\n >\n <AccordionItem value=\"description\">\n <AccordionTrigger className=\"text-base font-semibold\">\n Description\n </AccordionTrigger>\n <AccordionContent className=\"text-muted-foreground leading-relaxed\">\n <p className=\"mb-4\">\n Whether you're navigating city streets or embarking on\n outdoor adventures, this puffer jacket ensures you stay cozy\n and comfortable wherever you go. The versatile black hue\n effortlessly complements any outfit, making it a go-to\n choice for everyday wear.\n </p>\n <p>\n Equipped with practical features, including a front zipper\n closure and zippered pockets, the MidnightShield Jacket\n offers convenient storage for your essentials while on the\n move. Its adjustable cuffs and hem allow for a customizable\n fit, ensuring maximum comfort and versatility.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem value=\"delivery\">\n <AccordionTrigger className=\"text-base font-semibold\">\n Delivery & Returns\n </AccordionTrigger>\n <AccordionContent className=\"text-muted-foreground leading-relaxed\">\n <p className=\"mb-4\">\n <strong>Free Standard Delivery:</strong> Orders over $100\n qualify for free standard shipping. Delivery typically takes\n 3-5 business days.\n </p>\n <p className=\"mb-4\">\n <strong>Express Shipping:</strong> Available at checkout for\n faster delivery (1-2 business days).\n </p>\n <p>\n <strong>Returns:</strong> We offer a 30-day return policy.\n Items must be in original condition with tags attached. Free\n returns for defective items.\n </p>\n </AccordionContent>\n </AccordionItem>\n\n <AccordionItem value=\"contact\" className=\"border-b-0\">\n <AccordionTrigger className=\"text-base font-semibold\">\n Contact Us\n </AccordionTrigger>\n <AccordionContent className=\"text-muted-foreground leading-relaxed\">\n <p className=\"mb-3\">\n Have questions about this product? We're here to help!\n </p>\n <p className=\"mb-2\">\n <strong>Email:</strong> support@example.com\n </p>\n <p className=\"mb-2\">\n <strong>Phone:</strong> +1 (555) 123-4567\n </p>\n <p>\n <strong>Hours:</strong> Mon-Fri, 9AM-6PM EST\n </p>\n </AccordionContent>\n </AccordionItem>\n </Accordion>\n </div>\n\n {/* Similar Items Section */}\n <div>\n <h3 className=\"mb-6 text-2xl font-bold\">Similar Items</h3>\n <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2\">\n {SIMILAR_ITEMS.map((item, index) => (\n <Card\n key={index}\n className=\"group cursor-pointer overflow-hidden transition-shadow hover:shadow-lg py-0\"\n >\n <CardContent className=\"p-0\">\n <div className=\"bg-muted aspect-[4/5] overflow-hidden\">\n <img\n src={item.image}\n alt={item.name}\n className=\"h-full w-full object-cover transition-transform duration-300 group-hover:scale-105\"\n />\n </div>\n <div className=\"p-4\">\n <h4 className=\"font-semibold tracking-wide uppercase\">\n {item.name}\n </h4>\n <p className=\"mt-2 text-lg font-bold\">{item.price}</p>\n <p className=\"text-muted-foreground mt-2 text-sm\">\n {item.sizes}\n </p>\n </div>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/grid-ecommerce-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/grid-ecommerce/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\n\nconst CARDS = [\n {\n image:\n \"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=973\",\n title: \"New\",\n subtitle: \"Urban Chick Collection\",\n },\n {\n image:\n \"https://images.unsplash.com/photo-1661327930345-9c6714b603b3?auto=format&fit=crop&q=80&w=400&h=400\",\n title: \"Shop Sales\",\n subtitle: \"Urban Chick Collection\",\n },\n {\n image:\n \"https://images.unsplash.com/photo-1535220459927-c8428851fd45?auto=format&fit=crop&q=80&w=400&h=400\",\n title: \"50% off\",\n subtitle: \"Urban Chick Collection\",\n },\n]\n\nexport default function GridEcommerce01() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <p className=\"mb-8 font-semibold\">\n Gear Up and Enjoy Savings | Get up to 50% off on select items\n </p>\n <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n {CARDS.map(({ image, title, subtitle }, index) => (\n <Card\n key={index}\n className=\"group relative h-96 overflow-hidden border-0 p-0 shadow-lg transition-all hover:shadow-xl\"\n >\n <img\n src={image}\n alt={title}\n className=\"h-full w-full object-cover object-center transition-transform duration-500 group-hover:scale-105\"\n />\n <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n <div className=\"absolute inset-x-0 bottom-0 p-6 text-white\">\n <p className=\"mb-2 text-sm font-semibold tracking-wider text-white/90 uppercase\">\n {title}\n </p>\n <h3 className=\"mb-4 text-2xl font-bold\">{subtitle}</h3>\n <Button variant=\"link\" className=\"p-0 text-white\">\n Read More\n </Button>\n </div>\n </Card>\n ))}\n </div>\n <Card className=\"group relative mt-6 h-96 overflow-hidden border-0 p-0 shadow-lg transition-all hover:shadow-xl\">\n <img\n src=\"https://images.unsplash.com/photo-1559745482-57bfa9ca5a8a?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1481\"\n alt=\"Formal Elegance\"\n className=\"h-full w-full object-cover object-center transition-transform duration-500 group-hover:scale-105\"\n />\n <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/40 to-transparent\" />\n <div className=\"absolute inset-0 flex items-center justify-center p-8 text-white\">\n <div className=\"text-center\">\n <p className=\"mb-3 text-lg font-bold tracking-wider uppercase\">\n UP TO 70%\n </p>\n <h3 className=\"mb-6 text-3xl font-bold md:text-4xl\">\n Formal Elegance Series\n </h3>\n <Button variant=\"link\" size=\"lg\" className=\"p-0 text-white\">\n Discover\n </Button>\n </div>\n </div>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/promotional-cards-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/promotional-cards/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\n\nconst PRODUCTS = [\n {\n name: \"Active toning essence\",\n price: \"$59.00\",\n image:\n \"https://images.unsplash.com/photo-1620916566398-39f1143ab7be?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=800\",\n },\n {\n name: \"Hydrating face serum\",\n price: \"$49.00\",\n image:\n \"https://images.unsplash.com/photo-1571781926291-c477ebfd024b?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=800\",\n },\n {\n name: \"Vitamin C moisturizer\",\n price: \"$65.00\",\n image:\n \"https://images.unsplash.com/photo-1608571423902-eed4a5ad8108?ixlib=rb-4.1.0&auto=format&fit=crop&q=80&w=800\",\n },\n]\n\nexport default function PromotionalCards01() {\n const [currentProduct, setCurrentProduct] = useState(0)\n\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <div className=\"grid grid-cols-1 overflow-hidden rounded-2xl shadow-xl lg:grid-cols-2\">\n {/* Left: Product Showcase */}\n <div className=\"flex flex-col items-center justify-center bg-[#e8e3dc] p-16\">\n <div className=\"mb-8 flex h-80 w-80 items-center justify-center\">\n <img\n src={PRODUCTS[currentProduct].image}\n alt={PRODUCTS[currentProduct].name}\n className=\"h-full w-full object-contain drop-shadow-2xl transition-all duration-500\"\n />\n </div>\n <h3 className=\"mb-2 text-center text-lg font-medium text-gray-800\">\n {PRODUCTS[currentProduct].name}\n </h3>\n <p className=\"mb-6 text-center text-xl font-semibold text-gray-900\">\n {PRODUCTS[currentProduct].price}\n </p>\n <div className=\"flex gap-2\">\n {PRODUCTS.map((_, index) => (\n <button\n key={index}\n onClick={() => setCurrentProduct(index)}\n className={`h-2.5 w-2.5 rounded-full transition-all ${\n currentProduct === index\n ? \"w-8 bg-gray-800\"\n : \"bg-gray-400 hover:bg-gray-600\"\n }`}\n aria-label={`View product ${index + 1}`}\n />\n ))}\n </div>\n </div>\n\n {/* Right: Hero Image with Text */}\n <div className=\"relative flex min-h-[500px] items-center justify-center lg:min-h-[600px]\">\n <img\n src=\"https://images.unsplash.com/photo-1581182815808-b6eb627a8798?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1065\"\n alt=\"Beauty model\"\n className=\"absolute inset-0 h-full w-full object-cover\"\n />\n <div className=\"relative z-10 px-8 text-center lg:px-16\">\n <h2 className=\"font-serif text-5xl leading-tight font-light text-white drop-shadow-lg lg:text-6xl\">\n Glow up with\n <br />\n nature\n </h2>\n </div>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/order-history-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/order-history/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n Table,\n TableBody,\n TableCell,\n TableHead,\n TableHeader,\n TableRow,\n} from \"@/components/ui/table\"\n\nconst OPTIONS = [\n {\n data: \"Order ID\",\n value: \"1234\",\n },\n {\n data: \"Date of Placement\",\n value: \"April 3, 2024\",\n },\n {\n data: \"Amount\",\n value: \"$2,570\",\n },\n]\n\nconst TABLE_ROW = [\n {\n img: \"https://v3.material-tailwind.com/coat-1.png\",\n product: \"Premium Suit\",\n amount: \"$790\",\n date: \"Apr 6, 2024\",\n },\n {\n img: \"https://v3.material-tailwind.com/coat-2.png\",\n product: \"Linen Suit\",\n amount: \"$790\",\n date: \"Apr 6, 2024\",\n },\n {\n img: \"https://v3.material-tailwind.com/coat-3.png\",\n product: \"Tweed Suit\",\n amount: \"$990\",\n date: \"Apr 6, 2024\",\n },\n]\n\nconst TABLE_HEAD = [\"Product\", \"Amount\", \"Status\", \"Date\", \"Details\"]\n\nexport default function OrderHistory01() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <h2 className=\"text-lg font-semibold\">Order History</h2>\n <p className=\"text-muted-foreground mt-2\">\n See your recent orders, download your invoices.\n </p>\n <Card className=\"mt-8 mb-4 py-0\">\n <CardContent className=\"flex flex-wrap items-center justify-between gap-4 p-4\">\n <div className=\"flex gap-10\">\n {OPTIONS.map((option, i) => (\n <div key={i}>\n <p className=\"text-muted-foreground mb-0.5 text-sm\">\n {option.data}\n </p>\n <p className=\"font-semibold\">{option.value}</p>\n </div>\n ))}\n </div>\n <Button>View Invoice</Button>\n </CardContent>\n </Card>\n <Card>\n <div className=\"overflow-x-auto\">\n <Table>\n <TableHeader>\n <TableRow>\n {TABLE_HEAD.map((head) => (\n <TableHead key={head}>{head}</TableHead>\n ))}\n </TableRow>\n </TableHeader>\n <TableBody>\n {TABLE_ROW.map(({ img, product, amount, date }) => (\n <TableRow key={product}>\n <TableCell>\n <div className=\"flex items-center gap-3\">\n <img src={img} alt={product} className=\"h-16\" />\n <span className=\"text-sm font-semibold\">{product}</span>\n </div>\n </TableCell>\n <TableCell className=\"text-muted-foreground text-sm\">\n {amount}\n </TableCell>\n <TableCell>\n <Badge\n variant=\"secondary\"\n className=\"bg-green-100 text-green-700\"\n >\n Delivered\n </Badge>\n </TableCell>\n <TableCell className=\"text-muted-foreground text-sm\">\n {date}\n </TableCell>\n <TableCell>\n <Button size=\"sm\" variant=\"outline\">\n View\n </Button>\n </TableCell>\n </TableRow>\n ))}\n </TableBody>\n </Table>\n </div>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/empty-shopping-cart-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/empty-shopping-cart/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\n\nexport default function EmptyShoppingCart01() {\n return (\n <section className=\"grid min-h-screen place-items-center justify-center\">\n <div className=\"container mx-auto py-16\">\n <div className=\"text-center\">\n <p className=\"text-primary font-semibold\">Store</p>\n <h2 className=\"mt-4 text-2xl font-bold\">\n Your Shopping Cart is Empty\n </h2>\n <img\n src=\"https://v3.material-tailwind.com/cart-illustration.png\"\n alt=\"Empty cart\"\n className=\"mx-auto my-8 max-h-[30rem]\"\n />\n <Button>Back to Store</Button>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/digital-product-overview-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/digital-product-overview/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Eye, Lock, ShoppingCart, Star } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\n\nconst data = [\n {\n name: \"HTML Version\",\n desc: \"Pure HTML/CSS with Tailwind, perfect for static websites.\",\n price: \"$39\",\n popular: false,\n },\n {\n name: \"React Version\",\n desc: \"React components with TypeScript support included.\",\n price: \"$49\",\n popular: true,\n },\n {\n name: \"Angular Version\",\n desc: \"Angular components with full type definitions.\",\n price: \"$99\",\n popular: false,\n },\n]\n\nexport default function DigitalProductOverview01() {\n return (\n <section className=\"container mx-auto py-16\">\n <nav className=\"mb-8 flex items-center gap-2 text-sm\">\n <a\n href=\"#\"\n className=\"text-muted-foreground hover:text-foreground transition-colors\"\n >\n Home\n </a>\n <span className=\"text-muted-foreground\">/</span>\n <a\n href=\"#\"\n className=\"text-muted-foreground hover:text-foreground transition-colors\"\n >\n Templates\n </a>\n <span className=\"text-muted-foreground\">/</span>\n <span className=\"text-foreground font-medium\">Digital Product</span>\n </nav>\n\n <div className=\"mt-8 grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16\">\n <div className=\"group bg-muted/30 relative overflow-hidden rounded-2xl border p-4 shadow-xl transition-all hover:shadow-2xl\">\n <img\n src=\"https://raw.githubusercontent.com/creativetimofficial/public-assets/refs/heads/master/david-ui/thumbs/headers-thumbnail.jpg\"\n alt=\"Digital product preview\"\n className=\"h-full w-full object-contain transition-transform duration-500 group-hover:scale-105\"\n />\n <div className=\"absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100\" />\n </div>\n\n <div className=\"flex flex-col\">\n <div className=\"mb-6\">\n <div className=\"mb-3 flex items-center gap-3\">\n <h2 className=\"text-3xl font-bold tracking-tight\">\n Premium UI Kit\n </h2>\n <Badge\n variant=\"secondary\"\n className=\"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400\"\n >\n Best Seller\n </Badge>\n </div>\n <p className=\"text-muted-foreground text-base leading-relaxed\">\n A comprehensive collection of beautifully crafted components and\n templates. Built with modern web technologies and best practices\n for seamless integration.\n </p>\n </div>\n\n <div className=\"bg-muted/50 mb-6 flex items-center gap-6 rounded-lg p-4\">\n <div className=\"flex items-center gap-2\">\n <Star className=\"h-5 w-5 fill-yellow-400 text-yellow-400\" />\n <span className=\"text-sm font-semibold\">4.9/5</span>\n <span className=\"text-muted-foreground text-sm\">\n (127 reviews)\n </span>\n </div>\n <div className=\"bg-border h-4 w-px\" />\n <div className=\"flex items-center gap-2 text-sm\">\n <Lock className=\"text-muted-foreground h-4 w-4\" />\n <span className=\"font-semibold\">1,234</span>\n <span className=\"text-muted-foreground\">sales</span>\n </div>\n </div>\n\n <div className=\"mb-6\">\n <p className=\"mb-4 text-lg font-semibold\">Choose your version</p>\n <RadioGroup defaultValue=\"React Version\" className=\"gap-3\">\n {data.map(({ name, desc, price, popular }) => (\n <div\n key={name}\n className=\"group/item bg-card hover:border-primary rounded-lg border transition-all hover:shadow-md\"\n >\n <Label\n htmlFor={name}\n className=\"flex cursor-pointer items-start gap-4 p-4\"\n >\n <RadioGroupItem value={name} id={name} className=\"mt-1\" />\n <div className=\"flex flex-1 items-center justify-between gap-4\">\n <div className=\"flex-1\">\n <div className=\"mb-1 flex items-center gap-2\">\n <p className=\"font-semibold\">{name}</p>\n {popular && (\n <Badge className=\"bg-primary text-primary-foreground\">\n Popular\n </Badge>\n )}\n </div>\n <p className=\"text-muted-foreground text-sm\">{desc}</p>\n </div>\n <div className=\"text-right\">\n <p className=\"text-2xl font-bold\">{price}</p>\n <p className=\"text-muted-foreground text-xs\">\n one-time\n </p>\n </div>\n </div>\n </Label>\n </div>\n ))}\n </RadioGroup>\n </div>\n\n <div className=\"mt-auto flex flex-col gap-3 sm:flex-row\">\n <Button size=\"lg\" className=\"flex-1 gap-2\">\n <ShoppingCart className=\"h-4 w-4\" />\n Buy Now\n </Button>\n <Button size=\"lg\" variant=\"outline\" className=\"flex-1 gap-2\">\n <Eye className=\"h-4 w-4\" />\n Live Preview\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/product-description-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/product-description/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n ChevronRight,\n Heart,\n RotateCcw,\n Shield,\n Star,\n Truck,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nconst IMAGES = [\n { imgelink: \"https://v3.material-tailwind.com/coat-1.png\" },\n { imgelink: \"https://v3.material-tailwind.com/coat-2.png\" },\n { imgelink: \"https://v3.material-tailwind.com/coat-3.png\" },\n { imgelink: \"https://v3.material-tailwind.com/coat-4.png\" },\n]\n\nconst SIZES = [\"32\", \"34\", \"36\", \"38\", \"40\", \"42\", \"44\"]\n\nconst COLORS = [\n { name: \"Black\", hex: \"#1a1a1a\" },\n { name: \"White\", hex: \"#ffffff\" },\n { name: \"Gray\", hex: \"#e5e7eb\" },\n { name: \"Navy\", hex: \"#1e3a8a\" },\n { name: \"Brown\", hex: \"#92400e\" },\n]\n\nconst FEATURES = [\n { icon: Truck, text: \"Free shipping over $150\" },\n { icon: RotateCcw, text: \"Easy 30-day returns\" },\n { icon: Shield, text: \"1-year warranty\" },\n]\n\nexport default function ProductDescription01() {\n const [active, setActive] = useState(\n \"https://v3.material-tailwind.com/coat-1.png\"\n )\n const [selectedSize, setSelectedSize] = useState(\"36\")\n const [selectedColor, setSelectedColor] = useState(\"Black\")\n const [isFavorite, setIsFavorite] = useState(false)\n\n return (\n <section className=\"min-h-screen bg-neutral-50 py-12\">\n <div className=\"container mx-auto px-4\">\n <nav className=\"mb-8 flex items-center gap-2 text-sm text-neutral-500\">\n <a href=\"#\" className=\"hover:text-neutral-900\">\n Home\n </a>\n <ChevronRight className=\"h-4 w-4\" />\n <a href=\"#\" className=\"hover:text-neutral-900\">\n Women\n </a>\n <ChevronRight className=\"h-4 w-4\" />\n <a href=\"#\" className=\"hover:text-neutral-900\">\n Outerwear\n </a>\n <ChevronRight className=\"h-4 w-4\" />\n <span className=\"text-neutral-900\">Premium Winter Coat</span>\n </nav>\n\n <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12\">\n <div>\n <div className=\"overflow-hidden rounded-2xl bg-white\">\n <img\n src={active}\n alt=\"Product\"\n className=\"h-[500px] w-full object-cover object-center\"\n />\n </div>\n <div className=\"mt-4 flex justify-center gap-3\">\n {IMAGES.map(({ imgelink }, index) => (\n <button\n key={index}\n onClick={() => setActive(imgelink)}\n className={`h-20 w-20 overflow-hidden rounded-lg border-2 transition-all ${\n active === imgelink\n ? \"border-neutral-900\"\n : \"border-neutral-200 hover:border-neutral-400\"\n }`}\n >\n <img\n src={imgelink}\n alt={`Gallery ${index + 1}`}\n className=\"h-full w-full object-cover object-center\"\n />\n </button>\n ))}\n </div>\n\n <div className=\"mt-8 space-y-6\">\n <div>\n <h3 className=\"mb-3 text-lg font-medium text-neutral-900\">\n Product Description\n </h3>\n <p className=\"leading-relaxed text-neutral-600\">\n Experience luxury and comfort with this premium winter coat.\n Crafted from high-quality materials with meticulous attention\n to detail, this coat features a modern silhouette that\n flatters all body types. The water-resistant outer shell keeps\n you dry in light rain, while the insulated lining provides\n warmth without bulk.\n </p>\n </div>\n <div>\n <h3 className=\"mb-3 text-lg font-medium text-neutral-900\">\n Key Features\n </h3>\n <ul className=\"space-y-2 text-neutral-600\">\n <li className=\"flex items-start gap-2\">\n <span className=\"mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-900\" />\n <span>\n Water-resistant fabric with breathable membrane technology\n </span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-900\" />\n <span>\n Premium insulation for optimal warmth in cold weather\n </span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-900\" />\n <span>Adjustable cuffs and hem for personalized fit</span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"mt-1 h-1.5 w-1.5 flex-shrink-0 rounded-full bg-neutral-900\" />\n <span>\n Multiple interior and exterior pockets for storage\n </span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n\n <div className=\"flex flex-col\">\n <Badge\n variant=\"outline\"\n className=\"mb-4 w-fit border-neutral-300 text-xs font-medium text-neutral-600\"\n >\n Limited Edition\n </Badge>\n\n <h1 className=\"mb-2 text-3xl font-light tracking-tight text-neutral-900 sm:text-4xl\">\n Premium Winter Coat\n </h1>\n\n <div className=\"mb-6 flex items-center gap-4\">\n <span className=\"text-2xl font-normal text-neutral-900\">\n $1,290.00\n </span>\n <div className=\"flex items-center gap-1\">\n <div className=\"flex\">\n {[...Array(5)].map((_, i) => (\n <Star\n key={i}\n className={`h-4 w-4 ${\n i < 4\n ? \"fill-neutral-900 text-neutral-900\"\n : \"fill-neutral-300 text-neutral-300\"\n }`}\n />\n ))}\n </div>\n <span className=\"text-sm text-neutral-500\">(100 reviews)</span>\n </div>\n </div>\n\n <p className=\"mb-6 text-sm leading-relaxed text-neutral-600\">\n Elevate your winter wardrobe with this sophisticated coat that\n seamlessly blends style and functionality. Perfect for both\n professional settings and casual outings.\n </p>\n\n <div className=\"mb-6 grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <div>\n <p className=\"mb-3 text-sm font-medium text-neutral-900\">\n Color\n </p>\n <Select value={selectedColor} onValueChange={setSelectedColor}>\n <SelectTrigger className=\"w-full border-neutral-200\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {COLORS.map((color) => (\n <SelectItem key={color.name} value={color.name}>\n <div className=\"flex items-center gap-2\">\n <div\n className=\"h-4 w-4 rounded-full border border-neutral-200\"\n style={{ backgroundColor: color.hex }}\n />\n <span>{color.name}</span>\n </div>\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n\n <div>\n <p className=\"mb-3 text-sm font-medium text-neutral-900\">\n Size\n </p>\n <Select value={selectedSize} onValueChange={setSelectedSize}>\n <SelectTrigger className=\"w-full border-neutral-200\">\n <SelectValue />\n </SelectTrigger>\n <SelectContent>\n {SIZES.map((size) => (\n <SelectItem key={size} value={size}>\n {size}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n </div>\n\n <div className=\"mb-6 grid grid-cols-1 gap-4 sm:grid-cols-3\">\n {FEATURES.map((feature, index) => (\n <div\n key={index}\n className=\"flex flex-col items-center gap-2 rounded-lg border border-neutral-200 bg-white p-4 text-center\"\n >\n <feature.icon className=\"h-5 w-5 flex-shrink-0 text-neutral-900\" />\n <span className=\"text-xs text-neutral-600\">\n {feature.text}\n </span>\n </div>\n ))}\n </div>\n\n <div className=\"flex flex-col gap-3 sm:flex-row\">\n <Button\n size=\"lg\"\n className=\"flex-1 bg-neutral-900 text-white hover:bg-neutral-800\"\n >\n Add to Cart\n </Button>\n <Button\n size=\"lg\"\n variant=\"outline\"\n className={`border-neutral-900 transition-colors ${\n isFavorite\n ? \"bg-neutral-900 text-white hover:bg-neutral-800\"\n : \"text-neutral-900 hover:bg-neutral-900 hover:text-white\"\n }`}\n onClick={() => setIsFavorite(!isFavorite)}\n >\n <Heart\n className={`h-5 w-5 ${isFavorite ? \"fill-current\" : \"\"}`}\n />\n </Button>\n </div>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/dark-product-overview-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/dark-product-overview/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Heart, Package, Shield, ShoppingCart, Star, Truck } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\n\nconst DATA = [\n {\n title: \"Features\",\n icon: Package,\n desc: `Premium cashmere blend with cable-knit pattern. Features a classic V-neck design, \n ribbed cuffs and hem for a perfect fit. Made with sustainable materials and ethically sourced \n fibers. Temperature-regulating properties keep you comfortable in any season.`,\n },\n {\n title: \"Product Care\",\n icon: Shield,\n desc: `Hand wash in cold water with mild detergent or dry clean for best results. \n Lay flat to dry, do not wring or twist. Store folded in a cool, dry place. \n Use a fabric shaver to remove any pilling. Steam gently to refresh between wears.`,\n },\n {\n title: \"Shipping\",\n icon: Truck,\n desc: `Free standard shipping on all orders over $100. Express shipping available at checkout. \n Orders are processed within 1-2 business days. International shipping available to select countries. \n 30-day hassle-free returns and exchanges.`,\n },\n]\n\nexport default function DarkProductOverview01() {\n const [isFavorite, setIsFavorite] = useState(false)\n\n return (\n <section className=\"bg-primary container mx-auto rounded-2xl\">\n <div className=\"mx-auto max-w-6xl px-6 py-20 md:px-12\">\n <div className=\"mb-16 text-center\">\n <Badge\n variant=\"outline\"\n className=\"mb-4 border-white/30 bg-white/10 text-white\"\n >\n Shop Previewer\n </Badge>\n <h2 className=\"my-4 text-4xl font-bold tracking-tight text-white\">\n New Collection\n </h2>\n <p className=\"mx-auto max-w-3xl text-lg leading-relaxed text-white/80\">\n Easily preview furniture, decor, and more in your space, ensuring\n everything fits perfectly and looks just right. It's the\n ultimate tool for hassle-free home customization and design!\n </p>\n </div>\n\n <div className=\"flex flex-col items-center justify-between gap-x-12 gap-y-12 lg:flex-row\">\n <div className=\"flex-1\">\n <div className=\"mb-4 flex items-center gap-3\">\n <h3 className=\"text-2xl font-bold text-white\">Elegant Suite</h3>\n <Badge className=\"bg-green-500 text-white\">New Arrival</Badge>\n </div>\n\n <div className=\"mb-4 flex items-center gap-2\">\n <div className=\"flex items-center gap-1\">\n {[1, 2, 3, 4, 5].map((star) => (\n <Star\n key={star}\n className=\"h-5 w-5 fill-yellow-400 text-yellow-400\"\n />\n ))}\n </div>\n <span className=\"text-sm text-white/70\">(127 reviews)</span>\n </div>\n\n <div className=\"mb-6 flex items-baseline gap-3\">\n <p className=\"text-4xl font-bold text-white\">$449.90</p>\n <span className=\"text-lg text-white/50 line-through\">\n $599.90\n </span>\n <Badge\n variant=\"outline\"\n className=\"border-green-500/30 bg-green-500/10 text-green-400\"\n >\n 25% OFF\n </Badge>\n </div>\n\n <p className=\"mb-8 max-w-xl text-lg leading-relaxed text-white/80\">\n Add a touch of sophistication to your home with our handcrafted\n ceramic vase. Each piece is uniquely made, blending seamlessly\n into both modern and classic decors.\n </p>\n\n <div className=\"mb-8 flex items-center gap-2 rounded-lg bg-white/10 p-4\">\n <Truck className=\"h-5 w-5 shrink-0 text-white\" />\n <span className=\"text-sm text-white\">\n Free shipping on orders over $100\n </span>\n </div>\n\n <div className=\"mb-4 flex w-full items-center gap-3\">\n <Button\n size=\"lg\"\n className=\"flex-1 gap-2 bg-white text-black hover:bg-white/90 sm:w-64 sm:flex-none\"\n >\n <ShoppingCart className=\"h-5 w-5\" />\n Add to Cart\n </Button>\n <Button\n size=\"lg\"\n variant=\"ghost\"\n className={`shrink-0 ${\n isFavorite\n ? \"text-red-500 hover:text-red-600\"\n : \"text-white/80 hover:text-red-500\"\n }`}\n onClick={() => setIsFavorite(!isFavorite)}\n >\n <Heart\n className={`h-5 w-5 ${isFavorite ? \"fill-current\" : \"\"}`}\n />\n </Button>\n </div>\n\n <div className=\"mt-12 max-w-2xl\">\n <Tabs defaultValue=\"Features\" className=\"w-full\">\n <TabsList className=\"h-auto w-full justify-start rounded-none border-b border-white/20 bg-transparent p-0\">\n {DATA.map(({ title, icon: Icon }) => (\n <TabsTrigger\n key={title}\n value={title}\n className=\"gap-2 rounded-none px-4 py-3 text-white data-[state=active]:border-b-2 data-[state=active]:border-white data-[state=active]:bg-transparent data-[state=active]:shadow-none\"\n >\n <Icon className=\"h-4 w-4\" />\n {title}\n </TabsTrigger>\n ))}\n </TabsList>\n {DATA.map(({ title, desc }) => (\n <TabsContent\n key={title}\n value={title}\n className=\"mt-6 text-white/80\"\n >\n <p className=\"leading-relaxed\">{desc}</p>\n </TabsContent>\n ))}\n </Tabs>\n </div>\n </div>\n\n <div className=\"w-full lg:w-auto lg:max-w-lg\">\n <div className=\"group relative overflow-hidden rounded-2xl border-2 border-white/20 bg-white/5 p-4 shadow-2xl backdrop-blur-sm\">\n <img\n src=\"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=973\"\n alt=\"Elegant Suite\"\n className=\"w-full rounded-xl transition-transform duration-500 group-hover:scale-105\"\n />\n <div className=\"absolute inset-0 bg-gradient-to-t from-black/20 to-transparent opacity-0 transition-opacity group-hover:opacity-100\" />\n </div>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/shopping-cart-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/shopping-cart/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Lock, Package, ShoppingBag, Tag, Truck, X } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Card,\n CardContent,\n CardFooter,\n CardHeader,\n CardTitle,\n} from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst CHECKOUT_PRODUCTS = [\n {\n name: \"Wool Suit\",\n price: \"$1,300\",\n product: \"Silk\",\n size: \"XS\",\n img: \"https://v3.material-tailwind.com/coat-2.png\",\n stock: \"In Stock\",\n },\n {\n name: \"Premium Suit\",\n price: \"$700\",\n product: \"Linen\",\n size: \"M\",\n img: \"https://v3.material-tailwind.com/coat-1.png\",\n stock: \"In Stock\",\n },\n]\n\nexport default function ShoppingCart01() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <Card className=\"rounded-2xl shadow-lg\">\n <CardHeader className=\"text-center\">\n <div className=\"mb-4 flex items-center justify-center gap-2\">\n <div className=\"bg-primary/10 flex h-14 w-14 items-center justify-center rounded-full\">\n <ShoppingBag className=\"text-primary h-7 w-7\" />\n </div>\n </div>\n <CardTitle className=\"text-4xl\">Shopping Cart</CardTitle>\n <div className=\"mt-4 inline-flex items-center gap-2 rounded-full bg-green-50 px-5 py-2.5\">\n <Truck className=\"h-5 w-5 text-green-600\" />\n <p className=\"text-sm font-semibold text-green-700\">\n You are eligible for Free Shipping\n </p>\n </div>\n </CardHeader>\n <CardContent>\n\n <div className=\"grid w-full grid-cols-1 gap-8 lg:grid-cols-3\">\n <div className=\"col-span-2\">\n <Card className=\"border-2\">\n <CardHeader className=\"px-6 gap-0 border-b\">\n <div className=\"flex items-center gap-2\">\n <Package className=\"text-primary h-5 w-5\" />\n <CardTitle className=\"text-xl\">\n Cart Items ({CHECKOUT_PRODUCTS.length})\n </CardTitle>\n </div>\n </CardHeader>\n <CardContent className=\"p-0\">\n {CHECKOUT_PRODUCTS.map(\n ({ name, price, img, product, size, stock }, index) => (\n <div key={index}>\n <div className=\"p-6\">\n <div className=\"flex flex-col items-stretch gap-6 sm:flex-row\">\n <div className=\"bg-muted/50 h-36 w-36 shrink-0 overflow-hidden rounded-xl p-3\">\n <img\n src={img}\n alt={name}\n className=\"h-full w-full object-cover\"\n />\n </div>\n <div className=\"flex h-auto flex-1 flex-col gap-4\">\n <div className=\"flex items-start justify-between gap-4\">\n <div className=\"flex-1\">\n <h4 className=\"text-xl font-bold\">\n {name}\n </h4>\n <p className=\"text-muted-foreground mt-1.5 text-sm\">\n {product}\n </p>\n </div>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n className=\"text-muted-foreground hover:bg-destructive/10 hover:text-destructive h-9 w-9 rounded-full\"\n >\n <X className=\"h-5 w-5\" />\n </Button>\n </div>\n\n <div className=\"flex flex-wrap items-center gap-2\">\n <Badge\n variant=\"outline\"\n className=\"gap-1.5 px-3 py-1\"\n >\n <span className=\"text-xs\">Size:</span>\n <span className=\"font-semibold\">\n {size}\n </span>\n </Badge>\n <Badge className=\"gap-1.5 border-green-200 bg-green-50 px-3 py-1 text-green-700 hover:bg-green-100\">\n {stock}\n </Badge>\n </div>\n\n <div className=\"mt-auto flex items-center justify-between\">\n <div className=\"flex items-center gap-3\">\n <span className=\"text-muted-foreground text-sm font-medium\">\n Quantity:\n </span>\n <Select defaultValue=\"1\">\n <SelectTrigger className=\"h-10 w-28\">\n <SelectValue placeholder=\"Qty\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"1\">1</SelectItem>\n <SelectItem value=\"2\">2</SelectItem>\n <SelectItem value=\"3\">3</SelectItem>\n <SelectItem value=\"4\">4</SelectItem>\n <SelectItem value=\"5\">5</SelectItem>\n </SelectContent>\n </Select>\n </div>\n <p className=\"text-primary text-2xl font-bold\">\n {price}\n </p>\n </div>\n </div>\n </div>\n </div>\n {index < CHECKOUT_PRODUCTS.length - 1 && (\n <Separator />\n )}\n </div>\n )\n )}\n </CardContent>\n </Card>\n </div>\n\n <div className=\"col-span-1\">\n <div className=\"sticky top-4\">\n <Card className=\"border-2\">\n <CardHeader className=\"px-6 gap-0 border-b\">\n <CardTitle className=\"text-xl\">Order Summary</CardTitle>\n </CardHeader>\n <CardContent className=\"p-0\">\n <div className=\"space-y-4 p-6\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">\n Subtotal\n </span>\n <span className=\"font-semibold\">$2,090</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground\">\n Shipping Tax\n </span>\n <span className=\"font-semibold text-green-600\">\n $0\n </span>\n </div>\n </div>\n\n <Separator />\n\n <div className=\"p-6\">\n <div className=\"mb-3 flex items-center gap-2\">\n <Tag className=\"text-muted-foreground h-4 w-4\" />\n <label className=\"text-sm font-semibold\">\n Promo Code\n </label>\n </div>\n <div className=\"flex items-center gap-2\">\n <Input\n type=\"text\"\n placeholder=\"Enter code\"\n className=\"flex-1\"\n />\n <Button variant=\"outline\" className=\"shrink-0\">\n Apply\n </Button>\n </div>\n </div>\n\n <Separator />\n\n <div className=\"bg-muted/30 space-y-4 p-6\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-lg font-bold\">Order Total</span>\n <span className=\"text-primary text-3xl font-bold\">\n $2,090\n </span>\n </div>\n <Button className=\"w-full gap-2\" size=\"lg\">\n <Lock className=\"h-5 w-5\" />\n Proceed to Checkout\n </Button>\n </div>\n </CardContent>\n <CardFooter className=\"bg-green-50\">\n <div className=\"flex items-start gap-3\">\n <div className=\"flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-green-100\">\n <Truck className=\"h-5 w-5 text-green-600\" />\n </div>\n <div>\n <p className=\"font-semibold text-green-900\">\n Free Shipping Applied\n </p>\n <p className=\"mt-1 text-sm text-green-700\">\n Estimated delivery: 3-5 business days\n </p>\n </div>\n </div>\n </CardFooter>\n </Card>\n </div>\n </div>\n </div>\n </CardContent>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/checkout-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/checkout/page.tsx",
|
|
"content": "\"use client\"\n\nimport {\n CreditCard,\n Lock,\n Mail,\n MapPin,\n Package,\n ShoppingBag,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst OPTIONS = [\n {\n image: \"https://v3.material-tailwind.com/coat-1.png\",\n title: \"Classic Suit\",\n description: \"Silk\",\n size: \"M\",\n price: \"$1,300\",\n quantity: 1,\n },\n {\n image: \"https://v3.material-tailwind.com/coat-2.png\",\n title: \"Premium Suit\",\n description: \"Linen\",\n size: \"M\",\n price: \"$790\",\n quantity: 1,\n },\n]\n\nconst PRICE_OPTIONS = [\n { value: \"Subtotal\", price: \"$2,090\" },\n { value: \"Shipping estimate\", price: \"$0\" },\n { value: \"Tax estimate\", price: \"$5\" },\n]\n\nexport default function Checkout01() {\n return (\n <section className=\"container mx-auto px-4 py-12\">\n <div className=\"mx-auto max-w-7xl\">\n <div className=\"mb-8\">\n <h1 className=\"text-3xl font-bold\">Checkout</h1>\n <p className=\"text-muted-foreground mt-2\">\n Complete your order by providing your payment details\n </p>\n </div>\n\n <div className=\"rounded-2xl border bg-white p-6 shadow-lg md:p-8 lg:p-12 dark:bg-gray-950\">\n <div className=\"grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16\">\n <div className=\"space-y-8\">\n <div className=\"space-y-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n <Mail className=\"text-primary h-5 w-5\" />\n </div>\n <div>\n <h3 className=\"text-lg font-semibold\">Contact</h3>\n <p className=\"text-muted-foreground text-sm\">\n We'll send order updates here\n </p>\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"you@example.com\"\n className=\"h-11\"\n />\n </div>\n <div className=\"flex items-start gap-2\">\n <Checkbox id=\"terms\" className=\"mt-1\" />\n <Label\n htmlFor=\"terms\"\n className=\"text-muted-foreground text-sm leading-relaxed\"\n >\n I agree to the{\" \"}\n <a href=\"#\" className=\"text-primary hover:underline\">\n Terms & Conditions\n </a>{\" \"}\n and{\" \"}\n <a href=\"#\" className=\"text-primary hover:underline\">\n Privacy Policy\n </a>\n </Label>\n </div>\n </div>\n\n <Separator />\n\n <div className=\"space-y-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n <MapPin className=\"text-primary h-5 w-5\" />\n </div>\n <div>\n <h3 className=\"text-lg font-semibold\">Shipping Address</h3>\n <p className=\"text-muted-foreground text-sm\">\n Where should we deliver your order?\n </p>\n </div>\n </div>\n <div className=\"space-y-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"address\">Street Address</Label>\n <Input\n id=\"address\"\n placeholder=\"123 Main Street\"\n className=\"h-11\"\n />\n </div>\n <div className=\"grid gap-4 sm:grid-cols-3\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"city\">City</Label>\n <Input\n id=\"city\"\n placeholder=\"New York\"\n className=\"h-11\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"postal\">Postal Code</Label>\n <Input id=\"postal\" placeholder=\"10001\" className=\"h-11\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"country\">Country</Label>\n <Input id=\"country\" placeholder=\"USA\" className=\"h-11\" />\n </div>\n </div>\n </div>\n </div>\n\n <Separator />\n\n <div className=\"space-y-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n <CreditCard className=\"text-primary h-5 w-5\" />\n </div>\n <div className=\"flex-1\">\n <h3 className=\"text-lg font-semibold\">Payment Details</h3>\n <p className=\"text-muted-foreground text-sm\">\n Your payment information is secure\n </p>\n </div>\n <Badge\n variant=\"outline\"\n className=\"gap-1 border-green-500/30 bg-green-50 text-green-700 dark:bg-green-950/30 dark:text-green-400\"\n >\n <Lock className=\"h-3 w-3\" />\n Secure\n </Badge>\n </div>\n <div className=\"space-y-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"card\">Card Number</Label>\n <Input\n id=\"card\"\n placeholder=\"1234 5678 9012 3456\"\n className=\"h-11\"\n />\n </div>\n <div className=\"grid gap-4 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"expiry\">Expiration Date</Label>\n <Input id=\"expiry\" placeholder=\"MM/YY\" className=\"h-11\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"cvv\">CVV</Label>\n <Input id=\"cvv\" placeholder=\"123\" className=\"h-11\" />\n </div>\n </div>\n </div>\n </div>\n\n <Button className=\"mt-4 h-12 w-full text-base\" size=\"lg\">\n <Lock className=\"mr-2 h-4 w-4\" />\n Place Order - $2,095\n </Button>\n </div>\n\n <div className=\"lg:sticky lg:top-8 lg:h-fit\">\n <div className=\"bg-muted/30 rounded-xl border p-6\">\n <div className=\"mb-6 flex items-center gap-3\">\n <div className=\"bg-primary/10 flex h-10 w-10 items-center justify-center rounded-full\">\n <ShoppingBag className=\"text-primary h-5 w-5\" />\n </div>\n <h2 className=\"text-xl font-bold\">Order Summary</h2>\n </div>\n\n <div className=\"space-y-4\">\n {OPTIONS.map(\n (\n { image, title, description, size, price, quantity },\n index\n ) => (\n <div\n key={index}\n className=\"bg-background hover:bg-muted/50 flex items-start gap-4 rounded-lg border p-3 transition-colors\"\n >\n <div className=\"relative h-20 w-20 overflow-hidden rounded-md border\">\n <img\n src={image}\n alt={title}\n className=\"h-full w-full object-cover p-1\"\n />\n </div>\n <div className=\"flex-1 space-y-1\">\n <p className=\"leading-tight font-semibold\">{title}</p>\n <p className=\"text-muted-foreground text-sm\">\n {description} · Size {size}\n </p>\n <p className=\"text-muted-foreground text-xs\">\n Qty: {quantity}\n </p>\n </div>\n <p className=\"font-semibold\">{price}</p>\n </div>\n )\n )}\n </div>\n\n <Separator className=\"my-6\" />\n\n <div className=\"space-y-3\">\n {PRICE_OPTIONS.map(({ value, price }) => (\n <div key={value} className=\"flex justify-between text-sm\">\n <span className=\"text-muted-foreground\">{value}</span>\n <span className=\"font-medium\">{price}</span>\n </div>\n ))}\n </div>\n\n <Separator className=\"my-4\" />\n\n <div className=\"flex items-center justify-between\">\n <span className=\"text-lg font-bold\">Total</span>\n <span className=\"text-2xl font-bold\">$2,095</span>\n </div>\n\n <div className=\"bg-muted/50 mt-6 flex items-start gap-2 rounded-lg p-4\">\n <Package className=\"text-primary mt-0.5 h-5 w-5 shrink-0\" />\n <div className=\"space-y-1\">\n <p className=\"text-sm font-medium\">Free Shipping</p>\n <p className=\"text-muted-foreground text-xs\">\n Your order qualifies for free standard shipping\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/complex-product-description-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/complex-product-description/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Heart, Package, RefreshCw, Shield, Star, Truck } from \"lucide-react\"\n\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\n\nconst IMAGES = [\n \"https://v3.material-tailwind.com/coat-1.png\",\n \"https://v3.material-tailwind.com/coat-2.png\",\n \"https://v3.material-tailwind.com/coat-3.png\",\n \"https://v3.material-tailwind.com/coat-4.png\",\n]\n\nconst SIZES = [\"XS\", \"S\", \"M\", \"L\", \"XL\"]\n\nconst COLORS = [\n { name: \"Black\", hex: \"#1a1a1a\" },\n { name: \"White\", hex: \"#ffffff\" },\n { name: \"Gray\", hex: \"#e5e7eb\" },\n]\n\nconst FEATURES = [\n { icon: Package, text: \"Premium quality materials\" },\n { icon: Truck, text: \"Free shipping on orders $100+\" },\n { icon: RefreshCw, text: \"30-day return policy\" },\n { icon: Shield, text: \"2-year warranty included\" },\n]\n\nconst ACCORDION_DATA = [\n {\n value: \"one\",\n title: \"Features\",\n desc: \"This premium coat is crafted from weather-resistant fabric with advanced Gore-Tex technology, ensuring you stay dry and comfortable in all conditions. Features include adjustable cuffs, reinforced seams, and breathable lining.\",\n },\n {\n value: \"two\",\n title: \"Product Care\",\n desc: \"Machine wash cold with like colors. Use mild detergent and avoid bleach. Tumble dry on low heat or hang to dry. For best results, store in a cool, dry place and avoid direct sunlight to maintain color and fabric integrity.\",\n },\n {\n value: \"three\",\n title: \"Shipping & Returns\",\n desc: \"Free standard shipping on orders over $100. Express shipping available at checkout. We offer a 30-day return policy with free returns. Items must be unworn, unwashed, and in original packaging with tags attached.\",\n },\n {\n value: \"four\",\n title: \"Warranty\",\n desc: \"All our products come with a comprehensive 2-year warranty covering manufacturing defects. This includes issues with stitching, zippers, and fabric quality. Contact our customer service for warranty claims and support.\",\n },\n]\n\nexport default function ComplexProductDescription01() {\n const [selectedImage, setSelectedImage] = useState(0)\n const [selectedColor, setSelectedColor] = useState(0)\n const [selectedSize, setSelectedSize] = useState(\"M\")\n const [isFavorite, setIsFavorite] = useState(false)\n\n return (\n <section className=\"min-h-screen bg-neutral-50 py-12\">\n <div className=\"container mx-auto px-4\">\n <div className=\"grid grid-cols-1 gap-8 lg:grid-cols-2 lg:gap-12\">\n <div className=\"flex flex-col-reverse lg:flex-row lg:gap-4\">\n <div className=\"mt-4 flex gap-2 lg:mt-0 lg:flex-col\">\n {IMAGES.map((img, index) => (\n <button\n key={index}\n onClick={() => setSelectedImage(index)}\n className={`h-20 w-20 flex-shrink-0 overflow-hidden rounded-lg border-2 transition-all ${\n selectedImage === index\n ? \"border-neutral-900\"\n : \"border-neutral-200 hover:border-neutral-400\"\n }`}\n >\n <img\n src={img}\n alt={`Product view ${index + 1}`}\n className=\"h-full w-full object-cover\"\n />\n </button>\n ))}\n </div>\n\n <div className=\"flex-1\">\n <div className=\"aspect-square overflow-hidden rounded-2xl bg-white\">\n <img\n src={IMAGES[selectedImage]}\n alt=\"Product main view\"\n className=\"h-full w-full object-cover object-center\"\n />\n </div>\n </div>\n </div>\n\n <div className=\"flex flex-col\">\n <Badge\n variant=\"outline\"\n className=\"mb-4 w-fit border-neutral-300 text-xs font-medium text-neutral-600\"\n >\n New Arrival\n </Badge>\n\n <h1 className=\"mb-2 text-3xl font-light tracking-tight text-neutral-900 sm:text-4xl\">\n Premium Winter Coat\n </h1>\n\n <div className=\"mb-6 flex items-center gap-4\">\n <span className=\"text-2xl font-normal text-neutral-900\">\n $1,490.00\n </span>\n <div className=\"flex items-center gap-1\">\n <div className=\"flex\">\n {[...Array(5)].map((_, i) => (\n <Star\n key={i}\n className={`h-4 w-4 ${\n i < 4\n ? \"fill-neutral-900 text-neutral-900\"\n : \"fill-neutral-300 text-neutral-300\"\n }`}\n />\n ))}\n </div>\n <span className=\"text-sm text-neutral-500\">(100 reviews)</span>\n </div>\n </div>\n\n <p className=\"mb-6 text-sm leading-relaxed text-neutral-600\">\n Experience unparalleled comfort and style with our premium winter\n coat. Meticulously crafted with attention to detail, this coat\n features weather-resistant fabric and a timeless design that\n complements any wardrobe. Perfect for both casual and formal\n occasions.\n </p>\n\n <div className=\"mb-6\">\n <p className=\"mb-3 text-sm font-medium text-neutral-900\">\n Color:{\" \"}\n <span className=\"font-normal\">\n {COLORS[selectedColor].name}\n </span>\n </p>\n <div className=\"flex gap-2\">\n {COLORS.map((color, index) => (\n <button\n key={index}\n onClick={() => setSelectedColor(index)}\n className={`h-10 w-10 rounded-md border-2 transition-all ${\n selectedColor === index\n ? \"border-neutral-900 ring-2 ring-neutral-900 ring-offset-2\"\n : \"border-neutral-200 hover:border-neutral-400\"\n }`}\n style={{ backgroundColor: color.hex }}\n title={color.name}\n />\n ))}\n </div>\n </div>\n\n <div className=\"mb-6\">\n <p className=\"mb-3 text-sm font-medium text-neutral-900\">\n Size: <span className=\"font-normal\">{selectedSize}</span>\n </p>\n <div className=\"flex gap-2\">\n {SIZES.map((size) => (\n <button\n key={size}\n onClick={() => setSelectedSize(size)}\n className={`flex h-10 w-12 items-center justify-center rounded-md border-2 text-sm font-medium transition-all ${\n selectedSize === size\n ? \"border-neutral-900 bg-neutral-900 text-white\"\n : \"border-neutral-200 bg-white text-neutral-900 hover:border-neutral-400\"\n }`}\n >\n {size}\n </button>\n ))}\n </div>\n </div>\n\n <div className=\"mb-6 flex flex-col gap-3 sm:flex-row\">\n <Button\n size=\"lg\"\n className=\"flex-1 bg-neutral-900 text-white hover:bg-neutral-800\"\n >\n Add to Cart\n </Button>\n <Button\n size=\"lg\"\n variant=\"outline\"\n className={`border-neutral-900 transition-colors ${\n isFavorite\n ? \"bg-neutral-900 text-white hover:bg-neutral-800\"\n : \"text-neutral-900 hover:bg-neutral-900 hover:text-white\"\n }`}\n onClick={() => setIsFavorite(!isFavorite)}\n >\n <Heart\n className={`h-5 w-5 ${isFavorite ? \"fill-current\" : \"\"}`}\n />\n </Button>\n </div>\n\n <div className=\"mb-6 grid grid-cols-1 gap-3 sm:grid-cols-2\">\n {FEATURES.map((feature, index) => (\n <div\n key={index}\n className=\"flex items-center gap-2 text-sm text-neutral-600\"\n >\n <feature.icon className=\"h-4 w-4 flex-shrink-0\" />\n <span>{feature.text}</span>\n </div>\n ))}\n </div>\n\n <Accordion\n type=\"single\"\n defaultValue=\"one\"\n collapsible\n className=\"w-full border-t border-neutral-200\"\n >\n {ACCORDION_DATA.map(({ value, title, desc }) => (\n <AccordionItem key={value} value={value}>\n <AccordionTrigger className=\"text-sm font-medium text-neutral-900 hover:text-neutral-600\">\n {title}\n </AccordionTrigger>\n <AccordionContent className=\"text-sm leading-relaxed text-neutral-600\">\n {desc}\n </AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/interactive-product-preview-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/interactive-product-preview/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n Eye,\n Heart,\n Minus,\n Plus,\n ShoppingCart,\n Star,\n Truck,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function InteractiveProductPreview01() {\n const [quantity, setQuantity] = useState(1)\n const [isFavorite, setIsFavorite] = useState(false)\n\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto text-center\">\n <Badge\n variant=\"outline\"\n className=\"border-primary/30 bg-primary/10 text-primary mb-4\"\n >\n Room Previewer\n </Badge>\n <h2 className=\"my-4 text-4xl font-bold tracking-tight\">\n Visualize Your Space\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg leading-relaxed\">\n Easily preview furniture, decor, and more in your space, ensuring\n everything fits perfectly and looks just right. It's the ultimate\n tool for hassle-free home customization and design!\n </p>\n </div>\n\n <div className=\"container mx-auto mt-14\">\n <div className=\"relative\">\n <img\n src=\"https://v3.material-tailwind.com/room.png\"\n alt=\"Room preview\"\n className=\"h-[680px] w-full rounded-2xl object-cover object-center shadow-2xl\"\n />\n <div className=\"absolute inset-0 h-full w-full rounded-2xl bg-gradient-to-tr from-black/30 via-black/10 to-transparent\" />\n\n <div className=\"absolute top-6 right-6 bottom-6 left-6 !ml-auto flex max-w-[26rem] flex-col justify-between rounded-2xl border border-white/30 bg-white/90 px-6 py-6 shadow-2xl backdrop-blur-xl dark:bg-gray-900/90\">\n <div>\n <div className=\"mb-4 flex items-start justify-between\">\n <Badge className=\"bg-green-500 text-white\">New Arrival</Badge>\n <Button\n variant=\"ghost\"\n size=\"icon\"\n className={`h-9 w-9 transition-colors ${\n isFavorite\n ? \"text-red-500 hover:text-red-600\"\n : \"text-muted-foreground hover:text-red-500\"\n }`}\n onClick={() => setIsFavorite(!isFavorite)}\n >\n <Heart\n className={`h-5 w-5 ${isFavorite ? \"fill-current\" : \"\"}`}\n />\n </Button>\n </div>\n\n <div className=\"mx-auto mb-6 grid place-items-center\">\n <div className=\"bg-muted/50 mb-4 rounded-xl p-6\">\n <img\n src=\"https://v3.material-tailwind.com/vase.svg\"\n alt=\"Vase\"\n className=\"h-32 w-32\"\n />\n </div>\n <h3 className=\"text-2xl font-bold\">Elegant Ceramic Vase</h3>\n\n <div className=\"mt-3 flex items-center gap-2\">\n <div className=\"flex items-center gap-1\">\n {[1, 2, 3, 4, 5].map((star) => (\n <Star\n key={star}\n className=\"h-4 w-4 fill-yellow-400 text-yellow-400\"\n />\n ))}\n </div>\n <span className=\"text-muted-foreground text-sm\">\n (127 reviews)\n </span>\n </div>\n\n <div className=\"mt-4 flex items-baseline gap-2\">\n <p className=\"text-3xl font-bold\">$149.90</p>\n <span className=\"text-muted-foreground text-sm line-through\">\n $199.90\n </span>\n </div>\n </div>\n\n <p className=\"text-muted-foreground mx-auto max-w-xs text-center text-sm leading-relaxed\">\n Add a touch of sophistication to your home with our handcrafted\n ceramic vase.\n </p>\n\n <div className=\"bg-muted/50 mb-2 flex items-center justify-center gap-2 rounded-lg py-3\">\n <Truck className=\"h-4 w-4 text-green-600 dark:text-green-400\" />\n <span className=\"text-sm font-medium\">\n Free shipping on orders over $100\n </span>\n </div>\n\n <div className=\"mb-4 flex items-center justify-center gap-3\">\n <span className=\"text-sm font-medium\">Quantity:</span>\n <div className=\"flex items-center gap-2\">\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8\"\n onClick={() => setQuantity(Math.max(1, quantity - 1))}\n >\n <Minus className=\"h-3 w-3\" />\n </Button>\n <span className=\"w-8 text-center font-semibold\">\n {quantity}\n </span>\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"h-8 w-8\"\n onClick={() => setQuantity(quantity + 1)}\n >\n <Plus className=\"h-3 w-3\" />\n </Button>\n </div>\n </div>\n\n <div className=\"flex items-center gap-2\">\n <Button className=\"flex-1 gap-2\" size=\"lg\">\n <ShoppingCart className=\"h-4 w-4\" />\n Add to Cart\n </Button>\n <Button variant=\"outline\" size=\"lg\" className=\"shrink-0 gap-2\">\n <Eye className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n </div>\n\n <div className=\"absolute hidden lg:flex\">\n <div className=\"group relative grid h-12 w-12 translate-x-[17rem] -translate-y-[30rem] cursor-pointer place-content-center rounded-full border-2 border-white bg-white shadow-xl transition-all hover:scale-110\">\n <div className=\"bg-primary h-4 w-4 animate-pulse rounded-full\"></div>\n <div className=\"absolute -top-12 left-1/2 hidden -translate-x-1/2 rounded-lg bg-white px-3 py-1.5 text-sm font-medium whitespace-nowrap shadow-lg group-hover:block dark:bg-gray-900\">\n Ceramic Vase\n </div>\n </div>\n <div className=\"group relative grid h-12 w-12 translate-x-[26rem] -translate-y-[26rem] cursor-pointer place-content-center rounded-full border-2 border-white bg-white shadow-xl transition-all hover:scale-110\">\n <div className=\"bg-primary h-4 w-4 animate-pulse rounded-full\"></div>\n <div className=\"absolute -top-12 left-1/2 hidden -translate-x-1/2 rounded-lg bg-white px-3 py-1.5 text-sm font-medium whitespace-nowrap shadow-lg group-hover:block dark:bg-gray-900\">\n Wall Art\n </div>\n </div>\n <div className=\"group relative grid h-12 w-12 translate-x-[5rem] -translate-y-[21rem] cursor-pointer place-content-center rounded-full border-2 border-white bg-white shadow-xl transition-all hover:scale-110\">\n <div className=\"bg-primary h-4 w-4 animate-pulse rounded-full\"></div>\n <div className=\"absolute -top-12 left-1/2 hidden -translate-x-1/2 rounded-lg bg-white px-3 py-1.5 text-sm font-medium whitespace-nowrap shadow-lg group-hover:block dark:bg-gray-900\">\n Table Lamp\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/order-details-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/order-details/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useEffect, useState } from \"react\"\nimport {\n Archive,\n CheckCircle,\n Clock,\n FileText,\n Home,\n Mail,\n MapPin,\n Package,\n Phone,\n Truck,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\nimport { Separator } from \"@/components/ui/separator\"\n\nconst OPTIONS = [\n { title: \"Subtotal\", value: \"$1,780.00\" },\n { title: \"Shipping estimate\", value: \"$0\" },\n { title: \"Tax estimate\", value: \"$5\" },\n]\n\nexport default function OrderDetails01() {\n const [step, setStep] = useState(\"3\")\n const [isVertical, setIsVertical] = useState(false)\n\n useEffect(() => {\n const handleResize = () => {\n setIsVertical(window.innerWidth <= 768)\n }\n handleResize()\n window.addEventListener(\"resize\", handleResize)\n return () => window.removeEventListener(\"resize\", handleResize)\n }, [])\n\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <div className=\"mb-8 flex flex-wrap items-start justify-between gap-4\">\n <div>\n <div className=\"mb-3 flex items-center gap-3\">\n <h2 className=\"text-3xl font-bold\">Order #1234</h2>\n <Badge className=\"bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400\">\n In Transit\n </Badge>\n </div>\n <div className=\"flex items-center gap-4 text-sm\">\n <div className=\"text-muted-foreground flex items-center gap-2\">\n <Clock className=\"h-4 w-4\" />\n <span>\n Placed on <span className=\"font-semibold\">April 1, 2024</span>\n </span>\n </div>\n <div className=\"text-muted-foreground flex items-center gap-2\">\n <Package className=\"h-4 w-4\" />\n <span className=\"font-semibold\">1 item</span>\n </div>\n </div>\n </div>\n <Button className=\"gap-2\">\n <FileText className=\"h-4 w-4\" />\n View Invoice\n </Button>\n </div>\n\n <Card className=\"shadow-lg\">\n <CardHeader className=\"grid w-full grid-cols-1 gap-8 border-b p-6 md:grid-cols-2\">\n <div className=\"flex gap-4\">\n <div className=\"bg-muted/30 relative h-32 w-32 overflow-hidden rounded-xl border p-2 md:h-40 md:w-40\">\n <img\n src=\"https://v3.material-tailwind.com/coat-2.png\"\n alt=\"Premium Suit\"\n className=\"h-full w-full object-contain\"\n />\n </div>\n <div className=\"flex flex-1 flex-col justify-between\">\n <div className=\"space-y-2\">\n <h3 className=\"text-lg font-semibold\">Premium Suit</h3>\n <p className=\"text-2xl font-bold\">$790</p>\n <p className=\"text-muted-foreground text-sm leading-relaxed\">\n The time is now for it to be okay to be great. People in\n this world shun people for being great.\n </p>\n </div>\n <div className=\"mt-3 flex items-center gap-2\">\n <Badge variant=\"outline\">Size: M</Badge>\n <Badge variant=\"outline\">Qty: 1</Badge>\n </div>\n </div>\n </div>\n\n <div className=\"grid gap-6 sm:grid-cols-2\">\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-2\">\n <div className=\"bg-primary/10 flex h-8 w-8 items-center justify-center rounded-full\">\n <MapPin className=\"text-primary h-4 w-4\" />\n </div>\n <p className=\"font-semibold\">Delivery Address</p>\n </div>\n <p className=\"text-muted-foreground text-sm leading-relaxed\">\n 362 Ridgewood Avenue\n <br />\n Alaska 99669, USA\n </p>\n </div>\n\n <div className=\"space-y-3\">\n <div className=\"flex items-center gap-2\">\n <div className=\"bg-primary/10 flex h-8 w-8 items-center justify-center rounded-full\">\n <Mail className=\"text-primary h-4 w-4\" />\n </div>\n <p className=\"font-semibold\">Shipping Updates</p>\n </div>\n <div className=\"space-y-1 text-sm\">\n <p className=\"text-muted-foreground flex items-center gap-1.5\">\n <Mail className=\"h-3.5 w-3.5\" />\n michael@email.com\n </p>\n <p className=\"text-muted-foreground flex items-center gap-1.5\">\n <Phone className=\"h-3.5 w-3.5\" />\n (307) 682-8835\n </p>\n </div>\n <Button variant=\"outline\" size=\"sm\" className=\"mt-2\">\n Edit Contact\n </Button>\n </div>\n </div>\n </CardHeader>\n\n <CardContent className=\"w-full p-6 sm:p-8\">\n <div className=\"flex flex-col gap-8 lg:flex-row\">\n <div className=\"flex-1\">\n <h3 className=\"mb-6 text-lg font-semibold\">Order Timeline</h3>\n <div className=\"space-y-6\">\n <div className=\"flex gap-4\">\n <div className=\"flex flex-col items-center\">\n <div className=\"bg-primary flex h-10 w-10 items-center justify-center rounded-full shadow-md\">\n <Home className=\"h-5 w-5 text-white\" />\n </div>\n <div className=\"bg-primary my-2 w-0.5 flex-1\" />\n </div>\n <div className=\"pb-6\">\n <div className=\"mb-1 flex items-center gap-2\">\n <p className=\"font-semibold\">Order Placed</p>\n <Badge\n variant=\"outline\"\n className=\"border-green-500/30 bg-green-50 text-green-700 dark:bg-green-950/30 dark:text-green-400\"\n >\n Complete\n </Badge>\n </div>\n <p className=\"text-muted-foreground text-sm\">\n Your order was placed on April 1, 2024\n </p>\n </div>\n </div>\n\n <div className=\"flex gap-4\">\n <div className=\"flex flex-col items-center\">\n <div className=\"bg-primary flex h-10 w-10 items-center justify-center rounded-full shadow-md\">\n <CheckCircle className=\"h-5 w-5 text-white\" />\n </div>\n <div className=\"bg-primary my-2 w-0.5 flex-1\" />\n </div>\n <div className=\"pb-6\">\n <div className=\"mb-1 flex items-center gap-2\">\n <p className=\"font-semibold\">Order Confirmed</p>\n <Badge\n variant=\"outline\"\n className=\"border-green-500/30 bg-green-50 text-green-700 dark:bg-green-950/30 dark:text-green-400\"\n >\n Complete\n </Badge>\n </div>\n <p className=\"text-muted-foreground text-sm\">\n Your order has been confirmed on April 2, 2024\n </p>\n </div>\n </div>\n\n <div className=\"flex gap-4\">\n <div className=\"flex flex-col items-center\">\n <div className=\"bg-primary flex h-10 w-10 items-center justify-center rounded-full shadow-md\">\n <Archive className=\"h-5 w-5 text-white\" />\n </div>\n <div className=\"bg-border my-2 w-0.5 flex-1\" />\n </div>\n <div className=\"pb-6\">\n <div className=\"mb-1 flex items-center gap-2\">\n <p className=\"font-semibold\">Order Shipped</p>\n <Badge\n variant=\"outline\"\n className=\"border-blue-500/30 bg-blue-50 text-blue-700 dark:bg-blue-950/30 dark:text-blue-400\"\n >\n In Progress\n </Badge>\n </div>\n <p className=\"text-muted-foreground text-sm\">\n Your order has been shipped on April 3, 2024\n </p>\n </div>\n </div>\n\n <div className=\"flex gap-4\">\n <div className=\"flex flex-col items-center\">\n <div className=\"bg-muted flex h-10 w-10 items-center justify-center rounded-full border-2 border-dashed\">\n <Truck className=\"text-muted-foreground h-5 w-5\" />\n </div>\n </div>\n <div>\n <div className=\"mb-1 flex items-center gap-2\">\n <p className=\"text-muted-foreground font-semibold\">\n Order Delivered\n </p>\n <Badge\n variant=\"outline\"\n className=\"text-muted-foreground\"\n >\n Pending\n </Badge>\n </div>\n <p className=\"text-muted-foreground text-sm\">\n Expected delivery on April 6, 2024\n </p>\n </div>\n </div>\n </div>\n </div>\n\n <Separator className=\"lg:hidden\" />\n\n <div className=\"w-full lg:w-80\">\n <div className=\"bg-muted/30 rounded-xl border p-6\">\n <h3 className=\"mb-4 text-lg font-semibold\">Order Summary</h3>\n <div className=\"space-y-3\">\n {OPTIONS.map(({ title, value }) => (\n <div key={title} className=\"flex justify-between text-sm\">\n <span className=\"text-muted-foreground\">{title}</span>\n <span className=\"font-medium\">{value}</span>\n </div>\n ))}\n </div>\n <Separator className=\"my-4\" />\n <div className=\"flex items-center justify-between\">\n <span className=\"text-lg font-bold\">Order Total</span>\n <span className=\"text-2xl font-bold\">$1,785.00</span>\n </div>\n\n <div className=\"bg-primary/10 mt-6 flex items-start gap-2 rounded-lg p-4\">\n <Truck className=\"text-primary mt-0.5 h-5 w-5 shrink-0\" />\n <div className=\"space-y-1\">\n <p className=\"text-sm font-medium\">Track Your Order</p>\n <p className=\"text-muted-foreground text-xs\">\n Estimated delivery: April 6, 2024\n </p>\n </div>\n </div>\n </div>\n </div>\n </div>\n </CardContent>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/product-details-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/product-details/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { ChevronLeft, ChevronRight, Heart } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst IMAGES = [\n \"https://v3.material-tailwind.com/coat-1.png\",\n \"https://v3.material-tailwind.com/coat-2.png\",\n \"https://v3.material-tailwind.com/coat-3.png\",\n]\n\nconst SIZES = [\"XS\", \"S\", \"M\", \"L\"]\n\nexport default function ProductDetails01() {\n const [selectedSize, setSelectedSize] = useState(\"S\")\n const [currentIndex, setCurrentIndex] = useState(0)\n\n const nextSlide = () => {\n setCurrentIndex((prev) => (prev + 1) % IMAGES.length)\n }\n\n const prevSlide = () => {\n setCurrentIndex((prev) => (prev - 1 + IMAGES.length) % IMAGES.length)\n }\n\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <nav className=\"mb-4 flex text-sm\">\n <a href=\"#\" className=\"text-muted-foreground hover:text-foreground\">\n Store\n </a>\n <span className=\"mx-2\">/</span>\n <a href=\"#\" className=\"text-muted-foreground hover:text-foreground\">\n Designers\n </a>\n <span className=\"mx-2\">/</span>\n <span className=\"text-foreground\">Pink Blouse</span>\n </nav>\n <div className=\"mt-4 grid grid-cols-1 items-center gap-10 md:grid-cols-2\">\n <div>\n <Card className=\"py-10\">\n <CardContent className=\"relative p-0\">\n <div className=\"overflow-hidden\">\n <img\n src={IMAGES[currentIndex]}\n alt={`Product ${currentIndex + 1}`}\n className=\"mx-auto h-[30rem] object-cover transition-transform duration-300\"\n />\n </div>\n <Button\n variant=\"ghost\"\n size=\"icon\"\n onClick={prevSlide}\n className=\"absolute top-1/2 left-2 -translate-y-1/2 rounded-full\"\n >\n <ChevronLeft className=\"h-7 w-7\" />\n </Button>\n <Button\n variant=\"ghost\"\n size=\"icon\"\n onClick={nextSlide}\n className=\"absolute top-1/2 right-2 -translate-y-1/2 rounded-full\"\n >\n <ChevronRight className=\"h-7 w-7\" />\n </Button>\n </CardContent>\n </Card>\n </div>\n <div className=\"text-center\">\n <h2 className=\"mb-6 text-2xl font-bold\">Pink Blouse</h2>\n <p className=\"text-primary text-2xl font-semibold\">$1,290</p>\n <div className=\"my-8 flex items-center justify-center gap-2\">\n <div className=\"flex\">\n {[1, 2, 3, 4].map((star) => (\n <svg\n key={star}\n className=\"h-5 w-5 fill-yellow-400\"\n viewBox=\"0 0 20 20\"\n >\n <path d=\"M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z\" />\n </svg>\n ))}\n <svg className=\"h-5 w-5 fill-gray-300\" viewBox=\"0 0 20 20\">\n <path d=\"M10 15l-5.878 3.09 1.123-6.545L.489 6.91l6.572-.955L10 0l2.939 5.955 6.572.955-4.756 4.635 1.123 6.545z\" />\n </svg>\n </div>\n <span className=\"text-sm font-semibold\">100 Reviews</span>\n </div>\n <p className=\"text-muted-foreground [text-wrap:_balance]\">\n There's nothing I really wanted to do in life that I\n wasn't able to get good at. That's my skill. I'm\n not really specifically talented at anything except for the\n ability to learn.\n </p>\n <h3 className=\"mt-8 mb-4 text-center text-lg font-semibold\">\n Color\n </h3>\n <div className=\"flex justify-center gap-2\">\n <div className=\"h-5 w-5 cursor-pointer rounded bg-black\" />\n <div className=\"h-5 w-5 cursor-pointer rounded border bg-white\" />\n <div className=\"h-5 w-5 cursor-pointer rounded border bg-gray-200\" />\n </div>\n <h3 className=\"mt-8 mb-4 text-center text-lg font-semibold\">\n Size\n </h3>\n <div className=\"flex items-center justify-center gap-4\">\n {SIZES.map((size) => (\n <Button\n key={size}\n onClick={() => setSelectedSize(size)}\n variant={size === selectedSize ? \"default\" : \"outline\"}\n >\n {size}\n </Button>\n ))}\n </div>\n <div className=\"my-6 flex items-center justify-center gap-2\">\n <Button size=\"lg\" className=\"w-full max-w-60\">\n Add to Cart\n </Button>\n <Button size=\"lg\" variant=\"outline\" className=\"text-red-500\">\n <Heart className=\"h-5 w-5\" />\n </Button>\n </div>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/product-listing-filters-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/product-listing-filters/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport { Heart } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nconst FILTERS = [\n {\n id: \"categories\",\n label: \"Categories\",\n options: [\"All\", \"Shirts\", \"Pants\", \"Sweaters\", \"Jackets\"],\n },\n {\n id: \"size\",\n label: \"Size\",\n options: [\"All Sizes\", \"XS\", \"S\", \"M\", \"L\", \"XL\", \"XXL\"],\n },\n {\n id: \"material\",\n label: \"Material\",\n options: [\"All Materials\", \"Cotton\", \"Cashmere\", \"Wool\", \"Silk\", \"Linen\"],\n },\n {\n id: \"color\",\n label: \"Color\",\n options: [\"All Colors\", \"Black\", \"Blue\", \"Gray\", \"Brown\", \"White\", \"Navy\"],\n },\n {\n id: \"pattern\",\n label: \"Pattern\",\n options: [\"All Patterns\", \"Solid\", \"Striped\", \"Cable-knit\", \"Printed\"],\n },\n]\n\nconst PRODUCTS = [\n {\n id: 1,\n image:\n \"https://images.unsplash.com/photo-1574015974293-817f0ebebb74?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=973\",\n brand: \"Zegna\",\n name: \"Cable-knit cashmere cardigan\",\n price: \"€3,450\",\n badge: \"Exclusive\",\n },\n {\n id: 2,\n image:\n \"https://images.unsplash.com/photo-1559745482-57bfa9ca5a8a?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1481\",\n brand: \"Zegna\",\n name: \"Cotton and cashmere shirt\",\n price: \"€675\",\n badge: null,\n },\n {\n id: 3,\n image:\n \"https://images.unsplash.com/photo-1737608734653-d1eaad541d46?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1027\",\n brand: \"Zegna\",\n name: \"Wool straight pants\",\n price: \"€1,450\",\n badge: \"Exclusive\",\n },\n {\n id: 4,\n image:\n \"https://images.unsplash.com/photo-1661327930345-9c6714b603b3?auto=format&fit=crop&q=80&w=400&h=400\",\n brand: \"Zegna\",\n name: \"Cashmere sweater\",\n price: \"€1,950\",\n badge: \"New Arrival\",\n },\n]\n\nexport default function ProductListingFilters01() {\n const [favorites, setFavorites] = useState<number[]>([])\n const [selectedFilters, setSelectedFilters] = useState<\n Record<string, string>\n >({})\n\n const toggleFavorite = (productId: number) => {\n setFavorites((prev) =>\n prev.includes(productId)\n ? prev.filter((id) => id !== productId)\n : [...prev, productId]\n )\n }\n\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <div className=\"mb-8 flex flex-wrap items-center justify-between gap-4\">\n <div className=\"flex flex-wrap gap-2\">\n {FILTERS.map((filter) => (\n <Select\n key={filter.id}\n value={selectedFilters[filter.id] || filter.options[0]}\n onValueChange={(value) =>\n setSelectedFilters((prev) => ({\n ...prev,\n [filter.id]: value,\n }))\n }\n >\n <SelectTrigger className=\"w-[140px]\">\n <SelectValue placeholder={filter.label} />\n </SelectTrigger>\n <SelectContent>\n {filter.options.map((option) => (\n <SelectItem key={option} value={option}>\n {option}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n ))}\n </div>\n <div className=\"flex items-center gap-4\">\n <span className=\"text-muted-foreground text-sm\">462 Products</span>\n <Select defaultValue=\"featured\">\n <SelectTrigger className=\"w-[180px]\">\n <SelectValue placeholder=\"Sort by\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"featured\">Featured</SelectItem>\n <SelectItem value=\"price-low\">Price: Low to High</SelectItem>\n <SelectItem value=\"price-high\">Price: High to Low</SelectItem>\n <SelectItem value=\"newest\">Newest</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n\n <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n {PRODUCTS.map((product) => (\n <div\n key={product.id}\n className=\"group bg-card relative overflow-hidden rounded-lg border transition-all hover:shadow-lg\"\n >\n {product.badge && (\n <Badge\n variant=\"secondary\"\n className=\"absolute top-3 left-3 z-10 bg-white dark:bg-gray-900\"\n >\n {product.badge}\n </Badge>\n )}\n <button\n onClick={() => toggleFavorite(product.id)}\n className=\"absolute top-3 right-3 z-10 flex h-8 w-8 items-center justify-center rounded-full bg-white/90 backdrop-blur-sm transition-colors hover:bg-white dark:bg-gray-900/90 dark:hover:bg-gray-900\"\n >\n <Heart\n className={`h-4 w-4 transition-colors ${\n favorites.includes(product.id)\n ? \"fill-red-500 text-red-500\"\n : \"text-gray-600 dark:text-gray-400\"\n }`}\n />\n </button>\n\n <div className=\"bg-muted/30 aspect-square overflow-hidden\">\n <img\n src={product.image}\n alt={product.name}\n className=\"h-full w-full object-cover transition-transform duration-300 group-hover:scale-105\"\n />\n </div>\n\n <div className=\"border-t p-4\">\n <div className=\"mb-2 flex items-start justify-between gap-2\">\n <div className=\"flex-1\">\n <p className=\"text-sm font-semibold\">{product.brand}</p>\n <p className=\"text-muted-foreground mt-1 text-sm leading-tight\">\n {product.name}\n </p>\n </div>\n </div>\n <p className=\"mt-2 font-semibold\">{product.price}</p>\n </div>\n </div>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/ecommerce-sections-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/ecommerce-sections/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useEffect, useRef, useState } from \"react\"\nimport { Pause, Play, ShoppingBag, Shuffle } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst PRODUCTS = [\n {\n id: \"card-1\",\n media: {\n src: \"https://images.unsplash.com/photo-1595777457583-95e059d581b8?q=80&w=400&h=400&auto=format&fit=crop\",\n alt: \"Satin Wrap Dress product thumbnail\",\n },\n eyebrow: \"Maison Aurore\",\n title: \"Satin Wrap Dress\",\n description: \"Fluid silhouette with tie waist and soft sheen.\",\n price: \"$215.00\",\n },\n {\n id: \"card-2\",\n media: {\n src: \"https://images.unsplash.com/photo-1591369822096-ffd140ec948f?q=80&w=400&h=400&auto=format&fit=crop\",\n alt: \"Structured Blazer product thumbnail\",\n },\n eyebrow: \"Atelier No. 9\",\n title: \"Structured Blazer\",\n description: \"Sharp shoulders, single-breasted, polished finish.\",\n price: \"$329.00\",\n },\n {\n id: \"card-3\",\n media: {\n src: \"https://images.unsplash.com/photo-1543163521-1bf539c55dd2?q=80&w=400&h=400&auto=format&fit=crop\",\n alt: \"Chunky Chelsea Boots product thumbnail\",\n },\n eyebrow: \"Linea Forte\",\n title: \"Chunky Chelsea Boots\",\n description: \"Elevated lug sole with elastic side panels.\",\n price: \"From $180.00\",\n },\n]\n\nexport default function EcommerceSectionsBlock() {\n const [isPlaying, setIsPlaying] = useState(true)\n const playerRef = useRef<any>(null)\n const [playerReady, setPlayerReady] = useState(false)\n\n useEffect(() => {\n const tag = document.createElement(\"script\")\n tag.src = \"https://www.youtube.com/iframe_api\"\n const firstScriptTag = document.getElementsByTagName(\"script\")[0]\n firstScriptTag.parentNode?.insertBefore(tag, firstScriptTag)\n ;(window as any).onYouTubeIframeAPIReady = () => {\n playerRef.current = new (window as any).YT.Player(\"youtube-player\", {\n videoId: \"YCIuEU2y8XI\",\n playerVars: {\n autoplay: 1,\n mute: 1,\n loop: 1,\n playlist: \"YCIuEU2y8XI\",\n controls: 0,\n showinfo: 0,\n modestbranding: 1,\n playsinline: 1,\n },\n events: {\n onReady: () => {\n setPlayerReady(true)\n },\n },\n })\n }\n\n return () => {\n if (playerRef.current) {\n playerRef.current.destroy()\n }\n }\n }, [])\n\n const togglePlay = () => {\n if (playerRef.current && playerReady) {\n if (isPlaying) {\n playerRef.current.pauseVideo()\n } else {\n playerRef.current.playVideo()\n }\n setIsPlaying(!isPlaying)\n }\n }\n\n return (\n <section className=\"relative w-full overflow-hidden rounded-xl\">\n <div className=\"relative aspect-[16/9] w-full lg:aspect-[16/9]\">\n <div\n id=\"youtube-player\"\n className=\"absolute inset-0 h-full w-full rounded-xl\"\n style={{\n pointerEvents: \"none\",\n }}\n />\n\n <div className=\"absolute inset-0 bg-gradient-to-t from-black/80 via-black/30 to-transparent\" />\n\n <Button\n variant=\"outline\"\n size=\"icon\"\n className=\"absolute top-4 left-4 rounded-full bg-black/50 text-white backdrop-blur-sm hover:bg-black/70 hover:text-white lg:top-6 lg:left-6\"\n onClick={togglePlay}\n >\n {isPlaying ? (\n <Pause className=\"h-4 w-4\" />\n ) : (\n <Play className=\"h-4 w-4\" />\n )}\n </Button>\n\n <div className=\"absolute inset-x-0 bottom-0 space-y-6 p-4 lg:p-8\">\n <div className=\"mx-auto grid max-w-6xl gap-4 md:grid-cols-2 lg:grid-cols-3\">\n {PRODUCTS.map((product) => (\n <div\n key={product.id}\n className=\"flex items-center gap-4 rounded-2xl bg-white p-4 shadow-lg dark:bg-white/95\"\n >\n <div className=\"h-16 w-16 flex-shrink-0 overflow-hidden rounded-lg\">\n <img\n src={product.media.src}\n alt={product.media.alt}\n className=\"h-full w-full object-cover\"\n />\n </div>\n\n <div className=\"min-w-0 flex-1\">\n <p className=\"text-xs font-medium tracking-wide text-gray-500 uppercase\">\n {product.eyebrow}\n </p>\n <h3 className=\"truncate font-semibold text-gray-900\">\n {product.title}\n </h3>\n <p className=\"font-semibold text-gray-900\">{product.price}</p>\n </div>\n\n <div className=\"flex flex-shrink-0 items-center gap-2\">\n <Button\n variant=\"ghost\"\n size=\"icon\"\n className=\"h-8 w-8 text-gray-600 hover:text-gray-900\"\n >\n <ShoppingBag className=\"h-4 w-4\" />\n </Button>\n <Button\n variant=\"ghost\"\n size=\"icon\"\n className=\"h-8 w-8 text-gray-600 hover:text-gray-900\"\n >\n <Shuffle className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n ))}\n </div>\n\n <div className=\"flex justify-center\">\n <Button\n variant=\"outline\"\n size=\"lg\"\n className=\"rounded-full border-white/80 bg-white/10 px-8 text-white backdrop-blur-sm hover:bg-white/20 hover:text-white\"\n >\n VIEW ALL PRODUCTS\n </Button>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/ecommerce-sections-02/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/ecommerce-sections/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n ChevronDown,\n MapPin,\n Package,\n Ruler,\n ShoppingBag,\n Star,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\n\nexport default function EcommerceSections02() {\n const [selectedImage, setSelectedImage] = useState(0)\n const [selectedColor, setSelectedColor] = useState(1)\n const [isInfoOpen, setIsInfoOpen] = useState(false)\n\n const thumbnails = [\n `${process.env.NEXT_PUBLIC_ASSET_PREFIX}/placeholder.svg?height=80&width=80&text=Bag+1`,\n `${process.env.NEXT_PUBLIC_ASSET_PREFIX}/placeholder.svg?height=80&width=80&text=Bag+2`,\n `${process.env.NEXT_PUBLIC_ASSET_PREFIX}/placeholder.svg?height=80&width=80&text=Detail`,\n `${process.env.NEXT_PUBLIC_ASSET_PREFIX}/placeholder.svg?height=80&width=80&text=Inside`,\n `${process.env.NEXT_PUBLIC_ASSET_PREFIX}/placeholder.svg?height=80&width=80&text=Model`,\n `${process.env.NEXT_PUBLIC_ASSET_PREFIX}/placeholder.svg?height=80&width=80&text=Lifestyle`,\n ]\n\n const colors = [\n { name: \"Black\", hex: \"#1a1a1a\" },\n { name: \"Cream\", hex: \"#f5f0e8\" },\n { name: \"Forest Green\", hex: \"#7d9488\" },\n { name: \"Gray\", hex: \"#9ca3af\" },\n { name: \"Navy Blue\", hex: \"#0f172a\" },\n { name: \"Brown\", hex: \"#a0522d\" },\n ]\n\n const features = [\n { icon: ShoppingBag, text: \"Crossbody style\" },\n { icon: Package, text: \"Premium leather\" },\n { icon: Ruler, text: \"Adjustable strap\" },\n { icon: MapPin, text: \"Crafted in France\" },\n ]\n\n return (\n <div className=\"min-h-screen bg-neutral-50 p-4 sm:p-8\">\n <div className=\"mx-auto max-w-7xl\">\n <div className=\"grid gap-8 lg:grid-cols-[auto_1fr_1fr] lg:gap-12\">\n <div className=\"hidden lg:flex lg:flex-col lg:gap-3\">\n {thumbnails.map((thumb, index) => (\n <button\n key={index}\n onClick={() => setSelectedImage(index)}\n className={`h-20 w-20 overflow-hidden rounded-lg border-2 transition-all ${\n selectedImage === index\n ? \"border-neutral-900\"\n : \"border-neutral-200 hover:border-neutral-400\"\n }`}\n >\n <img\n src={thumb}\n alt={`Product view ${index + 1}`}\n className=\"h-full w-full object-cover\"\n />\n </button>\n ))}\n </div>\n\n <div className=\"flex items-start justify-center\">\n <div className=\"w-full max-w-lg\">\n <div className=\"aspect-square overflow-hidden rounded-2xl bg-white\">\n <img\n src={thumbnails[selectedImage]}\n alt=\"Product main view\"\n className=\"h-full w-full object-cover\"\n />\n </div>\n <div className=\"mt-4 flex gap-2 lg:hidden\">\n {thumbnails.slice(0, 4).map((thumb, index) => (\n <button\n key={index}\n onClick={() => setSelectedImage(index)}\n className={`h-16 w-16 overflow-hidden rounded-lg border-2 ${\n selectedImage === index\n ? \"border-neutral-900\"\n : \"border-neutral-200\"\n }`}\n >\n <img\n src={thumb}\n alt={`Thumbnail ${index + 1}`}\n className=\"h-full w-full object-cover\"\n />\n </button>\n ))}\n </div>\n </div>\n </div>\n\n <div className=\"flex flex-col\">\n <Badge\n variant=\"outline\"\n className=\"mb-4 w-fit border-neutral-300 text-xs font-medium text-neutral-600\"\n >\n Trending Now\n </Badge>\n\n <h1 className=\"mb-2 text-3xl font-light tracking-tight text-neutral-900 sm:text-4xl\">\n Artisan Leather Crossbody\n </h1>\n\n <div className=\"mb-6 flex items-center gap-4\">\n <span className=\"text-2xl font-normal text-neutral-900\">\n $385.00\n </span>\n <div className=\"flex items-center gap-1\">\n <div className=\"flex\">\n {[...Array(5)].map((_, i) => (\n <Star\n key={i}\n className={`h-4 w-4 ${\n i < 4\n ? \"fill-neutral-900 text-neutral-900\"\n : \"fill-neutral-900 text-neutral-900\"\n }`}\n />\n ))}\n </div>\n <span className=\"text-sm text-neutral-500\">(4.7)</span>\n </div>\n </div>\n\n <div className=\"mb-6\">\n <p className=\"mb-3 text-sm font-medium text-neutral-900\">\n Color:{\" \"}\n <span className=\"font-normal\">\n {colors[selectedColor].name}\n </span>\n </p>\n <div className=\"flex gap-2\">\n {colors.map((color, index) => (\n <button\n key={index}\n onClick={() => setSelectedColor(index)}\n className={`h-10 w-10 rounded-md border-2 transition-all ${\n selectedColor === index\n ? \"border-neutral-900 ring-2 ring-neutral-900 ring-offset-2\"\n : \"border-neutral-200 hover:border-neutral-400\"\n }`}\n style={{ backgroundColor: color.hex }}\n title={color.name}\n />\n ))}\n </div>\n </div>\n\n <p className=\"mb-4 text-sm leading-relaxed text-neutral-600\">\n Elegant crossbody bag crafted from premium vegetable-tanned\n leather with a minimalist silhouette. Features a secure magnetic\n clasp closure, interior zip compartment, and an adjustable\n shoulder strap for versatile wear.\n </p>\n\n <p className=\"mb-6 text-sm text-neutral-600\">\n This is a demo store. To buy this product, visit{\" \"}\n <a\n href=\"#\"\n className=\"font-medium text-neutral-900 underline underline-offset-2 hover:text-neutral-700\"\n >\n Maison Atelier\n </a>{\" \"}\n official store.\n </p>\n\n <div className=\"mb-6 flex flex-col gap-3 sm:flex-row\">\n <Button\n variant=\"outline\"\n size=\"lg\"\n className=\"flex-1 border-neutral-900 text-neutral-900 hover:bg-neutral-900 hover:text-white\"\n >\n Add to Cart\n </Button>\n <Button\n size=\"lg\"\n className=\"flex-1 bg-neutral-900 text-white hover:bg-neutral-800\"\n >\n Buy it Now\n </Button>\n </div>\n\n <div className=\"mb-6 grid grid-cols-2 gap-3\">\n {features.map((feature, index) => (\n <div\n key={index}\n className=\"flex items-center gap-2 text-sm text-neutral-600\"\n >\n <feature.icon className=\"h-4 w-4\" />\n <span>{feature.text}</span>\n </div>\n ))}\n </div>\n\n <div className=\"border-t border-neutral-200\">\n <button\n onClick={() => setIsInfoOpen(!isInfoOpen)}\n className=\"flex w-full items-center justify-between py-4 text-sm font-medium text-neutral-900 hover:text-neutral-600\"\n >\n More Information\n <ChevronDown\n className={`h-4 w-4 transition-transform ${\n isInfoOpen ? \"rotate-180\" : \"\"\n }`}\n />\n </button>\n {isInfoOpen && (\n <div className=\"pb-4 text-sm leading-relaxed text-neutral-600\">\n <p className=\"mb-3\">\n <strong>Materials & Care:</strong> This bag is made from\n 100% full-grain vegetable-tanned leather that develops a\n beautiful patina over time. Clean with a soft, dry cloth and\n condition regularly with leather cream.\n </p>\n <p className=\"mb-3\">\n <strong>Dimensions:</strong> 9.5\" W x 7\" H x 3\" D. Strap\n drop adjustable from 20\" to 24\". Weight: 1.2 lbs.\n </p>\n <p>\n <strong>Shipping & Returns:</strong> Free standard shipping\n on orders over $200. 30-day return policy with original\n receipt and tags attached.\n </p>\n </div>\n )}\n </div>\n </div>\n </div>\n </div>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/simple-faq-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/simple-faq/page.tsx",
|
|
"content": "export default function SimpleFaq01() {\n return (\n <section className=\"px-6 py-16\">\n <div className=\"mx-auto max-w-3xl\">\n <div className=\"mb-20 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold\">\n Frequently asked questions\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n A lot of people don't appreciate the moment until it's\n passed. I'm not trying my hardest, and I'm not trying to\n do\n </p>\n </div>\n <div className=\"mb-6\">\n <h3 className=\"border-b py-6 text-lg font-semibold\">\n How do I order?\n </h3>\n <p className=\"text-muted-foreground py-6 leading-relaxed\">\n We're not always in the position that we want to be at.\n We're constantly growing. We're constantly making\n mistakes. We're constantly trying to express ourselves and\n actualize our dreams. If you have the opportunity to play this game\n of life you need to appreciate every moment. A lot of people\n don't appreciate the moment until it's passed.\n </p>\n </div>\n <div className=\"mb-6\">\n <h3 className=\"border-b py-6 text-lg font-semibold\">\n How can i make the payment?\n </h3>\n <p className=\"text-muted-foreground py-6 leading-relaxed\">\n It really matters and then like it really doesn't matter. What\n matters is the people who are sparked by it. And the people who are\n like offended by it, it doesn't matter. Because it's about\n motivating the doers. Because I'm here to follow my dreams and\n inspire other people to follow their dreams, too. We're not\n always in the position that we want to be at. We're constantly\n growing. We're constantly making mistakes. We're\n constantly trying to express ourselves and actualize our dreams. If\n you have the opportunity to play this game of life you need to\n appreciate every moment. A lot of people don't appreciate the\n moment until it's passed.\n </p>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/faqs-list-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/faqs-list/page.tsx",
|
|
"content": "import {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\"\n\nconst DATA = [\n {\n value: \"one\",\n title: \"How do I order?\",\n desc: \"We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don't appreciate the moment until it's passed.\",\n },\n {\n value: \"two\",\n title: \"How can i make the payment?\",\n desc: \"It really matters and then like it really doesn't matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn't matter. Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too. We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don't appreciate the moment until it's passed.\",\n },\n {\n value: \"three\",\n title: \"How much time does it take to receive the order?\",\n desc: \"The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out. But the time is now to be okay to be the greatest you. Would you believe in what you believe in, if you were the only one who believed it? If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration. People are so scared to lose that they don't even try. Like, one thing people can't say is that I'm not trying, and I'm not trying my hardest, and I'm not trying to do the best way I know how.\",\n },\n {\n value: \"four\",\n title: \"Can I resell the products?\",\n desc: \"I always felt like I could do anything. That's the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can't do anything, you won't do anything. I was taught I could do everything. If everything I did failed - which it doesn't, it actually succeeds - just the fact that I'm willing to fail is an inspiration. People are so scared to lose that they don't even try. Like, one thing people can't say is that I'm not trying, and I'm not trying my hardest, and I'm not trying to do the best way I know how.\",\n },\n {\n value: \"five\",\n title: \"Where do I find the shipping details?\",\n desc: \"There's nothing I really wanted to do in life that I wasn't able to get good at. That's my skill. I'm not really specifically talented at anything except for the ability to learn. That's what I do. That's what I'm here for. Don't be afraid to be wrong because you can't learn anything from a compliment. I always felt like I could do anything. That's the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can't do anything, you won't do anything. I was taught I could do everything.\",\n },\n]\n\nexport default function FaqsList01() {\n return (\n <section className=\"px-6 py-16\">\n <div className=\"mx-auto max-w-3xl\">\n <div className=\"mb-20 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold\">\n Frequently asked questions\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n A lot of people don't appreciate the moment until it's\n passed. I'm not trying my hardest, and I'm not trying to\n do\n </p>\n </div>\n <Accordion type=\"single\" collapsible>\n {DATA.map(({ title, desc, value }, key) => (\n <AccordionItem key={key} value={value}>\n <AccordionTrigger>\n <h3 className=\"text-lg font-semibold\">{title}</h3>\n </AccordionTrigger>\n <AccordionContent className=\"text-muted-foreground leading-relaxed\">\n {desc}\n </AccordionContent>\n </AccordionItem>\n ))}\n </Accordion>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/faq-left-title-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/faq-left-title/page.tsx",
|
|
"content": "import { Card, CardContent, CardHeader } from \"@/components/ui/card\"\n\nconst DATA = [\n {\n title: \"How do I order?\",\n desc: \"We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don't appreciate the moment until it's passed.\",\n },\n {\n title: \"How can i make the payment?\",\n desc: \"It really matters and then like it really doesn't matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn't matter. Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too. We're not always in the position that we want to be at.\",\n },\n {\n title: \"How much time does it take to receive the order?\",\n desc: \"The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out. But the time is now to be okay to be the greatest you. Would you believe in what you believe in, if you were the only one who believed it?\",\n },\n {\n title: \"Can I resell the products?\",\n desc: \"I always felt like I could do anything. That's the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can't do anything, you won't do anything. I was taught I could do everything.\",\n },\n]\n\nexport default function FaqLeftTitle01() {\n return (\n <section className=\"px-6 py-16\">\n <div className=\"container mx-auto grid justify-between gap-6 lg:grid-cols-5\">\n <div className=\"col-span-2\">\n <h2 className=\"mb-4 text-3xl leading-snug font-bold\">\n Frequently asked questions\n </h2>\n <p className=\"text-muted-foreground max-w-sm text-lg\">\n A lot of people don't appreciate the moment until it's\n passed. I'm not trying my hardest, and I'm not trying to\n do\n </p>\n </div>\n <div className=\"col-span-3 grid grid-cols-1 gap-6 md:grid-cols-2\">\n {DATA.map(({ title, desc }, key) => (\n <Card key={key} className=\"border-none shadow-none\">\n <CardHeader className=\"px-6 gap-0 border-b\">\n <h3 className=\"text-lg font-semibold\">{title}</h3>\n </CardHeader>\n <CardContent className=\"px-6\">\n <p className=\"text-muted-foreground\">{desc}</p>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/faqs-grid-cta-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/faqs-grid-cta/page.tsx",
|
|
"content": "import { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\n\nconst DATA = [\n {\n title: \"How do I order?\",\n desc: \"We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don't appreciate the moment until it's passed.\",\n },\n {\n title: \"How can i make the payment?\",\n desc: \"It really matters and then like it really doesn't matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn't matter. Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too. We're not always in the position that we want to be at.\",\n },\n {\n title: \"How much time does it take to receive the order?\",\n desc: \"The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out. But the time is now to be okay to be the greatest you. Would you believe in what you believe in, if you were the only one who believed it?\",\n },\n {\n title: \"Can I resell the products?\",\n desc: \"I always felt like I could do anything. That's the main thing people are controlled by! Thoughts- their perception of themselves! They're slowed down by their perception of themselves. If you're taught you can't do anything, you won't do anything. I was taught I could do everything.\",\n },\n {\n title: \"Where do I find the shipping details?\",\n desc: \"There's nothing I really wanted to do in life that I wasn't able to get good at. That's my skill. I'm not really specifically talented at anything except for the ability to learn. That's what I do. That's what I'm here for. Don't be afraid to be wrong because you can't learn anything from a compliment.\",\n },\n {\n title: \"How do I order?\",\n desc: \"We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don't appreciate the moment until it's passed.\",\n },\n]\n\nexport default function FaqsGridCta01() {\n return (\n <section className=\"px-6 py-16\">\n <div className=\"container mx-auto\">\n <div className=\"mb-20 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold\">\n Frequently asked questions\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n A lot of people don't appreciate the moment until it's\n passed. I'm not trying my hardest, and I'm not trying to\n do\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n {DATA.map(({ title, desc }, key) => (\n <Card key={key}>\n <CardHeader className=\"border-b px-6 gap-0\">\n <h3 className=\"text-lg font-semibold\">{title}</h3>\n </CardHeader>\n <CardContent className=\"px-6\">\n <p className=\"text-muted-foreground\">{desc}</p>\n </CardContent>\n </Card>\n ))}\n </div>\n <div className=\"mt-20 text-center\">\n <h3 className=\"text-2xl font-bold\">Need more help?</h3>\n <p className=\"text-muted-foreground mx-auto mt-4 mb-6 text-lg\">\n Send us an email with more details about your specific needs.\n </p>\n <Button size=\"lg\">Submit a Request</Button>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/faqs-cards-icons-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/faqs-cards-icons/page.tsx",
|
|
"content": "import { CreditCard, ShoppingCart, Users } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\n\nconst DATA = [\n {\n icon: ShoppingCart,\n title: \"How do I order?\",\n desc: \"We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams. If you have the opportunity to play this game of life you need to appreciate every moment. A lot of people don't appreciate the moment until it's passed.\",\n },\n {\n icon: CreditCard,\n title: \"How can i make the payment?\",\n desc: \"It really matters and then like it really doesn't matter. What matters is the people who are sparked by it. And the people who are like offended by it, it doesn't matter. Because it's about motivating the doers. Because I'm here to follow my dreams and inspire other people to follow their dreams, too. We're not always in the position that we want to be at.\",\n },\n {\n icon: Users,\n title: \"How much time does it take to receive the order?\",\n desc: \"The time is now for it to be okay to be great. People in this world shun people for being great. For being a bright color. For standing out. But the time is now to be okay to be the greatest you. Would you believe in what you believe in, if you were the only one who believed it?\",\n },\n]\n\nexport default function FaqsCardsIcons01() {\n return (\n <section className=\"px-6 py-16\">\n <div className=\"container mx-auto\">\n <div className=\"text-center\">\n <h2 className=\"mb-4 text-3xl font-bold\">\n Frequently asked questions\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-xl text-lg\">\n A lot of people don't appreciate the moment until it's\n passed. I'm not trying my hardest, and I'm not trying to\n do\n </p>\n </div>\n <div className=\"my-20 grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n {DATA.map(({ icon: Icon, title, desc }, key) => (\n <Card key={key}>\n <CardHeader className=\"border-b gap-0\">\n <div className=\"bg-primary mb-6 grid h-12 w-12 place-items-center rounded-lg\">\n <Icon className=\"text-primary-foreground h-6 w-6\" />\n </div>\n <h3 className=\"text-base font-semibold\">{title}</h3>\n </CardHeader>\n <CardContent className=\"px-6\">\n <p className=\"text-muted-foreground\">{desc}</p>\n </CardContent>\n </Card>\n ))}\n </div>\n <div className=\"text-center\">\n <h3 className=\"text-2xl font-bold\">Need more help?</h3>\n <p className=\"text-muted-foreground mx-auto mt-4 mb-6 text-lg\">\n Send us an email with more details about your specific needs.\n </p>\n <Button size=\"lg\">Submit a Request</Button>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/faqs-grid-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/faqs-grid/page.tsx",
|
|
"content": "import {\n CreditCard,\n Package,\n RefreshCw,\n ShoppingCart,\n Store,\n Truck,\n} from \"lucide-react\"\n\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\n\nconst DATA = [\n {\n icon: ShoppingCart,\n title: \"How do I order?\",\n desc: \"Browse our collection, add items to your cart, and proceed to checkout. We accept multiple payment methods including credit cards, PayPal, and digital wallets for your convenience.\",\n },\n {\n icon: CreditCard,\n title: \"How can I make the payment?\",\n desc: \"We accept all major credit cards, debit cards, PayPal, Apple Pay, and Google Pay. All transactions are secured with industry-standard encryption to protect your information.\",\n },\n {\n icon: Truck,\n title: \"How much time does it take to receive the order?\",\n desc: \"Standard shipping takes 3-5 business days. Express shipping is available for 1-2 day delivery. International orders typically arrive within 7-14 business days depending on your location.\",\n },\n {\n icon: Store,\n title: \"Can I resell the products?\",\n desc: \"Products purchased for personal use cannot be resold without authorization. For wholesale or reseller inquiries, please contact our business development team at business@example.com.\",\n },\n {\n icon: Package,\n title: \"Where do I find the shipping details?\",\n desc: \"Shipping information is available in your account under 'Order History'. You'll receive tracking details via email once your order ships, allowing you to monitor delivery progress.\",\n },\n {\n icon: RefreshCw,\n title: \"What is your return policy?\",\n desc: \"We offer a 30-day return policy on most items. Products must be in original condition with tags attached. Refunds are processed within 5-7 business days after we receive your return.\",\n },\n]\n\nexport default function FaqsGrid01() {\n return (\n <section className=\"px-6 py-16\">\n <div className=\"container mx-auto\">\n <div className=\"mb-16 text-center\">\n <h2 className=\"mb-4 text-4xl font-bold\">\n Frequently Asked Questions\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n Find answers to common questions about our products, shipping, and\n policies. Can't find what you're looking for? Contact our support\n team.\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3\">\n {DATA.map(({ icon: Icon, title, desc }, key) => (\n <Card\n key={key}\n className=\"group hover:border-primary/50 transition-all hover:shadow-lg\"\n >\n <CardHeader className=\"px-6\">\n <div className=\"bg-primary/10 mb-3 flex h-12 w-12 items-center justify-center rounded-full\">\n <Icon className=\"text-primary h-6 w-6\" />\n </div>\n <h3 className=\"text-xl leading-tight\">{title}</h3>\n </CardHeader>\n <CardContent>\n <p className=\"text-muted-foreground leading-relaxed\">{desc}</p>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-01/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Mail, Phone, Ticket } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst OPTIONS = [\n {\n icon: Phone,\n info: \"+1(424) 535 3523\",\n },\n {\n icon: Mail,\n info: \"hello@mail.com\",\n },\n {\n icon: Ticket,\n info: \"Open Support Ticket\",\n },\n]\n\nexport default function ContactSections01() {\n return (\n <section className=\"grid min-h-screen place-items-center py-16\">\n <div className=\"container mx-auto grid grid-cols-1 items-center gap-10 lg:grid-cols-2\">\n <Card className=\"mx-auto p-6 lg:max-w-lg lg:p-12\">\n <h3 className=\"mb-6 text-2xl font-semibold\">Contact us</h3>\n <form action=\"#\" className=\"space-y-6\">\n <div className=\"grid grid-cols-1 gap-x-4 gap-y-6 lg:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"first-name\">First Name</Label>\n <Input id=\"first-name\" placeholder=\"John\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"last-name\">Last Name</Label>\n <Input id=\"last-name\" placeholder=\"Doe\" />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"someone@example.com\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\">Message</Label>\n <Textarea\n id=\"message\"\n placeholder=\"Something about your request.\"\n />\n </div>\n <div className=\"flex items-center gap-2\">\n <Checkbox id=\"privacy-policy\" />\n <Label\n htmlFor=\"privacy-policy\"\n className=\"cursor-pointer text-sm font-normal\"\n >\n You agree to your friendly{\" \"}\n <a href=\"#\" className=\"text-primary hover:underline\">\n Privacy Policy\n </a>\n </Label>\n </div>\n <Button className=\"w-full\">Send Message</Button>\n </form>\n </Card>\n <div className=\"mx-auto lg:max-w-lg\">\n <h2 className=\"mb-4 text-3xl font-bold\">Get in Touch</h2>\n <p className=\"text-muted-foreground text-lg lg:max-w-lg\">\n You need more information? Check what other persons are saying about\n our product. They are very happy with their purchase.\n </p>\n <div className=\"mt-14 space-y-4\">\n {OPTIONS.map(({ icon: Icon, info }, key) => (\n <div key={key} className=\"flex items-center gap-4\">\n <Icon className=\"h-5 w-5\" />\n <span>{info}</span>\n </div>\n ))}\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-02/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-02/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function ContactSections02() {\n return (\n <section className=\"grid min-h-screen w-full grid-cols-1 items-center md:grid-cols-2\">\n <div className=\"p-6 sm:p-12 lg:p-16\">\n <div className=\"mb-10\">\n <h2 className=\"my-4 text-3xl font-bold\">Contact us</h2>\n <p className=\"text-muted-foreground max-w-lg text-lg\">\n Whether you have questions or you would just like to say hello,\n contact us.\n </p>\n </div>\n <form action=\"#\" className=\"space-y-6\">\n <div className=\"grid grid-cols-1 gap-x-4 gap-y-6 lg:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"first-name\">First Name</Label>\n <Input id=\"first-name\" placeholder=\"John\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"last-name\">Last Name</Label>\n <Input id=\"last-name\" placeholder=\"Doe\" />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email Address</Label>\n <Input id=\"email\" type=\"email\" placeholder=\"someone@example.com\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"phone\">Phone Number</Label>\n <Input\n id=\"phone\"\n type=\"tel\"\n maxLength={16}\n placeholder=\"e.g., +1 123-456-7890\"\n pattern=\"^\\+\\d{1,3}\\s\\d{1,4}-\\d{1,4}-\\d{4}$\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\">Message</Label>\n <Textarea\n id=\"message\"\n placeholder=\"Something about your request.\"\n />\n </div>\n <div className=\"flex items-center gap-2\">\n <Checkbox id=\"privacy-policy\" />\n <Label\n htmlFor=\"privacy-policy\"\n className=\"cursor-pointer text-sm font-normal\"\n >\n You agree to your friendly{\" \"}\n <a href=\"#\" className=\"text-primary hover:underline\">\n Privacy Policy\n </a>\n </Label>\n </div>\n <Button className=\"w-full\">Send Message</Button>\n </form>\n </div>\n <img\n src=\"https://images.unsplash.com/photo-1658246944389-9e9ac0a85dda?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1064\"\n alt=\"contact\"\n className=\"hidden h-full w-full object-cover object-center md:block\"\n />\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-03/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-03/page.tsx",
|
|
"content": "\"use client\"\n\nimport {\n Dribbble,\n Facebook,\n Linkedin,\n Mail,\n Phone,\n Ticket,\n Twitter,\n} from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst DATA = [\n {\n icon: Phone,\n info: \"+1(424) 535 3523\",\n },\n {\n icon: Mail,\n info: \"hello@mail.com\",\n },\n {\n icon: Ticket,\n info: \"Open Support Ticket\",\n },\n]\n\nexport default function ContactSections03() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <div className=\"mb-16 text-center\">\n <h2 className=\"text-4xl font-bold\">Contact Us</h2>\n <p className=\"text-muted-foreground mx-auto mt-4 max-w-lg text-lg\">\n Any questions or remarks? Just write us a message!\n </p>\n </div>\n <Card className=\"grid grid-cols-1 gap-10 rounded-2xl p-8 shadow-xl lg:grid-cols-2 lg:p-10\">\n <form action=\"#\" className=\"space-y-6\">\n <div className=\"grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"first-name\" className=\"text-base\">\n First Name\n </Label>\n <Input id=\"first-name\" placeholder=\"John\" className=\"h-11\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"last-name\" className=\"text-base\">\n Last Name\n </Label>\n <Input id=\"last-name\" placeholder=\"Doe\" className=\"h-11\" />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\" className=\"text-base\">\n Email Address\n </Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"someone@example.com\"\n className=\"h-11\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\" className=\"text-base\">\n Message\n </Label>\n <Textarea\n id=\"message\"\n placeholder=\"Something about your request.\"\n rows={5}\n className=\"resize-none\"\n />\n </div>\n <Button className=\"w-full sm:w-auto sm:min-w-[150px]\" size=\"lg\">\n Send Message\n </Button>\n </form>\n <div className=\"flex flex-col justify-between rounded-xl bg-gradient-to-br from-gray-900 to-black p-8 lg:p-12\">\n <div>\n <h3 className=\"mb-4 text-2xl font-bold text-white\">\n Contact Information\n </h3>\n <p className=\"mb-12 max-w-lg text-gray-300\">\n Fill up the form and our Team will get back to you within 24\n hours.\n </p>\n <div className=\"space-y-6\">\n {DATA.map(({ icon: Icon, info }, key) => (\n <div key={key} className=\"flex items-center gap-4\">\n <div className=\"flex h-10 w-10 items-center justify-center rounded-full bg-white/10\">\n <Icon className=\"h-5 w-5 text-white\" />\n </div>\n <span className=\"text-gray-200\">{info}</span>\n </div>\n ))}\n </div>\n </div>\n <div className=\"mt-12 flex items-center gap-6\">\n <a\n href=\"#\"\n className=\"flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-gray-300 transition-all hover:bg-white/20 hover:text-white\"\n >\n <Twitter className=\"h-5 w-5\" />\n </a>\n <a\n href=\"#\"\n className=\"flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-gray-300 transition-all hover:bg-white/20 hover:text-white\"\n >\n <Linkedin className=\"h-5 w-5\" />\n </a>\n <a\n href=\"#\"\n className=\"flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-gray-300 transition-all hover:bg-white/20 hover:text-white\"\n >\n <Dribbble className=\"h-5 w-5\" />\n </a>\n <a\n href=\"#\"\n className=\"flex h-10 w-10 items-center justify-center rounded-full bg-white/10 text-gray-300 transition-all hover:bg-white/20 hover:text-white\"\n >\n <Facebook className=\"h-5 w-5\" />\n </a>\n </div>\n </div>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-04/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-04/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Mail, MapPin, Phone, User } from \"lucide-react\"\n\nconst OPTIONS = [\n {\n icon: MapPin,\n title: \"Address\",\n description: \"12124 First Street, nr 54\",\n },\n {\n icon: Mail,\n title: \"Email\",\n description: \"hello@email.com\",\n },\n {\n icon: Phone,\n title: \"Phone\",\n description: \"+1 (424) 535-3523\",\n },\n {\n icon: User,\n title: \"Contact\",\n description: \"Andrew Samian\",\n },\n]\n\nexport default function ContactSections04() {\n return (\n <section className=\"relative min-h-[70vh] w-full bg-cover bg-center\">\n <img\n src=\"https://images.unsplash.com/photo-1635700193352-80564c35434c?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2532\"\n alt=\"Background\"\n className=\"absolute inset-0 h-full w-full object-cover\"\n />\n <div className=\"absolute inset-0 bg-black/50\" />\n <div className=\"relative flex min-h-[70vh] flex-col items-center justify-center px-4 py-16 text-center\">\n <h2 className=\"mb-6 text-5xl font-bold text-white\">Got a Question?</h2>\n <p className=\"mx-auto mb-12 max-w-xl text-xl text-white/80\">\n We'd like to talk more about what you need\n </p>\n <div className=\"grid grid-cols-1 justify-items-center gap-x-8 gap-y-12 sm:grid-cols-2 lg:grid-cols-4\">\n {OPTIONS.map(({ icon: Icon, title, description }, key) => (\n <div\n key={key}\n className=\"group text-center transition-transform hover:scale-105\"\n >\n <div className=\"mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-xl bg-white/10 shadow-lg transition-all group-hover:bg-white/20 group-hover:shadow-xl\">\n <Icon className=\"h-8 w-8 text-white\" />\n </div>\n <p className=\"mb-2 text-xl font-bold text-white\">{title}</p>\n <p className=\"text-base text-gray-300\">{description}</p>\n </div>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-05/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-05/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst OPTIONS = [\"General Inquiry\", \"Product Support\"]\n\nexport default function ContactSections05() {\n const [selectedOption, setSelectedOption] = useState(\"\")\n\n return (\n <section className=\"bg-white py-16\">\n <div className=\"container mx-auto\">\n <div className=\"mb-20 text-center\">\n <Badge variant=\"secondary\">Customer Care</Badge>\n <h2 className=\"mt-8 mb-4 text-3xl font-bold\">\n We're Here to Help\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n Whether it's a question about our services, a request for\n technical assistance, or suggestions for improvement, our team is\n eager to hear from you.\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-x-16 gap-y-10 lg:grid-cols-2\">\n <img\n src=\"https://images.unsplash.com/photo-1638438134099-a91e5373aaf0?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2070\"\n alt=\"Contact\"\n className=\"h-full min-h-[400px] w-full rounded-2xl object-cover\"\n />\n <form\n action=\"#\"\n className=\"mx-auto max-w-lg space-y-6 lg:mx-0 lg:py-2\"\n >\n <div className=\"space-y-4\">\n <Label>Select Options for Business Engagement</Label>\n <div className=\"flex flex-wrap gap-2\">\n {OPTIONS.map((option) => (\n <Button\n key={option}\n type=\"button\"\n variant={selectedOption === option ? \"default\" : \"outline\"}\n onClick={() =>\n setSelectedOption((cur) => (cur === option ? \"\" : option))\n }\n >\n {option}\n </Button>\n ))}\n </div>\n </div>\n <div className=\"grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"first-name\">First Name</Label>\n <Input id=\"first-name\" placeholder=\"John\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"last-name\">Last Name</Label>\n <Input id=\"last-name\" placeholder=\"Doe\" />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"someone@example.com\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\">Message</Label>\n <Textarea\n id=\"message\"\n placeholder=\"Something about your request.\"\n />\n </div>\n <Button className=\"w-full\">Send Message</Button>\n </form>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-06/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-06/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Mail, MapPin, Phone } from \"lucide-react\"\n\nconst OPTIONS = [\n {\n icon: MapPin,\n title: \"Address\",\n subTitle: \"Find us at the office\",\n description: \"12124 First Street, nr 54\",\n },\n {\n icon: Mail,\n title: \"Email\",\n subTitle: \"Send us your feedback\",\n description: \"hello@email.com\",\n },\n {\n icon: Phone,\n title: \"Phone\",\n subTitle: \"Give us a ring\",\n description: \"+1 (424) 535-3523\",\n },\n]\n\nexport default function ContactSections06() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <div className=\"mb-16 text-center\">\n <span className=\"text-primary block text-sm font-semibold\">\n Contact Us\n </span>\n <h2 className=\"my-4 text-center text-3xl font-bold\">\n Got a Question?\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-lg text-center text-lg\">\n We'd like to talk more about what you need\n </p>\n </div>\n <div className=\"grid grid-cols-1 justify-items-center gap-x-8 gap-y-16 md:grid-cols-2 lg:grid-cols-3\">\n {OPTIONS.map(({ icon: Icon, title, subTitle, description }, key) => (\n <div key={key} className=\"text-center\">\n <div className=\"bg-primary mx-auto mb-6 grid h-14 w-14 place-items-center rounded-full\">\n <Icon className=\"text-primary-foreground h-6 w-6\" />\n </div>\n <p className=\"text-lg font-semibold\">{title}</p>\n <p className=\"text-muted-foreground my-3 block\">{subTitle}</p>\n <p>{description}</p>\n </div>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-07/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-07/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Mail, Phone } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst DATA = [\n {\n icon: Mail,\n title: \"Find us at the office\",\n options: [\"Bld Mihail Kogalniceanu, nr. 8,\", \"7652 Bucharest,\", \"Romania\"],\n },\n {\n icon: Phone,\n title: \"+1(424) 535 3523\",\n options: [\"Michael Jordan\", \"+40 762 321 762\", \"Mon - Fri, 8:00-22:00\"],\n },\n]\n\nexport default function ContactSections07() {\n return (\n <section className=\"grid min-h-screen place-items-center py-16\">\n <div className=\"container mx-auto grid grid-cols-1 items-center gap-10 lg:grid-cols-2\">\n <Card className=\"mx-auto p-6 lg:max-w-lg lg:p-12\">\n <h3 className=\"mb-2 text-2xl font-semibold\">Contact us</h3>\n <p className=\"text-muted-foreground mb-6\">\n We'd love to hear from you.\n </p>\n <form action=\"#\" className=\"space-y-6\">\n <div className=\"grid grid-cols-1 gap-x-4 gap-y-6 lg:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"first-name\">First Name</Label>\n <Input id=\"first-name\" placeholder=\"John\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"last-name\">Last Name</Label>\n <Input id=\"last-name\" placeholder=\"Doe\" />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"someone@example.com\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\">Message</Label>\n <Textarea\n id=\"message\"\n placeholder=\"Something about your request.\"\n />\n </div>\n <div className=\"flex items-center gap-2\">\n <Checkbox id=\"privacy-policy\" />\n <Label\n htmlFor=\"privacy-policy\"\n className=\"cursor-pointer text-sm font-normal\"\n >\n You agree to your friendly{\" \"}\n <a href=\"#\" className=\"text-primary hover:underline\">\n Privacy Policy\n </a>\n </Label>\n </div>\n <Button className=\"w-full\">Send Message</Button>\n </form>\n </Card>\n <div className=\"mx-auto space-y-10 lg:max-w-lg\">\n {DATA.map(({ icon: Icon, title, options }, key) => (\n <div key={key} className=\"flex gap-4\">\n <div className=\"shrink-0\">\n <Icon className=\"h-6 w-6\" />\n </div>\n <div>\n <h4 className=\"mb-2 font-semibold\">{title}</h4>\n {options.map((option, idx) => (\n <p key={idx} className=\"text-muted-foreground\">\n {option}\n </p>\n ))}\n </div>\n </div>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-08/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-08/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\nimport {\n Dribbble,\n Facebook,\n Linkedin,\n Mail,\n Phone,\n Ticket,\n Twitter,\n} from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst DATA = [\n {\n icon: Phone,\n info: \"+1(424) 535 3523\",\n },\n {\n icon: Mail,\n info: \"hello@mail.com\",\n },\n {\n icon: Ticket,\n info: \"Open Support Ticket\",\n },\n]\n\nconst OPTIONS = [\"Design\", \"Development\", \"Support\", \"Other\"]\n\nexport default function ContactSections08() {\n const [selectedOption, setSelectedOption] = useState(\"\")\n\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <div className=\"mb-16 text-center\">\n <h2 className=\"text-3xl font-bold\">Contact Us</h2>\n <p className=\"text-muted-foreground mx-auto mt-4 max-w-lg text-lg\">\n Any questions or remarks? Just write us a message!\n </p>\n </div>\n <Card className=\"grid grid-cols-1 gap-10 rounded-2xl p-4 lg:grid-cols-2 lg:p-6\">\n <div className=\"grid rounded-lg bg-black p-8 lg:place-items-center lg:p-16\">\n <div>\n <h2 className=\"mb-4 text-2xl font-bold text-white\">\n Contact Information\n </h2>\n <p className=\"mb-16 max-w-lg text-gray-400\">\n Fill up the form and our Team will get back to you within 24\n hours.\n </p>\n {DATA.map(({ icon: Icon, info }, key) => (\n <div key={key} className=\"mb-4 flex items-center gap-4\">\n <Icon className=\"h-5 w-5 text-gray-400\" />\n <span className=\"text-gray-400\">{info}</span>\n </div>\n ))}\n <div className=\"mt-12 flex items-center gap-6\">\n <a href=\"#\" className=\"text-gray-400 hover:text-white\">\n <Twitter className=\"h-6 w-6\" />\n </a>\n <a href=\"#\" className=\"text-gray-400 hover:text-white\">\n <Linkedin className=\"h-6 w-6\" />\n </a>\n <a href=\"#\" className=\"text-gray-400 hover:text-white\">\n <Dribbble className=\"h-6 w-6\" />\n </a>\n <a href=\"#\" className=\"text-gray-400 hover:text-white\">\n <Facebook className=\"h-6 w-6\" />\n </a>\n </div>\n </div>\n </div>\n <form action=\"#\" className=\"space-y-6 px-2 py-0 lg:py-2\">\n <div className=\"grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"first-name\">First Name</Label>\n <Input id=\"first-name\" placeholder=\"John\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"last-name\">Last Name</Label>\n <Input id=\"last-name\" placeholder=\"Doe\" />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"someone@example.com\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label>Area of Interest</Label>\n <RadioGroup\n value={selectedOption}\n onValueChange={setSelectedOption}\n >\n <div className=\"grid grid-cols-2 gap-4\">\n {OPTIONS.map((option) => (\n <div key={option} className=\"flex items-center space-x-2\">\n <RadioGroupItem value={option} id={option} />\n <Label\n htmlFor={option}\n className=\"cursor-pointer font-normal\"\n >\n {option}\n </Label>\n </div>\n ))}\n </div>\n </RadioGroup>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\">Message</Label>\n <Textarea\n id=\"message\"\n placeholder=\"Something about your request.\"\n />\n </div>\n <Button className=\"ml-auto flex max-w-fit\">Send Message</Button>\n </form>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-09/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-09/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Mail, Phone } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst DATA = [\n {\n icon: Mail,\n title: \"Find us at the office\",\n options: [\"Bld Mihail Kogalniceanu, nr. 8,\", \"7652 Bucharest,\", \"Romania\"],\n },\n {\n icon: Phone,\n title: \"+1(424) 535 3523\",\n options: [\"Michael Jordan\", \"+40 762 321 762\", \"Mon - Fri, 8:00-22:00\"],\n },\n]\n\nexport default function ContactSections09() {\n return (\n <section className=\"p-6\">\n <div className=\"grid items-center gap-6 rounded-xl bg-black p-4 lg:grid-cols-2 lg:p-8\">\n <div className=\"p-8 lg:mx-auto lg:max-w-lg lg:p-0\">\n <h2 className=\"mb-4 text-3xl font-bold text-white\">Get in Touch</h2>\n <p className=\"text-lg text-white lg:max-w-xl\">\n You need more information? Check what other persons are saying about\n our product. They are very happy with their purchase.\n </p>\n {DATA.map(({ icon: Icon, title, options }, key) => (\n <div key={key} className=\"mt-12\">\n <div className=\"mb-6 flex items-center gap-3\">\n <Icon className=\"h-7 w-7 text-white\" />\n <h4 className=\"text-lg font-semibold text-white\">{title}</h4>\n </div>\n <div className=\"ml-10 space-y-2\">\n {options.map((option, idx) => (\n <p key={idx} className=\"text-white\">\n {option}\n </p>\n ))}\n </div>\n </div>\n ))}\n </div>\n <Card className=\"p-6 lg:p-8\">\n <h3 className=\"mb-6 text-2xl font-semibold\">Contact us</h3>\n <form action=\"#\" className=\"space-y-6\">\n <div className=\"grid grid-cols-1 gap-x-4 gap-y-6 lg:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"first-name\">First Name</Label>\n <Input id=\"first-name\" placeholder=\"John\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"last-name\">Last Name</Label>\n <Input id=\"last-name\" placeholder=\"Doe\" />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email Address</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"someone@example.com\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\">Message</Label>\n <Textarea\n id=\"message\"\n placeholder=\"Something about your request.\"\n />\n </div>\n <div className=\"flex items-center gap-2\">\n <Checkbox id=\"privacy-policy\" />\n <Label\n htmlFor=\"privacy-policy\"\n className=\"cursor-pointer text-sm font-normal\"\n >\n You agree to your friendly{\" \"}\n <a href=\"#\" className=\"text-primary hover:underline\">\n Privacy Policy\n </a>\n </Label>\n </div>\n <Button className=\"w-full\">Send Message</Button>\n </form>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-10/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-10/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Mail, MapPin, Phone } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst OPTIONS = [\n {\n icon: MapPin,\n info: \"12124 First Street, nr 54\",\n },\n {\n icon: Phone,\n info: \"+1(424) 535 3523\",\n },\n {\n icon: Mail,\n info: \"hello@mail.com\",\n },\n]\n\nexport default function ContactSections10() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <h2 className=\"mb-16 text-center text-3xl font-bold\">Contact Us</h2>\n <div className=\"grid grid-cols-1 gap-10 lg:grid-cols-2\">\n <Card className=\"p-8\">\n <h3 className=\"mb-6 text-2xl font-semibold\">Send us a message</h3>\n <form action=\"#\" className=\"space-y-6\">\n <div className=\"grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"first-name\">First Name</Label>\n <Input id=\"first-name\" placeholder=\"John\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"last-name\">Last Name</Label>\n <Input id=\"last-name\" placeholder=\"Doe\" />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"someone@example.com\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"phone\">Phone Number</Label>\n <Input id=\"phone\" type=\"tel\" placeholder=\"+1 123-456-7890\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\">Message</Label>\n <Textarea\n id=\"message\"\n placeholder=\"Write your message here...\"\n />\n </div>\n <Button className=\"w-full\">Send Message</Button>\n </form>\n </Card>\n <div className=\"space-y-8\">\n <div>\n <h3 className=\"mb-4 text-2xl font-semibold\">Get in touch</h3>\n <p className=\"text-muted-foreground\">\n We're here to help and answer any question you might have.\n We look forward to hearing from you.\n </p>\n </div>\n <div className=\"space-y-6\">\n {OPTIONS.map(({ icon: Icon, info }, key) => (\n <div key={key} className=\"flex items-start gap-4\">\n <div className=\"bg-primary/10 grid h-10 w-10 shrink-0 place-items-center rounded-lg\">\n <Icon className=\"text-primary h-5 w-5\" />\n </div>\n <div className=\"pt-2\">\n <p className=\"font-medium\">{info}</p>\n </div>\n </div>\n ))}\n </div>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-11/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-11/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Mail, Phone } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function ContactSections11() {\n return (\n <section className=\"grid min-h-screen place-items-center bg-gradient-to-br from-stone-900 to-stone-800 py-16 text-white\">\n <div className=\"container mx-auto\">\n <div className=\"mb-12 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold\">Get In Touch</h2>\n <p className=\"mx-auto max-w-2xl text-stone-300\">\n Have a question or want to work together? Leave your details and\n we'll get back to you as soon as possible.\n </p>\n </div>\n <div className=\"mx-auto max-w-2xl\">\n <form\n action=\"#\"\n className=\"space-y-6 rounded-2xl bg-white/10 p-8 backdrop-blur-sm\"\n >\n <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"name\" className=\"text-white\">\n Name\n </Label>\n <Input\n id=\"name\"\n placeholder=\"Your name\"\n className=\"border-white/30 bg-white/20 text-white placeholder:text-stone-300\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\" className=\"text-white\">\n Email\n </Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"your@email.com\"\n className=\"border-white/30 bg-white/20 text-white placeholder:text-stone-300\"\n />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"subject\" className=\"text-white\">\n Subject\n </Label>\n <Input\n id=\"subject\"\n placeholder=\"How can we help?\"\n className=\"border-white/30 bg-white/20 text-white placeholder:text-stone-300\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\" className=\"text-white\">\n Message\n </Label>\n <Textarea\n id=\"message\"\n placeholder=\"Your message...\"\n rows={6}\n className=\"border-white/30 bg-white/20 text-white placeholder:text-stone-300\"\n />\n </div>\n <Button className=\"w-full\" size=\"lg\">\n Send Message\n </Button>\n </form>\n <div className=\"mt-12 flex justify-center gap-12\">\n <div className=\"text-center\">\n <Phone className=\"mx-auto mb-2 h-6 w-6\" />\n <p className=\"text-sm text-stone-300\">+1 (424) 535-3523</p>\n </div>\n <div className=\"text-center\">\n <Mail className=\"mx-auto mb-2 h-6 w-6\" />\n <p className=\"text-sm text-stone-300\">hello@mail.com</p>\n </div>\n </div>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-12/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-12/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function ContactSections12() {\n return (\n <section className=\"relative flex min-h-screen items-center py-20\">\n <div\n className=\"absolute inset-0 bg-cover bg-center opacity-20\"\n style={{\n backgroundImage:\n \"url('https://images.unsplash.com/photo-1497366216548-37526070297c?w=1200&auto=format&fit=crop')\",\n }}\n />\n <div className=\"relative z-10 container mx-auto\">\n <div className=\"mx-auto max-w-2xl\">\n <div className=\"mb-12 text-center\">\n <h2 className=\"mb-4 text-4xl font-bold\">Let's Talk</h2>\n <p className=\"text-muted-foreground text-lg\">\n Fill out the form below and we'll be in touch shortly.\n </p>\n </div>\n <form\n action=\"#\"\n className=\"bg-card space-y-6 rounded-2xl p-8 shadow-xl\"\n >\n <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"first-name\">First Name</Label>\n <Input id=\"first-name\" placeholder=\"John\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"last-name\">Last Name</Label>\n <Input id=\"last-name\" placeholder=\"Doe\" />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input id=\"email\" type=\"email\" placeholder=\"john@example.com\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"company\">Company</Label>\n <Input id=\"company\" placeholder=\"Your Company\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\">How can we help?</Label>\n <Textarea\n id=\"message\"\n placeholder=\"Tell us about your project...\"\n rows={5}\n />\n </div>\n <Button className=\"w-full\" size=\"lg\">\n Submit\n </Button>\n </form>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-13/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-13/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Clock, Mail, MapPin, Phone } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst CONTACT_INFO = [\n {\n icon: MapPin,\n title: \"Visit us\",\n info: \"123 Main Street, New York, NY 10001\",\n },\n {\n icon: Phone,\n title: \"Call us\",\n info: \"+1 (424) 535-3523\",\n },\n {\n icon: Mail,\n title: \"Email us\",\n info: \"hello@mail.com\",\n },\n {\n icon: Clock,\n title: \"Working hours\",\n info: \"Mon - Fri, 9:00 AM - 6:00 PM\",\n },\n]\n\nexport default function ContactSections13() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <div className=\"mb-16 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold\">Contact Information</h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n We're here to answer any questions you may have about our services.\n Reach out to us and we'll respond as soon as we can.\n </p>\n </div>\n <div className=\"mb-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-4\">\n {CONTACT_INFO.map(({ icon: Icon, title, info }, key) => (\n <Card key={key} className=\"p-6 text-center\">\n <div className=\"bg-primary/10 mx-auto mb-4 grid h-12 w-12 place-items-center rounded-full\">\n <Icon className=\"text-primary h-6 w-6\" />\n </div>\n <h3 className=\"mb-2 font-semibold\">{title}</h3>\n <p className=\"text-muted-foreground text-sm\">{info}</p>\n </Card>\n ))}\n </div>\n <Card className=\"mx-auto max-w-2xl p-8\">\n <h3 className=\"mb-6 text-2xl font-bold\">Send us a message</h3>\n <form action=\"#\" className=\"space-y-6\">\n <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"name\">Name</Label>\n <Input id=\"name\" placeholder=\"Your name\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email</Label>\n <Input id=\"email\" type=\"email\" placeholder=\"your@email.com\" />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\">Message</Label>\n <Textarea\n id=\"message\"\n placeholder=\"How can we help you?\"\n rows={5}\n />\n </div>\n <Button className=\"w-full\">Send Message</Button>\n </form>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-14/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-14/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Send } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function ContactSections14() {\n return (\n <section className=\"from-background to-muted/20 bg-gradient-to-b py-20\">\n <div className=\"container mx-auto max-w-4xl\">\n <div className=\"mb-12 text-center\">\n <span className=\"text-primary text-sm font-semibold\">\n GET IN TOUCH\n </span>\n <h2 className=\"mt-2 mb-4 text-4xl font-bold\">\n We'd Love to Hear From You\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n Whether you have a question about features, pricing, or anything\n else, our team is ready to answer all your questions.\n </p>\n </div>\n <form action=\"#\" className=\"space-y-8\">\n <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"name\">Full Name *</Label>\n <Input id=\"name\" placeholder=\"John Doe\" required />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Email Address *</Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"john@example.com\"\n required\n />\n </div>\n </div>\n <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"phone\">Phone Number</Label>\n <Input id=\"phone\" type=\"tel\" placeholder=\"+1 (555) 000-0000\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"subject\">Subject</Label>\n <Input id=\"subject\" placeholder=\"How can we help?\" />\n </div>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"message\">Message *</Label>\n <Textarea\n id=\"message\"\n placeholder=\"Tell us more about your inquiry...\"\n rows={6}\n required\n />\n </div>\n <div className=\"flex justify-center\">\n <Button size=\"lg\" className=\"gap-2\">\n <Send className=\"h-4 w-4\" />\n Send Message\n </Button>\n </div>\n </form>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/contact-sections-15/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/contact-sections-15/page.tsx",
|
|
"content": "\"use client\"\n\nimport { FileText, Headphones, MessageSquare } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nconst CONTACT_OPTIONS = [\n {\n icon: MessageSquare,\n title: \"Chat with Sales\",\n description: \"Speak to our sales team\",\n action: \"Start Chat\",\n },\n {\n icon: Headphones,\n title: \"Get Support\",\n description: \"We're here to help\",\n action: \"Contact Support\",\n },\n {\n icon: FileText,\n title: \"Documentation\",\n description: \"Browse our docs\",\n action: \"View Docs\",\n },\n]\n\nexport default function ContactSections15() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto\">\n <div className=\"grid items-center gap-12 lg:grid-cols-2\">\n <div>\n <h2 className=\"mb-4 text-4xl font-bold\">\n Let's start a conversation\n </h2>\n <p className=\"text-muted-foreground mb-8 text-lg\">\n We're always happy to help with any questions you might have. Get\n in touch with us and we'll respond as soon as possible.\n </p>\n <div className=\"space-y-6\">\n {CONTACT_OPTIONS.map(\n ({ icon: Icon, title, description, action }, key) => (\n <div key={key} className=\"flex items-start gap-4\">\n <div className=\"bg-primary/10 grid h-12 w-12 shrink-0 place-items-center rounded-lg\">\n <Icon className=\"text-primary h-6 w-6\" />\n </div>\n <div className=\"flex-1\">\n <h3 className=\"mb-1 font-semibold\">{title}</h3>\n <p className=\"text-muted-foreground mb-3 text-sm\">\n {description}\n </p>\n <Button variant=\"link\" className=\"h-auto p-0\">\n {action} →\n </Button>\n </div>\n </div>\n )\n )}\n </div>\n </div>\n <Card className=\"p-8\">\n <h3 className=\"mb-6 text-2xl font-bold\">Quick Contact</h3>\n <form action=\"#\" className=\"space-y-6\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"name\">Your Name</Label>\n <Input id=\"name\" placeholder=\"Enter your name\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Your Email</Label>\n <Input id=\"email\" type=\"email\" placeholder=\"Enter your email\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"phone\">Phone Number (Optional)</Label>\n <Input id=\"phone\" type=\"tel\" placeholder=\"Enter your phone\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"inquiry\">Your Inquiry</Label>\n <Input id=\"inquiry\" placeholder=\"What can we help you with?\" />\n </div>\n <Button className=\"w-full\">Submit</Button>\n </form>\n </Card>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/web3-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/web3-01/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\n\nconst DATA = [\n {\n img: \"https://v3.material-tailwind.com/pixel-art-1.svg\",\n name: \"yqaw...09v\",\n tokenId: \"475\",\n profession: \"trader\",\n profileImg: \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n },\n {\n img: \"https://v3.material-tailwind.com/pixel-art-2.svg\",\n name: \"yqaw...09v\",\n tokenId: \"476\",\n profession: \"owner\",\n profileImg: \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n },\n {\n img: \"https://v3.material-tailwind.com/pixel-art-3.svg\",\n name: \"yqaw...09v\",\n tokenId: \"477\",\n profession: \"trader\",\n profileImg: \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n },\n]\n\nexport default function Web301() {\n return (\n <section className=\"container mx-auto py-16\">\n <Card className=\"border shadow-sm\">\n <CardHeader className=\"p-6\">\n <Avatar className=\"h-12 w-12\">\n <AvatarImage\n src=\"https://v3.material-tailwind.com/pixel-art-1.svg\"\n alt=\"pixel art collection\"\n />\n <AvatarFallback>PA</AvatarFallback>\n </Avatar>\n <h1 className=\"mt-4 mb-1 text-2xl font-bold\">Pixelated Art</h1>\n <p className=\"text-muted-foreground max-w-2xl text-lg\">\n These NFTs capture the essence of imagination and innovation,\n offering a glimpse into the boundless potential of the digital\n world.\n </p>\n </CardHeader>\n <CardContent className=\"grid grid-cols-1 gap-6 p-6 sm:grid-cols-2 lg:grid-cols-3\">\n {DATA.map(({ img, name, tokenId, profession, profileImg }, key) => (\n <Card key={key} className=\"py-4\">\n <CardHeader className=\"px-4 gap-0\">\n <img\n src={img}\n alt={name}\n className=\"h-64 w-full rounded-md object-cover object-center\"\n />\n </CardHeader>\n <CardContent className=\"px-4\">\n <p className=\"text-muted-foreground mb-1 text-sm\">\n Pixelated Art\n </p>\n <h3 className=\"text-lg font-semibold\">Picture #{tokenId}</h3>\n <div className=\"mt-4 flex items-center justify-between\">\n <div className=\"flex items-center gap-4\">\n <Avatar className=\"h-6 w-6\">\n <AvatarImage src={profileImg} alt={name} />\n <AvatarFallback>{name[0]}</AvatarFallback>\n </Avatar>\n <p className=\"text-muted-foreground text-sm\">{name}</p>\n </div>\n <p className=\"text-primary text-sm capitalize\">\n {profession}\n </p>\n </div>\n </CardContent>\n </Card>\n ))}\n </CardContent>\n </Card>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/web3-02/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/web3-02/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Grid3x3, Heart, Menu } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\n\nconst DATA = [\n {\n img: \"https://v3.material-tailwind.com/nft-1.svg\",\n name: \"@thedreamytrees\",\n tokenId: \"876\",\n price: \"1,6 ETH\",\n },\n {\n img: \"https://v3.material-tailwind.com/nft-2.svg\",\n name: \"@lindemichael\",\n tokenId: \"877\",\n price: \"0,9 ETH\",\n },\n {\n img: \"https://v3.material-tailwind.com/nft-3.svg\",\n name: \"@mishastam\",\n tokenId: \"878\",\n price: \"1,3 ETH\",\n },\n]\n\nexport default function Web302() {\n return (\n <section className=\"container mx-auto py-16\">\n <Card className=\"border shadow-sm\">\n <CardHeader className=\"flex flex-row flex-wrap items-start justify-between gap-6 p-6\">\n <div>\n <Avatar className=\"h-10 w-10\">\n <AvatarImage\n src=\"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\"\n alt=\"emma\"\n />\n <AvatarFallback>EM</AvatarFallback>\n </Avatar>\n <h1 className=\"mt-4 mb-1 flex items-center gap-2 text-2xl font-bold\">\n Emma\n <Badge\n variant=\"outline\"\n className=\"border-blue-500 text-blue-500\"\n >\n ✓\n </Badge>\n </h1>\n <p className=\"text-muted-foreground text-lg\">130 Collections</p>\n </div>\n <div className=\"flex items-center gap-2\">\n <Button variant=\"outline\" size=\"icon\">\n <Menu className=\"h-4 w-4\" />\n </Button>\n <Button variant=\"outline\" size=\"icon\">\n <Grid3x3 className=\"h-4 w-4\" />\n </Button>\n <Button>Follow Me</Button>\n </div>\n </CardHeader>\n <CardContent className=\"grid grid-cols-1 gap-6 p-6 sm:grid-cols-2 lg:grid-cols-3\">\n {DATA.map(({ img, name, tokenId, price }, key) => (\n <Card key={key} className=\"py-4\">\n <CardHeader className=\"relative px-4 gap-0\">\n <img\n src={img}\n alt={name}\n className=\"h-72 w-full rounded-md object-cover object-center\"\n />\n <div className=\"absolute top-6 right-6 flex items-center gap-2\">\n <Badge\n variant=\"secondary\"\n className=\"border-white/50 bg-white/70 text-black backdrop-blur\"\n >\n Auction ends in 23h:03m:33s\n </Badge>\n <Button\n size=\"icon\"\n variant=\"secondary\"\n className=\"h-7 w-7 bg-white text-black hover:bg-white\"\n >\n <Heart className=\"h-3.5 w-3.5\" />\n </Button>\n </div>\n </CardHeader>\n <CardContent className=\"px-4\">\n <div className=\"mb-2 flex items-center justify-between gap-4\">\n <p className=\"text-muted-foreground text-sm\">\n Cosmic creatures\n </p>\n <div className=\"flex items-center gap-1\">\n <p className=\"text-muted-foreground text-sm\">Current bid</p>\n <div className=\"flex gap-1\">\n <img\n src=\"https://v3.material-tailwind.com/icon/eth.svg\"\n alt=\"ethereum\"\n className=\"h-4 w-4\"\n />\n <p className=\"text-sm font-semibold\">{price}</p>\n </div>\n </div>\n </div>\n <div className=\"flex items-center justify-between gap-4\">\n <h3 className=\"text-lg font-semibold\">Picture #{tokenId}</h3>\n <Button size=\"sm\">Place a Bid</Button>\n </div>\n </CardContent>\n </Card>\n ))}\n </CardContent>\n </Card>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/web3-03/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/web3-03/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Grid3x3, Menu } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nconst DATA = [\n {\n img: \"https://v3.material-tailwind.com/nft-1.svg\",\n name: \"@thedreamytrees\",\n desc: \"Owner\",\n profileImg: \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n price: \"1,3 BTC\",\n time: \"23h:03m:33s\",\n },\n {\n img: \"https://v3.material-tailwind.com/nft-2.svg\",\n name: \"@lindemichael\",\n desc: \"Creator\",\n profileImg: \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n price: \"0,4 BTC\",\n time: \"23h:03m:33s\",\n },\n {\n img: \"https://v3.material-tailwind.com/nft-3.svg\",\n name: \"@mishastam\",\n desc: \"Owner\",\n profileImg: \"https://v3.material-tailwind.com/man-profile-2.jpg\",\n price: \"0,3 BTC\",\n time: \"23h:03m:33s\",\n },\n]\n\nexport default function Web303() {\n return (\n <section className=\"container mx-auto py-16\">\n <Card className=\"border shadow-sm\">\n <CardHeader className=\"flex flex-row flex-wrap items-start justify-between gap-6 p-6\">\n <div>\n <h1 className=\"mb-1 text-2xl font-bold\">Top Auctions</h1>\n <p className=\"text-muted-foreground max-w-2xl text-lg\">\n The most sought-after collections across the entire ecosystem.\n </p>\n </div>\n <div className=\"flex flex-wrap items-center gap-2\">\n <Select defaultValue=\"Last 24H\">\n <SelectTrigger className=\"w-max\">\n <SelectValue placeholder=\"Select Date\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"Last 6H\">Last 6H</SelectItem>\n <SelectItem value=\"Last 12H\">Last 12H</SelectItem>\n <SelectItem value=\"Last 24H\">Last 24H</SelectItem>\n </SelectContent>\n </Select>\n <Select defaultValue=\"Category 1\">\n <SelectTrigger className=\"w-max\">\n <SelectValue placeholder=\"Category\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"Category 1\">Category 1</SelectItem>\n <SelectItem value=\"Category 2\">Category 2</SelectItem>\n <SelectItem value=\"Category 3\">Category 3</SelectItem>\n </SelectContent>\n </Select>\n <Button variant=\"outline\" size=\"icon\">\n <Menu className=\"h-4 w-4\" />\n </Button>\n <Button variant=\"outline\" size=\"icon\">\n <Grid3x3 className=\"h-4 w-4\" />\n </Button>\n </div>\n </CardHeader>\n <CardContent className=\"grid grid-cols-1 gap-6 px-6 pt-0 pb-6 md:grid-cols-2 lg:grid-cols-3\">\n {DATA.map(({ img, name, desc, profileImg, price, time }, key) => (\n <Card key={key} className=\"overflow-hidden py-0\">\n <CardHeader className=\"relative p-0\">\n <img\n src={img}\n alt={name}\n className=\"h-80 w-full object-cover object-center\"\n />\n <Badge\n variant=\"secondary\"\n className=\"absolute bottom-4 left-4 flex items-center gap-2 border-white/50 bg-white/70 backdrop-blur\"\n >\n <Avatar className=\"h-7 w-7\">\n <AvatarImage src={profileImg} alt={name} />\n <AvatarFallback>{name[1]}</AvatarFallback>\n </Avatar>\n <div className=\"flex flex-col\">\n <span className=\"text-xs font-semibold text-black\">\n {name}\n </span>\n <span className=\"text-muted-foreground text-xs\">\n {desc}\n </span>\n </div>\n </Badge>\n </CardHeader>\n <CardContent className=\"px-4 pb-4\">\n <div className=\"flex items-center justify-between\">\n <div>\n <p className=\"text-muted-foreground text-sm\">Current bid</p>\n <p className=\"text-lg font-bold\">{price}</p>\n </div>\n <div>\n <p className=\"text-muted-foreground text-sm\">\n Auction ends in\n </p>\n <p className=\"text-sm font-semibold\">{time}</p>\n </div>\n </div>\n </CardContent>\n </Card>\n ))}\n </CardContent>\n </Card>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/web3-04/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/web3-04/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Cuboid, Grid3x3, Menu } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nconst DATA = [\n {\n price: \"9,999 NFTs\",\n img: \"https://v3.material-tailwind.com/nft-1.svg\",\n name: \"@thedreamytrees\",\n title: \"Dreamy Trees\",\n profileImg: \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n desc: \"Website visitors today demand a frictionless user experience.\",\n },\n {\n price: \"3,000 NFTs\",\n img: \"https://v3.material-tailwind.com/nft-2.svg\",\n name: \"@3dfaces\",\n title: \"Face NFTs\",\n profileImg: \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n desc: \"Website visitors today demand a frictionless user experience.\",\n },\n {\n price: \"9,999 NFTs\",\n img: \"https://v3.material-tailwind.com/nft-3.svg\",\n name: \"@theplanetsoftheuniverse\",\n title: \"The Planets Of The Universe\",\n profileImg: \"https://v3.material-tailwind.com/man-profile-2.jpg\",\n desc: \"Website visitors today demand a frictionless user experience.\",\n },\n]\n\nexport default function Web304() {\n return (\n <section className=\"container mx-auto py-16\">\n <Card className=\"border shadow-sm\">\n <CardContent className=\"p-6\">\n <div className=\"mb-6 flex flex-wrap items-start justify-between gap-6\">\n <div>\n <h1 className=\"mb-1 text-2xl font-bold\">Trending Collections</h1>\n <p className=\"text-muted-foreground max-w-2xl text-lg\">\n The most sought-after collections across the entire ecosystem.\n </p>\n </div>\n <div className=\"flex flex-wrap items-center gap-2\">\n <Select defaultValue=\"Last 24H\">\n <SelectTrigger className=\"w-max\">\n <SelectValue placeholder=\"Select Date\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"Last 6H\">Last 6H</SelectItem>\n <SelectItem value=\"Last 12H\">Last 12H</SelectItem>\n <SelectItem value=\"Last 24H\">Last 24H</SelectItem>\n </SelectContent>\n </Select>\n <Button variant=\"outline\" size=\"icon\">\n <Menu className=\"h-4 w-4\" />\n </Button>\n <Button variant=\"outline\" size=\"icon\">\n <Grid3x3 className=\"h-4 w-4\" />\n </Button>\n </div>\n </div>\n <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">\n {DATA.map(({ price, img, name, title, profileImg, desc }, key) => (\n <Card key={key} className=\"relative overflow-hidden\">\n <img\n src={img}\n alt={name}\n className=\"absolute inset-0 h-full w-full object-cover object-center\"\n />\n <div className=\"absolute inset-0 h-full w-full bg-gradient-to-t from-black/80 to-black/20\" />\n <CardContent className=\"relative z-10 flex h-[28rem] flex-col justify-between p-6\">\n <Badge\n variant=\"secondary\"\n className=\"w-fit border-white/30 bg-white/20 text-white backdrop-blur\"\n >\n <Cuboid className=\"mr-1 h-4 w-4\" />\n Collection\n </Badge>\n <div>\n <h3 className=\"mb-1 flex items-center gap-2 text-xl font-semibold text-white\">\n {title}\n <Badge\n variant=\"outline\"\n className=\"border-blue-400 text-blue-400\"\n >\n ✓\n </Badge>\n </h3>\n <p className=\"mb-4 text-sm text-gray-300\">{desc}</p>\n <div className=\"flex items-center justify-between\">\n <div className=\"flex items-center gap-2\">\n <Avatar className=\"h-8 w-8\">\n <AvatarImage src={profileImg} alt={name} />\n <AvatarFallback>{name[1]}</AvatarFallback>\n </Avatar>\n <p className=\"text-sm text-white\">{name}</p>\n </div>\n <p className=\"text-sm font-semibold text-white\">\n {price}\n </p>\n </div>\n </div>\n </CardContent>\n </Card>\n ))}\n </div>\n </CardContent>\n </Card>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/web3-05/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/web3-05/page.tsx",
|
|
"content": "\"use client\"\n\nimport { useState } from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader } from \"@/components/ui/card\"\n\nconst DATA = [\n {\n tokenId: \"#1\",\n profileImg: \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Tina Andrew\",\n desc: \"Creator\",\n imgs: [\n \"https://v3.material-tailwind.com/nft-1.svg\",\n \"https://v3.material-tailwind.com/nft-2.svg\",\n \"https://v3.material-tailwind.com/nft-4.svg\",\n ],\n },\n {\n tokenId: \"#2\",\n profileImg: \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Linde Michael\",\n desc: \"Creator\",\n imgs: [\n \"https://v3.material-tailwind.com/pixel-art-1.svg\",\n \"https://v3.material-tailwind.com/pixel-art-2.svg\",\n \"https://v3.material-tailwind.com/pixel-art-3.svg\",\n ],\n },\n {\n tokenId: \"#3\",\n profileImg: \"https://v3.material-tailwind.com/man-profile-2.jpg\",\n name: \"Misha Stam\",\n desc: \"Creator\",\n imgs: [\n \"https://v3.material-tailwind.com/nft-3.svg\",\n \"https://v3.material-tailwind.com/nft-3.svg\",\n \"https://v3.material-tailwind.com/nft-3.svg\",\n ],\n },\n]\n\nexport default function Web305() {\n const [timeFrame, setTimeFrame] = useState(\"month\")\n\n return (\n <section className=\"container mx-auto py-16\">\n <Card className=\"border shadow-sm\">\n <CardHeader className=\"flex flex-row flex-wrap items-start justify-between gap-6 p-6\">\n <div>\n <h1 className=\"mb-1 text-2xl font-bold\">Top Creators</h1>\n <p className=\"text-muted-foreground max-w-2xl text-lg\">\n The most sought-after collections across the entire ecosystem.\n </p>\n </div>\n <div className=\"flex flex-wrap items-center gap-2\">\n <Button\n size=\"sm\"\n variant={timeFrame === \"hour\" ? \"default\" : \"outline\"}\n onClick={() => setTimeFrame(\"hour\")}\n >\n Last 24h\n </Button>\n <Button\n size=\"sm\"\n variant={timeFrame === \"week\" ? \"default\" : \"outline\"}\n onClick={() => setTimeFrame(\"week\")}\n >\n Last week\n </Button>\n <Button\n size=\"sm\"\n variant={timeFrame === \"month\" ? \"default\" : \"outline\"}\n onClick={() => setTimeFrame(\"month\")}\n >\n Last month\n </Button>\n </div>\n </CardHeader>\n <CardContent className=\"grid grid-cols-1 gap-6 px-6 pt-0 pb-6 md:grid-cols-2 lg:grid-cols-3\">\n {DATA.map(({ tokenId, profileImg, name, desc, imgs }, key) => (\n <Card key={key} className=\"flex flex-col justify-between py-4\">\n <CardHeader className=\"px-4 gap-0\">\n <p className=\"font-semibold\">{tokenId}</p>\n <div className=\"mt-4 flex flex-wrap items-start justify-between gap-4\">\n <div className=\"flex items-start gap-3\">\n <Avatar>\n <AvatarImage src={profileImg} alt={name} />\n <AvatarFallback>{name[0]}</AvatarFallback>\n </Avatar>\n <div>\n <p className=\"font-semibold\">{name}</p>\n <p className=\"text-muted-foreground text-sm\">{desc}</p>\n </div>\n </div>\n <Button size=\"sm\" variant=\"outline\">\n See Collection\n </Button>\n </div>\n </CardHeader>\n <CardContent className=\"grid grid-cols-3 gap-4 px-4\">\n {imgs.map((img, idx) => (\n <img\n key={idx}\n src={img}\n alt={`nft-${idx}`}\n className=\"h-full min-h-24 w-full rounded-lg object-cover object-center\"\n />\n ))}\n </CardContent>\n </Card>\n ))}\n </CardContent>\n </Card>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/cruds-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/cruds-01/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function Cruds01() {\n return (\n <section className=\"grid min-h-screen place-items-center py-16\">\n <Card className=\"mx-auto w-full max-w-2xl p-6 lg:p-8\">\n <div className=\"mb-6\">\n <h3 className=\"text-2xl font-semibold\">Edit Apparel Item</h3>\n <p className=\"text-muted-foreground mt-1 text-sm\">\n Update product information, pricing, and categorization for your\n fashion inventory.\n </p>\n </div>\n <form action=\"#\" className=\"space-y-6\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"productName\">Product Name</Label>\n <Input\n id=\"productName\"\n name=\"productName\"\n type=\"text\"\n placeholder=\"e.g. Slim Fit Denim Jacket\"\n />\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"brand\">Designer Brand</Label>\n <Input\n id=\"brand\"\n name=\"brand\"\n type=\"text\"\n placeholder=\"e.g. Balenciaga\"\n />\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"price\">Retail Price ($)</Label>\n <Input\n id=\"price\"\n name=\"price\"\n type=\"number\"\n placeholder=\"e.g. 199\"\n />\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"category\">Category</Label>\n <Select name=\"category\">\n <SelectTrigger id=\"category\" className=\"w-full\">\n <SelectValue placeholder=\"Select a category\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"outerwear\">Outerwear</SelectItem>\n <SelectItem value=\"tops\">Tops</SelectItem>\n <SelectItem value=\"bottoms\">Bottoms</SelectItem>\n <SelectItem value=\"footwear\">Footwear</SelectItem>\n <SelectItem value=\"accessories\">Accessories</SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"description\">Product Details</Label>\n <Textarea\n id=\"description\"\n name=\"description\"\n placeholder=\"Material, fit, washing instructions...\"\n rows={4}\n />\n </div>\n\n <div className=\"flex gap-4\">\n <Button type=\"submit\" className=\"flex-1\">\n Save Changes\n </Button>\n <Button type=\"button\" variant=\"destructive\" className=\"flex-1\">\n Remove Item\n </Button>\n </div>\n </form>\n </Card>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/cruds-02/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/cruds-02/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function Cruds02() {\n return (\n <section className=\"grid min-h-screen place-items-center py-16\">\n <Card className=\"mx-auto w-full max-w-2xl p-6 lg:p-8\">\n <div className=\"mb-6\">\n <h3 className=\"text-2xl font-semibold\">\n Update Retail Staff Profile\n </h3>\n <p className=\"text-muted-foreground mt-1 text-sm\">\n Manage employee account credentials and contact information for\n retail team members.\n </p>\n </div>\n <form action=\"#\" className=\"space-y-6\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"username\">Username</Label>\n <Input\n id=\"username\"\n name=\"username\"\n type=\"text\"\n placeholder=\"e.g. elena.moreno\"\n />\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\">Work Email</Label>\n <Input\n id=\"email\"\n name=\"email\"\n type=\"email\"\n placeholder=\"e.g. elena@fashionco.com\"\n />\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"password\">New Password</Label>\n <Input id=\"password\" name=\"password\" type=\"password\" />\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"confirmPassword\">Confirm Password</Label>\n <Input\n id=\"confirmPassword\"\n name=\"confirmPassword\"\n type=\"password\"\n />\n </div>\n\n <Button type=\"submit\" className=\"w-full\">\n Update Profile\n </Button>\n </form>\n </Card>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/cruds-03/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/cruds-03/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Upload } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function Cruds03() {\n return (\n <section className=\"grid min-h-screen place-items-center py-16\">\n <Card className=\"mx-auto w-full max-w-3xl p-6 lg:p-8\">\n <div className=\"mb-6\">\n <h3 className=\"text-2xl font-semibold\">Stylist Account Settings</h3>\n <p className=\"text-muted-foreground mt-1 text-sm\">\n Configure your profile, roles, and permissions for your stylist\n account.\n </p>\n </div>\n <form action=\"#\" className=\"space-y-6\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"avatar\">Profile Photo</Label>\n <div className=\"flex items-center gap-4\">\n <div className=\"flex h-24 w-24 items-center justify-center rounded-lg border-2 border-dashed\">\n <Upload className=\"text-muted-foreground h-8 w-8\" />\n </div>\n <div className=\"flex-1\">\n <p className=\"text-muted-foreground text-sm\">\n PNG, JPG, JPEG or GIF (max. 800x400px)\n </p>\n <Input\n id=\"avatar\"\n name=\"avatar\"\n type=\"file\"\n accept=\".png,.jpg,.jpeg,.gif\"\n className=\"mt-2\"\n />\n </div>\n </div>\n </div>\n\n <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"firstName\">First Name</Label>\n <Input id=\"firstName\" name=\"firstName\" type=\"text\" />\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"lastName\">Last Name</Label>\n <Input id=\"lastName\" name=\"lastName\" type=\"text\" />\n </div>\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"contactEmail\">Contact Email</Label>\n <Input id=\"contactEmail\" name=\"contactEmail\" type=\"email\" />\n </div>\n\n <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"userRole\">Role</Label>\n <Select name=\"userRole\">\n <SelectTrigger id=\"userRole\" className=\"w-full\">\n <SelectValue placeholder=\"Select a role\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"stylist\">Stylist</SelectItem>\n <SelectItem value=\"store-manager\">Store Manager</SelectItem>\n <SelectItem value=\"creative-lead\">Creative Lead</SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"languages\">Languages</Label>\n <Input\n id=\"languages\"\n name=\"languages\"\n type=\"text\"\n placeholder=\"e.g. English, Italian\"\n />\n </div>\n </div>\n\n <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"jobTitle\">Job Title</Label>\n <Input\n id=\"jobTitle\"\n name=\"jobTitle\"\n type=\"text\"\n placeholder=\"e.g. Fashion Consultant\"\n />\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"accountType\">Account Type</Label>\n <Select name=\"accountType\">\n <SelectTrigger id=\"accountType\" className=\"w-full\">\n <SelectValue placeholder=\"Select account type\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"basic\">Basic</SelectItem>\n <SelectItem value=\"pro\">Pro</SelectItem>\n <SelectItem value=\"executive\">Executive</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n\n <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"permissionLevel\">Permission Level</Label>\n <Select name=\"permissionLevel\">\n <SelectTrigger id=\"permissionLevel\" className=\"w-full\">\n <SelectValue placeholder=\"Select permission level\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"admin\">Admin</SelectItem>\n <SelectItem value=\"operational\">Operational</SelectItem>\n <SelectItem value=\"viewer\">Viewer</SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"emailStatus\">Email Verified</Label>\n <Input\n id=\"emailStatus\"\n name=\"emailStatus\"\n type=\"text\"\n value=\"Verified\"\n disabled\n />\n </div>\n </div>\n\n <div className=\"flex gap-4\">\n <Button type=\"button\" variant=\"secondary\" className=\"flex-1\">\n Upload New Photo\n </Button>\n <Button type=\"button\" variant=\"destructive\" className=\"flex-1\">\n Delete Account\n </Button>\n </div>\n </form>\n </Card>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-01/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Github, Instagram, Twitter, Youtube } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst YEAR = new Date().getFullYear()\n\nexport default function Footers01() {\n return (\n <footer className=\"pt-16 pb-8\">\n <div className=\"container mx-auto\">\n <div className=\"flex flex-row flex-wrap items-center !justify-center gap-x-10 gap-y-2 md:!justify-between\">\n <p className=\"text-foreground text-center text-sm font-medium\">\n All rights reserved. Copyright © {YEAR} Creative Tim.\n </p>\n <div className=\"flex gap-1\">\n <Button asChild variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\">\n <a href=\"#\" aria-label=\"Twitter\">\n <Twitter className=\"h-4 w-4\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\">\n <a href=\"#\" aria-label=\"YouTube\">\n <Youtube className=\"h-4 w-4\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\">\n <a href=\"#\" aria-label=\"Instagram\">\n <Instagram className=\"h-4 w-4\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\">\n <a href=\"#\" aria-label=\"GitHub\">\n <Github className=\"h-4 w-4\" />\n </a>\n </Button>\n </div>\n </div>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-02/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-02/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nconst LINKS = [\n {\n title: \"Company\",\n items: [\n { title: \"About Us\", href: \"#\" },\n { title: \"Careers\", href: \"#\" },\n { title: \"Premium Tools\", href: \"#\" },\n { title: \"Blogs\", href: \"#\" },\n ],\n },\n {\n title: \"Pages\",\n items: [\n { title: \"Login\", href: \"#\" },\n { title: \"Register\", href: \"#\" },\n { title: \"Add List\", href: \"#\" },\n { title: \"Contact\", href: \"#\" },\n ],\n },\n {\n title: \"Legal\",\n items: [\n { title: \"Terms\", href: \"#\" },\n { title: \"Privacy\", href: \"#\" },\n { title: \"Teams\", href: \"#\" },\n { title: \"About Us\", href: \"#\" },\n ],\n },\n]\n\nconst YEAR = new Date().getFullYear()\n\nexport default function Footers02() {\n return (\n <footer className=\"pt-16 pb-8\">\n <div className=\"container mx-auto\">\n <div className=\"grid grid-cols-1 justify-between gap-10 md:grid-cols-2\">\n <div className=\"grid grid-cols-3 justify-between gap-x-6 gap-y-4\">\n {LINKS.map(({ title, items }) => (\n <ul key={title}>\n <p className=\"mb-2 font-semibold\">{title}</p>\n {items.map(({ title, href }) => (\n <li key={title} className=\"mb-1\">\n <a\n href={href}\n className=\"text-foreground hover:text-primary\"\n >\n {title}\n </a>\n </li>\n ))}\n </ul>\n ))}\n </div>\n <div className=\"lg:ml-auto\">\n <p className=\"mb-2 font-semibold\">Subscribe</p>\n <p className=\"text-foreground max-w-sm [text-wrap:_balance]\">\n Get access to subscriber exclusive deals and be the first who gets\n informed about fresh sales.\n </p>\n <div className=\"mt-4 flex w-full max-w-sm items-end gap-2\">\n <div className=\"w-full\">\n <Label\n htmlFor=\"email\"\n className=\"mb-2 inline-block text-sm font-semibold\"\n >\n Your Email\n </Label>\n <Input\n type=\"email\"\n id=\"email\"\n placeholder=\"someone@example.com\"\n />\n </div>\n <Button className=\"shrink-0\">Subscribe</Button>\n </div>\n <div className=\"mt-3 flex items-center gap-2\">\n <Checkbox id=\"checkbox-link\" />\n <Label\n htmlFor=\"checkbox-link\"\n className=\"text-foreground flex gap-1 select-none\"\n >\n I agree with the\n <a href=\"#\" className=\"text-primary\">\n terms and conditions\n </a>\n </Label>\n </div>\n </div>\n </div>\n <p className=\"text-foreground mt-10 text-center\">\n © {YEAR} Creative Tim. All Rights Reserved.\n </p>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-03/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-03/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst YEAR = new Date().getFullYear()\n\nconst LINKS = [\n { title: \"Home\", href: \"#\" },\n { title: \"About Us\", href: \"#\" },\n { title: \"Blog\", href: \"#\" },\n { title: \"Service\", href: \"#\" },\n]\n\nexport default function Footers03() {\n return (\n <footer className=\"pt-16 pb-8\">\n <div className=\"container mx-auto\">\n <div className=\"border-surface flex flex-row flex-wrap items-center !justify-center gap-x-10 gap-y-3 border-t pt-8 text-center md:!justify-between\">\n <p className=\"text-foreground\">\n Copyright © {YEAR} Creative Tim\n </p>\n <ul className=\"flex flex-wrap items-center justify-center gap-6\">\n {LINKS.map(({ title, href }, key) => (\n <li key={key}>\n <a href={href} className=\"text-foreground hover:text-primary\">\n {title}\n </a>\n </li>\n ))}\n <Button className=\"w-full sm:max-w-fit\">Sign in</Button>\n </ul>\n </div>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-04/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-04/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Github, Instagram, Twitter, Youtube } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\n\nconst LINKS = [\n { title: \"About Us\", href: \"#\" },\n { title: \"Careers\", href: \"#\" },\n { title: \"Press\", href: \"#\" },\n { title: \"Blog\", href: \"#\" },\n { title: \"Pricing\", href: \"#\" },\n]\n\nconst YEAR = new Date().getFullYear()\n\nexport default function Footers04() {\n return (\n <section className=\"pt-16 pb-8\">\n <div className=\"container mx-auto text-center\">\n <Card className=\"bg-primary border-primary grid justify-center px-6 py-12 text-center shadow-none\">\n <h2 className=\"text-secondary text-2xl font-semibold\">\n Be the first who see the news\n </h2>\n <p className=\"text-secondary mt-4 max-w-lg [text-wrap:_balance]\">\n Your company may not be in the software business, but eventually, a\n software company will be in your business.\n </p>\n <div className=\"mx-auto mt-10 flex w-full max-w-sm flex-col gap-x-2 gap-y-4 sm:flex-row\">\n <Input\n type=\"email\"\n id=\"email\"\n placeholder=\"someone@example.com\"\n className=\"border-white/20 bg-white/10 text-white placeholder:text-white/60\"\n />\n <Button variant=\"secondary\" className=\"shrink-0\">\n Subscribe\n </Button>\n </div>\n </Card>\n <div className=\"mt-16 mb-6 flex flex-col items-center !justify-center gap-x-10 gap-y-3 lg:flex-row lg:!justify-between\">\n <p className=\"font-semibold\">Creative Tim</p>\n <ul className=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\">\n {LINKS.map(({ title, href }, key) => (\n <li key={key}>\n <a href={href} className=\"text-foreground hover:text-primary\">\n {title}\n </a>\n </li>\n ))}\n </ul>\n <div className=\"flex gap-1\">\n <Button asChild variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\">\n <a href=\"#\" aria-label=\"Twitter\">\n <Twitter className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\">\n <a href=\"#\" aria-label=\"YouTube\">\n <Youtube className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\">\n <a href=\"#\" aria-label=\"Instagram\">\n <Instagram className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\" className=\"h-8 w-8\">\n <a href=\"#\" aria-label=\"GitHub\">\n <Github className=\"h-5 w-5\" />\n </a>\n </Button>\n </div>\n </div>\n <p className=\"text-foreground text-sm\">\n All rights reserved. Copyright © {YEAR} Creative Tim\n </p>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-05/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-05/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nconst LINKS = [\n {\n title: \"Company\",\n items: [\n { title: \"About Us\", href: \"#\" },\n { title: \"Careers\", href: \"#\" },\n { title: \"Premium Tools\", href: \"#\" },\n { title: \"Blogs\", href: \"#\" },\n ],\n },\n {\n title: \"Pages\",\n items: [\n { title: \"Login\", href: \"#\" },\n { title: \"Register\", href: \"#\" },\n { title: \"Add List\", href: \"#\" },\n { title: \"Contact\", href: \"#\" },\n ],\n },\n {\n title: \"Legal\",\n items: [\n { title: \"Terms\", href: \"#\" },\n { title: \"Privacy\", href: \"#\" },\n { title: \"Teams\", href: \"#\" },\n { title: \"About Us\", href: \"#\" },\n ],\n },\n {\n title: \"Resources\",\n items: [\n { title: \"Blog\", href: \"#\" },\n { title: \"Services\", href: \"#\" },\n { title: \"Products\", href: \"#\" },\n { title: \"Pricing\", href: \"#\" },\n ],\n },\n]\n\nconst YEAR = new Date().getFullYear()\n\nexport default function Footers05() {\n return (\n <footer className=\"bg-primary pt-16 pb-8\">\n <div className=\"container mx-auto\">\n <div className=\"grid grid-cols-1 justify-between gap-10 sm:grid-cols-2\">\n <div className=\"row-start-2 grid grid-cols-2 justify-between gap-6 sm:row-auto lg:grid-cols-4\">\n {LINKS.map(({ title, items }) => (\n <ul key={title} className=\"space-y-2\">\n <p className=\"text-secondary mb-2 font-semibold\">{title}</p>\n {items.map(({ title, href }) => (\n <li key={title}>\n <a\n href={href}\n className=\"text-secondary hover:text-secondary\"\n >\n {title}\n </a>\n </li>\n ))}\n </ul>\n ))}\n </div>\n <div className=\"lg:ml-auto\">\n <p className=\"text-secondary mb-4 flex font-semibold lg:justify-end\">\n Language & Currency\n </p>\n <Select>\n <SelectTrigger className=\"mb-4 border-white/20 bg-white/10 text-white placeholder:text-white/60 lg:w-72\">\n <SelectValue placeholder=\"Select Language\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"english\">English</SelectItem>\n <SelectItem value=\"spanish\">Spanish</SelectItem>\n <SelectItem value=\"hindi\">Hindi</SelectItem>\n </SelectContent>\n </Select>\n <Select>\n <SelectTrigger className=\"border-white/20 bg-white/10 text-white placeholder:text-white/60 lg:w-72\">\n <SelectValue placeholder=\"Select Currency\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"usd\">USD</SelectItem>\n <SelectItem value=\"euro\">Euro</SelectItem>\n <SelectItem value=\"rupee\">Rupee</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n <div className=\"border-surface/50 mt-10 flex flex-col justify-between gap-4 border-t border-b pt-6 pb-8 md:flex-row lg:items-end\">\n <div>\n <p className=\"text-secondary mb-2 font-semibold\">\n Subscribe to our newsletters\n </p>\n <p className=\"text-secondary\">\n The latest news, articles and resources sent to your inbox weekly.\n </p>\n </div>\n <div className=\"flex w-full items-end gap-2 md:max-w-sm\">\n <div className=\"w-full\">\n <Label\n htmlFor=\"email\"\n className=\"text-secondary mb-2 inline-block text-sm font-semibold\"\n >\n Your Email\n </Label>\n <Input\n type=\"email\"\n id=\"email\"\n placeholder=\"someone@example.com\"\n className=\"border-white/20 bg-white/10 text-white placeholder:text-white/60\"\n />\n </div>\n <Button variant=\"secondary\" className=\"shrink-0\">\n subscribe\n </Button>\n </div>\n </div>\n <p className=\"text-secondary mt-8\">\n All rights reserved. © {YEAR} Creative Tim\n </p>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-06/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-06/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Github, Instagram, Twitter, Youtube } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst LINKS = [\n {\n title: \"Company\",\n items: [\n { title: \"About Us\", href: \"#\" },\n { title: \"Careers\", href: \"#\" },\n { title: \"Premium Tools\", href: \"#\" },\n { title: \"Blogs\", href: \"#\" },\n ],\n },\n {\n title: \"Pages\",\n items: [\n { title: \"Login\", href: \"#\" },\n { title: \"Register\", href: \"#\" },\n { title: \"Add List\", href: \"#\" },\n { title: \"Contact\", href: \"#\" },\n ],\n },\n {\n title: \"Legal\",\n items: [\n { title: \"Terms\", href: \"#\" },\n { title: \"Privacy\", href: \"#\" },\n { title: \"Teams\", href: \"#\" },\n { title: \"About Us\", href: \"#\" },\n ],\n },\n {\n title: \"Resources\",\n items: [\n { title: \"Blog\", href: \"#\" },\n { title: \"Services\", href: \"#\" },\n { title: \"Products\", href: \"#\" },\n { title: \"Pricing\", href: \"#\" },\n ],\n },\n]\n\nconst YEAR = new Date().getFullYear()\n\nexport default function Footers06() {\n return (\n <footer className=\"pt-16 pb-8\">\n <div className=\"container mx-auto\">\n <div className=\"grid grid-cols-1 justify-between gap-4 md:grid-cols-2\">\n <div>\n <h6 className=\"text-xl font-semibold\">Creative Tim</h6>\n <p className=\"text-foreground my-4\">\n The next generation of design systems.\n </p>\n <div className=\"flex gap-1\">\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"Twitter\">\n <Twitter className=\"h-4 w-4\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"YouTube\">\n <Youtube className=\"h-4 w-4\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"Instagram\">\n <Instagram className=\"h-4 w-4\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"GitHub\">\n <Github className=\"h-4 w-4\" />\n </a>\n </Button>\n </div>\n </div>\n <div className=\"grid grid-cols-2 justify-between gap-6 lg:grid-cols-4\">\n {LINKS.map(({ title, items }) => (\n <ul key={title} className=\"space-y-2\">\n <p className=\"mb-2 font-semibold\">{title}</p>\n {items.map(({ title, href }) => (\n <li key={title}>\n <a\n href={href}\n className=\"text-foreground hover:text-primary\"\n >\n {title}\n </a>\n </li>\n ))}\n </ul>\n ))}\n </div>\n </div>\n <p className=\"text-foreground mt-20 text-center\">\n © {YEAR} Creative Tim. All Rights Reserved.\n </p>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-07/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-07/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Settings } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nconst YEAR = new Date().getFullYear()\n\nconst LINKS = [\n { title: \"About Us\", href: \"#\" },\n { title: \"Contact Information\", href: \"#\" },\n { title: \"Privacy Policy\", href: \"#\" },\n]\n\nconst COUNTRIES = [\n { name: \"United States\", flag: \"🇺🇸\" },\n { name: \"United Kingdom\", flag: \"🇬🇧\" },\n { name: \"Canada\", flag: \"🇨🇦\" },\n { name: \"Germany\", flag: \"🇩🇪\" },\n { name: \"France\", flag: \"🇫🇷\" },\n { name: \"Japan\", flag: \"🇯🇵\" },\n { name: \"Australia\", flag: \"🇦🇺\" },\n { name: \"Spain\", flag: \"🇪🇸\" },\n]\n\nexport default function Footers07() {\n return (\n <footer className=\"pt-16 pb-8\">\n <div className=\"container mx-auto\">\n <div className=\"flex flex-row flex-wrap items-start justify-center gap-4 md:justify-between\">\n <div className=\"grid gap-3\">\n <ul className=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\">\n {LINKS.map(({ title, href }, key) => (\n <li key={key}>\n <a\n href={href}\n className=\"text-foreground hover:text-primary font-semibold\"\n >\n {title}\n </a>\n </li>\n ))}\n </ul>\n <p className=\"text-foreground text-center text-sm font-medium md:text-left\">\n All rights reserved. Copyright © {YEAR} Creative Tim\n </p>\n </div>\n <div className=\"flex items-center gap-2\">\n <Button variant=\"ghost\" size=\"icon\">\n <Settings className=\"h-5 w-5\" />\n </Button>\n <Select>\n <SelectTrigger className=\"w-64\">\n <SelectValue placeholder=\"Select Country\" />\n </SelectTrigger>\n <SelectContent className=\"max-h-72\">\n {COUNTRIES.map(({ name, flag }) => (\n <SelectItem key={name} value={name}>\n <div className=\"flex items-center gap-2\">\n <span className=\"text-lg\">{flag}</span>\n <span className=\"text-sm\">{name}</span>\n </div>\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n </div>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-08/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-08/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Settings } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\n\nconst YEAR = new Date().getFullYear()\n\nexport default function Footers08() {\n return (\n <footer className=\"pt-20 pb-8\">\n <div className=\"container mx-auto\">\n <div className=\"flex flex-col items-center justify-between gap-6 md:flex-row\">\n <p className=\"text-muted-foreground text-center text-sm md:text-left\">\n © {YEAR} Creative Tim. All rights reserved.\n </p>\n <div className=\"flex items-center gap-3\">\n <Badge variant=\"secondary\" className=\"px-3 py-1\">\n v3.0.0\n </Badge>\n <Button variant=\"ghost\" size=\"icon\" aria-label=\"Settings\">\n <Settings className=\"h-5 w-5\" />\n </Button>\n </div>\n </div>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-09/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-09/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst YEAR = new Date().getFullYear()\n\nconst LINKS = [\n { title: \"About Us\", href: \"#\" },\n { title: \"Contact Information\", href: \"#\" },\n { title: \"Privacy Policy\", href: \"#\" },\n]\n\nexport default function Footers09() {\n return (\n <footer className=\"pt-20 pb-8\">\n <div className=\"container mx-auto\">\n <div className=\"flex flex-col items-start justify-between gap-8 md:flex-row md:items-center\">\n <div className=\"space-y-3\">\n <p className=\"text-lg font-semibold\">\n New Features available! Upgrade to v3.0.0\n </p>\n <Button size=\"default\" className=\"w-full md:w-auto\">\n Upgrade Now\n </Button>\n </div>\n <div className=\"flex flex-col gap-4 md:items-end\">\n <ul className=\"flex flex-wrap items-center gap-x-8 gap-y-2\">\n {LINKS.map(({ title, href }, key) => (\n <li key={key}>\n <a\n href={href}\n className=\"text-muted-foreground hover:text-foreground transition-colors\"\n >\n {title}\n </a>\n </li>\n ))}\n </ul>\n <p className=\"text-muted-foreground text-sm\">\n © {YEAR} Creative Tim. All rights reserved.\n </p>\n </div>\n </div>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-10/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-10/page.tsx",
|
|
"content": "\"use client\"\n\nconst YEAR = new Date().getFullYear()\n\nconst LINKS = [\n { title: \"Company\", href: \"#\" },\n { title: \"About Us\", href: \"#\" },\n { title: \"Team\", href: \"#\" },\n { title: \"Products\", href: \"#\" },\n { title: \"Blogs\", href: \"#\" },\n { title: \"Pricing\", href: \"#\" },\n]\n\nexport default function Footers10() {\n return (\n <footer className=\"pt-16 pb-8\">\n <div className=\"container mx-auto grid place-items-center\">\n <ul className=\"mb-10 flex flex-wrap items-center justify-center gap-x-6 gap-y-2\">\n {LINKS.map(({ title, href }, key) => (\n <li key={key}>\n <a\n href={href}\n className=\"text-foreground hover:text-primary font-semibold\"\n >\n {title}\n </a>\n </li>\n ))}\n </ul>\n <p className=\"text-foreground\">Copyright © {YEAR} Creative Tim</p>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-11/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-11/page.tsx",
|
|
"content": "\"use client\"\n\nconst LINKS = [\n {\n title: \"Company\",\n items: [\n { title: \"About Us\", href: \"#\" },\n { title: \"Careers\", href: \"#\" },\n ],\n },\n {\n title: \"Pages\",\n items: [\n { title: \"Login\", href: \"#\" },\n { title: \"Register\", href: \"#\" },\n ],\n },\n {\n title: \"Legal\",\n items: [\n { title: \"Terms\", href: \"#\" },\n { title: \"Privacy\", href: \"#\" },\n ],\n },\n]\n\nconst YEAR = new Date().getFullYear()\n\nexport default function Footers11() {\n return (\n <footer className=\"pt-20 pb-8\">\n <div className=\"container mx-auto\">\n <div className=\"mb-12 grid grid-cols-1 items-start justify-between gap-8 md:grid-cols-2 lg:gap-12\">\n <div>\n <h6 className=\"text-2xl font-semibold\">Creative Tim</h6>\n <p className=\"text-muted-foreground mt-3 max-w-md\">\n The reward for getting on the stage is fame.\n </p>\n </div>\n <div className=\"grid grid-cols-3 gap-x-8 gap-y-6 md:ml-auto\">\n {LINKS.map(({ title, items }) => (\n <ul key={title} className=\"space-y-3\">\n <p className=\"mb-3 font-semibold\">{title}</p>\n {items.map(({ title, href }) => (\n <li key={title}>\n <a\n href={href}\n className=\"text-muted-foreground hover:text-foreground transition-colors\"\n >\n {title}\n </a>\n </li>\n ))}\n </ul>\n ))}\n </div>\n </div>\n <div className=\"border-border flex flex-col items-start justify-between gap-6 border-t pt-8 md:flex-row md:items-center\">\n <p className=\"text-muted-foreground max-w-2xl text-sm\">\n The price of fame is you can't get off the stage.\n </p>\n <p className=\"text-muted-foreground text-sm whitespace-nowrap\">\n © {YEAR} Creative Tim. All Rights Reserved.\n </p>\n </div>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-12/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-12/page.tsx",
|
|
"content": "\"use client\"\n\nconst YEAR = new Date().getFullYear()\n\nconst LINKS = [\n { title: \"About Us\", href: \"#\" },\n { title: \"Contact Information\", href: \"#\" },\n { title: \"Privacy Policy\", href: \"#\" },\n { title: \"Terms & Conditions\", href: \"#\" },\n { title: \"FAQ\", href: \"#\" },\n]\n\nexport default function Footers12() {\n return (\n <footer className=\"pt-16 pb-8\">\n <div className=\"container mx-auto text-center\">\n <div className=\"flex flex-row flex-wrap items-center !justify-center gap-6 lg:!justify-between\">\n <ul className=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\">\n {LINKS.map(({ title, href }, key) => (\n <li key={key}>\n <a\n href={href}\n className=\"text-foreground hover:text-primary font-semibold\"\n >\n {title}\n </a>\n </li>\n ))}\n </ul>\n <p className=\"text-foreground text-sm font-medium\">\n All rights reserved. Copyright © {YEAR} Creative Tim\n </p>\n </div>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-13/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-13/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Github, Instagram, Twitter, Youtube } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst YEAR = new Date().getFullYear()\n\nconst LINKS = [\n { title: \"Company\", href: \"#\" },\n { title: \"About Us\", href: \"#\" },\n { title: \"Team\", href: \"#\" },\n { title: \"Products\", href: \"#\" },\n { title: \"Blogs\", href: \"#\" },\n { title: \"Pricing\", href: \"#\" },\n]\n\nexport default function Footers13() {\n return (\n <footer className=\"pt-16 pb-8\">\n <div className=\"container mx-auto grid place-items-center\">\n <ul className=\"flex flex-wrap items-center justify-center gap-x-6 gap-y-2\">\n {LINKS.map(({ title, href }, key) => (\n <li key={key}>\n <a\n href={href}\n className=\"text-foreground hover:text-primary font-semibold\"\n >\n {title}\n </a>\n </li>\n ))}\n </ul>\n <div className=\"my-8 flex gap-1\">\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"Twitter\">\n <Twitter className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"YouTube\">\n <Youtube className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"Instagram\">\n <Instagram className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"GitHub\">\n <Github className=\"h-5 w-5\" />\n </a>\n </Button>\n </div>\n <p className=\"text-foreground\">Copyright © {YEAR} Creative Tim</p>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-14/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-14/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Github, Instagram, Twitter, Youtube } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst YEAR = new Date().getFullYear()\n\nconst LINKS = [\n { title: \"About Us\", href: \"#\" },\n { title: \"Careers\", href: \"#\" },\n { title: \"Press\", href: \"#\" },\n { title: \"Blog\", href: \"#\" },\n { title: \"Pricing\", href: \"#\" },\n]\n\nexport default function Footers14() {\n return (\n <footer className=\"bg-primary pt-20 pb-8\">\n <div className=\"container mx-auto\">\n <div className=\"mb-16 grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-8\">\n <div>\n <h6 className=\"text-2xl font-semibold text-white\">Creative Tim</h6>\n <p className=\"text-secondary mt-3 max-w-md\">\n The reward for getting on the stage is fame.\n </p>\n <ul className=\"mt-12 flex flex-wrap items-center gap-x-8 gap-y-3\">\n {LINKS.map(({ title, href }, key) => (\n <li key={key}>\n <a\n href={href}\n className=\"text-secondary transition-colors hover:text-white\"\n >\n {title}\n </a>\n </li>\n ))}\n </ul>\n </div>\n <div className=\"lg:ml-auto\">\n <p className=\"mb-6 text-lg font-semibold text-white\">Get the App</p>\n <div className=\"grid gap-4 sm:grid-cols-2 lg:grid-cols-1 xl:grid-cols-2\">\n <Button\n variant=\"outline\"\n className=\"h-auto gap-4 rounded-xl border-0 bg-black px-6 py-4 text-start text-white transition-all hover:bg-white/10\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n xmlSpace=\"preserve\"\n viewBox=\"0 0 16 16\"\n className=\"h-14 w-14 shrink-0\"\n >\n <path\n fill=\"#2196F3\"\n d=\"M8.32 7.68.58 15.42c-.37-.35-.57-.83-.57-1.35V1.93C.01 1.4.22.92.6.56l7.72 7.12z\"\n />\n <path\n fill=\"#FFC107\"\n d=\"M15.01 8c0 .7-.38 1.32-1.01 1.67l-2.2 1.22-2.73-2.52-.75-.69 2.89-2.89L14 6.33c.63.35 1.01.97 1.01 1.67z\"\n />\n <path\n fill=\"#4CAF50\"\n d=\"M8.32 7.68.6.56C.7.46.83.37.96.29 1.59-.09 2.35-.1 3 .26l8.21 4.53-2.89 2.89z\"\n />\n <path\n fill=\"#F44336\"\n d=\"M11.8 10.89 3 15.74c-.31.18-.66.26-1 .26-.36 0-.72-.09-1.04-.29a1.82 1.82 0 0 1-.38-.29l7.74-7.74.75.69 2.73 2.52z\"\n />\n </svg>\n <div className=\"flex flex-col justify-center\">\n <span className=\"text-[10px] font-normal tracking-wide uppercase\">\n GET IT ON\n </span>\n <span className=\"text-xl leading-tight font-semibold\">\n Google Play\n </span>\n </div>\n </Button>\n <Button\n variant=\"outline\"\n className=\"h-auto gap-4 rounded-xl border-0 bg-black px-6 py-4 text-start text-white transition-all hover:bg-white/10\"\n >\n <svg\n xmlns=\"http://www.w3.org/2000/svg\"\n enableBackground=\"new 0 0 22.185 27\"\n viewBox=\"0 0 22.185 27\"\n className=\"h-14 w-14 shrink-0 fill-white\"\n >\n <path d=\"M18.436 14.271c0-2.225 1.216-4.166 3.02-5.194-.942-1.156-2.359-2.192-3.921-2.496-2.13-.415-3.345.276-4.131.553-.786.277-1.83.526-1.83.526s-1.043-.249-1.83-.526C8.959 6.857 7.744 6.165 5.614 6.58s-3.99 2.192-4.746 3.776c-1.458 3.057-.858 6.903.172 9.669 1.029 2.767 3.75 6.633 5.86 6.944 1.501.221 2.43-.816 4.674-1.079 2.244.263 3.173 1.3 4.674 1.079 2.11-.311 4.831-4.177 5.86-6.944.025-.068.051-.138.076-.208C19.987 18.935 18.436 16.784 18.436 14.271zM11.041 6.075c0 0 2.087.277 3.982-1.875s1.356-4.188 1.356-4.188-2.087-.277-3.982 1.875S11.041 6.075 11.041 6.075z\" />\n </svg>\n <div className=\"flex flex-col justify-center\">\n <span className=\"text-[10px] font-normal tracking-wide uppercase\">\n Download on the\n </span>\n <span className=\"text-xl leading-tight font-semibold\">\n App Store\n </span>\n </div>\n </Button>\n </div>\n </div>\n </div>\n <div className=\"border-surface/50 flex flex-col items-center justify-between gap-6 border-t pt-8 md:flex-row\">\n <p className=\"text-secondary order-2 md:order-1\">\n © {YEAR} Creative Tim. All Rights Reserved.\n </p>\n <div className=\"order-1 flex gap-1 md:order-2\">\n <Button\n asChild\n variant=\"ghost\"\n size=\"sm\"\n className=\"text-white hover:text-white\"\n >\n <a href=\"#\" aria-label=\"Twitter\">\n <Twitter className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button\n asChild\n variant=\"ghost\"\n size=\"sm\"\n className=\"text-white hover:text-white\"\n >\n <a href=\"#\" aria-label=\"YouTube\">\n <Youtube className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button\n asChild\n variant=\"ghost\"\n size=\"sm\"\n className=\"text-white hover:text-white\"\n >\n <a href=\"#\" aria-label=\"Instagram\">\n <Instagram className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button\n asChild\n variant=\"ghost\"\n size=\"sm\"\n className=\"text-white hover:text-white\"\n >\n <a href=\"#\" aria-label=\"GitHub\">\n <Github className=\"h-5 w-5\" />\n </a>\n </Button>\n </div>\n </div>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/footers-15/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/footers-15/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Github, Instagram, Twitter, Youtube } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\n\nconst YEAR = new Date().getFullYear()\n\nconst LINKS = [\n { title: \"About Us\", href: \"#\" },\n { title: \"Careers\", href: \"#\" },\n { title: \"Press\", href: \"#\" },\n { title: \"Blog\", href: \"#\" },\n { title: \"Pricing\", href: \"#\" },\n]\n\nexport default function Footers15() {\n return (\n <footer className=\"pt-16 pb-8\">\n <div className=\"container mx-auto\">\n <div className=\"mb-4 flex flex-col justify-between gap-4 md:flex-row\">\n <div>\n <h6 className=\"text-xl font-semibold\">Creative Tim</h6>\n <ul className=\"mt-4 flex flex-wrap items-center gap-x-6 gap-y-2\">\n {LINKS.map(({ title, href }, key) => (\n <li key={key}>\n <a\n href={href}\n className=\"text-foreground hover:text-primary font-medium\"\n >\n {title}\n </a>\n </li>\n ))}\n </ul>\n </div>\n <div className=\"md:text-right\">\n <p className=\"font-semibold\">\n The reward for getting on the stage is fame.\n </p>\n <p className=\"mb-4 font-semibold\">\n The price of fame is you can't get off the stage.\n </p>\n <div className=\"flex gap-1 md:justify-end\">\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"Twitter\">\n <Twitter className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"YouTube\">\n <Youtube className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"Instagram\">\n <Instagram className=\"h-5 w-5\" />\n </a>\n </Button>\n <Button asChild variant=\"ghost\" size=\"icon\">\n <a href=\"#\" aria-label=\"GitHub\">\n <Github className=\"h-5 w-5\" />\n </a>\n </Button>\n </div>\n </div>\n </div>\n <p className=\"text-foreground\">\n All rights reserved. © {YEAR} Creative Tim\n </p>\n </div>\n </footer>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-01/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Sparkles } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst TESTIMONIALS = [\n {\n image:\n \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Sarah Johnson\",\n role: \"Product Designer\",\n quote:\n \"The attention to detail and component quality is outstanding. These UI blocks have significantly accelerated our design workflow and improved consistency across our products.\",\n },\n {\n image:\n \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Michael Chen\",\n role: \"Tech Lead at Stripe\",\n quote:\n \"Exceptional component library with excellent documentation. The customization options and TypeScript support make it perfect for enterprise applications. Highly recommend!\",\n },\n {\n image:\n \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Emma Rodriguez\",\n role: \"Frontend Developer\",\n quote:\n \"A game-changer for rapid prototyping and production. The components are production-ready, well-tested, and the design system is incredibly cohesive. Love it!\",\n },\n]\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto px-4\">\n <div className=\"mb-20 text-center\">\n <Badge variant=\"outline\" className=\"mx-auto mb-8 w-max\">\n <Sparkles className=\"mr-2 h-4 w-4\" />\n Testimonials\n </Badge>\n <h2 className=\"mb-4 text-3xl font-bold\">What Clients Say</h2>\n <p className=\"text-muted-foreground mx-auto max-w-lg text-lg\">\n We're constantly trying to express ourselves and actualize our\n dreams. If you have the opportunity to play.\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3\">\n {TESTIMONIALS.map(({ name, image, role, quote }, key) => (\n <Card key={key} className=\"border-0 bg-transparent shadow-none\">\n <CardContent className=\"p-0 text-center\">\n <Avatar className=\"mx-auto mb-4 h-20 w-20\">\n <AvatarImage src={image} alt={`${name} image`} />\n <AvatarFallback>\n {name\n .split(\" \")\n .map((n) => n[0])\n .join(\"\")}\n </AvatarFallback>\n </Avatar>\n <p className=\"mb-1 text-lg font-semibold\">{name}</p>\n <p className=\"text-muted-foreground mb-4 text-sm\">{role}</p>\n <blockquote className=\"text-muted-foreground mx-auto max-w-lg\">\n "{quote}"\n </blockquote>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-02/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-02/page.tsx",
|
|
"content": "\"use client\"\n\nimport { BadgeCheck, Twitter } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent, CardFooter, CardHeader } from \"@/components/ui/card\"\n\nconst TESTIMONIALS = [\n {\n image: \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Jessica Devis\",\n username: \"@jessicadevis\",\n quote:\n \"The utility-first approach and extensive component library make it a breeze to create beautiful and responsive interfaces. 🎉\",\n date: \"Jan 17, 2024\",\n },\n {\n image: \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Lucian Eurel\",\n username: \"@lucianeurel\",\n quote:\n \"It's like having a superpower in your toolkit. The ability to craft custom designs quickly and efficiently with simple classes is unparalleled.\",\n date: \"Jan 18, 2024\",\n },\n {\n image: \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Marcell Glock\",\n username: \"@marcelglock\",\n quote:\n \"The utility-first approach and extensive component library make it a breeze to create beautiful and responsive interfaces. 😍\",\n date: \"Jan 19, 2024\",\n },\n {\n image: \"https://v3.material-tailwind.com/man-profile-2.jpg\",\n name: \"Linde Michele\",\n username: \"@lindemichele\",\n quote:\n \"With its clear and concise classes, I can easily communicate design intentions to my colleagues. It's a must-have tool for any web developer. 👨🏻💻\",\n date: \"Jan 20, 2024\",\n },\n {\n image: \"https://v3.material-tailwind.com/man-profile-3.jpg\",\n name: \"Mary Joshiash\",\n username: \"@maryjoshiash\",\n quote:\n \"I've tried several CSS frameworks, but this is on a whole different level. It strikes the perfect balance between flexibility and design.\",\n date: \"Jan 21, 2024\",\n },\n {\n image: \"https://v3.material-tailwind.com/woman-profile-3.jpg\",\n name: \"Misha Stam\",\n username: \"@mishastam\",\n quote:\n \"Active community support make it easy to get started. It's the ideal framework for achieving design excellence in web applications.\",\n date: \"Jan 22, 2024\",\n },\n]\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto px-4\">\n <div className=\"mb-16\">\n <p className=\"mb-2 text-sm font-semibold tracking-wide uppercase\">\n Testimonials\n </p>\n <h2 className=\"mb-4 text-3xl font-bold\">Think about us</h2>\n <p className=\"text-muted-foreground max-w-lg text-lg\">\n That's the main thing people are controlled by! Thoughts -\n their perception of themselves!\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3\">\n {TESTIMONIALS.map(({ name, image, username, quote, date }, key) => (\n <Card key={key}>\n <CardHeader className=\"flex flex-row items-center gap-4 px-6\">\n <Avatar>\n <AvatarImage src={image} alt={`${name} image`} />\n <AvatarFallback>\n {name\n .split(\" \")\n .map((n) => n[0])\n .join(\"\")}\n </AvatarFallback>\n </Avatar>\n <div className=\"flex-1\">\n <div className=\"flex items-center gap-1.5\">\n <p className=\"font-semibold\">{name}</p>\n <BadgeCheck className=\"h-4 w-4 text-blue-500\" />\n </div>\n <p className=\"text-muted-foreground text-sm\">{username}</p>\n </div>\n </CardHeader>\n <CardContent className=\"px-6\">\n <blockquote className=\"text-muted-foreground\">\n {quote}\n </blockquote>\n </CardContent>\n <CardFooter className=\"flex items-center justify-between gap-4 px-6\">\n <a\n href=\"#\"\n className=\"flex items-center gap-1.5 text-sm font-semibold hover:underline\"\n >\n See on <Twitter className=\"h-3.5 w-3.5\" />\n </a>\n <p className=\"text-muted-foreground text-sm\">{date}</p>\n </CardFooter>\n </Card>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-03/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-03/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Quote, Star } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst testimonials = [\n {\n name: \"Sarah Johnson\",\n role: \"Product Designer\",\n image:\n \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n quote:\n \"The attention to detail and user experience is exceptional. This has transformed how we approach design decisions in our team.\",\n rating: 5,\n },\n {\n name: \"Michael Chen\",\n role: \"Tech Lead\",\n image:\n \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n quote:\n \"Outstanding component library that saves us countless hours. The quality and customization options are exactly what we needed.\",\n rating: 5,\n },\n {\n name: \"Emma Rodriguez\",\n role: \"Frontend Developer\",\n image:\n \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n quote:\n \"A game-changer for rapid prototyping and production builds. The documentation is clear and the components are production-ready.\",\n rating: 5,\n },\n]\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-20\">\n <div className=\"container mx-auto px-4\">\n <div className=\"mb-12 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold md:text-4xl\">\n Loved by Developers & Designers\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n Join thousands of professionals who trust our components for their\n projects\n </p>\n </div>\n\n <div className=\"mb-12 flex flex-wrap items-center justify-center gap-8 text-center md:gap-12\">\n <div>\n <p className=\"text-3xl font-bold\">1,679,700+</p>\n <p className=\"text-muted-foreground text-sm\">Active Users</p>\n </div>\n <div className=\"bg-border hidden h-12 w-px md:block\"></div>\n <div>\n <p className=\"text-3xl font-bold\">4.9/5</p>\n <p className=\"text-muted-foreground text-sm\">Average Rating</p>\n </div>\n <div className=\"bg-border hidden h-12 w-px md:block\"></div>\n <div>\n <p className=\"text-3xl font-bold\">50K+</p>\n <p className=\"text-muted-foreground text-sm\">Companies</p>\n </div>\n </div>\n\n <div className=\"grid gap-6 md:grid-cols-2 lg:grid-cols-3\">\n {testimonials.map((testimonial, index) => (\n <Card\n key={index}\n className=\"border-border/50 hover:border-border transition-all hover:shadow-lg\"\n >\n <CardContent className=\"px-6\">\n <div className=\"mb-4 flex items-center gap-1\">\n {Array.from({ length: testimonial.rating }).map((_, i) => (\n <Star\n key={i}\n className=\"h-4 w-4 fill-yellow-400 text-yellow-400\"\n />\n ))}\n </div>\n\n <Quote className=\"text-muted-foreground/30 mb-3 h-8 w-8\" />\n\n <blockquote className=\"text-foreground/90 mb-6 text-sm leading-relaxed\">\n {testimonial.quote}\n </blockquote>\n\n <div className=\"flex items-center gap-3\">\n <Avatar className=\"border-border h-12 w-12 border-2\">\n <AvatarImage\n src={testimonial.image}\n alt={testimonial.name}\n />\n <AvatarFallback>\n {testimonial.name\n .split(\" \")\n .map((n) => n[0])\n .join(\"\")}\n </AvatarFallback>\n </Avatar>\n <div>\n <p className=\"text-foreground font-semibold\">\n {testimonial.name}\n </p>\n <p className=\"text-muted-foreground text-sm\">\n {testimonial.role}\n </p>\n </div>\n </div>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-04/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-04/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Quote, Star } from \"lucide-react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst TESTIMONIALS = [\n {\n image:\n \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Sarah Johnson\",\n role: \"Product Designer\",\n quote:\n \"The attention to detail and component quality is outstanding. These UI blocks have significantly accelerated our design workflow and improved consistency across our products.\",\n rating: 5,\n },\n {\n image:\n \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Michael Chen\",\n role: \"Tech Lead at Stripe\",\n quote:\n \"Exceptional component library with excellent documentation. The customization options and TypeScript support make it perfect for enterprise applications. Highly recommend!\",\n rating: 5,\n },\n {\n image:\n \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Emma Rodriguez\",\n role: \"Frontend Developer\",\n quote:\n \"A game-changer for rapid prototyping and production. The components are production-ready, well-tested, and the design system is incredibly cohesive. Love it!\",\n rating: 5,\n },\n]\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-20\">\n <div className=\"container mx-auto px-4\">\n <div className=\"mb-16 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold md:text-4xl\">\n What Our Users Say\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n Trusted by thousands of developers and designers worldwide\n </p>\n </div>\n\n <div className=\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3\">\n {TESTIMONIALS.map(({ name, image, role, quote, rating }, key) => (\n <Card\n key={key}\n className=\"group border-border/50 hover:border-border transition-all hover:shadow-lg\"\n >\n <CardContent className=\"p-8 text-center\">\n <div className=\"relative mx-auto mb-6 inline-block\">\n <img\n src={image}\n alt={`${name} profile`}\n className=\"border-border mx-auto h-24 w-24 rounded-full border-4 object-cover transition-transform group-hover:scale-105\"\n />\n <div className=\"bg-background absolute -right-2 -bottom-2 rounded-full p-2 shadow-md\">\n <Quote className=\"text-primary h-4 w-4\" />\n </div>\n </div>\n\n <h3 className=\"mb-1 text-xl font-semibold\">{name}</h3>\n <p className=\"text-muted-foreground mb-6 text-sm\">{role}</p>\n\n <div className=\"mb-6 flex items-center justify-center gap-1\">\n {Array.from({ length: 5 }).map((_, i) => (\n <Star\n key={i}\n className={`h-4 w-4 ${\n i < rating\n ? \"fill-yellow-400 text-yellow-400\"\n : \"fill-muted text-muted\"\n }`}\n />\n ))}\n </div>\n\n <blockquote className=\"text-foreground/80 text-sm leading-relaxed\">\n "{quote}"\n </blockquote>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-05/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-05/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Quote, Star } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst TESTIMONIALS = [\n {\n image:\n \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Sarah Johnson\",\n role: \"Product Designer\",\n quote:\n \"The component library has transformed our design process. The quality and attention to detail in every component is exceptional.\",\n rating: 5,\n },\n {\n image:\n \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Michael Chen\",\n role: \"Tech Lead at Stripe\",\n quote:\n \"Outstanding documentation and TypeScript support. These components integrate seamlessly into our enterprise applications.\",\n rating: 5,\n },\n {\n image:\n \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Emma Rodriguez\",\n role: \"Frontend Developer\",\n quote:\n \"Production-ready components with excellent customization. The design system is cohesive and well-thought-out.\",\n rating: 5,\n },\n]\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"bg-black py-20\">\n <div className=\"container mx-auto px-4\">\n <div className=\"mb-16 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold text-white md:text-4xl\">\n Trusted by Professionals\n </h2>\n <p className=\"mx-auto max-w-2xl text-lg text-white/70\">\n Hear what developers and designers say about our component library\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3\">\n {TESTIMONIALS.map(({ name, image, role, quote, rating }, key) => (\n <Card\n key={key}\n className=\"border-white/10 bg-white/5 backdrop-blur-sm transition-all hover:border-white/20 hover:bg-white/10\"\n >\n <CardContent className=\"p-8 text-center\">\n <div className=\"relative mx-auto mb-6 inline-block\">\n <Avatar className=\"h-20 w-20 border-4 border-white/20\">\n <AvatarImage src={image} alt={`${name} profile`} />\n <AvatarFallback className=\"bg-white/10 text-white\">\n {name\n .split(\" \")\n .map((n) => n[0])\n .join(\"\")}\n </AvatarFallback>\n </Avatar>\n <div className=\"bg-primary absolute -right-1 -bottom-1 rounded-full p-1.5 shadow-lg\">\n <Quote className=\"text-primary-foreground h-3 w-3\" />\n </div>\n </div>\n\n <h3 className=\"mb-1 text-lg font-semibold text-white\">\n {name}\n </h3>\n <p className=\"mb-6 text-sm text-white/60\">{role}</p>\n\n <div className=\"mb-6 flex items-center justify-center gap-1\">\n {Array.from({ length: 5 }).map((_, i) => (\n <Star\n key={i}\n className={`h-4 w-4 ${\n i < rating\n ? \"fill-yellow-400 text-yellow-400\"\n : \"fill-white/20 text-white/20\"\n }`}\n />\n ))}\n </div>\n\n <blockquote className=\"text-sm leading-relaxed text-white/80\">\n "{quote}"\n </blockquote>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-06/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-06/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto px-4\">\n <Card className=\"grid grid-cols-12 items-center border-0 bg-transparent shadow-none\">\n <div className=\"col-span-full md:col-span-4\">\n <img\n src=\"https://v3.material-tailwind.com/logo/spotify.svg\"\n alt=\"user profile\"\n className=\"h-full max-h-96 w-full max-w-96 rounded-xl object-cover lg:max-h-[30rem] lg:max-w-full\"\n />\n </div>\n <CardContent className=\"col-span-full px-0 py-6 md:col-span-8 md:px-8 lg:px-12\">\n <p className=\"mb-2 text-sm font-semibold tracking-wide uppercase lg:mb-4\">\n Client Success Story\n </p>\n <h2 className=\"mb-6 text-3xl font-bold\">\n Transforming Our Design System\n </h2>\n <blockquote className=\"text-muted-foreground mb-8 text-lg font-normal lg:mb-12\">\n "This component library has revolutionized how we build\n products at scale. The quality, consistency, and developer\n experience are exceptional. We've reduced our\n design-to-development time by 60% and our entire team loves\n working with these components."\n </blockquote>\n <div className=\"flex items-center gap-4\">\n <Avatar className=\"h-12 w-12\">\n <AvatarImage\n alt=\"Alexandra Martinez\"\n src=\"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\"\n />\n <AvatarFallback>AM</AvatarFallback>\n </Avatar>\n <div>\n <p className=\"text-lg font-semibold\">Alexandra Martinez</p>\n <p className=\"text-muted-foreground text-sm\">\n Head of Design, Spotify\n </p>\n </div>\n </div>\n </CardContent>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-07/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-07/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\n\nconst TESTIMONIALS = [\n {\n image:\n \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Sarah Johnson\",\n role: \"Product Designer\",\n quote:\n \"The attention to detail and component quality is outstanding. These UI blocks have significantly accelerated our design workflow and improved consistency across our products.\",\n },\n {\n image:\n \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Michael Chen\",\n role: \"Tech Lead at Stripe\",\n quote:\n \"Exceptional component library with excellent documentation. The customization options and TypeScript support make it perfect for enterprise applications. Highly recommend!\",\n },\n {\n image:\n \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Emma Rodriguez\",\n role: \"Frontend Developer\",\n quote:\n \"A game-changer for rapid prototyping and production. The components are production-ready, well-tested, and the design system is incredibly cohesive. Love it!\",\n },\n]\n\nexport default function TestimonialsBlock() {\n const [selectedTestimonial, setSelectedTestimonial] = React.useState(0)\n\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto grid grid-cols-12 items-center gap-y-8 px-4\">\n <div className=\"col-span-full row-start-2 md:col-span-8 md:row-start-auto\">\n <h2 className=\"text-3xl font-bold\">What Developers Say</h2>\n <p className=\"text-muted-foreground my-4 max-w-lg\">\n {TESTIMONIALS[selectedTestimonial].quote}\n </p>\n <div>\n <p className=\"font-semibold\">\n {TESTIMONIALS[selectedTestimonial].name}\n </p>\n <p className=\"text-muted-foreground text-sm\">\n {TESTIMONIALS[selectedTestimonial].role}\n </p>\n </div>\n <div className=\"divide-border mt-8 flex items-center divide-x\">\n {TESTIMONIALS.map((testimonial, index) => (\n <div className={index !== 0 ? \"px-4\" : \"pr-4\"} key={index}>\n <Avatar\n role=\"button\"\n className=\"h-12 w-12 cursor-pointer rounded-lg\"\n onClick={() => setSelectedTestimonial(index)}\n >\n <AvatarImage src={testimonial.image} />\n <AvatarFallback>\n {testimonial.name\n .split(\" \")\n .map((n) => n[0])\n .join(\"\")}\n </AvatarFallback>\n </Avatar>\n </div>\n ))}\n </div>\n </div>\n <div className=\"col-span-full md:col-span-4\">\n <img\n src={TESTIMONIALS[selectedTestimonial].image}\n alt=\"user profile\"\n className=\"h-full max-h-96 w-full max-w-96 rounded-xl object-cover object-center\"\n />\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-08/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-08/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Quote, Star } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst TESTIMONIALS = [\n {\n image:\n \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Sarah Johnson\",\n role: \"Product Designer\",\n quote:\n \"These components have transformed our design workflow. The quality and attention to detail are exceptional, making it easy to build beautiful interfaces quickly.\",\n rating: 5,\n },\n {\n image:\n \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Michael Chen\",\n role: \"Tech Lead at Stripe\",\n quote:\n \"Outstanding component library with excellent TypeScript support. The documentation is clear and the components integrate seamlessly into our enterprise applications.\",\n rating: 5,\n },\n {\n image:\n \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Emma Rodriguez\",\n role: \"Frontend Developer\",\n quote:\n \"Production-ready components that save countless hours. The customization options are fantastic and the design system is incredibly cohesive. Highly recommend!\",\n rating: 5,\n },\n]\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-20\">\n <div className=\"container mx-auto px-4\">\n <div className=\"mb-16 text-center\">\n <h2 className=\"mb-4 text-3xl font-bold md:text-4xl\">\n What Developers Say\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n Join thousands of developers building exceptional products with our\n component library\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3\">\n {TESTIMONIALS.map(({ name, image, role, quote, rating }, key) => (\n <Card\n key={key}\n className=\"group border-0 bg-transparent shadow-none\"\n >\n <CardContent className=\"p-0 text-center\">\n <div className=\"relative mx-auto mb-6 inline-block\">\n <Avatar className=\"border-border h-24 w-24 border-4 transition-transform group-hover:scale-105\">\n <AvatarImage src={image} alt={`${name} profile`} />\n <AvatarFallback>\n {name\n .split(\" \")\n .map((n) => n[0])\n .join(\"\")}\n </AvatarFallback>\n </Avatar>\n <div className=\"bg-primary absolute -right-2 -bottom-2 rounded-full p-2 shadow-lg\">\n <Quote className=\"text-primary-foreground h-3 w-3\" />\n </div>\n </div>\n\n <h3 className=\"mb-1 text-lg font-semibold\">{name}</h3>\n <p className=\"text-muted-foreground mb-6 text-sm\">{role}</p>\n\n <div className=\"mb-6 flex items-center justify-center gap-1\">\n {Array.from({ length: 5 }).map((_, i) => (\n <Star\n key={i}\n className={`h-4 w-4 ${\n i < rating\n ? \"fill-yellow-400 text-yellow-400\"\n : \"fill-muted text-muted\"\n }`}\n />\n ))}\n </div>\n\n <blockquote className=\"text-muted-foreground mx-auto max-w-sm text-sm leading-relaxed\">\n "{quote}"\n </blockquote>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-09/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-09/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-4 md:py-6\">\n <div className=\"container mx-auto px-4\">\n <Card className=\"grid grid-cols-1 items-center gap-4 border-0 bg-transparent shadow-none md:grid-cols-12 md:gap-6\">\n <div className=\"md:col-span-4\">\n <img\n src=\"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\"\n alt=\"user profile\"\n className=\"h-40 w-full rounded-lg object-cover md:h-56\"\n />\n </div>\n <CardContent className=\"px-0 py-0 md:col-span-8 md:px-4 lg:px-8\">\n <p className=\"text-primary mb-1.5 text-xs font-semibold md:text-sm\">\n Customer Story\n </p>\n <h2 className=\"mb-2 text-lg font-bold md:text-xl lg:text-2xl\">\n Revolutionary component library for modern design\n </h2>\n <blockquote className=\"text-muted-foreground mb-3 text-sm leading-relaxed font-normal md:text-base\">\n "This component library has transformed how our design team\n works. The attention to detail, seamless integration, and\n production-ready components have accelerated our development\n workflow by 10x."\n </blockquote>\n <div className=\"flex items-center gap-2.5\">\n <Avatar className=\"h-9 w-9 md:h-10 md:w-10\">\n <AvatarImage\n alt=\"spotify\"\n src=\"https://v3.material-tailwind.com/icon/spotify.svg\"\n />\n <AvatarFallback>SP</AvatarFallback>\n </Avatar>\n <div>\n <p className=\"text-sm font-semibold md:text-base\">\n Sarah Johnson\n </p>\n <p className=\"text-muted-foreground text-xs\">\n Design Director, Spotify\n </p>\n </div>\n </div>\n </CardContent>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-10/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-10/page.tsx",
|
|
"content": "\"use client\"\n\nimport { ArrowRight, Sparkles } from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst TESTIMONIALS = [\n {\n image: \"https://v3.material-tailwind.com/logo/spotify.svg\",\n name: \"Alexandra Martinez\",\n role: \"Head of Design\",\n quote:\n \"This component library has revolutionized our design system. The quality and consistency have dramatically improved our product development workflow.\",\n },\n {\n image: \"https://v3.material-tailwind.com/logo/netflix.svg\",\n name: \"David Kim\",\n role: \"Engineering Lead\",\n quote:\n \"Outstanding components with excellent TypeScript support. The documentation is thorough and implementation is seamless across our platforms.\",\n },\n {\n image: \"https://v3.material-tailwind.com/logo/coinbase.svg\",\n name: \"Marcus Johnson\",\n role: \"Product Director\",\n quote:\n \"A game-changer for our development team. These production-ready components have reduced our time-to-market by 50% while maintaining exceptional quality.\",\n },\n]\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-20\">\n <div className=\"container mx-auto px-4\">\n <div className=\"mb-16 text-center\">\n <Badge variant=\"outline\" className=\"mx-auto mb-8 w-max\">\n <Sparkles className=\"mr-2 h-4 w-4\" />\n Testimonials\n </Badge>\n <h2 className=\"mb-4 text-3xl font-bold md:text-4xl\">\n Trusted by Industry Leaders\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-2xl text-lg\">\n See how leading companies are building exceptional products with our\n component library\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3\">\n {TESTIMONIALS.map(({ name, image, quote, role }, key) => (\n <Card key={key} className=\"border-0 bg-transparent shadow-none\">\n <CardContent className=\"p-0 text-center\">\n <img\n src={image}\n alt=\"company logo\"\n className=\"mx-auto mb-6 h-20\"\n />\n <blockquote className=\"text-muted-foreground mx-auto mb-6 max-w-sm text-sm leading-relaxed\">\n "{quote}"\n </blockquote>\n <div className=\"mb-6\">\n <p className=\"font-semibold\">{name}</p>\n <p className=\"text-muted-foreground text-sm\">{role}</p>\n </div>\n <Button variant=\"link\" className=\"group\">\n Read More\n <ArrowRight className=\"ml-2 h-4 w-4 transition-transform group-hover:translate-x-1\" />\n </Button>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-11/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-11/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Star } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst TESTIMONIALS = [\n {\n image: \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Lucian Eurel\",\n date: \"Posted on 27 February\",\n quote:\n \"Success is not final, failure is not fatal: it is the courage to continue that counts.\",\n rating: 4,\n isHighlighted: false,\n },\n {\n image: \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Lucian Eurel\",\n date: \"Posted on 28 February\",\n quote:\n \"If you have the opportunity to play this game of life you need to appreciate every moment.\",\n rating: 4,\n isHighlighted: true,\n },\n {\n image: \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Mathew Glock\",\n date: \"Posted on 29 February\",\n quote:\n \"Artist is a term applied to a person who engages in an activity deemed to be an art.\",\n rating: 5,\n isHighlighted: false,\n },\n]\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto px-4\">\n <div className=\"mb-16 text-center\">\n <h2 className=\"mb-4 text-center text-3xl font-bold\">\n Think about us\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-lg text-center text-lg\">\n That's the main thing people are controlled by! Thoughts -\n their perception of themselves!\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3\">\n {TESTIMONIALS.map(\n ({ name, image, date, quote, rating, isHighlighted }, key) => (\n <Card\n key={key}\n className={\n isHighlighted\n ? \"bg-primary text-primary-foreground\"\n : \"bg-transparent\"\n }\n >\n <CardContent className=\"px-6\">\n <Avatar className=\"mb-4 h-16 w-16 rounded-lg\">\n <AvatarImage src={image} alt={`${name} image`} />\n <AvatarFallback>\n {name\n .split(\" \")\n .map((n) => n[0])\n .join(\"\")}\n </AvatarFallback>\n </Avatar>\n <p\n className={`text-lg font-semibold ${isHighlighted ? \"text-primary-foreground\" : \"\"}`}\n >\n {name}\n </p>\n <p\n className={`text-sm ${isHighlighted ? \"opacity-80\" : \"text-muted-foreground\"}`}\n >\n {date}\n </p>\n <blockquote\n className={`my-4 max-w-lg ${isHighlighted ? \"opacity-80\" : \"text-muted-foreground\"}`}\n >\n "{quote}"\n </blockquote>\n <div className=\"flex items-center gap-1\">\n {Array.from({ length: 5 }).map((_, i) => (\n <Star\n key={i}\n className={`h-5 w-5 ${\n i < rating\n ? \"fill-yellow-500 text-yellow-500\"\n : isHighlighted\n ? \"fill-white/30 text-white/30\"\n : \"fill-gray-300 text-gray-300\"\n }`}\n />\n ))}\n </div>\n </CardContent>\n </Card>\n )\n )}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-12/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-12/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Card, CardContent, CardFooter } from \"@/components/ui/card\"\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto px-4\">\n <div className=\"mb-16 max-w-lg\">\n <h2 className=\"mb-4 text-3xl font-bold\">\n The heartfelt testimonials of our community\n </h2>\n <p className=\"text-muted-foreground text-lg\">\n From life-enhancing gadgets to unparalleled customer support, and\n transformative learning opportunities.\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-6 md:grid-cols-2\">\n <Card className=\"grid bg-white\">\n <CardContent className=\"p-6\">\n <blockquote className=\"text-center text-2xl font-medium md:text-start\">\n "The team went above and beyond to ensure my issue was\n resolved quickly and efficiently. Truly outstanding!"\n </blockquote>\n </CardContent>\n <CardFooter className=\"flex flex-col items-center justify-between gap-4 px-6 pb-6 text-center md:flex-row md:text-start\">\n <div>\n <p className=\"font-semibold\">Jessica Devis</p>\n <p className=\"text-muted-foreground text-sm\">\n Full Stack Developer @Netflix\n </p>\n </div>\n <img\n src=\"https://v3.material-tailwind.com/logo/netflix.svg\"\n alt=\"logo\"\n className=\"h-14 grayscale\"\n />\n </CardFooter>\n </Card>\n <Card className=\"grid bg-white\">\n <CardContent className=\"p-6\">\n <blockquote className=\"text-center text-2xl font-medium md:text-start\">\n "It have broadened my horizons and helped me advance my\n career. The community is incredibly supportive."\n </blockquote>\n </CardContent>\n <CardFooter className=\"mt-auto flex flex-col items-center justify-between gap-4 px-6 pb-6 text-center md:flex-row md:text-start\">\n <div>\n <p className=\"font-semibold\">Marcell Glock</p>\n <p className=\"text-muted-foreground text-sm\">\n Graphic Designer, @Coinbase\n </p>\n </div>\n <img\n src=\"https://v3.material-tailwind.com/logo/coinbase.svg\"\n alt=\"logo\"\n className=\"h-14 brightness-75 grayscale\"\n />\n </CardFooter>\n </Card>\n <Card className=\"col-span-full grid bg-white\">\n <CardContent className=\"p-6\">\n <blockquote className=\"text-center text-2xl font-medium\">\n "Its intuitive design and powerful features make it\n indispensable. I can't imagine going back to life before\n it!"\n </blockquote>\n </CardContent>\n <CardFooter className=\"mt-auto flex flex-col items-center justify-center gap-4 px-6 pb-6 text-center\">\n <div>\n <p className=\"font-semibold\">Emma Roberts</p>\n <p className=\"text-muted-foreground text-sm\">\n Chief Executive @Spotify\n </p>\n </div>\n <img\n src=\"https://v3.material-tailwind.com/logo/spotify.svg\"\n alt=\"logo\"\n className=\"h-14 brightness-50 grayscale\"\n />\n </CardFooter>\n </Card>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-13/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-13/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto px-4\">\n <Card className=\"rounded-xl bg-black text-white\">\n <CardContent className=\"grid w-full grid-cols-1 items-center gap-8 p-10 md:grid-cols-12\">\n <div className=\"col-span-full text-center md:col-span-8 md:pl-4 md:text-left\">\n <img\n src=\"https://v3.material-tailwind.com/logo/spotify.svg\"\n alt=\"spotify logo\"\n className=\"mr-auto mb-2 ml-auto w-32 md:mr-0 md:-ml-3\"\n />\n <blockquote className=\"mb-12 text-2xl !leading-snug\">\n "We're not always in the position that we want to be\n at. We're constantly growing. We're constantly making\n mistakes. We're constantly trying to express ourselves and\n actualize our dreams. "\n </blockquote>\n <div>\n <p className=\"mb-1 text-xl font-semibold\">Marcell Glock</p>\n <p className=\"text-white/80\">Chief Executive, Spotify</p>\n </div>\n </div>\n <div className=\"col-span-full grid justify-items-center md:col-span-4 md:justify-items-end\">\n <Avatar className=\"h-24 w-24 md:h-64 md:w-64\">\n <AvatarImage\n src=\"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\"\n alt=\"user profile\"\n />\n <AvatarFallback>MG</AvatarFallback>\n </Avatar>\n </div>\n </CardContent>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-14/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-14/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst TESTIMONIALS = [\n {\n image: \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Jessica Devis\",\n role: \"CEO @ Marketing Digital LTD\",\n quote:\n \"The connections you make at Web Summit are unparalleled, we met users all over the world.\",\n },\n {\n image: \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Mary Joshiash\",\n role: \"Marketing @ Apple INC\",\n quote:\n \"Web Summit will increase your appetite, your inspiration, your skills, your motivation and your network.\",\n },\n {\n image: \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Marcell Glock\",\n role: \"CFO @ Apple INC\",\n quote:\n \"The pessimist complains about the wind; the optimist expects it to change; the realist adjusts the sails.\",\n },\n]\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-16\">\n <div className=\"container mx-auto px-4\">\n <div className=\"mb-16 text-center\">\n <h2 className=\"mb-4 text-center text-3xl font-bold\">\n Think about us\n </h2>\n <p className=\"text-muted-foreground mx-auto max-w-lg text-center text-lg\">\n That's the main thing people are controlled by! Thoughts -\n their perception of themselves!\n </p>\n </div>\n <div className=\"grid grid-cols-1 gap-12 md:grid-cols-2 lg:grid-cols-3\">\n {TESTIMONIALS.map(({ name, image, role, quote }, key) => (\n <Card key={key}>\n <CardContent className=\"p-6 text-center\">\n <Avatar className=\"mx-auto mb-6 h-24 w-24\">\n <AvatarImage src={image} alt={`${name} image`} />\n <AvatarFallback>\n {name\n .split(\" \")\n .map((n) => n[0])\n .join(\"\")}\n </AvatarFallback>\n </Avatar>\n <p className=\"mb-1 text-lg font-semibold\">{name}</p>\n <p className=\"text-muted-foreground mb-4 text-sm\">{role}</p>\n <blockquote className=\"text-muted-foreground mx-auto max-w-lg\">\n "{quote}"\n </blockquote>\n </CardContent>\n </Card>\n ))}\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-15/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-15/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Plus, Quote, Star } from \"lucide-react\"\n\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst TESTIMONIALS = [\n {\n image: \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Lucian Eurel\",\n role: \"CEO Discord\",\n quote:\n \"Web Summit will increase your appetite, your inspiration, your skills, your motivation and your network.\",\n rating: 4,\n },\n {\n image: \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n name: \"Linde Michel\",\n role: \"CFO Slack\",\n quote:\n \"Do not go where the path may lead, go instead where there is no path and leave a trail. You will succeed on it.\",\n rating: 4,\n },\n {\n image: \"https://v3.material-tailwind.com/man-profile-2.jpg\",\n name: \"Misha Stam\",\n role: \"COO Dribbble\",\n quote:\n \"The pessimist complains about the wind; the optimist expects it to change; the realist adjusts the sails.\",\n rating: 5,\n },\n]\n\nexport default function TestimonialsBlock() {\n return (\n <section className=\"py-20\">\n <div className=\"container mx-auto px-4\">\n <div className=\"grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4\">\n {TESTIMONIALS.map(({ name, image, role, quote, rating }, key) => (\n <Card\n key={key}\n className=\"group border-border/50 hover:border-border transition-all hover:shadow-lg\"\n >\n <CardContent className=\"p-6 text-center\">\n <div className=\"relative mx-auto mb-4 inline-block\">\n <img\n src={image}\n alt={`${name} profile`}\n className=\"border-border mx-auto h-20 w-20 rounded-full border-4 object-cover transition-transform group-hover:scale-105\"\n />\n <div className=\"bg-primary absolute -right-1 -bottom-1 rounded-full p-1.5 shadow-lg\">\n <Quote className=\"text-primary-foreground h-3 w-3\" />\n </div>\n </div>\n\n <h3 className=\"mb-1 text-lg font-semibold\">{name}</h3>\n <p className=\"text-muted-foreground mb-4 text-sm\">{role}</p>\n\n <blockquote className=\"text-muted-foreground mb-4 text-sm leading-relaxed\">\n "{quote}"\n </blockquote>\n\n <div className=\"flex items-center justify-center gap-1\">\n {Array.from({ length: 5 }).map((_, i) => (\n <Star\n key={i}\n className={`h-4 w-4 ${\n i < rating\n ? \"fill-yellow-400 text-yellow-400\"\n : \"fill-muted text-muted\"\n }`}\n />\n ))}\n </div>\n </CardContent>\n </Card>\n ))}\n <Card className=\"group border-border/50 hover:border-border hover:bg-muted/50 cursor-pointer border-2 border-dashed transition-all\">\n <CardContent className=\"grid h-full min-h-[280px] w-full place-items-center p-6\">\n <div className=\"text-center\">\n <div className=\"bg-muted group-hover:bg-muted/80 mx-auto mb-3 flex h-16 w-16 items-center justify-center rounded-full transition-colors\">\n <Plus className=\"text-muted-foreground h-8 w-8\" />\n </div>\n <p className=\"text-muted-foreground text-sm font-medium\">\n Add Testimonial\n </p>\n </div>\n </CardContent>\n </Card>\n </div>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-16/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-16/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst SLIDES = [\n {\n image: \"https://images.unsplash.com/photo-1641906840000-4b88f1d44de6?auto=format&fit=crop&q=80&w=400&h=400\",\n companyLogo: \"https://v3.material-tailwind.com/logo/netflix.svg\",\n name: \"Linde Michel\",\n role: \"Social Media Executive, Netflix\",\n quote:\n \"We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.\",\n },\n {\n image: \"https://images.unsplash.com/photo-1716662318479-a9c0f1cd1a0e?auto=format&fit=crop&q=80&w=400&h=400\",\n companyLogo: \"https://v3.material-tailwind.com/logo/coinbase.svg\",\n name: \"John Down\",\n role: \"Visionary, Coinbase\",\n quote:\n \"We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.\",\n },\n {\n image: \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\",\n companyLogo: \"https://v3.material-tailwind.com/logo/spotify.svg\",\n name: \"Marcell Glock\",\n role: \"Chief Executive, Spotify\",\n quote:\n \"We're not always in the position that we want to be at. We're constantly growing. We're constantly making mistakes. We're constantly trying to express ourselves and actualize our dreams.\",\n },\n]\n\nexport default function TestimonialsBlock() {\n const [currentSlide, setCurrentSlide] = React.useState(0)\n\n const nextSlide = () => {\n setCurrentSlide((prev) => (prev + 1) % SLIDES.length)\n }\n\n const prevSlide = () => {\n setCurrentSlide((prev) => (prev - 1 + SLIDES.length) % SLIDES.length)\n }\n\n return (\n <section className=\"grid min-h-screen place-items-center bg-black py-16\">\n <div className=\"relative container mx-auto px-4\">\n <div className=\"pb-16\">\n <img\n src={SLIDES[currentSlide].companyLogo}\n alt=\"company logo\"\n className=\"mx-auto mb-8 h-24\"\n />\n <blockquote className=\"mx-auto mb-16 max-w-2xl text-center text-xl font-medium text-white\">\n "{SLIDES[currentSlide].quote}"\n </blockquote>\n <p className=\"text-center font-medium text-white\">\n {SLIDES[currentSlide].name}\n </p>\n <p className=\"text-center text-sm text-white/80\">\n {SLIDES[currentSlide].role}\n </p>\n </div>\n\n <div className=\"mt-8 flex items-center justify-center gap-2\">\n {SLIDES.map((slide, index) => (\n <button\n key={index}\n onClick={() => setCurrentSlide(index)}\n className={`h-8 w-8 rounded object-cover object-center transition-opacity ${\n index === currentSlide ? \"opacity-100\" : \"opacity-50\"\n }`}\n >\n <img\n src={slide.image}\n alt={slide.name}\n className=\"h-full w-full rounded object-cover\"\n />\n </button>\n ))}\n </div>\n\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={prevSlide}\n className=\"!absolute top-1/2 left-2 z-10 hidden -translate-y-1/2 text-white sm:inline-flex\"\n >\n <ChevronLeft className=\"h-7 w-7\" />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={nextSlide}\n className=\"!absolute top-1/2 right-2 z-10 hidden -translate-y-1/2 text-white sm:inline-flex\"\n >\n <ChevronRight className=\"h-7 w-7\" />\n </Button>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/testimonials-17/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/testimonials-17/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronLeft, ChevronRight, Quote } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\n\nconst SLIDES = [\n {\n image: \"https://v3.material-tailwind.com/logo/netflix.svg\",\n name: \"Louis Miriam\",\n role: \"COO @ Netflix\",\n quote:\n \"Knowledge is either from direct experience or from verifiable, falsifiable science. There is knowledge that is transmitted but not verifiable / falsifiable. They're slowed down by their perception of themselves.\",\n },\n {\n image: \"https://v3.material-tailwind.com/logo/coinbase.svg\",\n name: \"John Down\",\n role: \"CEO @ Coinbase\",\n quote:\n \"Knowledge is either from direct experience or from verifiable, falsifiable science. There is knowledge that is transmitted but not verifiable / falsifiable. They're slowed down by their perception of themselves.\",\n },\n]\n\nexport default function TestimonialsBlock() {\n const [currentSlide, setCurrentSlide] = React.useState(0)\n\n const nextSlide = () => {\n setCurrentSlide((prev) => (prev + 1) % SLIDES.length)\n }\n\n const prevSlide = () => {\n setCurrentSlide((prev) => (prev - 1 + SLIDES.length) % SLIDES.length)\n }\n\n return (\n <section className=\"py-20\">\n <div className=\"container mx-auto px-4\">\n <Card className=\"relative overflow-hidden rounded-2xl bg-[url('https://images.unsplash.com/photo-1638438134099-a91e5373aaf0?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=2070')] bg-cover bg-center p-6\">\n <span className=\"absolute inset-0 h-full w-full bg-gradient-to-br from-black/80 to-black/60 backdrop-blur-sm\" />\n\n <CardContent className=\"relative grid w-full grid-cols-1 items-center gap-8 px-6 py-12 md:grid-cols-12 md:px-12 md:py-16\">\n <div className=\"col-span-full md:col-span-8\">\n <Quote className=\"mb-6 h-12 w-12 text-white/30\" />\n <blockquote className=\"mb-8 text-xl leading-relaxed font-medium text-white md:text-2xl\">\n "{SLIDES[currentSlide].quote}"\n </blockquote>\n <div className=\"flex flex-col gap-2 md:flex-row md:items-center md:gap-3\">\n <p className=\"text-lg font-semibold text-white\">\n {SLIDES[currentSlide].name}\n </p>\n <span className=\"hidden text-white/50 md:inline\">•</span>\n <p className=\"text-sm text-white/70\">\n {SLIDES[currentSlide].role}\n </p>\n </div>\n </div>\n\n <div className=\"col-span-full flex items-center justify-center md:col-span-4\">\n <div className=\"rounded-xl bg-white/10 p-8 backdrop-blur-sm\">\n <img\n src={SLIDES[currentSlide].image}\n alt=\"company logo\"\n className=\"h-16 md:h-20\"\n />\n </div>\n </div>\n </CardContent>\n\n <div className=\"absolute bottom-8 left-1/2 flex -translate-x-1/2 items-center gap-3\">\n {SLIDES.map((_, index) => (\n <button\n key={index}\n onClick={() => setCurrentSlide(index)}\n aria-label={`Go to slide ${index + 1}`}\n className={`h-2 rounded-full transition-all ${\n index === currentSlide\n ? \"w-8 bg-white\"\n : \"w-2 bg-white/50 hover:bg-white/75\"\n }`}\n />\n ))}\n </div>\n\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={prevSlide}\n aria-label=\"Previous testimonial\"\n className=\"!absolute top-1/2 left-4 z-10 -translate-y-1/2 text-white transition-all hover:bg-white/20 hover:text-white\"\n >\n <ChevronLeft className=\"h-8 w-8\" />\n </Button>\n <Button\n size=\"icon\"\n variant=\"ghost\"\n onClick={nextSlide}\n aria-label=\"Next testimonial\"\n className=\"!absolute top-1/2 right-4 z-10 -translate-y-1/2 text-white transition-all hover:bg-white/20 hover:text-white\"\n >\n <ChevronRight className=\"h-8 w-8\" />\n </Button>\n </Card>\n </div>\n </section>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/modals-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/modals-01/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { TriangleAlert, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function ModalsBlock() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <div className=\"grid min-h-screen w-full place-items-center\">\n <Dialog open={isOpen} onOpenChange={setIsOpen}>\n <DialogTrigger asChild>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[500px]\">\n <button\n onClick={() => setIsOpen(false)}\n className=\"ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n <div className=\"flex items-start gap-4\">\n <div className=\"flex-1\">\n <TriangleAlert className=\"text-destructive mb-6 h-14 w-14\" />\n <DialogHeader>\n <DialogTitle className=\"mb-1 text-xl\">\n Reset Settings\n </DialogTitle>\n </DialogHeader>\n <p className=\"text-muted-foreground mt-2 max-w-xl text-sm\">\n Are you sure you want to reset all settings to their default\n values? This action cannot be undone.\n </p>\n </div>\n </div>\n\n <form className=\"mt-6 space-y-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"reset\" className=\"text-sm\">\n Please type{\" \"}\n <span className=\"text-foreground font-semibold\">\n "Reset settings"\n </span>{\" \"}\n to confirm.\n </Label>\n <div className=\"flex w-full flex-col items-center gap-2 sm:flex-row\">\n <Input\n id=\"reset\"\n placeholder=\"Reset settings\"\n className=\"flex-1\"\n />\n <Button type=\"submit\" className=\"w-full shrink-0 sm:w-auto\">\n I understand, reset settings\n </Button>\n </div>\n </div>\n </form>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/modals-02/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/modals-02/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Checkbox } from \"@/components/ui/checkbox\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { RadioGroup, RadioGroupItem } from \"@/components/ui/radio-group\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nconst NOTIFICATION = [\"Email\", \"SMS\", \"Push Notification\"]\nconst TOOLS = [\"React\", \"Material Tailwind\", \"TailwindCSS\", \"Next.js\"]\n\nexport default function ModalsBlock() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <div className=\"grid min-h-screen w-full place-items-center\">\n <Dialog open={isOpen} onOpenChange={setIsOpen}>\n <DialogTrigger asChild>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[600px]\">\n <button\n onClick={() => setIsOpen(false)}\n className=\"ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n <DialogHeader>\n <DialogTitle className=\"mb-1 text-xl\">Edit Profile</DialogTitle>\n <p className=\"text-muted-foreground text-sm\">\n Update your profile information below.\n </p>\n </DialogHeader>\n\n <form className=\"mt-6 space-y-6\">\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"name\" className=\"font-semibold\">\n My Name\n </Label>\n <Input id=\"name\" placeholder=\"Emma Roberts\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"profession\" className=\"font-semibold\">\n I'm\n </Label>\n <Select>\n <SelectTrigger id=\"profession\" className=\"w-full\">\n <SelectValue placeholder=\"Select Profession\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"ui-ux\">UI/UX Designer</SelectItem>\n <SelectItem value=\"frontend\">Frontend Developer</SelectItem>\n <SelectItem value=\"backend\">Backend Developer</SelectItem>\n <SelectItem value=\"fullstack\">\n Fullstack Developer\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n\n <div className=\"space-y-2 border-y py-6\">\n <p className=\"font-semibold\">\n Interested in the following technologies\n </p>\n <p className=\"text-muted-foreground text-sm\">\n Choose the frameworks you work on\n </p>\n <div className=\"mt-4 flex flex-wrap items-center gap-6\">\n {TOOLS.map((tool) => (\n <div key={tool} className=\"flex items-center gap-2\">\n <Checkbox id={tool} />\n <Label\n htmlFor={tool}\n className=\"text-muted-foreground cursor-pointer text-sm\"\n >\n {tool}\n </Label>\n </div>\n ))}\n </div>\n </div>\n\n <div className=\"space-y-2\">\n <p className=\"font-semibold\">Notification preferences</p>\n <p className=\"text-muted-foreground text-sm\">\n Select where you want to be notified\n </p>\n <RadioGroup className=\"mt-4 flex items-center gap-6\">\n {NOTIFICATION.map((notify) => (\n <div key={notify} className=\"flex items-center gap-2\">\n <RadioGroupItem value={notify} id={notify} />\n <Label\n htmlFor={notify}\n className=\"text-muted-foreground text-sm\"\n >\n {notify}\n </Label>\n </div>\n ))}\n </RadioGroup>\n </div>\n\n <div className=\"flex items-center justify-end gap-2 pt-4\">\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </Button>\n <Button type=\"submit\">Update Profile</Button>\n </div>\n </form>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/modals-03/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/modals-03/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { ChevronDown, Pencil, X } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuTrigger,\n} from \"@/components/ui/dropdown-menu\"\nimport { Input } from \"@/components/ui/input\"\n\ninterface UserProps {\n name: string\n img: string\n email: string\n}\n\nfunction User({ name, img, email }: UserProps) {\n const [selected, setSelected] = React.useState(\"Can View\")\n\n return (\n <div className=\"flex items-center justify-between gap-4\">\n <div className=\"flex items-center gap-4\">\n <Avatar>\n <AvatarImage src={img} alt={name} />\n <AvatarFallback>{name.charAt(0)}</AvatarFallback>\n </Avatar>\n <div className=\"space-y-0.5\">\n <p className=\"text-sm font-semibold\">{name}</p>\n <p className=\"text-muted-foreground text-sm\">{email}</p>\n </div>\n </div>\n <DropdownMenu>\n <DropdownMenuTrigger asChild>\n <Button variant=\"ghost\" size=\"sm\" className=\"group\">\n <span className=\"hidden items-center gap-1 sm:flex\">\n {selected}{\" \"}\n <ChevronDown className=\"h-4 w-4 transition-transform group-data-[state=open]:rotate-180\" />\n </span>\n <Pencil className=\"block h-4 w-4 sm:hidden\" />\n </Button>\n </DropdownMenuTrigger>\n <DropdownMenuContent align=\"end\">\n <DropdownMenuItem onClick={() => setSelected(\"Can View\")}>\n Can View\n </DropdownMenuItem>\n <DropdownMenuItem onClick={() => setSelected(\"Can Edit\")}>\n Can Edit\n </DropdownMenuItem>\n </DropdownMenuContent>\n </DropdownMenu>\n </div>\n )\n}\n\nexport default function ModalsBlock() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <div className=\"grid min-h-screen w-full place-items-center\">\n <Dialog open={isOpen} onOpenChange={setIsOpen}>\n <DialogTrigger asChild>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[550px]\">\n <button\n onClick={() => setIsOpen(false)}\n className=\"ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n <DialogHeader>\n <DialogTitle className=\"mb-1 text-xl\">\n Share with New Members\n </DialogTitle>\n <p className=\"text-muted-foreground max-w-xl text-sm\">\n Welcome new members to your team! Use this modal to seamlessly add\n individuals to your dashboard, enabling collaboration and\n enhancing productivity.\n </p>\n </DialogHeader>\n\n <form className=\"my-6 flex w-full flex-col items-center gap-2 sm:flex-row\">\n <Input type=\"email\" placeholder=\"Email, comma separated\" />\n <Button type=\"submit\" className=\"w-full shrink-0 sm:w-auto\">\n Invite\n </Button>\n <Button\n type=\"button\"\n variant=\"outline\"\n className=\"w-full shrink-0 sm:w-auto\"\n >\n Copy Link\n </Button>\n </form>\n\n <div className=\"space-y-6\">\n <User\n img=\"https://i.pravatar.cc/150?img=1\"\n name=\"Emma Roberts\"\n email=\"emma@mail.com\"\n />\n <User\n img=\"https://i.pravatar.cc/150?img=2\"\n name=\"John Smith\"\n email=\"john@mail.com\"\n />\n <User\n img=\"https://i.pravatar.cc/150?img=3\"\n name=\"Sarah Johnson\"\n email=\"sarah@mail.com\"\n />\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/modals-04/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/modals-04/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Trash, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nexport default function ModalsBlock() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <div className=\"grid min-h-screen w-full place-items-center\">\n <Dialog open={isOpen} onOpenChange={setIsOpen}>\n <DialogTrigger asChild>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n </DialogTrigger>\n <DialogContent className=\"max-h-[90vh] overflow-y-auto sm:max-w-[700px]\">\n <button\n onClick={() => setIsOpen(false)}\n className=\"ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n <DialogHeader>\n <DialogTitle className=\"mb-1 text-xl\">\n Update Product Modal\n </DialogTitle>\n <p className=\"text-muted-foreground text-sm\">\n Edit product features and save it.\n </p>\n </DialogHeader>\n\n <div className=\"my-6 grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-3\">\n {[...new Array(3)].map((_, i) => (\n <div\n key={i}\n className=\"bg-muted relative h-44 w-full overflow-hidden rounded-md\"\n >\n <img\n src={`https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=400&h=400&h=400&fit=crop&crop=center&q=80`}\n alt={`Product ${i + 1}`}\n className=\"h-full w-full object-cover object-center\"\n />\n <Button\n size=\"sm\"\n variant=\"ghost\"\n className=\"!absolute right-2 bottom-2\"\n >\n <Trash className=\"h-4 w-4\" />\n </Button>\n </div>\n ))}\n </div>\n\n <form className=\"space-y-6\">\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"productName\" className=\"font-semibold\">\n Product Name\n </Label>\n <Input id=\"productName\" placeholder=\"Laptop\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"category\" className=\"font-semibold\">\n Category\n </Label>\n <Select>\n <SelectTrigger id=\"category\" className=\"w-full\">\n <SelectValue placeholder=\"Select Category\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"electronics\">Electronics</SelectItem>\n <SelectItem value=\"clothing\">Clothing</SelectItem>\n <SelectItem value=\"accessories\">Accessories</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"price\" className=\"font-semibold\">\n Price\n </Label>\n <Input id=\"price\" placeholder=\"1000\" />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"brand\" className=\"font-semibold\">\n Brand\n </Label>\n <Select>\n <SelectTrigger id=\"brand\" className=\"w-full\">\n <SelectValue placeholder=\"Select Brand\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"apple\">Apple</SelectItem>\n <SelectItem value=\"samsung\">Samsung</SelectItem>\n <SelectItem value=\"microsoft\">Microsoft</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"description\" className=\"font-semibold\">\n Description\n </Label>\n <Textarea\n id=\"description\"\n placeholder=\"Write something about your product.\"\n />\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"tags\" className=\"font-semibold\">\n Tags\n </Label>\n <Input\n id=\"tags\"\n placeholder=\"Add up to 10 tags, separated by commas (,)\"\n />\n </div>\n\n <div className=\"flex items-center justify-end gap-2 pt-4\">\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </Button>\n <Button type=\"submit\">Update Product</Button>\n </div>\n </form>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/modals-05/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/modals-05/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CloudUpload, Trash, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\n\nconst IMAGES = [\n {\n name: \"cover-1.jpg\",\n size: \"140 KB\",\n },\n {\n name: \"cover-2.jpg\",\n size: \"288 KB\",\n },\n]\n\nexport default function ModalsBlock() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <div className=\"grid min-h-screen w-full place-items-center\">\n <Dialog open={isOpen} onOpenChange={setIsOpen}>\n <DialogTrigger asChild>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[600px]\">\n <button\n onClick={() => setIsOpen(false)}\n className=\"ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n <DialogHeader>\n <DialogTitle className=\"mb-1 text-xl\">Upload Files</DialogTitle>\n <p className=\"text-muted-foreground text-sm\">\n Easily upload files to your account with just a few clicks.\n </p>\n </DialogHeader>\n\n <form className=\"mt-6 space-y-4\">\n <Card className=\"border-2 border-dashed\">\n <CardContent className=\"grid min-h-64 place-items-center p-6\">\n <label htmlFor=\"upload\" className=\"cursor-pointer\">\n <input type=\"file\" className=\"hidden\" id=\"upload\" />\n <div className=\"mx-auto max-w-md text-center\">\n <CloudUpload className=\"text-muted-foreground mx-auto mb-6 h-12 w-12\" />\n <p className=\"mb-2 font-semibold\">\n Drag and Drop or{\" \"}\n <span className=\"underline\">Choose a Local File</span>\n </p>\n <p className=\"text-muted-foreground text-sm\">\n Supported formats: .png, .jpg, .svg\n </p>\n </div>\n </label>\n </CardContent>\n </Card>\n\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n {IMAGES.map(({ name, size }) => (\n <Card key={name}>\n <CardContent className=\"flex items-start justify-between p-3\">\n <div className=\"flex items-center gap-4\">\n <img\n src=\"https://images.unsplash.com/photo-1505740420928-5e560c06d30e?w=100&h=100&fit=crop&crop=center&q=80\"\n alt={name}\n className=\"h-12 w-12 rounded object-cover object-center\"\n />\n <div className=\"space-y-1\">\n <p className=\"text-sm font-semibold\">{name}</p>\n <p className=\"text-muted-foreground text-sm\">{size}</p>\n </div>\n </div>\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"sm\"\n className=\"shrink-0\"\n >\n <Trash className=\"h-4 w-4\" />\n </Button>\n </CardContent>\n </Card>\n ))}\n </div>\n\n <div className=\"flex items-center justify-end gap-2 pt-4\">\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </Button>\n <Button type=\"submit\">Upload</Button>\n </div>\n </form>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/modals-06/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/modals-06/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Unlock, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\n\nexport default function ModalsBlock() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <div className=\"grid min-h-screen w-full place-items-center\">\n <Dialog open={isOpen} onOpenChange={setIsOpen}>\n <DialogTrigger asChild>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[500px]\">\n <button\n onClick={() => setIsOpen(false)}\n className=\"ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n <div className=\"flex items-start gap-4\">\n <div className=\"flex-1\">\n <Unlock className=\"text-primary mb-6 h-12 w-12\" />\n <DialogHeader>\n <DialogTitle className=\"mb-2 text-xl\">\n Publish Capsule Collection\n </DialogTitle>\n </DialogHeader>\n <p className=\"text-muted-foreground mt-2 text-sm\">\n This action will expose your private capsule collection to\n public viewing across all fashion storefronts.\n </p>\n </div>\n </div>\n\n <Card className=\"my-6\">\n <CardContent className=\"space-y-3 p-4\">\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground text-sm\">\n Collection\n </span>\n <span className=\"text-sm font-medium\">fall-winter-vault</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground text-sm\">Views</span>\n <span className=\"text-sm font-medium\">0</span>\n </div>\n <div className=\"flex items-center justify-between\">\n <span className=\"text-muted-foreground text-sm\">Likes</span>\n <span className=\"text-sm font-medium\">0</span>\n </div>\n </CardContent>\n </Card>\n\n <div className=\"flex items-center justify-end gap-2 pt-4\">\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </Button>\n <Button type=\"submit\">Make Collection Public</Button>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/modals-07/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/modals-07/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\n\nexport default function ModalsBlock() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <div className=\"grid min-h-screen w-full place-items-center\">\n <Dialog open={isOpen} onOpenChange={setIsOpen}>\n <DialogTrigger asChild>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[500px]\">\n <button\n onClick={() => setIsOpen(false)}\n className=\"ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n <DialogHeader>\n <DialogTitle className=\"mb-2 text-xl\">\n Visibility Settings\n </DialogTitle>\n </DialogHeader>\n <p className=\"text-muted-foreground mt-2 text-sm\">\n This collection is currently restricted to internal collaborators.\n You can modify who can view or access it from this setting.\n </p>\n\n <div className=\"flex items-center justify-end gap-2 pt-6\">\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </Button>\n <Button variant=\"destructive\">Change Visibility</Button>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/modals-08/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/modals-08/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertTriangle, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\n\nexport default function ModalsBlock() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <div className=\"grid min-h-screen w-full place-items-center\">\n <Dialog open={isOpen} onOpenChange={setIsOpen}>\n <DialogTrigger asChild>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[550px]\">\n <button\n onClick={() => setIsOpen(false)}\n className=\"ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n <DialogHeader>\n <DialogTitle className=\"mb-2 text-xl\">\n Disable Collection Lock Rules\n </DialogTitle>\n </DialogHeader>\n <p className=\"text-muted-foreground mt-2 text-sm\">\n Removing edit rules will allow unrestricted changes to your seasonal\n campaign folders and product groups.\n </p>\n\n <Card className=\"border-destructive/50 bg-destructive/5 my-6\">\n <CardHeader className=\"pb-3\">\n <CardTitle className=\"flex items-center gap-2 text-base\">\n <AlertTriangle className=\"text-destructive h-4 w-4\" />\n Access Restrictions Will Be Removed\n </CardTitle>\n </CardHeader>\n <CardContent>\n <p className=\"text-muted-foreground text-sm\">\n Disabling these rules unlocks direct edits to sensitive assets\n and might affect internal syncs.\n </p>\n </CardContent>\n </Card>\n\n <div className=\"mb-6 space-y-3\">\n <p className=\"text-sm font-semibold\">This will impact:</p>\n <ul className=\"text-muted-foreground space-y-2 text-sm\">\n <li className=\"flex items-start gap-2\">\n <span className=\"text-destructive mt-1\">•</span>\n <span>Designer review checkpoints</span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"text-destructive mt-1\">•</span>\n <span>Version freeze policies</span>\n </li>\n </ul>\n </div>\n\n <p className=\"text-muted-foreground mb-6 text-xs\">\n Note: 0 edit lock rules currently active\n </p>\n\n <div className=\"flex items-center justify-end gap-2 pt-4\">\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </Button>\n <Button variant=\"destructive\">Disable Edit Locks</Button>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/modals-09/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/modals-09/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertTriangle, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent } from \"@/components/ui/card\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function ModalsBlock() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <div className=\"grid min-h-screen w-full place-items-center\">\n <Dialog open={isOpen} onOpenChange={setIsOpen}>\n <DialogTrigger asChild>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[550px]\">\n <button\n onClick={() => setIsOpen(false)}\n className=\"ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n <DialogHeader>\n <DialogTitle className=\"mb-2 text-xl\">\n Transfer Showroom Ownership\n </DialogTitle>\n </DialogHeader>\n <p className=\"text-muted-foreground mt-2 text-sm\">\n Switch control of this fashion showroom space to another user or\n organization.\n </p>\n\n <form className=\"mt-6 space-y-6\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"owner\" className=\"font-semibold\">\n Select new owner\n </Label>\n <Select>\n <SelectTrigger id=\"owner\" className=\"w-full\">\n <SelectValue placeholder=\"Choose owner\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"styling-team\">Styling Team</SelectItem>\n <SelectItem value=\"content-studio\">Content Studio</SelectItem>\n <SelectItem value=\"retail-partner\">Retail Partner</SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div className=\"space-y-2\">\n <Label htmlFor=\"handle\" className=\"font-semibold\">\n Confirm collection handle\n </Label>\n <Input id=\"handle\" placeholder=\"resort-collection-2026\" />\n </div>\n\n <Card className=\"border-yellow-500/50 bg-yellow-500/5\">\n <CardContent className=\"p-4\">\n <div className=\"flex items-start gap-3\">\n <AlertTriangle className=\"mt-0.5 h-5 w-5 shrink-0 text-yellow-600\" />\n <p className=\"text-muted-foreground text-sm\">\n Transferring ownership will revoke your access to draft\n sets, unpublished campaigns, and internal analytics.\n </p>\n </div>\n </CardContent>\n </Card>\n\n <div className=\"flex items-center justify-end gap-2 pt-4\">\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </Button>\n <Button type=\"submit\" variant=\"destructive\">\n Transfer Access\n </Button>\n </div>\n </form>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/modals-10/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/modals-10/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { AlertCircle, X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\n\nexport default function ModalsBlock() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <div className=\"grid min-h-screen w-full place-items-center\">\n <Dialog open={isOpen} onOpenChange={setIsOpen}>\n <DialogTrigger asChild>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[550px]\">\n <button\n onClick={() => setIsOpen(false)}\n className=\"ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n <DialogHeader>\n <DialogTitle className=\"mb-2 text-xl\">\n Permanently Remove Archive\n </DialogTitle>\n </DialogHeader>\n <p className=\"text-muted-foreground mt-2 text-sm\">\n Erasing this fashion vault will wipe its data across your platform\n and collaborators.\n </p>\n\n <Card className=\"border-destructive/50 bg-destructive/5 my-6\">\n <CardHeader className=\"pb-3\">\n <CardTitle className=\"flex items-center gap-2 text-base\">\n <AlertCircle className=\"text-destructive h-4 w-4\" />\n Review Before Deleting\n </CardTitle>\n </CardHeader>\n <CardContent>\n <p className=\"text-muted-foreground text-sm\">\n Once removed, associated content (lookbooks, notes, edits) will\n be lost forever.\n </p>\n </CardContent>\n </Card>\n\n <div className=\"mb-6 space-y-3\">\n <p className=\"text-sm font-semibold\">This action will:</p>\n <ul className=\"text-muted-foreground space-y-2 text-sm\">\n <li className=\"flex items-start gap-2\">\n <span className=\"text-destructive mt-1\">•</span>\n <span>Deletes all digital outfits and metadata</span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"text-destructive mt-1\">•</span>\n <span>Disconnects synced creative briefs</span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"text-primary mt-1\">•</span>\n <span>No change to billing or usage limits</span>\n </li>\n </ul>\n </div>\n\n <div className=\"flex items-center justify-end gap-2 pt-4\">\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </Button>\n <Button type=\"submit\">I acknowledge and confirm</Button>\n </div>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/modals-11/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/modals-11/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { X } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport {\n Dialog,\n DialogContent,\n DialogHeader,\n DialogTitle,\n DialogTrigger,\n} from \"@/components/ui/dialog\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nexport default function ModalsBlock() {\n const [isOpen, setIsOpen] = React.useState(false)\n\n return (\n <div className=\"grid min-h-screen w-full place-items-center\">\n <Dialog open={isOpen} onOpenChange={setIsOpen}>\n <DialogTrigger asChild>\n <Button onClick={() => setIsOpen(true)}>Open Modal</Button>\n </DialogTrigger>\n <DialogContent className=\"sm:max-w-[500px]\">\n <button\n onClick={() => setIsOpen(false)}\n className=\"ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:pointer-events-none\"\n >\n <X className=\"h-4 w-4\" />\n <span className=\"sr-only\">Close</span>\n </button>\n <DialogHeader>\n <DialogTitle className=\"mb-2 text-xl\">\n Erase Fashion Vault\n </DialogTitle>\n </DialogHeader>\n <p className=\"text-muted-foreground mt-2 text-sm\">\n Type the full collection handle to confirm irreversible deletion of\n this vault.\n </p>\n\n <form className=\"mt-6 space-y-6\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"identifier\" className=\"font-semibold\">\n Collection identifier\n </Label>\n <Input id=\"identifier\" placeholder=\"spring-edit-collection\" />\n </div>\n\n <div className=\"flex items-center justify-end gap-2 pt-4\">\n <Button\n type=\"button\"\n variant=\"outline\"\n onClick={() => setIsOpen(false)}\n >\n Cancel\n </Button>\n <Button type=\"submit\" variant=\"destructive\">\n Delete Vault\n </Button>\n </div>\n </form>\n </DialogContent>\n </Dialog>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/account-basic-info-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/account-basic-info/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { format } from \"date-fns\"\nimport {\n Briefcase,\n CalendarIcon,\n Globe,\n GraduationCap,\n Mail,\n MapPin,\n Phone,\n User,\n} from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Calendar } from \"@/components/ui/calendar\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Popover,\n PopoverContent,\n PopoverTrigger,\n} from \"@/components/ui/popover\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nexport default function AccountBasicInfo01() {\n const [birthDate, setBirthDate] = React.useState<Date>()\n\n return (\n <div className=\"mx-auto max-w-5xl p-6\">\n <Card className=\"bg-card border p-8\">\n <div className=\"border-b pb-6\">\n <h2 className=\"text-2xl font-semibold tracking-tight\">\n Personal Information\n </h2>\n <p className=\"text-muted-foreground mt-2 text-sm\">\n Manage your personal details and profile information. This\n information will be visible to other users on the platform.\n </p>\n </div>\n\n <form className=\"space-y-8\">\n {/* Basic Details Section */}\n <div className=\"space-y-6\">\n <div>\n <h3 className=\"mb-4 text-sm font-medium\">Basic Details</h3>\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label\n htmlFor=\"firstName\"\n className=\"flex items-center gap-2\"\n >\n <User className=\"text-muted-foreground h-4 w-4\" />\n First Name\n </Label>\n <Input\n id=\"firstName\"\n placeholder=\"Emma\"\n defaultValue=\"Emma\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"lastName\" className=\"flex items-center gap-2\">\n <User className=\"text-muted-foreground h-4 w-4\" />\n Last Name\n </Label>\n <Input\n id=\"lastName\"\n placeholder=\"Roberts\"\n defaultValue=\"Roberts\"\n />\n </div>\n </div>\n </div>\n\n {/* Professional Information */}\n <div>\n <h3 className=\"mb-4 text-sm font-medium\">\n Professional Information\n </h3>\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"gender\" className=\"flex items-center gap-2\">\n <User className=\"text-muted-foreground h-4 w-4\" />\n Gender\n </Label>\n <Select defaultValue=\"female\">\n <SelectTrigger id=\"gender\">\n <SelectValue placeholder=\"Select Gender\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"male\">Male</SelectItem>\n <SelectItem value=\"female\">Female</SelectItem>\n <SelectItem value=\"other\">Other</SelectItem>\n <SelectItem value=\"prefer-not-to-say\">\n Prefer not to say\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div className=\"space-y-2\">\n <Label className=\"flex items-center gap-2\">\n <CalendarIcon className=\"text-muted-foreground h-4 w-4\" />\n Birth Date\n </Label>\n <Popover>\n <PopoverTrigger asChild>\n <Button\n variant=\"outline\"\n className=\"w-full justify-start text-left font-normal\"\n >\n <CalendarIcon className=\"mr-2 h-4 w-4\" />\n {birthDate ? format(birthDate, \"PPP\") : \"Select a date\"}\n </Button>\n </PopoverTrigger>\n <PopoverContent className=\"w-auto p-0\" align=\"start\">\n <Calendar\n mode=\"single\"\n selected={birthDate}\n onSelect={setBirthDate}\n initialFocus\n />\n </PopoverContent>\n </Popover>\n </div>\n\n <div className=\"space-y-2\">\n <Label\n htmlFor=\"profession\"\n className=\"flex items-center gap-2\"\n >\n <Briefcase className=\"text-muted-foreground h-4 w-4\" />\n Profession\n </Label>\n <Select defaultValue=\"ui-ux\">\n <SelectTrigger id=\"profession\">\n <SelectValue placeholder=\"Select Profession\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"ui-ux\">UI/UX Designer</SelectItem>\n <SelectItem value=\"frontend\">\n Frontend Developer\n </SelectItem>\n <SelectItem value=\"backend\">Backend Developer</SelectItem>\n <SelectItem value=\"fullstack\">\n Fullstack Developer\n </SelectItem>\n <SelectItem value=\"product-manager\">\n Product Manager\n </SelectItem>\n <SelectItem value=\"data-scientist\">\n Data Scientist\n </SelectItem>\n </SelectContent>\n </Select>\n </div>\n\n <div className=\"space-y-2\">\n <Label\n htmlFor=\"education\"\n className=\"flex items-center gap-2\"\n >\n <GraduationCap className=\"text-muted-foreground h-4 w-4\" />\n Education\n </Label>\n <Select defaultValue=\"university\">\n <SelectTrigger id=\"education\">\n <SelectValue placeholder=\"Select Level\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"high-school\">High School</SelectItem>\n <SelectItem value=\"college\">College</SelectItem>\n <SelectItem value=\"university\">University</SelectItem>\n <SelectItem value=\"masters\">\n Master's Degree\n </SelectItem>\n <SelectItem value=\"phd\">Ph.D.</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n </div>\n\n {/* Contact Information */}\n <div>\n <h3 className=\"mb-4 text-sm font-medium\">Contact Information</h3>\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"email\" className=\"flex items-center gap-2\">\n <Mail className=\"text-muted-foreground h-4 w-4\" />\n Email Address\n </Label>\n <Input\n id=\"email\"\n type=\"email\"\n placeholder=\"emma@mail.com\"\n defaultValue=\"emma@mail.com\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label\n htmlFor=\"confirmEmail\"\n className=\"flex items-center gap-2\"\n >\n <Mail className=\"text-muted-foreground h-4 w-4\" />\n Confirm Email\n </Label>\n <Input\n id=\"confirmEmail\"\n type=\"email\"\n placeholder=\"emma@mail.com\"\n defaultValue=\"emma@mail.com\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"phone\" className=\"flex items-center gap-2\">\n <Phone className=\"text-muted-foreground h-4 w-4\" />\n Phone Number\n </Label>\n <Input\n id=\"phone\"\n placeholder=\"+1 (555) 123-4567\"\n defaultValue=\"+1 (555) 123-4567\"\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"location\" className=\"flex items-center gap-2\">\n <MapPin className=\"text-muted-foreground h-4 w-4\" />\n Location\n </Label>\n <Input\n id=\"location\"\n placeholder=\"City, Country\"\n defaultValue=\"Florida, USA\"\n />\n </div>\n </div>\n </div>\n\n {/* Additional Information */}\n <div>\n <h3 className=\"mb-4 text-sm font-medium\">\n Additional Information\n </h3>\n <div className=\"grid grid-cols-1 gap-4 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"language\" className=\"flex items-center gap-2\">\n <Globe className=\"text-muted-foreground h-4 w-4\" />\n Preferred Language\n </Label>\n <Select defaultValue=\"english\">\n <SelectTrigger id=\"language\">\n <SelectValue placeholder=\"Select Language\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"english\">English</SelectItem>\n <SelectItem value=\"spanish\">Spanish</SelectItem>\n <SelectItem value=\"french\">French</SelectItem>\n <SelectItem value=\"german\">German</SelectItem>\n <SelectItem value=\"chinese\">Chinese</SelectItem>\n </SelectContent>\n </Select>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"timezone\" className=\"flex items-center gap-2\">\n <Globe className=\"text-muted-foreground h-4 w-4\" />\n Timezone\n </Label>\n <Select defaultValue=\"est\">\n <SelectTrigger id=\"timezone\">\n <SelectValue placeholder=\"Select Timezone\" />\n </SelectTrigger>\n <SelectContent>\n <SelectItem value=\"est\">Eastern Time (ET)</SelectItem>\n <SelectItem value=\"cst\">Central Time (CT)</SelectItem>\n <SelectItem value=\"mst\">Mountain Time (MT)</SelectItem>\n <SelectItem value=\"pst\">Pacific Time (PT)</SelectItem>\n <SelectItem value=\"utc\">UTC</SelectItem>\n </SelectContent>\n </Select>\n </div>\n </div>\n </div>\n </div>\n\n <div className=\"flex justify-end gap-3 border-t pt-6\">\n <Button type=\"button\" variant=\"outline\">\n Cancel\n </Button>\n <Button type=\"submit\">Save Changes</Button>\n </div>\n </form>\n </Card>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/account-2fa-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/account-2fa/page.tsx",
|
|
"content": "\"use client\"\n\nimport {\n AlertCircle,\n CheckCircle2,\n KeyRound,\n MessageSquare,\n Shield,\n Smartphone,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\n\nconst TwoFactorMethods = [\n {\n title: \"Security Keys\",\n description:\n \"Physical security keys provide the highest level of protection by requiring a hardware device for authentication.\",\n value: \"No security keys configured\",\n action: \"Add\",\n icon: KeyRound,\n isConfigured: false,\n recommended: true,\n },\n {\n title: \"Authenticator App\",\n description:\n \"Generate time-based one-time passwords (TOTP) using apps like Google Authenticator or Authy.\",\n value: \"Not configured\",\n action: \"Setup\",\n icon: Smartphone,\n isConfigured: false,\n recommended: true,\n },\n {\n title: \"SMS Number\",\n description:\n \"Receive verification codes via text message to your registered mobile number.\",\n value: \"+1 (555) 123-4567\",\n action: \"Edit\",\n icon: MessageSquare,\n isConfigured: true,\n recommended: false,\n },\n]\n\nexport default function Account2FA01() {\n return (\n <div className=\"mx-auto max-w-5xl p-6\">\n <Card className=\"bg-card border p-8\">\n <div className=\"flex flex-wrap items-start justify-between gap-4 border-b pb-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg\">\n <Shield className=\"text-primary h-6 w-6\" />\n </div>\n <div>\n <h2 className=\"text-2xl font-semibold tracking-tight\">\n Two-Factor Authentication\n </h2>\n <p className=\"text-muted-foreground mt-1 text-sm\">\n Add an extra layer of security to your account\n </p>\n </div>\n </div>\n <Badge\n variant=\"outline\"\n className=\"border-green-500 bg-green-50 text-green-700\"\n >\n <CheckCircle2 className=\"mr-1 h-3 w-3\" />\n Enabled\n </Badge>\n </div>\n\n <div className=\"space-y-0\">\n {TwoFactorMethods.map((method, index) => {\n const Icon = method.icon\n return (\n <div\n key={method.title}\n className={`group flex flex-wrap items-center justify-between gap-6 py-6 ${\n index !== TwoFactorMethods.length - 1\n ? \"border-border border-b\"\n : \"\"\n }`}\n >\n <div className=\"flex items-start gap-4\">\n <div\n className={`bg-muted flex h-12 w-12 shrink-0 items-center justify-center rounded-lg ${method.isConfigured ? \"bg-primary/10\" : \"\"}`}\n >\n <Icon\n className={`h-6 w-6 ${method.isConfigured ? \"text-primary\" : \"text-muted-foreground\"}`}\n />\n </div>\n <div className=\"flex-1 space-y-2\">\n <div className=\"flex items-center gap-2\">\n <p className=\"font-semibold\">{method.title}</p>\n {method.recommended && (\n <span className=\"text-primary border-primary bg-primary/10 rounded-full border px-2 py-0.5 text-xs font-medium\">\n Recommended\n </span>\n )}\n </div>\n <p className=\"text-muted-foreground text-sm\">\n {method.description}\n </p>\n <p\n className={`text-sm ${\n method.isConfigured\n ? \"font-semibold\"\n : \"text-muted-foreground\"\n }`}\n >\n {method.isConfigured && (\n <CheckCircle2 className=\"mr-1 inline h-4 w-4 text-green-500\" />\n )}\n {method.value}\n </p>\n </div>\n </div>\n <Button\n size=\"sm\"\n variant={method.isConfigured ? \"outline\" : \"default\"}\n >\n {method.action}\n </Button>\n </div>\n )\n })}\n </div>\n\n <div className=\"mt-8 space-y-4\">\n <div className=\"bg-muted/50 flex items-start gap-3 rounded-lg border p-4\">\n <AlertCircle className=\"mt-0.5 h-5 w-5 text-blue-500\" />\n <div>\n <h4 className=\"mb-1 text-sm font-medium\">Recovery Codes</h4>\n <p className=\"text-muted-foreground text-sm\">\n Generate backup codes that can be used if you lose access to\n your 2FA methods. Store them securely in a safe place.\n </p>\n <Button variant=\"link\" className=\"mt-2 h-auto p-0 text-sm\">\n Generate Recovery Codes →\n </Button>\n </div>\n </div>\n\n <div className=\"flex justify-end gap-3 border-t pt-6\">\n <Button variant=\"outline\">View Activity Log</Button>\n <Button>Save Settings</Button>\n </div>\n </div>\n </Card>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/account-change-password-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/account-change-password/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { CheckCircle2, Eye, EyeOff, Lock, Shield, XCircle } from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\n\nfunction PasswordField({\n id,\n label,\n ...props\n}: {\n id: string\n label: string\n} & React.InputHTMLAttributes<HTMLInputElement>) {\n const [showPassword, setShowPassword] = React.useState(false)\n\n return (\n <div className=\"mb-6 space-y-2\">\n <Label htmlFor={id} className=\"flex items-center gap-2\">\n <Lock className=\"text-muted-foreground h-4 w-4\" />\n {label}\n </Label>\n <div className=\"relative\">\n <Input\n {...props}\n id={id}\n type={showPassword ? \"text\" : \"password\"}\n placeholder=\"••••••••\"\n />\n <Button\n type=\"button\"\n variant=\"ghost\"\n size=\"sm\"\n className=\"absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent\"\n onClick={() => setShowPassword(!showPassword)}\n >\n {showPassword ? (\n <EyeOff className=\"h-4 w-4\" aria-hidden=\"true\" />\n ) : (\n <Eye className=\"h-4 w-4\" aria-hidden=\"true\" />\n )}\n <span className=\"sr-only\">\n {showPassword ? \"Hide password\" : \"Show password\"}\n </span>\n </Button>\n </div>\n </div>\n )\n}\n\nconst PASSWORD_REQUIREMENTS = [\n {\n label: \"At least 8 characters long\",\n regex: /.{8,}/,\n },\n {\n label: \"One uppercase letter (A-Z)\",\n regex: /[A-Z]/,\n },\n {\n label: \"One lowercase letter (a-z)\",\n regex: /[a-z]/,\n },\n {\n label: \"One number (0-9)\",\n regex: /[0-9]/,\n },\n {\n label: \"One special character (!@#$%^&*)\",\n regex: /[!@#$%^&*()_+\\-=\\[\\]{};':\"\\\\|,.<>\\/?]/,\n },\n]\n\nexport default function AccountChangePassword01() {\n const [newPassword, setNewPassword] = React.useState(\"\")\n\n return (\n <div className=\"mx-auto max-w-5xl p-6\">\n <Card className=\"bg-card border p-8\">\n <div className=\"border-b pb-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg\">\n <Shield className=\"text-primary h-6 w-6\" />\n </div>\n <div>\n <h2 className=\"text-2xl font-semibold tracking-tight\">\n Change Password\n </h2>\n <p className=\"text-muted-foreground mt-1 text-sm\">\n Update your password to keep your account secure\n </p>\n </div>\n </div>\n </div>\n\n <div className=\"grid grid-cols-1 gap-8 md:grid-cols-2\">\n <div>\n <form onSubmit={(e) => e.preventDefault()}>\n <PasswordField id=\"current-password\" label=\"Current Password\" />\n <PasswordField\n id=\"new-password\"\n label=\"New Password\"\n onChange={(e) => setNewPassword(e.target.value)}\n value={newPassword}\n />\n <PasswordField\n id=\"confirm-password\"\n label=\"Confirm New Password\"\n />\n <div className=\"mt-8 flex gap-3\">\n <Button type=\"button\" variant=\"outline\" className=\"flex-1\">\n Cancel\n </Button>\n <Button type=\"submit\" className=\"flex-1\">\n Update Password\n </Button>\n </div>\n </form>\n </div>\n\n <div className=\"space-y-6\">\n <div>\n <h3 className=\"mb-4 flex items-center gap-2 font-semibold\">\n <Shield className=\"text-muted-foreground h-5 w-5\" />\n Password Requirements\n </h3>\n <p className=\"text-muted-foreground mb-6 text-sm\">\n Your password must meet the following criteria for enhanced\n security:\n </p>\n <ul className=\"space-y-3\">\n {PASSWORD_REQUIREMENTS.map((req, index) => {\n const meetsRequirement = req.regex.test(newPassword)\n return (\n <li key={index} className=\"flex items-start gap-3\">\n {meetsRequirement ? (\n <CheckCircle2 className=\"mt-0.5 h-5 w-5 shrink-0 text-green-500\" />\n ) : (\n <XCircle className=\"text-muted-foreground mt-0.5 h-5 w-5 shrink-0\" />\n )}\n <span\n className={`text-sm ${\n meetsRequirement\n ? \"text-foreground\"\n : \"text-muted-foreground\"\n }`}\n >\n {req.label}\n </span>\n </li>\n )\n })}\n </ul>\n </div>\n\n <div className=\"bg-muted/50 rounded-lg border p-4\">\n <h4 className=\"mb-2 text-sm font-medium\">\n Security Best Practices\n </h4>\n <ul className=\"text-muted-foreground space-y-2 text-sm\">\n <li className=\"flex items-start gap-2\">\n <span className=\"mt-1\">•</span>\n <span>Change your password regularly (every 90 days)</span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"mt-1\">•</span>\n <span>Never share your password with anyone</span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"mt-1\">•</span>\n <span>Use a unique password for each account</span>\n </li>\n <li className=\"flex items-start gap-2\">\n <span className=\"mt-1\">•</span>\n <span>Consider using a password manager</span>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </Card>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/account-notifications-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/account-notifications/page.tsx",
|
|
"content": "\"use client\"\n\nimport { Bell, Mail, MessageSquare, Smartphone } from \"lucide-react\"\n\nimport { Card } from \"@/components/ui/card\"\nimport { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\n\nconst TABLE_HEAD = [\n { label: \"Activity\", icon: Bell },\n { label: \"Email\", icon: Mail },\n { label: \"Push\", icon: Smartphone },\n { label: \"SMS\", icon: MessageSquare },\n]\n\nconst NOTIFICATIONS = [\n {\n title: \"Mentions\",\n description: \"Notify when another user mentions you in a comment\",\n category: \"Social\",\n email: true,\n push: false,\n sms: true,\n },\n {\n title: \"Comments\",\n description: \"Notify when another user comments on your item\",\n category: \"Social\",\n email: true,\n push: false,\n sms: true,\n },\n {\n title: \"New Follower\",\n description: \"Notify when someone starts following you\",\n category: \"Social\",\n email: false,\n push: true,\n sms: false,\n },\n {\n title: \"Login Activity\",\n description: \"Alert when logging in from a new device or location\",\n category: \"Security\",\n email: true,\n push: true,\n sms: true,\n },\n {\n title: \"Password Changed\",\n description: \"Immediate notification when password is updated\",\n category: \"Security\",\n email: true,\n push: true,\n sms: true,\n },\n {\n title: \"Product Updates\",\n description: \"Get notified about new features and improvements\",\n category: \"Product\",\n email: true,\n push: false,\n sms: false,\n },\n]\n\nexport default function AccountNotifications01() {\n return (\n <div className=\"mx-auto max-w-5xl p-6\">\n <Card className=\"bg-card border p-8\">\n <div className=\"border-b pb-6\">\n <h2 className=\"text-2xl font-semibold tracking-tight\">\n Notification Preferences\n </h2>\n <p className=\"text-muted-foreground mt-2 text-sm\">\n Customize how you receive notifications. These settings apply to all\n activities you're monitoring across the platform.\n </p>\n </div>\n\n <div className=\"overflow-x-auto\">\n <table className=\"w-full min-w-[40rem] table-auto text-left\">\n <thead>\n <tr className=\"border-b\">\n {TABLE_HEAD.map((head, i) => {\n const Icon = head.icon\n return (\n <th\n key={head.label}\n className={`${\n i === 0 ? \"py-4 pr-4\" : \"p-4 text-center\"\n } font-semibold`}\n >\n <div\n className={`flex items-center gap-2 ${\n i !== 0 ? \"justify-center\" : \"\"\n }`}\n >\n <Icon className=\"text-muted-foreground h-4 w-4\" />\n <span className=\"text-sm\">{head.label}</span>\n </div>\n </th>\n )\n })}\n </tr>\n </thead>\n <tbody>\n {NOTIFICATIONS.map((notification, index) => {\n const isLast = index === NOTIFICATIONS.length - 1\n const classes = isLast ? \"py-6\" : \"border-border border-b py-6\"\n\n return (\n <tr\n key={notification.title}\n className=\"group hover:bg-muted/50\"\n >\n <td className={`${classes} pr-4`}>\n <div className=\"space-y-1\">\n <div className=\"flex items-center gap-2\">\n <p className=\"font-semibold\">{notification.title}</p>\n <span className=\"text-muted-foreground rounded-full border px-2 py-0.5 text-xs\">\n {notification.category}\n </span>\n </div>\n <p className=\"text-muted-foreground text-sm\">\n {notification.description}\n </p>\n </div>\n </td>\n <td className={`${classes} px-4`}>\n <div className=\"flex justify-center\">\n <Switch\n defaultChecked={notification.email}\n id={`email-${index}`}\n aria-label={`Email notifications for ${notification.title}`}\n />\n </div>\n </td>\n <td className={`${classes} px-4`}>\n <div className=\"flex justify-center\">\n <Switch\n defaultChecked={notification.push}\n id={`push-${index}`}\n aria-label={`Push notifications for ${notification.title}`}\n />\n </div>\n </td>\n <td className={`${classes} px-4`}>\n <div className=\"flex justify-center\">\n <Switch\n defaultChecked={notification.sms}\n id={`sms-${index}`}\n aria-label={`SMS notifications for ${notification.title}`}\n />\n </div>\n </td>\n </tr>\n )\n })}\n </tbody>\n </table>\n </div>\n\n <div className=\"bg-muted/50 mt-6 rounded-lg border p-4\">\n <div className=\"flex items-start gap-3\">\n <Bell className=\"text-muted-foreground mt-0.5 h-5 w-5\" />\n <div>\n <h4 className=\"mb-1 text-sm font-medium\">\n About Notification Delivery\n </h4>\n <p className=\"text-muted-foreground text-sm\">\n Email notifications are sent instantly. Push notifications\n require the mobile app. SMS notifications may incur carrier\n charges. You can change these settings at any time.\n </p>\n </div>\n </div>\n </div>\n </Card>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/account-sessions-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/account-sessions/page.tsx",
|
|
"content": "\"use client\"\n\nimport {\n Clock,\n Computer,\n Globe,\n ShieldCheck,\n Smartphone,\n X,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\n\nconst ACTIVE_SESSIONS = [\n {\n id: 1,\n type: \"Laptop\",\n icon: Computer,\n location: \"New York, USA\",\n coordinates: \"40.7128° N, 74.0060° W\",\n isCurrent: true,\n lastActive: \"2 hours ago\",\n browser: \"Chrome 114.0\",\n os: \"macOS 13.4\",\n },\n {\n id: 2,\n type: \"Smartphone\",\n icon: Smartphone,\n location: \"Florida, USA\",\n coordinates: \"27.9944° N, 81.7603° W\",\n isCurrent: false,\n lastActive: \"Yesterday at 3:45 PM\",\n browser: \"Safari 16.5\",\n os: \"iOS 16.5\",\n },\n {\n id: 3,\n type: \"Desktop\",\n icon: Computer,\n location: \"Tokyo, Japan\",\n coordinates: \"35.6895° N, 139.6917° E\",\n isCurrent: false,\n lastActive: \"3 days ago\",\n browser: \"Firefox 112.0\",\n os: \"Windows 11\",\n },\n]\n\nexport default function AccountSessions01() {\n return (\n <div className=\"mx-auto max-w-5xl p-6\">\n <Card className=\"bg-card border p-8\">\n <div className=\"border-b pb-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg\">\n <ShieldCheck className=\"text-primary h-6 w-6\" />\n </div>\n <div>\n <h2 className=\"text-2xl font-semibold tracking-tight\">\n Active Sessions\n </h2>\n <p className=\"text-muted-foreground mt-1 text-sm\">\n Manage and monitor devices that have access to your account\n </p>\n </div>\n </div>\n </div>\n\n <div className=\"space-y-6\">\n {ACTIVE_SESSIONS.map((session, index) => {\n const Icon = session.icon\n const isLast = index === ACTIVE_SESSIONS.length - 1\n\n return (\n <div\n key={session.id}\n className={`flex items-center justify-between gap-6 py-4 ${\n !isLast ? \"border-border border-b\" : \"\"\n }`}\n >\n <div className=\"flex items-center gap-4\">\n <div\n className={`bg-muted/50 flex h-12 w-12 items-center justify-center rounded-lg`}\n >\n <Icon\n className={`h-6 w-6 ${session.isCurrent ? \"text-primary\" : \"text-muted-foreground\"}`}\n />\n </div>\n\n <div className=\"space-y-1\">\n <div className=\"flex items-center gap-2\">\n <h4 className=\"font-semibold\">{session.type} Session</h4>\n {session.isCurrent && (\n <Badge\n variant=\"outline\"\n className=\"border-green-500 bg-green-50 text-green-700\"\n >\n Current Session\n </Badge>\n )}\n </div>\n\n <div className=\"text-muted-foreground space-y-1 text-sm\">\n <div className=\"flex items-center gap-2\">\n <Globe className=\"h-4 w-4\" />\n <span>{session.location}</span>\n </div>\n <div className=\"flex items-center gap-2\">\n <Clock className=\"h-4 w-4\" />\n <span>Last active: {session.lastActive}</span>\n </div>\n <div>\n {session.browser} on {session.os}\n </div>\n </div>\n </div>\n </div>\n\n <div className=\"flex items-center gap-3\">\n {!session.isCurrent && (\n <Button variant=\"destructive\" size=\"sm\">\n <X className=\"mr-2 h-4 w-4\" />\n Remove\n </Button>\n )}\n </div>\n </div>\n )\n })}\n </div>\n\n <div className=\"bg-muted/50 mt-6 rounded-lg border p-4\">\n <div className=\"flex items-start gap-3\">\n <ShieldCheck className=\"mt-0.5 h-5 w-5 text-blue-500\" />\n <div>\n <h4 className=\"mb-1 text-sm font-medium\">Security Tip</h4>\n <p className=\"text-muted-foreground text-sm\">\n If you notice any suspicious activity, immediately remove the\n session and change your account password. Enable two-factor\n authentication for additional security.\n </p>\n </div>\n </div>\n </div>\n </Card>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/account-avatar-upload-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/account-avatar-upload/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n CheckCircle2,\n Pencil,\n Trash2,\n Upload,\n User,\n XCircle,\n} from \"lucide-react\"\n\nimport { Avatar, AvatarFallback, AvatarImage } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\n\nexport default function AccountAvatarUpload01() {\n const [status, setStatus] = React.useState(\"Online\")\n const [avatarPreview, setAvatarPreview] = React.useState<string | null>(null)\n\n const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0]\n if (file) {\n const reader = new FileReader()\n reader.onloadend = () => {\n setAvatarPreview(reader.result as string)\n }\n reader.readAsDataURL(file)\n }\n }\n\n const handleRemoveAvatar = () => {\n setAvatarPreview(null)\n }\n\n return (\n <div className=\"mx-auto max-w-5xl p-6\">\n <Card className=\"bg-card border p-8\">\n <div className=\"border-b pb-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg\">\n <User className=\"text-primary h-6 w-6\" />\n </div>\n <div>\n <h2 className=\"text-2xl font-semibold tracking-tight\">\n Profile Picture\n </h2>\n <p className=\"text-muted-foreground mt-1 text-sm\">\n Update your profile picture and personal information\n </p>\n </div>\n </div>\n </div>\n\n <div className=\"flex flex-wrap items-center justify-between gap-6\">\n <div className=\"flex items-center gap-6\">\n <div className=\"flex items-center gap-4\">\n <div className=\"relative\">\n <Avatar className=\"border-border h-16 w-16 border-2\">\n <AvatarImage\n src={\n avatarPreview ||\n \"https://images.unsplash.com/photo-1623853434105-8e7a72898180?auto=format&fit=crop&q=80&w=400&h=400\"\n }\n alt=\"Profile Picture\"\n className=\"object-cover\"\n />\n <AvatarFallback className=\"bg-muted-foreground/10 text-muted-foreground\">\n <User className=\"h-8 w-8\" />\n </AvatarFallback>\n </Avatar>\n <label\n htmlFor=\"avatar-upload\"\n className=\"absolute right-0 bottom-0 cursor-pointer\"\n >\n <div className=\"bg-primary/10 text-primary hover:bg-primary/20 border-border rounded-full border p-1.5\">\n <Pencil className=\"h-3.5 w-3.5\" />\n </div>\n <input\n type=\"file\"\n id=\"avatar-upload\"\n accept=\"image/png,image/jpeg,image/svg+xml\"\n className=\"hidden\"\n onChange={handleFileUpload}\n />\n </label>\n </div>\n\n <div className=\"space-y-1\">\n <h3 className=\"font-semibold\">Select and Upload Image</h3>\n <p className=\"text-muted-foreground text-sm\">\n .svg, .png, .jpg (size 400x400px)\n </p>\n </div>\n </div>\n\n <div className=\"flex items-center gap-3\">\n <Button>\n <Upload className=\"mr-2 h-4 w-4\" />\n Upload Avatar\n </Button>\n {avatarPreview && (\n <Button variant=\"destructive\" onClick={handleRemoveAvatar}>\n <Trash2 className=\"mr-2 h-4 w-4\" />\n Remove\n </Button>\n )}\n </div>\n </div>\n\n <div className=\"flex flex-col\">\n <Label className=\"mb-3 flex items-center gap-2\">\n <CheckCircle2 className=\"text-muted-foreground h-4 w-4\" />\n Availability Status\n </Label>\n <div className=\"flex items-center gap-3\">\n <Switch\n id=\"status\"\n checked={status === \"Online\"}\n onCheckedChange={() =>\n setStatus((cur) => (cur === \"Online\" ? \"Offline\" : \"Online\"))\n }\n />\n <Label\n htmlFor=\"status\"\n className=\"flex cursor-pointer items-center gap-2\"\n >\n {status === \"Online\" ? (\n <CheckCircle2 className=\"h-4 w-4 text-green-500\" />\n ) : (\n <XCircle className=\"text-muted-foreground h-4 w-4\" />\n )}\n {status}\n </Label>\n </div>\n </div>\n </div>\n\n <div className=\"bg-muted/50 mt-6 rounded-lg border p-4\">\n <div className=\"flex items-start gap-3\">\n <CheckCircle2 className=\"mt-0.5 h-5 w-5 text-blue-500\" />\n <div>\n <h4 className=\"mb-1 text-sm font-medium\">Profile Picture Tips</h4>\n <p className=\"text-muted-foreground text-sm\">\n Choose a high-quality, professional image that clearly shows\n your face. Recommended image size is 400x400 pixels. Only .svg,\n .png, and .jpg formats are supported.\n </p>\n </div>\n </div>\n </div>\n </Card>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/account-integrations-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/account-integrations/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Check,\n ChevronDown,\n Copy,\n ExternalLink,\n Github,\n MessageCircle,\n Shield,\n} from \"lucide-react\"\n\nimport {\n Accordion,\n AccordionContent,\n AccordionItem,\n AccordionTrigger,\n} from \"@/components/ui/accordion\"\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card } from \"@/components/ui/card\"\nimport { Label } from \"@/components/ui/label\"\nimport { Switch } from \"@/components/ui/switch\"\n\nconst INTEGRATIONS = [\n {\n id: \"github\",\n name: \"GitHub\",\n icon: Github,\n category: \"Development\",\n description:\n \"Connect your GitHub account to sync repositories and track contributions.\",\n isConfigured: false,\n connectedEmail: null,\n verificationCode: null,\n },\n {\n id: \"spotify\",\n name: \"Spotify\",\n icon: MessageCircle, // Replaced Spotify icon with MessageCircle\n category: \"Music\",\n description:\n \"Link your Spotify account to share playlists and sync listening activity.\",\n isConfigured: true,\n connectedEmail: \"emma@mail.com\",\n verificationCode: \"1172913\",\n },\n {\n id: \"discord\",\n name: \"Discord\",\n icon: MessageCircle,\n category: \"Communication\",\n description:\n \"Integrate your Discord account to manage server connections and notifications.\",\n isConfigured: false,\n connectedEmail: null,\n verificationCode: null,\n },\n]\n\nexport default function AccountIntegrations01() {\n const [activeIntegrations, setActiveIntegrations] = React.useState<\n Record<string, boolean>\n >(\n INTEGRATIONS.reduce(\n (acc, integration) => {\n acc[integration.id] = integration.isConfigured\n return acc\n },\n {} as Record<string, boolean>\n )\n )\n const [copiedCode, setCopiedCode] = React.useState<string | null>(null)\n\n const toggleIntegration = (id: string) => {\n setActiveIntegrations((prev) => ({\n ...prev,\n [id]: !prev[id],\n }))\n }\n\n const copyVerificationCode = (code: string) => {\n navigator.clipboard.writeText(code)\n setCopiedCode(code)\n setTimeout(() => setCopiedCode(null), 2000)\n }\n\n return (\n <div className=\"mx-auto max-w-5xl p-6\">\n <Card className=\"bg-card border p-8\">\n <div className=\"border-b pb-6\">\n <div className=\"flex items-center gap-3\">\n <div className=\"bg-primary/10 flex h-12 w-12 items-center justify-center rounded-lg\">\n <Shield className=\"text-primary h-6 w-6\" />\n </div>\n <div>\n <h2 className=\"text-2xl font-semibold tracking-tight\">\n Third-Party Integrations\n </h2>\n <p className=\"text-muted-foreground mt-1 text-sm\">\n Manage and configure connections to external services and\n platforms\n </p>\n </div>\n </div>\n </div>\n\n <Accordion type=\"single\" collapsible className=\"space-y-4\">\n {INTEGRATIONS.map((integration) => {\n const Icon = integration.icon\n const isActive = activeIntegrations[integration.id]\n\n return (\n <AccordionItem\n key={integration.id}\n value={integration.id}\n className=\"border-border rounded-lg border\"\n >\n <div className=\"flex items-center justify-between px-4 py-4\">\n <div className=\"flex flex-1 items-center gap-4\">\n <div className=\"bg-muted/50 flex h-12 w-12 items-center justify-center rounded-lg\">\n <Icon\n className={`h-6 w-6 ${isActive ? \"text-primary\" : \"text-muted-foreground\"}`}\n />\n </div>\n <div className=\"flex-1 space-y-1 text-left\">\n <div className=\"flex items-center gap-2\">\n <h3 className=\"font-semibold\">{integration.name}</h3>\n <Badge\n variant=\"outline\"\n className=\"text-muted-foreground\"\n >\n {integration.category}\n </Badge>\n </div>\n <p className=\"text-muted-foreground line-clamp-1 text-sm\">\n {integration.description}\n </p>\n </div>\n </div>\n <div className=\"flex items-center gap-3\">\n <div className=\"flex items-center gap-2\">\n <Switch\n id={`${integration.id}-toggle`}\n checked={isActive}\n onCheckedChange={() =>\n toggleIntegration(integration.id)\n }\n />\n <Label\n htmlFor={`${integration.id}-toggle`}\n className=\"cursor-pointer text-sm\"\n >\n {isActive ? \"Enabled\" : \"Enable\"}\n </Label>\n </div>\n <AccordionTrigger className=\"hover:bg-muted/50 rounded px-3 py-2\">\n <span className=\"text-sm font-medium\">View More</span>\n </AccordionTrigger>\n </div>\n </div>\n <AccordionContent className=\"px-4 pb-6\">\n {!isActive ? (\n <div className=\"space-y-4\">\n <p className=\"text-muted-foreground text-sm\">\n You haven't added your {integration.name} account\n or you aren't authorized. Click "Connect"\n to initiate the integration process.\n </p>\n <Button>\n <ExternalLink className=\"mr-2 h-4 w-4\" />\n Connect {integration.name}\n </Button>\n </div>\n ) : integration.connectedEmail ? (\n <div className=\"space-y-4\">\n <Card className=\"bg-muted/50 border p-4\">\n <div className=\"flex items-center justify-between\">\n <div className=\"space-y-1\">\n <h4 className=\"font-semibold\">Verification Code</h4>\n <p className=\"text-muted-foreground text-sm\">\n Use this code to complete the integration\n </p>\n </div>\n <div className=\"flex items-center gap-3\">\n <code className=\"bg-muted/50 rounded px-3 py-1 font-mono text-sm\">\n {integration.verificationCode}\n </code>\n <Button\n variant=\"outline\"\n size=\"sm\"\n onClick={() =>\n copyVerificationCode(\n integration.verificationCode!\n )\n }\n >\n {copiedCode === integration.verificationCode ? (\n <Check className=\"mr-2 h-4 w-4 text-green-500\" />\n ) : (\n <Copy className=\"mr-2 h-4 w-4\" />\n )}\n {copiedCode === integration.verificationCode\n ? \"Copied\"\n : \"Copy\"}\n </Button>\n </div>\n </div>\n </Card>\n <Card className=\"bg-muted/50 border p-4\">\n <div className=\"flex items-center justify-between\">\n <div className=\"space-y-1\">\n <h4 className=\"font-semibold\">Connected Account</h4>\n <p className=\"text-muted-foreground text-sm\">\n Manage your linked {integration.name} account\n </p>\n </div>\n <div className=\"flex items-center gap-3\">\n <span className=\"text-sm font-medium\">\n {integration.connectedEmail}\n </span>\n <Button variant=\"outline\" size=\"sm\">\n Edit\n </Button>\n </div>\n </div>\n </Card>\n </div>\n ) : null}\n </AccordionContent>\n </AccordionItem>\n )\n })}\n </Accordion>\n\n <div className=\"bg-muted/50 mt-6 rounded-lg border p-4\">\n <div className=\"flex items-start gap-3\">\n <Shield className=\"mt-0.5 h-5 w-5 text-blue-500\" />\n <div>\n <h4 className=\"mb-1 text-sm font-medium\">Integration Security</h4>\n <p className=\"text-muted-foreground text-sm\">\n Ensure you trust the applications you connect. Review and manage\n third-party access to your account regularly. You can revoke\n access at any time by disabling the integration.\n </p>\n </div>\n </div>\n </div>\n </Card>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/ai-chat-streaming-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/ai-chat-streaming/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport { Brain, Loader2, Send } from \"lucide-react\"\n\nimport { Avatar, AvatarFallback } from \"@/components/ui/avatar\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { ScrollArea } from \"@/components/ui/scroll-area\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\n\nconst AI_PROVIDERS = [\n { value: \"openai\", label: \"OpenAI\" },\n { value: \"anthropic\", label: \"Anthropic\" },\n { value: \"google\", label: \"Google Gemini\" },\n { value: \"cohere\", label: \"Cohere\" },\n { value: \"mistral\", label: \"Mistral AI\" },\n]\n\ninterface Message {\n id: string\n role: \"user\" | \"assistant\"\n content: string\n thinking?: string\n isStreaming?: boolean\n}\n\nexport default function AIChatStreamingBlock() {\n const [messages, setMessages] = React.useState<Message[]>([\n {\n id: \"1\",\n role: \"assistant\",\n content:\n \"Hello! I'm your AI assistant with streaming and thinking capabilities. How can I help you today?\",\n },\n ])\n const [input, setInput] = React.useState(\"\")\n const [isLoading, setIsLoading] = React.useState(false)\n const [provider, setProvider] = React.useState(\"openai\")\n const [apiKey, setApiKey] = React.useState(\"\")\n const [showThinking, setShowThinking] = React.useState(false)\n const scrollAreaRef = React.useRef<HTMLDivElement>(null)\n\n const simulateStreaming = async (text: string) => {\n const words = text.split(\" \")\n let currentText = \"\"\n\n const messageId = Date.now().toString()\n setMessages((prev) => [\n ...prev,\n {\n id: messageId,\n role: \"assistant\",\n content: \"\",\n thinking: showThinking\n ? \"Analyzing your question and formulating a comprehensive response...\"\n : undefined,\n isStreaming: true,\n },\n ])\n\n for (let i = 0; i < words.length; i++) {\n currentText += (i > 0 ? \" \" : \"\") + words[i]\n await new Promise((resolve) => setTimeout(resolve, 50))\n\n setMessages((prev) =>\n prev.map((msg) =>\n msg.id === messageId\n ? {\n ...msg,\n content: currentText,\n isStreaming: i < words.length - 1,\n }\n : msg\n )\n )\n }\n }\n\n const handleSend = async () => {\n if (!input.trim() || isLoading) return\n\n const userMessage: Message = {\n id: Date.now().toString(),\n role: \"user\",\n content: input.trim(),\n }\n\n setMessages((prev) => [...prev, userMessage])\n setInput(\"\")\n setIsLoading(true)\n\n // Simulate AI response\n const responses = [\n \"That's an interesting question. Based on the AI provider you've selected, I can process this with advanced natural language understanding. Let me break this down for you with a detailed analysis.\",\n \"I understand what you're asking. Using the configured API, I can provide you with accurate information. The key aspects to consider are context, relevance, and accuracy in the response.\",\n \"Great question! With streaming enabled, you can see my response in real-time as I process your query. This creates a more interactive and engaging experience for users.\",\n ]\n\n const randomResponse =\n responses[Math.floor(Math.random() * responses.length)]\n await simulateStreaming(randomResponse)\n setIsLoading(false)\n }\n\n React.useEffect(() => {\n if (scrollAreaRef.current) {\n scrollAreaRef.current.scrollTop = scrollAreaRef.current.scrollHeight\n }\n }, [messages])\n\n return (\n <div className=\"container mx-auto py-8\">\n <Card className=\"mx-auto max-w-4xl\">\n <CardHeader>\n <CardTitle className=\"flex items-center gap-2\">\n <Brain className=\"h-6 w-6\" />\n AI Chat with Streaming and Thinking\n </CardTitle>\n <div className=\"mt-4 grid gap-4 sm:grid-cols-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"provider\">AI Provider</Label>\n <Select value={provider} onValueChange={setProvider}>\n <SelectTrigger id=\"provider\">\n <SelectValue placeholder=\"Select provider\" />\n </SelectTrigger>\n <SelectContent>\n {AI_PROVIDERS.map((p) => (\n <SelectItem key={p.value} value={p.value}>\n {p.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"apiKey\">API Key</Label>\n <Input\n id=\"apiKey\"\n type=\"password\"\n placeholder=\"Enter your API key\"\n value={apiKey}\n onChange={(e) => setApiKey(e.target.value)}\n />\n </div>\n </div>\n <div className=\"mt-2 flex items-center gap-2\">\n <input\n type=\"checkbox\"\n id=\"showThinking\"\n checked={showThinking}\n onChange={(e) => setShowThinking(e.target.checked)}\n className=\"h-4 w-4 rounded border-gray-300\"\n />\n <Label htmlFor=\"showThinking\" className=\"cursor-pointer text-sm\">\n Show AI thinking process\n </Label>\n </div>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <ScrollArea\n className=\"h-[400px] rounded-md border p-4\"\n ref={scrollAreaRef}\n >\n <div className=\"space-y-4\">\n {messages.map((message) => (\n <div\n key={message.id}\n className={`flex gap-3 ${\n message.role === \"user\" ? \"justify-end\" : \"justify-start\"\n }`}\n >\n {message.role === \"assistant\" && (\n <Avatar className=\"h-8 w-8\">\n <AvatarFallback className=\"bg-primary text-primary-foreground\">\n AI\n </AvatarFallback>\n </Avatar>\n )}\n <div\n className={`max-w-[80%] space-y-2 ${\n message.role === \"user\" ? \"order-first\" : \"\"\n }`}\n >\n {message.thinking && (\n <div className=\"bg-muted/50 mb-2 rounded-lg border border-dashed p-3\">\n <p className=\"text-muted-foreground flex items-center gap-2 text-sm\">\n <Brain className=\"h-4 w-4\" />\n <span className=\"italic\">{message.thinking}</span>\n </p>\n </div>\n )}\n <div\n className={`rounded-lg p-3 ${\n message.role === \"user\"\n ? \"bg-primary text-primary-foreground\"\n : \"bg-muted\"\n }`}\n >\n <p className=\"text-sm\">\n {message.content}\n {message.isStreaming && (\n <span className=\"ml-1 inline-block h-4 w-1 animate-pulse bg-current\" />\n )}\n </p>\n </div>\n </div>\n {message.role === \"user\" && (\n <Avatar className=\"h-8 w-8\">\n <AvatarFallback>U</AvatarFallback>\n </Avatar>\n )}\n </div>\n ))}\n {isLoading &&\n messages[messages.length - 1]?.role !== \"assistant\" && (\n <div className=\"flex gap-3\">\n <Avatar className=\"h-8 w-8\">\n <AvatarFallback className=\"bg-primary text-primary-foreground\">\n AI\n </AvatarFallback>\n </Avatar>\n <div className=\"bg-muted flex items-center gap-2 rounded-lg p-3\">\n <Loader2 className=\"h-4 w-4 animate-spin\" />\n <span className=\"text-sm\">Thinking...</span>\n </div>\n </div>\n )}\n </div>\n </ScrollArea>\n <form\n onSubmit={(e) => {\n e.preventDefault()\n handleSend()\n }}\n className=\"flex gap-2\"\n >\n <Input\n placeholder=\"Type your message...\"\n value={input}\n onChange={(e) => setInput(e.target.value)}\n disabled={isLoading || !apiKey}\n />\n <Button\n type=\"submit\"\n disabled={isLoading || !apiKey || !input.trim()}\n >\n <Send className=\"h-4 w-4\" />\n </Button>\n </form>\n {!apiKey && (\n <p className=\"text-muted-foreground text-center text-sm\">\n Please enter your API key to start chatting\n </p>\n )}\n </CardContent>\n </Card>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/ai-image-generator-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/ai-image-generator/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Download,\n ImageIcon,\n Loader2,\n Move,\n RotateCw,\n Upload,\n Wand2,\n ZoomIn,\n ZoomOut,\n} from \"lucide-react\"\n\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { Slider } from \"@/components/ui/slider\"\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from \"@/components/ui/tabs\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst AI_PROVIDERS = [\n { value: \"openai\", label: \"OpenAI DALL-E\" },\n { value: \"stability\", label: \"Stability AI\" },\n { value: \"midjourney\", label: \"Midjourney\" },\n { value: \"google\", label: \"Google Imagen\" },\n { value: \"anthropic\", label: \"Anthropic\" },\n]\n\nconst IMAGE_SIZES = [\n { value: \"1024x1024\", label: \"Square (1024x1024)\" },\n { value: \"1024x1792\", label: \"Portrait (1024x1792)\" },\n { value: \"1792x1024\", label: \"Landscape (1792x1024)\" },\n]\n\nexport default function AIImageGeneratorBlock() {\n const [prompt, setPrompt] = React.useState(\"\")\n const [provider, setProvider] = React.useState(\"openai\")\n const [apiKey, setApiKey] = React.useState(\"\")\n const [imageSize, setImageSize] = React.useState(\"1024x1024\")\n const [isGenerating, setIsGenerating] = React.useState(false)\n const [uploadedImage, setUploadedImage] = React.useState<string | null>(null)\n const [generatedImage, setGeneratedImage] = React.useState<string | null>(\n null\n )\n const [brightness, setBrightness] = React.useState([100])\n const [contrast, setContrast] = React.useState([100])\n const [saturation, setSaturation] = React.useState([100])\n const fileInputRef = React.useRef<HTMLInputElement>(null)\n\n const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {\n const file = event.target.files?.[0]\n if (file) {\n const reader = new FileReader()\n reader.onload = (e) => {\n setUploadedImage(e.target?.result as string)\n }\n reader.readAsDataURL(file)\n }\n }\n\n const handleGenerate = async () => {\n if (!prompt.trim() || !apiKey) return\n\n setIsGenerating(true)\n\n // Simulate image generation\n await new Promise((resolve) => setTimeout(resolve, 3000))\n\n // Use a placeholder image service\n const seed = Math.floor(Math.random() * 1000)\n const [width, height] = imageSize.split(\"x\")\n setGeneratedImage(`https://picsum.photos/seed/${seed}/${width}/${height}`)\n\n setIsGenerating(false)\n }\n\n const handleDownload = () => {\n if (!generatedImage) return\n const link = document.createElement(\"a\")\n link.href = generatedImage\n link.download = \"ai-generated-image.png\"\n link.click()\n }\n\n const resetEditor = () => {\n setBrightness([100])\n setContrast([100])\n setSaturation([100])\n }\n\n const imageStyle = {\n filter: `brightness(${brightness[0]}%) contrast(${contrast[0]}%) saturate(${saturation[0]}%)`,\n }\n\n return (\n <div className=\"container mx-auto py-8\">\n <Card className=\"mx-auto max-w-6xl\">\n <CardHeader>\n <CardTitle className=\"flex items-center gap-2\">\n <ImageIcon className=\"h-6 w-6\" />\n AI Image Generator with Editor\n </CardTitle>\n <div className=\"mt-4 grid gap-4 sm:grid-cols-3\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"provider\">AI Provider</Label>\n <Select value={provider} onValueChange={setProvider}>\n <SelectTrigger id=\"provider\">\n <SelectValue placeholder=\"Select provider\" />\n </SelectTrigger>\n <SelectContent>\n {AI_PROVIDERS.map((p) => (\n <SelectItem key={p.value} value={p.value}>\n {p.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"apiKey\">API Key</Label>\n <Input\n id=\"apiKey\"\n type=\"password\"\n placeholder=\"Enter your API key\"\n value={apiKey}\n onChange={(e) => setApiKey(e.target.value)}\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"size\">Image Size</Label>\n <Select value={imageSize} onValueChange={setImageSize}>\n <SelectTrigger id=\"size\">\n <SelectValue placeholder=\"Select size\" />\n </SelectTrigger>\n <SelectContent>\n {IMAGE_SIZES.map((size) => (\n <SelectItem key={size.value} value={size.value}>\n {size.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n </div>\n </CardHeader>\n <CardContent>\n <Tabs defaultValue=\"generate\" className=\"w-full\">\n <TabsList className=\"grid w-full grid-cols-2\">\n <TabsTrigger value=\"generate\">Generate</TabsTrigger>\n <TabsTrigger value=\"edit\">Edit & Upload</TabsTrigger>\n </TabsList>\n\n <TabsContent value=\"generate\" className=\"space-y-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"prompt\">Image Prompt</Label>\n <Textarea\n id=\"prompt\"\n placeholder=\"Describe the image you want to generate... (e.g., 'A serene landscape with mountains at sunset')\"\n value={prompt}\n onChange={(e) => setPrompt(e.target.value)}\n rows={4}\n disabled={!apiKey}\n />\n </div>\n\n <Button\n onClick={handleGenerate}\n disabled={!prompt.trim() || !apiKey || isGenerating}\n className=\"w-full\"\n >\n {isGenerating ? (\n <>\n <Loader2 className=\"mr-2 h-4 w-4 animate-spin\" />\n Generating Image...\n </>\n ) : (\n <>\n <Wand2 className=\"mr-2 h-4 w-4\" />\n Generate Image\n </>\n )}\n </Button>\n\n {generatedImage && (\n <div className=\"space-y-4\">\n <div className=\"relative aspect-square w-full overflow-hidden rounded-lg border bg-gray-100\">\n <img\n src={generatedImage}\n alt=\"Generated\"\n className=\"h-full w-full object-contain\"\n />\n </div>\n <div className=\"flex gap-2\">\n <Button onClick={handleDownload} className=\"flex-1\">\n <Download className=\"mr-2 h-4 w-4\" />\n Download\n </Button>\n <Button\n variant=\"outline\"\n onClick={handleGenerate}\n disabled={isGenerating}\n >\n <RotateCw className=\"mr-2 h-4 w-4\" />\n Regenerate\n </Button>\n </div>\n </div>\n )}\n\n {!apiKey && (\n <p className=\"text-muted-foreground text-center text-sm\">\n Please enter your API key to start generating images\n </p>\n )}\n </TabsContent>\n\n <TabsContent value=\"edit\" className=\"space-y-4\">\n <div className=\"space-y-4\">\n <div className=\"space-y-2\">\n <Label>Upload Image</Label>\n <div className=\"flex gap-2\">\n <Input\n ref={fileInputRef}\n type=\"file\"\n accept=\"image/*\"\n onChange={handleFileUpload}\n className=\"flex-1\"\n />\n <Button\n variant=\"outline\"\n onClick={() => fileInputRef.current?.click()}\n >\n <Upload className=\"mr-2 h-4 w-4\" />\n Browse\n </Button>\n </div>\n </div>\n\n {(uploadedImage || generatedImage) && (\n <div className=\"space-y-4\">\n <div className=\"relative aspect-square w-full overflow-hidden rounded-lg border bg-gray-100\">\n <img\n src={uploadedImage || generatedImage || \"\"}\n alt=\"Editing\"\n className=\"h-full w-full object-contain\"\n style={imageStyle}\n />\n </div>\n\n <Card>\n <CardHeader>\n <CardTitle className=\"text-sm\">Image Editor</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-6\">\n <div className=\"space-y-2\">\n <div className=\"flex items-center justify-between\">\n <Label>Brightness</Label>\n <span className=\"text-muted-foreground text-sm\">\n {brightness[0]}%\n </span>\n </div>\n <Slider\n value={brightness}\n onValueChange={setBrightness}\n min={0}\n max={200}\n step={1}\n />\n </div>\n\n <div className=\"space-y-2\">\n <div className=\"flex items-center justify-between\">\n <Label>Contrast</Label>\n <span className=\"text-muted-foreground text-sm\">\n {contrast[0]}%\n </span>\n </div>\n <Slider\n value={contrast}\n onValueChange={setContrast}\n min={0}\n max={200}\n step={1}\n />\n </div>\n\n <div className=\"space-y-2\">\n <div className=\"flex items-center justify-between\">\n <Label>Saturation</Label>\n <span className=\"text-muted-foreground text-sm\">\n {saturation[0]}%\n </span>\n </div>\n <Slider\n value={saturation}\n onValueChange={setSaturation}\n min={0}\n max={200}\n step={1}\n />\n </div>\n\n <div className=\"flex gap-2\">\n <Button\n variant=\"outline\"\n onClick={resetEditor}\n className=\"flex-1\"\n >\n Reset\n </Button>\n <Button onClick={handleDownload} className=\"flex-1\">\n <Download className=\"mr-2 h-4 w-4\" />\n Download\n </Button>\n </div>\n </CardContent>\n </Card>\n </div>\n )}\n\n {!uploadedImage && !generatedImage && (\n <div className=\"border-muted-foreground/25 bg-muted/50 flex h-64 flex-col items-center justify-center rounded-lg border-2 border-dashed\">\n <ImageIcon className=\"text-muted-foreground mb-4 h-12 w-12\" />\n <p className=\"text-muted-foreground text-sm\">\n Upload an image or generate one to start editing\n </p>\n </div>\n )}\n </div>\n </TabsContent>\n </Tabs>\n </CardContent>\n </Card>\n </div>\n )\n}\n"
|
|
},
|
|
{
|
|
"path": "blocks/ai-video-generator-01/page.tsx",
|
|
"type": "registry:page",
|
|
"target": "app/ai-video-generator/page.tsx",
|
|
"content": "\"use client\"\n\nimport * as React from \"react\"\nimport {\n Clock,\n Download,\n FileVideo,\n Film,\n Loader2,\n Pause,\n Play,\n Sparkles,\n Video,\n} from \"lucide-react\"\n\nimport { Badge } from \"@/components/ui/badge\"\nimport { Button } from \"@/components/ui/button\"\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\"\nimport { Input } from \"@/components/ui/input\"\nimport { Label } from \"@/components/ui/label\"\nimport { Progress } from \"@/components/ui/progress\"\nimport {\n Select,\n SelectContent,\n SelectItem,\n SelectTrigger,\n SelectValue,\n} from \"@/components/ui/select\"\nimport { Textarea } from \"@/components/ui/textarea\"\n\nconst AI_PROVIDERS = [\n { value: \"runway\", label: \"Runway Gen-3\" },\n { value: \"pika\", label: \"Pika Labs\" },\n { value: \"stability\", label: \"Stability AI Video\" },\n { value: \"google\", label: \"Google Veo\" },\n { value: \"openai\", label: \"OpenAI Sora\" },\n]\n\nconst VIDEO_DURATIONS = [\n { value: \"3\", label: \"3 seconds\" },\n { value: \"5\", label: \"5 seconds\" },\n { value: \"10\", label: \"10 seconds\" },\n { value: \"15\", label: \"15 seconds\" },\n]\n\nconst VIDEO_STYLES = [\n { value: \"realistic\", label: \"Realistic\" },\n { value: \"cinematic\", label: \"Cinematic\" },\n { value: \"animated\", label: \"Animated\" },\n { value: \"artistic\", label: \"Artistic\" },\n { value: \"abstract\", label: \"Abstract\" },\n]\n\ninterface GeneratedVideo {\n id: string\n prompt: string\n url: string\n thumbnail: string\n duration: string\n style: string\n timestamp: Date\n}\n\nexport default function AIVideoGeneratorBlock() {\n const [prompt, setPrompt] = React.useState(\"\")\n const [provider, setProvider] = React.useState(\"runway\")\n const [apiKey, setApiKey] = React.useState(\"\")\n const [duration, setDuration] = React.useState(\"5\")\n const [style, setStyle] = React.useState(\"realistic\")\n const [isGenerating, setIsGenerating] = React.useState(false)\n const [progress, setProgress] = React.useState(0)\n const [generatedVideos, setGeneratedVideos] = React.useState<\n GeneratedVideo[]\n >([])\n const [selectedVideo, setSelectedVideo] =\n React.useState<GeneratedVideo | null>(null)\n const [isPlaying, setIsPlaying] = React.useState(false)\n const videoRef = React.useRef<HTMLVideoElement>(null)\n\n const handleGenerate = async () => {\n if (!prompt.trim() || !apiKey) return\n\n setIsGenerating(true)\n setProgress(0)\n\n // Simulate video generation progress\n const interval = setInterval(() => {\n setProgress((prev) => {\n if (prev >= 100) {\n clearInterval(interval)\n return 100\n }\n return prev + 5\n })\n }, 300)\n\n // Simulate video generation\n await new Promise((resolve) => setTimeout(resolve, 6000))\n\n const newVideo: GeneratedVideo = {\n id: Date.now().toString(),\n prompt: prompt,\n url: \"https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4\",\n thumbnail: `https://picsum.photos/seed/${Math.floor(Math.random() * 1000)}/640/360`,\n duration: duration,\n style: style,\n timestamp: new Date(),\n }\n\n setGeneratedVideos((prev) => [newVideo, ...prev])\n setSelectedVideo(newVideo)\n setIsGenerating(false)\n setProgress(0)\n }\n\n const togglePlayPause = () => {\n if (!videoRef.current) return\n\n if (isPlaying) {\n videoRef.current.pause()\n } else {\n videoRef.current.play()\n }\n setIsPlaying(!isPlaying)\n }\n\n const handleDownload = () => {\n if (!selectedVideo) return\n const link = document.createElement(\"a\")\n link.href = selectedVideo.url\n link.download = `ai-video-${selectedVideo.id}.mp4`\n link.click()\n }\n\n return (\n <div className=\"container mx-auto py-8\">\n <Card className=\"mx-auto max-w-7xl\">\n <CardHeader>\n <CardTitle className=\"flex items-center gap-2\">\n <Video className=\"h-6 w-6\" />\n AI Video Generation Agent\n </CardTitle>\n <div className=\"mt-4 grid gap-4 sm:grid-cols-2 lg:grid-cols-4\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"provider\">AI Provider</Label>\n <Select value={provider} onValueChange={setProvider}>\n <SelectTrigger id=\"provider\">\n <SelectValue placeholder=\"Select provider\" />\n </SelectTrigger>\n <SelectContent>\n {AI_PROVIDERS.map((p) => (\n <SelectItem key={p.value} value={p.value}>\n {p.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"apiKey\">API Key</Label>\n <Input\n id=\"apiKey\"\n type=\"password\"\n placeholder=\"Enter your API key\"\n value={apiKey}\n onChange={(e) => setApiKey(e.target.value)}\n />\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"duration\">Duration</Label>\n <Select value={duration} onValueChange={setDuration}>\n <SelectTrigger id=\"duration\">\n <SelectValue placeholder=\"Select duration\" />\n </SelectTrigger>\n <SelectContent>\n {VIDEO_DURATIONS.map((d) => (\n <SelectItem key={d.value} value={d.value}>\n {d.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n <div className=\"space-y-2\">\n <Label htmlFor=\"style\">Style</Label>\n <Select value={style} onValueChange={setStyle}>\n <SelectTrigger id=\"style\">\n <SelectValue placeholder=\"Select style\" />\n </SelectTrigger>\n <SelectContent>\n {VIDEO_STYLES.map((s) => (\n <SelectItem key={s.value} value={s.value}>\n {s.label}\n </SelectItem>\n ))}\n </SelectContent>\n </Select>\n </div>\n </div>\n </CardHeader>\n <CardContent>\n <div className=\"grid gap-6 lg:grid-cols-3\">\n <div className=\"space-y-4 lg:col-span-2\">\n <div className=\"space-y-2\">\n <Label htmlFor=\"prompt\">Video Prompt</Label>\n <Textarea\n id=\"prompt\"\n placeholder=\"Describe the video you want to generate... (e.g., 'A drone shot flying over a futuristic city at sunset')\"\n value={prompt}\n onChange={(e) => setPrompt(e.target.value)}\n rows={4}\n disabled={!apiKey || isGenerating}\n />\n </div>\n\n <Button\n onClick={handleGenerate}\n disabled={!prompt.trim() || !apiKey || isGenerating}\n className=\"w-full\"\n size=\"lg\"\n >\n {isGenerating ? (\n <>\n <Loader2 className=\"mr-2 h-5 w-5 animate-spin\" />\n Generating Video...\n </>\n ) : (\n <>\n <Sparkles className=\"mr-2 h-5 w-5\" />\n Generate Video\n </>\n )}\n </Button>\n\n {isGenerating && (\n <Card className=\"bg-muted/50\">\n <CardContent className=\"pt-6\">\n <div className=\"space-y-2\">\n <div className=\"flex items-center justify-between text-sm\">\n <span className=\"text-muted-foreground\">\n Processing video generation...\n </span>\n <span className=\"font-medium\">{progress}%</span>\n </div>\n <Progress value={progress} className=\"h-2\" />\n </div>\n </CardContent>\n </Card>\n )}\n\n {selectedVideo && (\n <Card>\n <CardHeader>\n <div className=\"flex items-start justify-between\">\n <div className=\"space-y-1\">\n <CardTitle className=\"text-lg\">Preview</CardTitle>\n <p className=\"text-muted-foreground text-sm\">\n {selectedVideo.prompt}\n </p>\n </div>\n <div className=\"flex gap-2\">\n <Badge variant=\"secondary\">\n <Clock className=\"mr-1 h-3 w-3\" />\n {selectedVideo.duration}s\n </Badge>\n <Badge variant=\"secondary\" className=\"capitalize\">\n {selectedVideo.style}\n </Badge>\n </div>\n </div>\n </CardHeader>\n <CardContent className=\"space-y-4\">\n <div className=\"relative aspect-video w-full overflow-hidden rounded-lg bg-black\">\n <video\n ref={videoRef}\n src={selectedVideo.url}\n className=\"h-full w-full\"\n onPlay={() => setIsPlaying(true)}\n onPause={() => setIsPlaying(false)}\n />\n <div className=\"absolute inset-0 flex items-center justify-center\">\n <Button\n size=\"lg\"\n variant=\"secondary\"\n onClick={togglePlayPause}\n className=\"h-16 w-16 rounded-full\"\n >\n {isPlaying ? (\n <Pause className=\"h-6 w-6\" />\n ) : (\n <Play className=\"h-6 w-6\" />\n )}\n </Button>\n </div>\n </div>\n <div className=\"flex gap-2\">\n <Button onClick={handleDownload} className=\"flex-1\">\n <Download className=\"mr-2 h-4 w-4\" />\n Download Video\n </Button>\n <Button\n variant=\"outline\"\n onClick={handleGenerate}\n disabled={isGenerating}\n className=\"flex-1\"\n >\n <Sparkles className=\"mr-2 h-4 w-4\" />\n Generate New\n </Button>\n </div>\n </CardContent>\n </Card>\n )}\n\n {!apiKey && (\n <Card className=\"bg-muted/50\">\n <CardContent className=\"flex flex-col items-center justify-center py-12\">\n <FileVideo className=\"text-muted-foreground mb-4 h-12 w-12\" />\n <p className=\"text-muted-foreground text-center text-sm\">\n Please enter your API key to start generating videos\n </p>\n </CardContent>\n </Card>\n )}\n </div>\n\n <div className=\"space-y-4\">\n <Card>\n <CardHeader>\n <CardTitle className=\"text-base\">Generated Videos</CardTitle>\n </CardHeader>\n <CardContent className=\"space-y-3\">\n {generatedVideos.length === 0 ? (\n <div className=\"text-muted-foreground py-8 text-center text-sm\">\n No videos generated yet\n </div>\n ) : (\n generatedVideos.map((video) => (\n <Card\n key={video.id}\n className={`cursor-pointer transition-colors ${\n selectedVideo?.id === video.id\n ? \"border-primary\"\n : \"hover:border-primary/50\"\n }`}\n onClick={() => setSelectedVideo(video)}\n >\n <CardContent className=\"p-3\">\n <div className=\"relative mb-2 aspect-video overflow-hidden rounded\">\n <img\n src={video.thumbnail}\n alt={video.prompt}\n className=\"h-full w-full object-cover\"\n />\n <div className=\"absolute inset-0 flex items-center justify-center bg-black/30\">\n <Play className=\"h-8 w-8 text-white\" />\n </div>\n </div>\n <p className=\"line-clamp-2 text-xs\">{video.prompt}</p>\n <div className=\"mt-2 flex items-center gap-2\">\n <Badge variant=\"secondary\" className=\"text-xs\">\n <Clock className=\"mr-1 h-3 w-3\" />\n {video.duration}s\n </Badge>\n </div>\n </CardContent>\n </Card>\n ))\n )}\n </CardContent>\n </Card>\n\n <Card className=\"bg-muted/50\">\n <CardHeader>\n <CardTitle className=\"text-sm\">Tips</CardTitle>\n </CardHeader>\n <CardContent className=\"text-muted-foreground space-y-2 text-xs\">\n <p>• Be specific and descriptive in your prompts</p>\n <p>• Describe camera movements and angles</p>\n <p>• Mention lighting and atmosphere</p>\n <p>• Specify the mood and style you want</p>\n <p>• Keep prompts under 500 characters</p>\n </CardContent>\n </Card>\n </div>\n </div>\n </CardContent>\n </Card>\n </div>\n )\n}\n"
|
|
}
|
|
]
|
|
} |