[V0_FILE]css:file="app/globals.css" isFixed="true" isQuickEdit="true" @import "tailwindcss"; @import "tw-animate-css"; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(1 0 0); --foreground: oklch(0.145 0 0); --card: oklch(1 0 0); --card-foreground: oklch(0.145 0 0); --popover: oklch(1 0 0); --popover-foreground: oklch(0.145 0 0); --primary: oklch(0.205 0 0); --primary-foreground: oklch(0.985 0 0); --secondary: oklch(0.97 0 0); --secondary-foreground: oklch(0.205 0 0); --muted: oklch(0.97 0 0); --muted-foreground: oklch(0.556 0 0); --accent: oklch(0.97 0 0); --accent-foreground: oklch(0.205 0 0); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.577 0.245 27.325); --border: oklch(0.922 0 0); --input: oklch(0.922 0 0); --ring: oklch(0.708 0 0); --chart-1: oklch(0.646 0.222 41.116); --chart-2: oklch(0.6 0.118 184.704); --chart-3: oklch(0.398 0.07 227.392); --chart-4: oklch(0.828 0.189 84.429); --chart-5: oklch(0.769 0.188 70.08); --radius: 0.625rem; --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.145 0 0); --foreground: oklch(0.985 0 0); --card: oklch(0.145 0 0); --card-foreground: oklch(0.985 0 0); --popover: oklch(0.145 0 0); --popover-foreground: oklch(0.985 0 0); --primary: oklch(0.985 0 0); --primary-foreground: oklch(0.205 0 0); --secondary: oklch(0.269 0 0); --secondary-foreground: oklch(0.985 0 0); --muted: oklch(0.269 0 0); --muted-foreground: oklch(0.708 0 0); --accent: oklch(0.269 0 0); --accent-foreground: oklch(0.985 0 0); --destructive: oklch(0.396 0.141 25.723); --destructive-foreground: oklch(0.637 0.237 25.331); --border: oklch(0.269 0 0); --input: oklch(0.269 0 0); --ring: oklch(0.439 0 0); --chart-1: oklch(0.488 0.243 264.376); --chart-2: oklch(0.696 0.17 162.48); --chart-3: oklch(0.769 0.188 70.08); --chart-4: oklch(0.627 0.265 303.9); --chart-5: oklch(0.645 0.246 16.439); --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: "Inter", system-ui, -apple-system, sans-serif; --font-mono: "Geist Mono", "Geist Mono Fallback"; /* Color Palette - Firefox inspired with modern neutrals */ --color-firefox-orange: 230 85% 55%; --color-firefox-purple: 265 75% 60%; --color-firefox-blue: 215 85% 55%; --color-background: 0 0% 100%; --color-foreground: 240 10% 10%; --color-card: 0 0% 98%; --color-card-foreground: 240 10% 10%; --color-popover: 0 0% 100%; --color-popover-foreground: 240 10% 10%; --color-primary: 230 85% 55%; --color-primary-foreground: 0 0% 100%; --color-secondary: 240 5% 96%; --color-secondary-foreground: 240 10% 10%; --color-muted: 240 5% 96%; --color-muted-foreground: 240 4% 46%; --color-accent: 265 75% 60%; --color-accent-foreground: 0 0% 100%; --color-destructive: 0 84% 60%; --color-destructive-foreground: 0 0% 100%; --color-border: 240 6% 90%; --color-input: 240 6% 90%; --color-ring: 230 85% 55%; --color-success: 142 76% 36%; --color-success-foreground: 0 0% 100%; --radius: 0.75rem; --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]typescriptreact:file="app/page.tsx" "use client" import { useState } from "react" import { OnboardingHeader } from "@/components/onboarding-header" import { ProgressTracker } from "@/components/progress-tracker" import { OnboardingStep } from "@/components/onboarding-step" import { CompletionCelebration } from "@/components/completion-celebration" const ONBOARDING_STEPS = [ { id: "privacy", title: "Set Your Privacy Level", description: "Choose how Firefox protects you online", icon: "🛡️", estimatedTime: "1 min", }, { id: "theme", title: "Personalize Your Look", description: "Pick a theme that matches your style", icon: "🎨", estimatedTime: "30 sec", }, { id: "extensions", title: "Add Essential Extensions", description: "Enhance your browsing with recommended add-ons", icon: "🧩", estimatedTime: "2 min", }, { id: "sync", title: "Sync Across Devices", description: "Access your Firefox everywhere", icon: "🔄", estimatedTime: "1 min", }, { id: "shortcuts", title: "Set Up Quick Access", description: "Add your favorite sites to the home screen", icon: "⚡", estimatedTime: "1 min", }, ] export default function OnboardingPage() { const [currentStep, setCurrentStep] = useState(0) const [completedSteps, setCompletedSteps] = useState([]) const [skippedSteps, setSkippedSteps] = useState([]) const handleComplete = () => { const stepId = ONBOARDING_STEPS[currentStep].id setCompletedSteps([...completedSteps, stepId]) if (currentStep < ONBOARDING_STEPS.length - 1) { setCurrentStep(currentStep + 1) } } const handleSkip = () => { const stepId = ONBOARDING_STEPS[currentStep].id setSkippedSteps([...skippedSteps, stepId]) if (currentStep < ONBOARDING_STEPS.length - 1) { setCurrentStep(currentStep + 1) } } const handleGoToStep = (index: number) => { setCurrentStep(index) } const isComplete = completedSteps.length + skippedSteps.length === ONBOARDING_STEPS.length if (isComplete) { return } return (

Welcome to Firefox

Let's personalize your browser in just a few minutes. You're in control.

) } [V0_FILE]typescriptreact:file="components/onboarding-header.tsx" import { Button } from "@/components/ui/button" import { X } from "lucide-react" export function OnboardingHeader() { return (

Firefox Setup

First 48 Hours

) } [V0_FILE]typescriptreact:file="components/progress-tracker.tsx" "use client" import { Check, Circle } from "lucide-react" import { cn } from "@/lib/utils" interface Step { id: string title: string description: string icon: string estimatedTime: string } interface ProgressTrackerProps { steps: Step[] currentStep: number completedSteps: string[] skippedSteps: string[] onStepClick: (index: number) => void } export function ProgressTracker({ steps, currentStep, completedSteps, skippedSteps, onStepClick, }: ProgressTrackerProps) { const getStepStatus = (index: number, stepId: string) => { if (completedSteps.includes(stepId)) return "completed" if (skippedSteps.includes(stepId)) return "skipped" if (index === currentStep) return "current" if (index < currentStep) return "completed" return "upcoming" } return (

{/* Progress bar background */}

{/* Progress bar fill */}

{steps.map((step, index) => { const status = getStepStatus(index, step.id) const isClickable = index <= currentStep || completedSteps.includes(step.id) || skippedSteps.includes(step.id) return ( ) })}

) } [V0_FILE]typescriptreact:file="components/onboarding-step.tsx" "use client" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { PrivacyStep } from "@/components/steps/privacy-step" import { ThemeStep } from "@/components/steps/theme-step" import { ExtensionsStep } from "@/components/steps/extensions-step" import { SyncStep } from "@/components/steps/sync-step" import { ShortcutsStep } from "@/components/steps/shortcuts-step" import { ArrowRight, Clock } from "lucide-react" interface Step { id: string title: string description: string icon: string estimatedTime: string } interface OnboardingStepProps { step: Step stepNumber: number totalSteps: number onComplete: () => void onSkip: () => void } export function OnboardingStep({ step, stepNumber, totalSteps, onComplete, onSkip }: OnboardingStepProps) { const renderStepContent = () => { switch (step.id) { case "privacy": return case "theme": return case "extensions": return case "sync": return case "shortcuts": return default: return null } } return (

{step.icon}

{step.title}

{step.description}

{step.estimatedTime}

{renderStepContent()}

Step {stepNumber} of {totalSteps}

) } [V0_FILE]typescriptreact:file="components/steps/privacy-step.tsx" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Check } from "lucide-react" import { cn } from "@/lib/utils" const PRIVACY_LEVELS = [ { id: "standard", name: "Standard", description: "Balanced protection and performance", features: [ "Blocks known trackers in Private Windows", "Blocks third-party tracking cookies", "Blocks cryptominers", ], recommended: false, }, { id: "strict", name: "Strict", description: "Maximum protection (may affect site functionality)", features: [ "Blocks all trackers in all windows", "Blocks all third-party cookies", "Blocks fingerprinters and cryptominers", "Isolates cookies per site", ], recommended: true, }, { id: "custom", name: "Custom", description: "Choose what to block", features: ["Customize tracking protection", "Select specific cookie policies", "Advanced privacy controls"], recommended: false, }, ] export function PrivacyStep() { const [selected, setSelected] = useState("strict") return (

Choose Your Protection Level

Firefox blocks trackers that follow you around the web. Pick the level that works for you.

{PRIVACY_LEVELS.map((level) => ( setSelected(level.id)} > {level.recommended && (

Recommended

)}

{level.name}

{level.description}

{selected === level.id && }

{feature}

))}

Good to know: You can always change your privacy settings later in Firefox preferences.

) } [V0_FILE]typescriptreact:file="components/steps/theme-step.tsx" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Check, Palette } from "lucide-react" import { cn } from "@/lib/utils" const THEMES = [ { id: "light", name: "Light", preview: "linear-gradient(135deg, #ffffff 0%, #f5f5f5 100%)", colors: ["#ffffff", "#f5f5f5", "#e5e5e5"], }, { id: "dark", name: "Dark", preview: "linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%)", colors: ["#1a1a1a", "#0a0a0a", "#2a2a2a"], }, { id: "firefox", name: "Firefox", preview: "linear-gradient(135deg, #ff6b35 0%, #a855f7 100%)", colors: ["#ff6b35", "#a855f7", "#f97316"], }, { id: "ocean", name: "Ocean", preview: "linear-gradient(135deg, #0ea5e9 0%, #06b6d4 100%)", colors: ["#0ea5e9", "#06b6d4", "#0284c7"], }, { id: "forest", name: "Forest", preview: "linear-gradient(135deg, #10b981 0%, #059669 100%)", colors: ["#10b981", "#059669", "#047857"], }, { id: "sunset", name: "Sunset", preview: "linear-gradient(135deg, #f59e0b 0%, #ef4444 100%)", colors: ["#f59e0b", "#ef4444", "#dc2626"], }, ] export function ThemeStep() { const [selected, setSelected] = useState("firefox") return (

Pick Your Theme

Choose a look that matches your style. You can change this anytime.

{THEMES.map((theme) => ( setSelected(theme.id)} >

{theme.name}

{theme.colors.map((color, index) => (

))}

{selected === theme.id && }

))}

Want more themes?

Browse thousands of themes in the Firefox Add-ons store after setup.

) } [V0_FILE]typescriptreact:file="components/steps/extensions-step.tsx" "use client" import { useState } from "react" import { Card } from "@/components/ui/card" import { Button } from "@/components/ui/button" import { Check, Plus, Star } from "lucide-react" import { cn } from "@/lib/utils" const EXTENSIONS = [ { id: "ublock", name: "uBlock Origin", description: "Efficient ad blocker that uses minimal resources", category: "Privacy", users: "10M+", rating: 4.8, recommended: true, }, { id: "bitwarden", name: "Bitwarden", description: "Secure password manager for all your accounts", category: "Security", users: "5M+", rating: 4.7, recommended: true, }, { id: "darkreader", name: "Dark Reader", description: "Dark mode for every website", category: "Appearance", users: "8M+", rating: 4.6, recommended: false, }, { id: "grammarly", name: "Grammarly", description: "Writing assistant for clear communication", category: "Productivity", users: "12M+", rating: 4.5, recommended: false, }, { id: "pocket", name: "Pocket", description: "Save articles and videos to view later", category: "Productivity", users: "6M+", rating: 4.4, recommended: true, }, { id: "clearurls", name: "ClearURLs", description: "Remove tracking elements from URLs", category: "Privacy", users: "2M+", rating: 4.7, recommended: false, }, ] export function ExtensionsStep() { const [selected, setSelected] = useState(["ublock", "bitwarden", "pocket"]) const toggleExtension = (id: string) => { setSelected((prev) => (prev.includes(id) ? prev.filter((item) => item !== id) : [...prev, id])) } return (

Enhance Your Browser

Add extensions to customize your browsing experience. We've pre-selected some popular ones.

{EXTENSIONS.map((extension) => { const isSelected = selected.includes(extension.id) return ( {extension.recommended && (

Recommended

)}

{extension.name}

{extension.description}

{extension.category} {extension.rating} {extension.users} users

) })}

{selected.length} extensions selected. You can add or remove extensions anytime from the Add-ons Manager.

) } [V0_FILE]typescriptreact:file="components/steps/sync-step.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Label } from "@/components/ui/label" import { Smartphone, Tablet, Cloud, Lock } from "lucide-react" export function SyncStep() { const [email, setEmail] = useState("") return (

Sync Across All Your Devices

Access your bookmarks, passwords, and open tabs from anywhere with a Firefox Account.

Email Address setEmail(e.target.value)} />

Your data is encrypted

Only you can access your synced data. Not even Mozilla can see it.

What gets synced?

{[ { icon: Cloud, label: "Bookmarks & History", description: "Access your saved sites everywhere" }, { icon: Lock, label: "Passwords & Logins", description: "Securely sync your credentials" }, { icon: Tablet, label: "Open Tabs", description: "Continue browsing on any device" }, { icon: Smartphone, label: "Extensions & Themes", description: "Keep your customizations" }, ].map((item, index) => (

{item.label}

{item.description}

))}

) } [V0_FILE]typescriptreact:file="components/steps/shortcuts-step.tsx" "use client" import { useState } from "react" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Input } from "@/components/ui/input" import { Plus, X, Globe } from "lucide-react" const SUGGESTED_SITES = [ { name: "Gmail", url: "https://mail.google.com", icon: "📧" }, { name: "YouTube", url: "https://youtube.com", icon: "▶️" }, { name: "GitHub", url: "https://github.com", icon: "💻" }, { name: "Twitter", url: "https://twitter.com", icon: "🐦" }, { name: "Reddit", url: "https://reddit.com", icon: "🤖" }, { name: "Netflix", url: "https://netflix.com", icon: "🎬" }, ] export function ShortcutsStep() { const [shortcuts, setShortcuts] = useState>([ SUGGESTED_SITES[0], SUGGESTED_SITES[1], SUGGESTED_SITES[2], ]) const [customUrl, setCustomUrl] = useState("") const addShortcut = (site: { name: string; url: string; icon: string }) => { if (shortcuts.length < 8 && !shortcuts.find((s) => s.url === site.url)) { setShortcuts([...shortcuts, site]) } } const removeShortcut = (url: string) => { setShortcuts(shortcuts.filter((s) => s.url !== url)) } const addCustomShortcut = () => { if (customUrl && shortcuts.length < 8) { const name = new URL(customUrl).hostname.replace("www.", "") addShortcut({ name, url: customUrl, icon: "🌐" }) setCustomUrl("") } } return (

Add Quick Access Shortcuts

Pin your favorite sites to your new tab page for instant access.

Your Shortcuts ({shortcuts.length}/8)

{shortcuts.map((shortcut) => (

{shortcut.icon} {shortcut.name}

))} {shortcuts.length < 8 && (

)}

Suggested Sites

{SUGGESTED_SITES.filter((site) => !shortcuts.find((s) => s.url === site.url)).map((site) => ( ))}

Add Custom Site

setCustomUrl(e.target.value)} className="pl-10" disabled={shortcuts.length >= 8} />

Tip: You can rearrange, add, or remove shortcuts anytime by clicking the gear icon on your new tab page.

) } [V0_FILE]typescriptreact:file="components/completion-celebration.tsx" import { Button } from "@/components/ui/button" import { Card } from "@/components/ui/card" import { Check, Sparkles, ExternalLink } from "lucide-react" interface CompletionCelebrationProps { completedCount: number totalCount: number } export function CompletionCelebration({ completedCount, totalCount }: CompletionCelebrationProps) { const completionPercentage = Math.round((completedCount / totalCount) * 100) return (

You're All Set!

Firefox is now personalized just for you. You completed {completedCount} out of {totalCount} setup steps.

{completionPercentage}% Complete

What You've Set Up

{[ { title: "Privacy Protection", description: "Blocking trackers across the web" }, { title: "Custom Theme", description: "Your browser, your style" }, { title: "Essential Extensions", description: "Enhanced browsing capabilities" }, { title: "Device Sync", description: "Access everywhere you go" }, { title: "Quick Shortcuts", description: "Instant access to favorites" }, ].map((item, index) => (

{item.title}

{item.description}

))}

Need Help?

Visit Firefox Support or explore our community forums for tips and tricks.

) } [V0_FILE]json:file="package.json" { "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.0", "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": "^0.9.9", "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" } }