# PetVibe — 宠物周边个性化定制跨境电商独立站

> 参赛作品 · WorkBuddy × Tencent EdgeOne AI Prompts × Skills 挑战赛

---

## 📌 作品信息

| 字段 | 内容 |
|---|---|
| 作品名称 | PetVibe |
| 类型 | 宠物周边个性化定制跨境电商独立站 |
| 技术栈 | React + Vite + TypeScript + Tailwind CSS + shadcn/ui + Edge Functions + Cloud Functions + KV Storage |
| 参赛赛道 | WorkBuddy × Tencent EdgeOne AI Prompts × Skills 挑战赛 |

---

## 📝 作品介绍

PetVibe 是一个面向全球消费者的宠物周边个性化定制跨境电商独立站。用户可以选择宠物项圈、铭牌、服饰、玩具等周边产品，并上传宠物照片或输入宠物名字，生成个性化定制预览。网站支持多语言（英文 / 西班牙文 / 德文），集成 PayPal 与 Stripe 主流跨境收款工具，并具备完整的定制需求收集与订单管理功能。设计风格炫酷现代，采用深色模式配合渐变霓虹色调，营造科技感与温度并存的购物体验。

---

## 🎯 GOAL

Create a cool, modern cross-border e-commerce website for **PetVibe — personalized pet accessory customization**.

Design direction:
- Dark mode base (#0a0a0f) with neon gradient accents (cyan #00f5d4 → purple #7b61ff → pink #ff6fd8)
- Cyberpunk-lite aesthetic: glassmorphism cards, subtle grid lines, glowing borders
- Premium but approachable — not overly tech-y, warm enough for pet lovers
- Mobile-first responsive, smooth Framer Motion animations
- Multi-language support (EN / ES / DE) via i18n
- Production-grade: accessible, semantic HTML, proper loading states

This is NOT a generic Shopify store, NOT a boring corporate site, NOT a heavy cyberpunk visual that hurts readability.

The site uses **EdgeOne Makers Edge Functions** for form handling and **Cloud Functions (Node.js)** for payment webhook processing.

---

## 🌐 ASSETS

> **All assets are hosted on CDN. Use these exact URLs directly — do NOT copy files locally.**
>
> CDN base: `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe/`

### Hero Image
`https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe/hero-dog.jpg`

Use as the Hero section background image (object-cover, with dark overlay for readability). No video is available; implement the animated gradient orbs and grid effects purely in CSS/JS.

### Product Images (use these exact URLs)

| Product | CDN URL |
|---------|---------|
| Custom Name Collar | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe/product-collar.jpg` |
| Glitter Engraved ID Tag | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe/product-glitter-tag.jpg` |
| Personalized Pet Hoodie | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe/product-hoodie.jpg` |
| Photo Pet Ornament (Cat) | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe/product-ornament-cat.jpg` |
| Custom Printed Frisbee | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe/product-frisbee.jpg` |
| Hand-Drawn Oil Portrait | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe/product-oil-portrait.jpg` |
| Night Glow Collar | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe/product-night-collar.jpg` |
| Custom Portrait Mug (Cat) | `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe/product-mug-cat.jpg` |

If any CDN asset fails to load, fall back to a stable dark gradient placeholder with the PetVibe paw logo centered.

---

## 🛠 TECH STACK

- React 18+
- Vite
- TypeScript
- Tailwind CSS v3
- shadcn/ui
- lucide-react
- framer-motion
- react-i18next (i18n)
- EdgeOne Makers Edge Functions
- EdgeOne Makers Cloud Functions (Node.js)

---

## 🔤 FONTS & DESIGN SYSTEM

### Google Fonts
```html
<link href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
```

### Tailwind Config
```js
fontFamily: {
  heading: ['Orbitron', 'sans-serif'],
  body: ['Inter', 'sans-serif'],
}
```

### CSS Variables (`:root` in `index.css`)
```css
:root {
  --background: 240 20% 5%;
  --foreground: 0 0% 100%;
  --primary: 160 100% 48%;        /* #00f5d4 cyan */
  --primary-foreground: 240 20% 5%;
  --secondary: 262 100% 64%;       /* #7b61ff purple */
  --accent: 330 100% 65%;          /* #ff6fd8 pink */
  --muted: 240 10% 20%;
  --muted-foreground: 240 5% 65%;
  --border: 240 10% 20% / 0.4;
  --radius: 12px;
}
```

### Core Color Usage
- Backgrounds: `#0a0a0f` (deep dark blue-black)
- Cards: `rgba(255,255,255,0.03)` with `backdrop-filter: blur(12px)`
- Primary CTA: linear-gradient(135deg, `#00f5d4`, `#7b61ff`)
- Accent glow: `0 0 20px rgba(0,245,212,0.3)`
- Text primary: white
- Text secondary: `rgba(255,255,255,0.6)`

---

## 🧩 SHARED COMPONENTS

### `.cyber-glass` (subtle card)
```css
.cyber-glass {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(12px) saturate(120%);
  border: 1px solid rgba(0,245,212,0.12);
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  position: relative;
  overflow: hidden;
}
```
Glow border effect via `::before` pseudo-element with gradient border mask.

### `.cyber-glass-strong` (CTA / important cards)
Same as above but:
- `backdrop-filter: blur(40px)`
- border: `1px solid rgba(0,245,212,0.25)`
- box-shadow: `0 0 30px rgba(0,245,212,0.15), 0 8px 32px rgba(0,0,0,0.4)`
- Used for primary CTAs and product cards on hover

### `SectionBadge` component
```tsx
// Reusable section badge pill
<div className="cyber-glass inline-flex items-center gap-2 rounded-full px-4 py-2 text-sm text-[#00f5d4]">
  <Icon className="w-4 h-4" />
  {label}
</div>
```

### `GradientButton` component
```tsx
<button className="bg-gradient-to-r from-[#00f5d4] to-[#7b61ff] text-black font-heading font-bold rounded-full px-6 py-3 transition-all hover:scale-105 hover:shadow-[0_0_30px_rgba(0,245,212,0.4)]">
  {children}
</button>
```

---

## 📐 GLOBAL LAYOUT RULES

- Max-width container: `max-w-7xl mx-auto`
- Horizontal padding: `px-6 md:px-10 lg:px-16`
- Section spacing: `py-20 md:py-28`
- Smooth scroll: `scroll-behavior: smooth` on `html`, `scroll-padding-top: 80px`
- Respect `prefers-reduced-motion`
- All images: `object-cover`, `loading="lazy"`
- Grid breakpoints: 1 col (mobile) → 2 col (tablet) → 3-4 col (desktop)

---

## 🏗 SITE STRUCTURE (9 Sections)

---

### SECTION 1 — NAVBAR (fixed, smart background)

`<nav>` fixed top-0, full-width, z-50, transition-all duration-300.

Inner: `max-w-7xl mx-auto flex items-center justify-between px-6 py-4`.

**Left**: Logo component — inline SVG paw mark with cyan `#00f5d4` glow + "PetVibe" text in Orbitron, text-2xl, font-heading.

**Center** (hidden mobile, `md:flex`): nav links in `cyber-glass rounded-full px-2 py-1.5`:
- "Home" → `#home`
- "Products" → `#products`
- "Customize" → `#customize`
- "Reviews" → `#reviews`

Each link: `text-sm font-medium text-white/80 px-3 py-1.5 rounded-full hover:bg-white/5 hover:text-white transition-colors`

**Right**: 
- Language switcher: `cyber-glass rounded-full px-3 py-1.5 text-xs` with globe icon, dropdown for EN/ES/DE
- CTA: `GradientButton` size sm "Shop Now" → `#products`

**Scroll behavior**: on scroll > 50, add `bg-[#0a0a0f]/80 backdrop-blur-md`.

---

### SECTION 2 — HERO (min-height 100vh) — id="home"

`<section>`, relative, overflow-hidden, min-h-screen, bg-[#0a0a0f].

**Background effects** (absolute inset-0, z-0):
1. Hero image from CDN: `https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe/hero-dog.jpg`
   - `<img>` or CSS background-image, object-cover, opacity-30, absolute inset-0
2. Animated gradient orbs (CSS):
   - Orb 1: 400×400px radial-gradient cyan → transparent, absolute top-20 left-20, animate pulse 4s
   - Orb 2: 300×300px radial-gradient purple → transparent, absolute bottom-40 right-20, animate pulse 6s
   - Orb 3: 200×200px radial-gradient pink → transparent, absolute top-1/2 left-1/3, animate pulse 5s
3. Subtle grid: `background-image: linear-gradient(rgba(0,245,212,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0,245,212,0.03) 1px, transparent 1px)` with `background-size: 60px 60px`
4. Radial dark overlay for readability

**Content** (z-10, centered, max-w-4xl mx-auto, text-center, pt-40):
- Badge: `SectionBadge` with Sparkles icon + "Personalized with Love"
- Heading: "Your Pet. Their Style. `<br/>` Custom Made." — `text-5xl md:text-7xl lg:text-8xl font-heading font-bold text-white leading-[0.95] tracking-tight`
  - "Custom Made." text in gradient: `bg-gradient-to-r from-[#00f5d4] via-[#7b61ff] to-[#ff6fd8] bg-clip-text text-transparent`
- Subtext: "Create one-of-a-kind pet accessories — engraved tags, custom collars, personalized portraits. Worldwide shipping. PayPal & Stripe accepted." — `text-lg text-white/60 font-body max-w-2xl mx-auto`
- CTA row: 
  - `GradientButton` "Start Customizing" + ArrowRight icon
  - `cyber-glass rounded-full px-6 py-3 text-white/80 hover:text-white transition-colors` "View Products"
- Trust badges: `flex items-center justify-center gap-6 mt-10 text-white/40 text-sm`
  - "🛡️ Secure Payment"
  - "🌍 Worldwide Shipping"
  - "⭐ 4.9/5 Rating"

---

### SECTION 3 — HOW IT WORKS — id="customize"

`<section>`, py-28, relative.

**Header** (centered):
- Badge: SectionBadge with Wand2 icon + "How It Works"
- Heading: "Three Steps to Your Pet's Unique Look"

**3-Step Process** (`grid grid-cols-1 md:grid-cols-3 gap-8 max-w-5xl mx-auto mt-16`):

Each step card: `cyber-glass p-8 rounded-2xl text-center relative`:

Step 1: `Upload` icon → "Upload & Describe" → "Upload your pet's photo or describe their personality. Our AI generates customization preview."
Step 2: `Palette` icon → "Preview & Adjust" → "Tweak colors, fonts, and layout. See your design in real-time 3D preview."
Step 3: `Send` icon → "We Craft & Ship" → "Premium materials, hand-finished. Ships worldwide in 5-7 days."

---

### SECTION 4 — PRODUCT GRID — id="products"

`<section>`, py-28, bg-[#0c0c14].

**Header** (centered):
- Badge: SectionBadge with ShoppingBag icon + "Our Products"
- Heading: "Hand-Crafted Pet Accessories"
- Subtext: "Each piece is made to order, personalized with your pet's name or photo."

**Product Grid** (`grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 max-w-6xl mx-auto mt-16`):

Each product card: `cyber-glass rounded-2xl overflow-hidden group transition-all duration-500 hover:-translate-y-2 hover:shadow-[0_20px_60px_-15px_rgba(0,245,212,0.15)]`

**Products data** (use CDN image URLs from ASSETS section, hardcode as fallback for `/api/products`):

```javascript
const CDN_BASE = 'https://cdnstatic.tencentcs.com/edgeone/pages/product-activities/petvibe';

const products = [
  { id: 'collar-001', name: 'Custom Name Collar', price: '$24.99', image: `${CDN_BASE}/product-collar.jpg`, tag: 'Best Seller' },
  { id: 'tag-001', name: 'Glitter Engraved ID Tag', price: '$19.99', image: `${CDN_BASE}/product-glitter-tag.jpg`, tag: 'New' },
  { id: 'hoodie-001', name: 'Personalized Pet Hoodie', price: '$49.99', image: `${CDN_BASE}/product-hoodie.jpg`, tag: 'Popular' },
  { id: 'ornament-001', name: 'Photo Pet Ornament', price: '$34.99', image: `${CDN_BASE}/product-ornament-cat.jpg`, tag: '' },
  { id: 'frisbee-001', name: 'Custom Printed Frisbee', price: '$29.99', image: `${CDN_BASE}/product-frisbee.jpg`, tag: 'Best Seller' },
  { id: 'portrait-001', name: 'Hand-Drawn Oil Portrait', price: '$59.99', image: `${CDN_BASE}/product-oil-portrait.jpg`, tag: 'Premium' },
  { id: 'night-collar-001', name: 'Night Glow Collar', price: '$32.99', image: `${CDN_BASE}/product-night-collar.jpg`, tag: 'New' },
  { id: 'mug-001', name: 'Custom Portrait Mug', price: '$22.99', image: `${CDN_BASE}/product-mug-cat.jpg`, tag: '' },
];
```

---

### SECTION 5 — CUSTOMIZATION MODAL (Product Page Simulation)

When user clicks "Customize" on any product, open a full-screen modal overlay.

**Form fields**:
1. Pet Name: `input type="text"` with cyber-glass styling
2. Font Style: 3-option radio group (Classic Serif / Modern Sans / Playful Script)
3. Color: color picker or 4-option preset swatches
4. Upload Photo: drag-and-drop zone with preview thumbnail
5. Special Instructions: `textarea`, optional
6. Quantity: number input, min 1

**On "Add to Cart"**: POST to `/api/cart/add` (Edge Function), show success toast.

---

### SECTION 6 — FEATURES GRID

py-28, centered.

**4-column grid** (`grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6`):

1. Shield icon → "Secure Payments" → "PayPal & Stripe integration. 100% secure checkout."
2. Globe icon → "Worldwide Shipping" → "Ships to 50+ countries. DHL/UPS tracked delivery."
3. Sparkles icon → "AI Design Preview" → "See your custom design in real-time 3D before ordering."
4. HeartHandshake icon → "Satisfaction Guaranteed" → "Not happy? Full refund within 30 days."

---

### SECTION 7 — CUSTOMER REVIEWS — id="reviews"

`<section>`, py-28, bg-[#0c0c14].

Reviews:
1. "The engraved tag I ordered for Luna arrived in 5 days. The quality is incredible — the lettering is deep and crisp. She gets compliments every walk!" — Sarah M., Luna's mom ✓ Verified Buyer
2. "I was skeptical about ordering a custom portrait mug online, but the AI preview was spot-on. The final product made me tear up. Worth every penny." — Marco R., Biscuit's dad ✓ Verified Buyer
3. "Ordered 3 customized collars for my pack. The colors are vibrant, the hardware feels premium, and the personalization is perfect. Shipping to Germany was super fast!" — Julia K., Mom of 3 ✓ Verified Buyer

---

### SECTION 8 — CTA + PAYMENT INFO

py-28, relative, overflow-hidden. Animated gradient orbs as background.

- Heading: "Ready to Create Something Special?"
- `GradientButton` "Start Customizing Now" (large)
- Payment method icons row: PayPal + Stripe + "🔒 SSL Secured"

---

### SECTION 9 — FOOTER — id="contact"

`border-t border-white/10 pt-16 pb-8`

**Top row** (`grid grid-cols-1 md:grid-cols-4 gap-8`):
1. Brand: Logo + description
2. Quick Links: "Products", "Customize", "Shipping Info", "FAQ"
3. Support: "Contact Us", "Returns", "Size Guide", "Track Order"
4. Newsletter: "Get 10% off your first order" — email input + Subscribe button

**Bottom bar**: Copyright + language flags + social icons (Instagram, TikTok, Pinterest)

---

## 🔧 EDGE FUNCTIONS

Create these Edge Function endpoints in `edge-functions/api/`:

### `GET /api/products`
Return JSON array of all products. Use CDN URLs for images.

### `POST /api/cart/add`
Accept `{ productId, customization: { petName, fontStyle, color, photoUrl }, quantity }`.
Store in KV Storage (key: `cart:{sessionId}`).
Return `{ success: true, cartId, itemCount }`.

### `POST /api/orders/create`
Accept order data, generate order ID, return `{ orderId, paypalCheckoutUrl }`.

### `GET /api/health`
Return `{ ok: true, timestamp: Date.now() }`.

---

## 💳 CLOUD FUNCTIONS (Node.js) — Payment Integration

Create `cloud-functions/api/[[default]].js` using **Express** framework for PayPal and Stripe webhooks.

**Payment Integration Notes:**
- PayPal: Use `@paypal/sdk-client` (frontend) + PayPal REST API (backend)
- Stripe: Use `@stripe/stripe-js` (frontend) + `stripe` npm package (backend)
- Store API keys in EdgeOne Makers environment variables (`PAYPAL_CLIENT_ID`, `STRIPE_SECRET_KEY`)
- Access via `context.env.VARIABLE_NAME` in Cloud Functions (Node.js)

---

## 🗄 KV STORAGE

**Prerequisite**: Enable KV Storage in EdgeOne Makers console, create namespace `petvibe-kv`, bind to variable name `petvibe_kv`.

**KV is a global variable**, NOT on `context.env`:
```js
// ✅ Correct
export async function onRequest() {
  const visits = await petvibe_kv.get('stats:visits') || '0';
  await petvibe_kv.put('stats:visits', String(Number(visits) + 1));
  return new Response(JSON.stringify({ visits: Number(visits) + 1 }), {
    headers: { 'Content-Type': 'application/json' }
  });
}
```

---

## 🌍 I18N (Multi-language)

Use `react-i18next` with EN / ES / DE resources. Language switcher in Navbar calls `i18n.changeLanguage()`.

---

## ⛔ NON-NEGOTIABLE RULES

1. **NO** overlapping collage layouts
2. **NO** negative margins for decorative offset
3. **NO** neon colors that hurt readability (keep neon as glow/accent only)
4. **NO** floating elements that break grid alignment
5. **NO** `position: absolute` for main content (backgrounds only)
6. **NO** hardcoded product data in production — use `/api/products` Edge Function
7. **NO** storing API secrets in frontend code — use EdgeOne Makers environment variables
8. **NO** `Response.json()` in Edge Functions — use `new Response(JSON.stringify(...))`
9. **NO** Node.js built-ins in Edge Functions — use Web APIs only
10. **ALL** images must have `alt` text for accessibility
11. **ALL** interactive elements must have visible focus states
12. **ALL** animations must respect `prefers-reduced-motion`

---

## 📦 DEPLOYMENT

### Install Skill
```
https://github.com/TencentEdgeOne/edgeone-pages-skills
```

### Steps
```bash
export PAGES_SOURCE=skills
edgeone pages init
edgeone pages link
edgeone pages dev      # http://localhost:8088
# Set env vars: PAYPAL_CLIENT_ID, STRIPE_SECRET_KEY, JWT_SECRET
# Enable KV: namespace petvibe-kv, bind to petvibe_kv
edgeone pages deploy
```

---

## 🎨 ANIMATION SPECIFICATIONS

- **Hero heading**: BlurText (blur 10px → 0px, word-by-word, 100ms delay each)
- **Section entries**: `whileInView`, y: 40 → 0, opacity 0 → 1, duration 0.6s, once: true
- **Product cards**: staggered delay 0 / 0.1 / 0.2s per card
- **Hover effects**: translateY -4px, shadow glow, duration 0.3s
- **No bounce effects**. Ever. Premium = smooth, not playful.

---

## ✅ FINAL QUALITY BAR

The result must look like:
- A premium cross-border e-commerce brand homepage
- Dark, cyberpunk-lite aesthetic with warm pet-friendly vibe
- Production-grade: accessible, performant, responsive
- Integrated with real payment APIs (PayPal + Stripe sandbox)

The result must NOT look like:
- A generic e-commerce template with pet images
- A heavy cyberpunk site that's hard to read
- A pure frontend demo (must have real Edge/Cloud Functions)