[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.98 0 0); --foreground: oklch(0.1 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.1 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.1 0 0); --primary: oklch(0.1 0 0); --primary-foreground: oklch(0.98 0 0); --secondary: oklch(0.95 0 0); --secondary-foreground: oklch(0.1 0 0); --muted: oklch(0.92 0 0); --muted-foreground: oklch(0.45 0 0); --accent: oklch(0.15 0 0); --accent-foreground: oklch(0.98 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.88 0 0); --input: oklch(0.92 0 0); --ring: oklch(0.3 0 0); --chart-1: oklch(0.2 0 0); --chart-2: oklch(0.35 0 0); --chart-3: oklch(0.5 0 0); --chart-4: oklch(0.65 0 0); --chart-5: oklch(0.8 0 0); --radius: 0rem; --sidebar: oklch(0.985 0 0); --sidebar-foreground: oklch(0.145 0 0); --sidebar-primary: oklch(0.205 0 0); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.97 0 0); --sidebar-accent-foreground: oklch(0.205 0 0); --sidebar-border: oklch(0.922 0 0); --sidebar-ring: oklch(0.708 0 0); } .dark { --background: oklch(0.08 0 0); --foreground: oklch(0.95 0 0); --card: oklch(0.12 0 0); --card-foreground: oklch(0.95 0 0); --popover: oklch(0.12 0 0); --popover-foreground: oklch(0.95 0 0); --primary: oklch(0.95 0 0); --primary-foreground: oklch(0.08 0 0); --secondary: oklch(0.18 0 0); --secondary-foreground: oklch(0.95 0 0); --muted: oklch(0.2 0 0); --muted-foreground: oklch(0.6 0 0); --accent: oklch(0.9 0 0); --accent-foreground: oklch(0.08 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.22 0 0); --input: oklch(0.18 0 0); --ring: oklch(0.7 0 0); --chart-1: oklch(0.9 0 0); --chart-2: oklch(0.75 0 0); --chart-3: oklch(0.6 0 0); --chart-4: oklch(0.45 0 0); --chart-5: oklch(0.3 0 0); --sidebar: oklch(0.205 0 0); --sidebar-foreground: oklch(0.985 0 0); --sidebar-primary: oklch(0.488 0.243 264.376); --sidebar-primary-foreground: oklch(0.985 0 0); --sidebar-accent: oklch(0.269 0 0); --sidebar-accent-foreground: oklch(0.985 0 0); --sidebar-border: oklch(0.269 0 0); --sidebar-ring: oklch(0.439 0 0); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-mono: 'Geist Mono', 'Geist Mono Fallback'; --color-background: var(--background); --color-foreground: var(--foreground); --color-card: var(--card); --color-card-foreground: var(--card-foreground); --color-popover: var(--popover); --color-popover-foreground: var(--popover-foreground); --color-primary: var(--primary); --color-primary-foreground: var(--primary-foreground); --color-secondary: var(--secondary); --color-secondary-foreground: var(--secondary-foreground); --color-muted: var(--muted); --color-muted-foreground: var(--muted-foreground); --color-accent: var(--accent); --color-accent-foreground: var(--accent-foreground); --color-destructive: var(--destructive); --color-destructive-foreground: var(--destructive-foreground); --color-border: var(--border); --color-input: var(--input); --color-ring: var(--ring); --color-chart-1: var(--chart-1); --color-chart-2: var(--chart-2); --color-chart-3: var(--chart-3); --color-chart-4: var(--chart-4); --color-chart-5: var(--chart-5); --radius-sm: calc(var(--radius) - 4px); --radius-md: calc(var(--radius) - 2px); --radius-lg: var(--radius); --radius-xl: calc(var(--radius) + 4px); --color-sidebar: var(--sidebar); --color-sidebar-foreground: var(--sidebar-foreground); --color-sidebar-primary: var(--sidebar-primary); --color-sidebar-primary-foreground: var(--sidebar-primary-foreground); --color-sidebar-accent: var(--sidebar-accent); --color-sidebar-accent-foreground: var(--sidebar-accent-foreground); --color-sidebar-border: var(--sidebar-border); --color-sidebar-ring: var(--sidebar-ring); } @layer base { * { @apply border-border outline-ring/50; } body { @apply bg-background text-foreground; } } [V0_FILE]json:file="package.json" isMerged="true" { "name": "my-v0-project", "version": "0.1.0", "private": true, "scripts": { "dev": "next dev", "build": "next build", "start": "next start", "lint": "eslint ." }, "dependencies": { "@hookform/resolvers": "^3.10.0", "@radix-ui/react-accordion": "1.2.2", "@radix-ui/react-alert-dialog": "1.1.4", "@radix-ui/react-aspect-ratio": "1.1.1", "@radix-ui/react-avatar": "1.1.2", "@radix-ui/react-checkbox": "1.1.3", "@radix-ui/react-collapsible": "1.1.2", "@radix-ui/react-context-menu": "2.2.4", "@radix-ui/react-dialog": "1.1.4", "@radix-ui/react-dropdown-menu": "2.1.4", "@radix-ui/react-hover-card": "1.1.4", "@radix-ui/react-label": "2.1.1", "@radix-ui/react-menubar": "1.1.4", "@radix-ui/react-navigation-menu": "1.2.3", "@radix-ui/react-popover": "1.1.4", "@radix-ui/react-progress": "1.1.1", "@radix-ui/react-radio-group": "1.2.2", "@radix-ui/react-scroll-area": "1.2.2", "@radix-ui/react-select": "2.1.4", "@radix-ui/react-separator": "1.1.1", "@radix-ui/react-slider": "1.2.2", "@radix-ui/react-slot": "1.1.1", "@radix-ui/react-switch": "1.1.2", "@radix-ui/react-tabs": "1.1.2", "@radix-ui/react-toast": "1.2.4", "@radix-ui/react-toggle": "1.1.1", "@radix-ui/react-toggle-group": "1.1.1", "@radix-ui/react-tooltip": "1.1.6", "@vercel/analytics": "1.3.1", "autoprefixer": "^10.4.20", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "date-fns": "4.1.0", "embla-carousel-react": "8.5.1", "input-otp": "1.4.1", "lucide-react": "^0.454.0", "next": "16.0.10", "next-themes": "^0.4.6", "react": "19.2.0", "react-day-picker": "9.8.0", "react-dom": "19.2.0", "react-hook-form": "^7.60.0", "react-resizable-panels": "^2.1.7", "recharts": "2.15.4", "sonner": "^1.7.4", "tailwind-merge": "^3.3.1", "tailwindcss-animate": "^1.0.7", "vaul": "^1.1.2", "zod": "3.25.76" }, "devDependencies": { "@tailwindcss/postcss": "^4.1.9", "@types/node": "^22", "@types/react": "^19", "@types/react-dom": "^19", "postcss": "^8.5", "tailwindcss": "^4.1.9", "tw-animate-css": "1.3.3", "typescript": "^5" } } [V0_FILE]typescriptreact:file="app/layout.tsx" isMerged="true" import React from "react" import type { Metadata } from 'next' import { Geist, Geist_Mono } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'CURATED - Long-term Shopping', description: '130+ curated long-term quality products', generator: 'v0.app', icons: { icon: [ { url: '/icon-light-32x32.png', media: '(prefers-color-scheme: light)', }, { url: '/icon-dark-32x32.png', media: '(prefers-color-scheme: dark)', }, { url: '/icon.svg', type: 'image/svg+xml', }, ], apple: '/apple-icon.png', }, } export default function RootLayout({ children, }: Readonly<{ children: React.ReactNode }>) { return ( {children} ) } [V0_FILE]typescript:file="lib/products.ts" isMerged="true" export interface Product { id: number name: string price: string originalPrice?: string link: string category: string } export const products: Product[] = [ { id: 1, name: "盖帝虎地漏芯防臭器下水道防虫反味", price: "¥32.43", link: "https://p.pinduoduo.com/6o78ykLY?sc=EFAC", category: "居家", }, { id: 2, name: "AI电热毛巾架烘干杀菌加热智能浴巾架", price: "¥74.90", originalPrice: "¥76.90", link: "https://p.pinduoduo.com/sFpwuxBT?sc=EFAC", category: "智能家居", }, { id: 3, name: "阅星曈X4墨水屏电子纸磁吸设计阅读器", price: "¥235.00", link: "https://p.pinduoduo.com/QQx8Qz8d?sc=EFAC", category: "数码", }, { id: 4, name: "美的踢脚线取暖器家用节能省电电暖器", price: "¥197.80", link: "https://p.pinduoduo.com/XnJwBZq0?sc=EFAC", category: "电器", }, { id: 5, name: "德国柏曼骑士护眼学习专用灯落地台灯", price: "¥6140.00", link: "https://p.pinduoduo.com/WjA8QWIl?sc=EFAC", category: "照明", }, { id: 6, name: "南国纯椰子粉无添加糖椰奶厚乳粉", price: "¥13.60", link: "https://p.pinduoduo.com/Ab2wEqaY?sc=EFAC", category: "食品", }, { id: 7, name: "联合创新40英寸准5K 21:9带鱼屏显示器", price: "¥3898.00", link: "https://p.pinduoduo.com/aTCwB2Wp?sc=EFAC", category: "数码", }, { id: 8, name: "真力 G2 Genelec G Two 专业级HIFI音响", price: "¥4754.00", link: "https://p.pinduoduo.com/oti8QjHx?sc=EFAC", category: "音频", }, { id: 9, name: "Arcteryx始祖鸟 GAMMA MX Hoody 连帽外套", price: "¥3099.00", link: "https://p.pinduoduo.com/Sj38matj?sc=EFAC", category: "户外", }, { id: 10, name: "心相印洗脸巾大包一次性擦脸巾棉柔巾", price: "¥16.70", link: "https://p.pinduoduo.com/oYa8b6Se?sc=EFAC", category: "日用", }, { id: 11, name: "声阔AeroClip耳夹式蓝牙耳机开放式运动", price: "¥499.00", link: "https://p.pinduoduo.com/Tp9w7MBp?sc=EFAC", category: "音频", }, { id: 12, name: "黑白调P2Pro+人体工学椅电脑椅家用办公椅", price: "¥699.00", link: "https://p.pinduoduo.com/y5D8Tn5R?sc=EFAC", category: "家具", }, { id: 13, name: "Sony/索尼 WH-1000XM6 旗舰头戴式降噪耳机", price: "¥2299.00", link: "https://p.pinduoduo.com/V3l8vAkw?sc=EFAC", category: "音频", }, { id: 14, name: "罗技K580无线蓝牙键盘双模轻音办公超薄", price: "¥199.00", link: "https://p.pinduoduo.com/rpd8yWZj?sc=EFAC", category: "数码", }, { id: 15, name: "361°多功能爬楼机原地踏步机运动健身器材", price: "¥388.00", link: "https://p.pinduoduo.com/ryl8vgcN?sc=EFAC", category: "运动", }, { id: 16, name: "佳明GarminFR265血氧心率跑步户外运动手表", price: "¥1999.00", link: "https://p.pinduoduo.com/4YP8T63q?sc=EFAC", category: "数码", }, { id: 17, name: "正品STANLEY吸管杯Pro大容量保温杯", price: "¥189.00", link: "https://p.pinduoduo.com/DFu8FFUc?sc=EFAC", category: "日用", }, { id: 18, name: "十足美抗菌洗液皮肤抑菌组合套装", price: "¥18.80", link: "https://p.pinduoduo.com/os589GoU?sc=EFAC", category: "日用", }, { id: 19, name: "罗技MX Master 3S无线蓝牙鼠标办公", price: "¥217.00", originalPrice: "¥237.00", link: "https://p.pinduoduo.com/QEu8yP6h?sc=EFAC", category: "数码", }, { id: 20, name: "美的空气炸锅家用5L大容量蒸汽嫩烤电烤箱", price: "¥151.89", link: "https://p.pinduoduo.com/rIw8mSEl?sc=EFAC", category: "电器", }, { id: 21, name: "家用黑色垃圾袋加厚特厚手提背心式塑料袋", price: "¥5.61", link: "https://p.pinduoduo.com/mBb8QwDc?sc=EFAC", category: "日用", }, { id: 22, name: "得力小型电子秤克称高精度厨房秤烘焙精准", price: "¥19.90", originalPrice: "¥22.90", link: "https://p.pinduoduo.com/atpwBH7Z?sc=EFAC", category: "厨房", }, { id: 23, name: "罗技MX ERGO S无线双模轨迹球鼠标人体工学", price: "¥409.00", originalPrice: "¥419.00", link: "https://p.pinduoduo.com/6Td8XA2p?sc=EFAC", category: "数码", }, ] [V0_FILE]typescriptreact:file="app/page.tsx" isMerged="true" "use client" import { useState } from "react" import { CardCarousel } from "@/components/card-carousel" import { products } from "@/lib/products" import { translations, type Language } from "@/lib/i18n" export default function Home() { const [lang, setLang] = useState("zh") const t = translations[lang] const toggleLang = () => { setLang(lang === "zh" ? "en" : "zh") } return (

{/* Header */}

{t.title}

{t.subtitle}

{/* Card Carousel */} {/* Footer Badge */} @Jackywine

) } [V0_FILE]typescript:file="lib/i18n.ts" isMerged="true" export const translations = { zh: { title: "精选好物", subtitle: "130+ 件精选长期好物", viewProduct: "查看商品", scrollHint: "滚动浏览", switchLang: "EN", category: "分类", price: "价格", originalPrice: "原价", productCount: "商品", }, en: { title: "CURATED", subtitle: "130+ curated long-term quality products", viewProduct: "View Product", scrollHint: "Scroll to browse", switchLang: "中", category: "Category", price: "Price", originalPrice: "Was", productCount: "Products", }, } as const export type Language = keyof typeof translations [V0_FILE]typescriptreact:file="components/card-carousel.tsx" isMerged="true" "use client" import { useEffect, useRef, useState, useCallback } from "react" import { ArrowUpRight } from "lucide-react" import type { Product } from "@/lib/products" import type { Language } from "@/lib/i18n" import { translations } from "@/lib/i18n" interface CardCarouselProps { products: Product[] lang: Language } export function CardCarousel({ products, lang }: CardCarouselProps) { const [currentIndex, setCurrentIndex] = useState(0) const [isAnimating, setIsAnimating] = useState(false) const containerRef = useRef(null) const t = translations[lang] const goToIndex = useCallback((index: number) => { if (isAnimating) return setIsAnimating(true) setCurrentIndex(index) setTimeout(() => setIsAnimating(false), 500) }, [isAnimating]) useEffect(() => { const handleWheel = (e: WheelEvent) => { e.preventDefault() if (isAnimating) return if (e.deltaY > 0 && currentIndex < products.length - 1) { goToIndex(currentIndex + 1) } else if (e.deltaY < 0 && currentIndex > 0) { goToIndex(currentIndex - 1) } } const container = containerRef.current if (container) { container.addEventListener("wheel", handleWheel, { passive: false }) } return () => { if (container) { container.removeEventListener("wheel", handleWheel) } } }, [currentIndex, isAnimating, products.length, goToIndex]) // Touch support const touchStartY = useRef(0) useEffect(() => { const handleTouchStart = (e: TouchEvent) => { touchStartY.current = e.touches[0].clientY } const handleTouchEnd = (e: TouchEvent) => { if (isAnimating) return const touchEndY = e.changedTouches[0].clientY const diff = touchStartY.current - touchEndY if (Math.abs(diff) > 50) { if (diff > 0 && currentIndex < products.length - 1) { goToIndex(currentIndex + 1) } else if (diff < 0 && currentIndex > 0) { goToIndex(currentIndex - 1) } } } const container = containerRef.current if (container) { container.addEventListener("touchstart", handleTouchStart, { passive: true }) container.addEventListener("touchend", handleTouchEnd, { passive: true }) } return () => { if (container) { container.removeEventListener("touchstart", handleTouchStart) container.removeEventListener("touchend", handleTouchEnd) } } }, [currentIndex, isAnimating, products.length, goToIndex]) // Keyboard support useEffect(() => { const handleKeyDown = (e: KeyboardEvent) => { if (isAnimating) return if ((e.key === "ArrowDown" || e.key === "ArrowRight") && currentIndex < products.length - 1) { goToIndex(currentIndex + 1) } else if ((e.key === "ArrowUp" || e.key === "ArrowLeft") && currentIndex > 0) { goToIndex(currentIndex - 1) } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [currentIndex, isAnimating, products.length, goToIndex]) const getCardStyle = (index: number) => { const diff = index - currentIndex const absDistance = Math.abs(diff) // Only show 3 cards: current, prev, next if (absDistance > 2) { return { transform: `translateX(${diff * 100}%) rotateY(${diff > 0 ? 90 : -90}deg) scale(0.5)`, opacity: 0, zIndex: 0, pointerEvents: "none" as const, } } const rotateY = diff * 45 // Side cards rotate 45 degrees const translateX = diff * 70 // Percentage offset const translateZ = -absDistance * 150 // Push side cards back const scale = 1 - absDistance * 0.15 const opacity = 1 - absDistance * 0.3 return { transform: `translateX(${translateX}%) translateZ(${translateZ}px) rotateY(${rotateY}deg) scale(${scale})`, opacity, zIndex: 10 - absDistance, pointerEvents: absDistance === 0 ? ("auto" as const) : ("none" as const), } } return (

{products.map((product, index) => (

{/* Black accent bar */}

{String(index + 1).padStart(2, "0")}

{/* Content area */}

{product.category}

{product.name}

{product.price} {product.originalPrice && ( {product.originalPrice} )}

{t.viewProduct} →

))}

{/* Progress indicator */}

{products.map((_, index) => (

{/* Current index display */}

{String(currentIndex + 1).padStart(2, "0")} / {products.length} {t.productCount}

{/* Scroll hint */}

{t.scrollHint}

) } [V0_FILE]typescriptreact:file="components/hero-section.tsx" isDeleted="true" GENERATING [V0_FILE]typescriptreact:file="components/product-grid.tsx" isDeleted="true" GENERATING [V0_FILE]typescriptreact:file="components/product-card.tsx" isDeleted="true" GENERATING [V0_FILE]typescriptreact:file="components/footer-badge.tsx" isDeleted="true" GENERATING

About

Tags

Share

More from jackywine

More Templates Like This

About

Tags

Share

About

Tags

Share

More from jackywine

More Templates Like This