[V0_FILE]css:file="app/globals.css" isMerged="true" @import 'tailwindcss'; @import 'tw-animate-css'; @custom-variant dark (&:is(.dark *)); :root { --background: oklch(0.97 0.01 85); --foreground: oklch(0.25 0.02 75); --card: oklch(0.99 0.005 85); --card-foreground: oklch(0.25 0.02 75); --popover: oklch(0.99 0.005 85); --popover-foreground: oklch(0.25 0.02 75); --primary: oklch(0.45 0.08 195); --primary-foreground: oklch(0.99 0.005 85); --secondary: oklch(0.65 0.12 45); --secondary-foreground: oklch(0.99 0.005 85); --muted: oklch(0.92 0.01 85); --muted-foreground: oklch(0.50 0.02 75); --accent: oklch(0.65 0.12 45); --accent-foreground: oklch(0.99 0.005 85); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.99 0.005 85); --border: oklch(0.88 0.01 85); --input: oklch(0.88 0.01 85); --ring: oklch(0.45 0.08 195); --chart-1: oklch(0.45 0.08 195); --chart-2: oklch(0.65 0.12 45); --chart-3: oklch(0.55 0.10 120); --chart-4: oklch(0.70 0.08 85); --chart-5: oklch(0.60 0.10 160); --radius: 0.5rem; --sidebar: oklch(0.99 0.005 85); --sidebar-foreground: oklch(0.25 0.02 75); --sidebar-primary: oklch(0.45 0.08 195); --sidebar-primary-foreground: oklch(0.99 0.005 85); --sidebar-accent: oklch(0.92 0.01 85); --sidebar-accent-foreground: oklch(0.25 0.02 75); --sidebar-border: oklch(0.88 0.01 85); --sidebar-ring: oklch(0.45 0.08 195); } .dark { --background: oklch(0.20 0.02 75); --foreground: oklch(0.97 0.01 85); --card: oklch(0.23 0.02 75); --card-foreground: oklch(0.97 0.01 85); --popover: oklch(0.23 0.02 75); --popover-foreground: oklch(0.97 0.01 85); --primary: oklch(0.55 0.10 195); --primary-foreground: oklch(0.97 0.01 85); --secondary: oklch(0.70 0.12 45); --secondary-foreground: oklch(0.20 0.02 75); --muted: oklch(0.30 0.02 75); --muted-foreground: oklch(0.65 0.02 75); --accent: oklch(0.70 0.12 45); --accent-foreground: oklch(0.20 0.02 75); --destructive: oklch(0.577 0.245 27.325); --destructive-foreground: oklch(0.97 0.01 85); --border: oklch(0.30 0.02 75); --input: oklch(0.30 0.02 75); --ring: oklch(0.55 0.10 195); --chart-1: oklch(0.55 0.10 195); --chart-2: oklch(0.70 0.12 45); --chart-3: oklch(0.60 0.10 120); --chart-4: oklch(0.75 0.08 85); --chart-5: oklch(0.65 0.10 160); --sidebar: oklch(0.23 0.02 75); --sidebar-foreground: oklch(0.97 0.01 85); --sidebar-primary: oklch(0.55 0.10 195); --sidebar-primary-foreground: oklch(0.97 0.01 85); --sidebar-accent: oklch(0.30 0.02 75); --sidebar-accent-foreground: oklch(0.97 0.01 85); --sidebar-border: oklch(0.30 0.02 75); --sidebar-ring: oklch(0.55 0.10 195); } @theme inline { --font-sans: 'Geist', 'Geist Fallback'; --font-serif: 'Playfair Display', 'Georgia', 'serif'; --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]typescriptreact:file="app/layout.tsx" isMerged="true" import type { Metadata } from 'next' import { Geist, Geist_Mono, Playfair_Display } from 'next/font/google' import { Analytics } from '@vercel/analytics/next' import './globals.css' const _geist = Geist({ subsets: ["latin"] }); const _geistMono = Geist_Mono({ subsets: ["latin"] }); const _playfairDisplay = Playfair_Display({ subsets: ["latin"] }); export const metadata: Metadata = { title: 'Transform Your Life - New Book by Dr. Sarah Mitchell', description: 'Discover the groundbreaking self-help book that has changed millions of lives. Pre-order now and start your transformation journey.', 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]jpg:file="public/elegant-self-help-book-cover-with-minimalist-desig.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/elegant-self-help-book-cover-with-minimalist-desig-NIm2HkkGbieLIIi6KgzucztXHnGKfW.jpg" isMerged="true" [V0_FILE]jpg:file="public/professional-portrait-of-female-author-in-natural-.jpg" url="https://hebbkx1anhila5yf.public.blob.vercel-storage.com/attachments/gen-images/public/professional-portrait-of-female-author-in-natural--HGl9z36Ltj2W2xEiXPOisVhoGstkDu.jpg" isMerged="true" [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.3", "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" } } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" isQuickEdit="true" isMerged="true" import { Button } from "@/components/ui/button" import { Card, CardContent } from "@/components/ui/card" import { Badge } from "@/components/ui/badge" import { Separator } from "@/components/ui/separator" import { BookOpen, Heart, Sparkles, Star, Users, Award } from 'lucide-react' import { InteractiveBook } from "@/components/interactive-book" export default function BookLandingPage() { return (

{/* Header */}

Dr. Sarah Mitchell

{/* Hero Section */}

New York Times Bestseller

The Path to Your Best Self

A transformative guide to unlocking your potential, overcoming obstacles, and creating the life you've always dreamed of.

{[...Array(5)].map((_, i) => ( ))}

4.9/5 from 12,000+ readers

500K+

Pre-orders

{/* About the Book */}

A Revolutionary Approach to Personal Growth

Drawing from 20 years of research and real-world experience, this book offers practical strategies that actually work.

Build Resilience

Learn proven techniques to bounce back from setbacks and develop unshakeable mental strength.

Find Your Purpose

Discover your unique gifts and align your daily actions with your deepest values and aspirations.

Transform Relationships

Master the art of authentic connection and build meaningful relationships that enrich your life.

{/* Author Section */}

Meet the Author

Dr. Sarah Mitchell

A renowned psychologist, speaker, and bestselling author with over two decades of experience helping people transform their lives.

Dr. Mitchell has worked with thousands of clients, from Fortune 500 executives to everyday individuals seeking positive change. Her evidence-based approach combines cutting-edge psychology with timeless wisdom, making personal growth accessible to everyone.

PhD in Clinical Psychology

5 Bestselling Books

2M+ Lives Changed

{/* Testimonials */}

What Readers Are Saying

Join thousands who have already transformed their lives

{[...Array(5)].map((_, i) => ( ))}

"This book changed my life. Dr. Mitchell's insights are profound yet practical. I've recommended it to everyone I know."

Jennifer Adams

Entrepreneur

{[...Array(5)].map((_, i) => ( ))}

"Finally, a self-help book that delivers on its promises. The exercises are transformative and the writing is beautiful."

Michael Chen

Teacher

{[...Array(5)].map((_, i) => ( ))}

"Dr. Mitchell has a gift for making complex psychology accessible. This book is a masterpiece of personal development."

Emily Rodriguez

Marketing Director

{/* CTA Section */}

Start Your Transformation Today

Pre-order now and receive exclusive bonus materials including guided meditations, worksheets, and access to our private community.

Available in hardcover, paperback, and digital formats • Ships March 2025

{/* Footer */}

) } [V0_FILE]typescriptreact:file="components/interactive-book.tsx" isEdit="true" isQuickEdit="true" "use client" import { useRef, useState } from "react" interface InteractiveBookProps { src: string alt: string } export function InteractiveBook({ src, alt }: InteractiveBookProps) { const ref = useRef(null) const [rotation, setRotation] = useState({ x: 0, y: 0 }) const [isHovering, setIsHovering] = useState(false) const handleMouseMove = (e: React.MouseEvent) => { if (!ref.current) return const rect = ref.current.getBoundingClientRect() const x = e.clientX - rect.left const y = e.clientY - rect.top // Calculate percentage from center (-1 to 1) const xPct = (x / rect.width - 0.5) * 2 const yPct = (y / rect.height - 0.5) * 2 // Max rotation in degrees const maxRotation = 15 setRotation({ x: -yPct * maxRotation, // Invert Y for natural tilt y: xPct * maxRotation, }) } const handleMouseLeave = () => { setIsHovering(false) setRotation({ x: 0, y: 0 }) } const handleMouseEnter = () => { setIsHovering(true) } return (

{/* Shine effect */}

) }

About

Tags

Share

About

Tags

Share

More from rudypagnel

More Templates Like This

About

Tags

Share

About

Tags

Share

More from rudypagnel

More Templates Like This