[V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" isMerged="true" import type React from "react" import "./globals.css" import type { Metadata } from "next" import { Inter } from "next/font/google" const inter = Inter({ subsets: ["latin"] }) export const metadata: Metadata = { title: "I'm Sorry - A Special Message", description: "A special apology message with love", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]typescriptreact:file="tailwind.config.js" isEdit="true" isMerged="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{ts,tsx}", "./components/**/*.{ts,tsx}", "./app/**/*.{ts,tsx}", "./src/**/*.{ts,tsx}", "*.{js,ts,jsx,tsx,mdx}", ], theme: { container: { center: true, padding: "2rem", screens: { "2xl": "1400px", }, }, extend: { colors: { border: "hsl(var(--border))", input: "hsl(var(--input))", ring: "hsl(var(--ring))", background: "hsl(var(--background))", foreground: "hsl(var(--foreground))", primary: { DEFAULT: "hsl(var(--primary))", foreground: "hsl(var(--primary-foreground))", }, secondary: { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))", }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))", }, muted: { DEFAULT: "hsl(var(--muted))", foreground: "hsl(var(--muted-foreground))", }, accent: { DEFAULT: "hsl(var(--accent))", foreground: "hsl(var(--accent-foreground))", }, popover: { DEFAULT: "hsl(var(--popover))", foreground: "hsl(var(--popover-foreground))", }, card: { DEFAULT: "hsl(var(--card))", foreground: "hsl(var(--card-foreground))", }, }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, keyframes: { "accordion-down": { from: { height: 0 }, to: { height: "var(--radix-accordion-content-height)" }, }, "accordion-up": { from: { height: "var(--radix-accordion-content-height)" }, to: { height: 0 }, }, }, animation: { "accordion-down": "accordion-down 0.2s ease-out", "accordion-up": "accordion-up 0.2s ease-out", }, }, }, plugins: [require("tailwindcss-animate")], } [V0_FILE]typescriptreact:file="app/success/page.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import { motion } from "framer-motion" import Image from "next/image" import Link from "next/link" import { sendEmail } from "@/app/actions" import { Sparkles } from "lucide-react" export default function SuccessPage() { const [showImage, setShowImage] = useState(false) const [emailSent, setEmailSent] = useState(false) useEffect(() => { // Send the email when the page loads if (!emailSent) { sendEmail().then(() => { setEmailSent(true) }) } // Show the image after a delay const timer = setTimeout(() => { setShowImage(true) }, 2000) return () => clearTimeout(timer) }, [emailSent]) return (

{/* Animated background sparkles */} {[...Array(20)].map((_, i) => ( ))}

Yay!

Thank you for forgiving me! ❤️

{emailSent &&

A special message has been sent!

} {showImage && (

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Heart } from "lucide-react" import Image from "next/image" import { useRouter } from "next/navigation" import { sendEmail } from "@/app/actions" export default function ApologyPage() { const router = useRouter() const [isOpen, setIsOpen] = useState(false) const [showMessage, setShowMessage] = useState(false) const [showForgiveButtons, setShowForgiveButtons] = useState(false) const [noButtonPosition, setNoButtonPosition] = useState({ x: 0, y: 0 }) const [hearts, setHearts] = useState<{ id: number; x: number; y: number }[]>([]) const [emailSent, setEmailSent] = useState(false) useEffect(() => { const interval = setInterval(() => { if (hearts.length < 15) { setHearts((prev) => [ ...prev, { id: Date.now(), x: Math.random() * 100, y: Math.random() * 100, }, ]) } }, 1000) return () => clearInterval(interval) }, [hearts]) useEffect(() => { const timeout = setTimeout(() => { if (hearts.length > 0) { setHearts((prev) => prev.slice(1)) } }, 3000) return () => clearTimeout(timeout) }, [hearts]) const moveNoButton = () => { const x = Math.random() * (window.innerWidth - 100) const y = Math.random() * (window.innerHeight - 50) setNoButtonPosition({ x, y }) } const handleEmailConfirmation = async () => { try { await sendEmail() setEmailSent(true) alert("Email confirmation sent successfully!") } catch (error) { alert("Failed to send email confirmation. Please try again.") } } return (

{/* Floating hearts */} {hearts.map((heart) => ( ))} {/* Heart-shaped card */} !isOpen && setIsOpen(true)} >

Click Me!

I'm Sorry!

I know I messed up by not giving you the hug you deserved. Everyone needs hugs, especially from someone they care about.

{/* Characters Section */}

Hemang

Saloni

{/* Hugging GIF */}

{showMessage && (

I promise to give you all the hugs you deserve from now on. No more missed hugs! You mean the world to me. ❤️

)} {showForgiveButtons && ( No )}

) } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 240 10% 3.9%; --card: 0 0% 100%; --card-foreground: 240 10% 3.9%; --popover: 0 0% 100%; --popover-foreground: 240 10% 3.9%; --primary: 346.8 77.2% 49.8%; --primary-foreground: 355.7 100% 97.3%; --secondary: 240 4.8% 95.9%; --secondary-foreground: 240 5.9% 10%; --muted: 240 4.8% 95.9%; --muted-foreground: 240 3.8% 46.1%; --accent: 240 4.8% 95.9%; --accent-foreground: 240 5.9% 10%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 0 0% 98%; --border: 240 5.9% 90%; --input: 240 5.9% 90%; --ring: 346.8 77.2% 49.8%; --radius: 1rem; } } .heart-card { width: 600px; height: 800px; position: relative; cursor: pointer; transform-style: preserve-3d; perspective: 1000px; } .heart-content { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.5s; } .heart-front, .heart-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; background: white; padding: 2rem; border-radius: 2rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); clip-path: path( "M12,21.35L10.55,20.03C5.4,15.36 2,12.27 2,8.5C2,5.41 4.42,3 7.5,3C9.24,3 10.91,3.81 12,5.08C13.09,3.81 14.76,3 16.5,3C19.58,3 22,5.41 22,8.5C22,12.27 18.6,15.36 13.45,20.03L12,21.35Z" ); } .heart-back { transform: rotateY(180deg); background: white; overflow-y: auto; } .heart-card.open .heart-content { transform: rotateY(180deg); } @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .float { animation: float 3s ease-in-out infinite; } [V0_FILE]typescriptreact:file="app/actions.ts" isEdit="true" "use server" export async function sendEmail() { try { // In a real application, you would use a proper email service // like SendGrid, Mailgun, or AWS SES // For this example, we'll just simulate sending an email console.log("Sending email to salonishrimali@gmail.com") console.log( "Email content: I forgive you thiis is a conformation and I promise to let you touch my kitty pom pom and ass", ) // Simulate a delay for the email sending await new Promise((resolve) => setTimeout(resolve, 1000)) return { success: true } } catch (error) { console.error("Error sending email:", error) return { success: false, error } } }