[V0_FILE]typescriptreact:file="app/components/BirthdayCardContent.tsx" isMerged="true" "use client" import { useState, useEffect } from "react" import Confetti from "react-confetti" import { Cake, Heart } from "lucide-react" export default function BirthdayCardContent() { const [windowSize, setWindowSize] = useState({ width: 0, height: 0 }) useEffect(() => { const handleResize = () => { setWindowSize({ width: window.innerWidth, height: window.innerHeight }) } handleResize() window.addEventListener("resize", handleResize) return () => window.removeEventListener("resize", handleResize) }, []) return ( <>

Happy Birthday Mom!

Wishing you a day filled with love, laughter, and all the joy you deserve!

Thank you for always being there for me. You're the best mom in the world!

Love you to the moon and back! ❤️

) } [V0_FILE]typescriptreact:file="page.tsx" isEdit="true" isMerged="true" export default function BirthdayCard() { return null } [V0_FILE]javascript:file="empty.js" isMerged="true" // This file is intentionally left empty [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { Cake, Heart, Moon, Sun } from "lucide-react" export default function BirthdayCard() { const [darkMode, setDarkMode] = useState(false) useEffect(() => { if (darkMode) { document.documentElement.classList.add("dark") } else { document.documentElement.classList.remove("dark") } }, [darkMode]) const toggleDarkMode = () => { setDarkMode(!darkMode) } return (

Happy Birthday Mom!

Through misunderstandings and the test of time,
Our bond remains, forever sublime.
Your love, a constant, unwavering light,
Guiding me through both day and night.

In moments of doubt, when shadows loom,
Your wisdom dispels all traces of gloom.
For every misstep, every word unsaid,
Your forgiveness and grace have always led.

Mom, your love is a treasure beyond measure,
A gift I'll cherish forever and ever.
Through all of life's joys and its strife,
I'm grateful you're the anchor in my life.

Thank you for always being there for me. You're the best mom in the world!

Love you to the moon and back! ❤️

From Your Son

) } [V0_FILE]typescriptreact:file="app/layout.tsx" isEdit="true" import "./globals.css" import { Inter, Dancing_Script } from "next/font/google" import type React from "react" const inter = Inter({ subsets: ["latin"] }) const dancingScript = Dancing_Script({ subsets: ["latin"], variable: "--font-dancing-script" }) export const metadata = { title: "Happy Birthday Mom!", description: "A special birthday card for the best mom in the world.", } export default function RootLayout({ children, }: { children: React.ReactNode }) { return ( {children} ) } [V0_FILE]css:file="app/globals.css" isEdit="true" @tailwind base; @tailwind components; @tailwind utilities; :root { --lavender: 230, 230, 250; --hot-pink: 255, 105, 180; --royal-purple: 120, 81, 169; --dark-lavender: 103, 58, 183; --dark-hot-pink: 199, 21, 133; --dark-royal-purple: 75, 0, 130; } .dark { --foreground-rgb: 255, 255, 255; --background-start-rgb: 0, 0, 0; --background-end-rgb: 0, 0, 0; } body { color: rgb(var(--foreground-rgb)); background: linear-gradient(to bottom, transparent, rgb(var(--background-end-rgb))) rgb(var(--background-start-rgb)); } .font-fancy { font-family: var(--font-dancing-script); } [V0_FILE]javascript:file="tailwind.config.js" isFixed="true" isQuickEdit="true" /** @type {import('tailwindcss').Config} */ module.exports = { darkMode: ["class"], content: [ "./pages/**/*.{js,ts,jsx,tsx,mdx}", "./components/**/*.{js,ts,jsx,tsx,mdx}", "./app/**/*.{js,ts,jsx,tsx,mdx}", "app/**/*.{ts,tsx}", "components/**/*.{ts,tsx}", ], theme: { extend: { backgroundImage: { "gradient-radial": "radial-gradient(var(--tw-gradient-stops))", "gradient-conic": "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))", }, colors: { lavender: "rgb(var(--lavender))", "hot-pink": "rgb(var(--hot-pink))", "royal-purple": "rgb(var(--royal-purple))", "dark-lavender": "rgb(var(--dark-lavender))", "dark-hot-pink": "rgb(var(--dark-hot-pink))", "dark-royal-purple": "rgb(var(--dark-royal-purple))", "light-hot-pink": "#FF69B4", "light-royal-purple": "#9370DB", 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))", }, }, fontFamily: { fancy: ["var(--font-dancing-script)", "cursive"], }, borderRadius: { lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", }, }, }, plugins: [require("tailwindcss-animate")], }

About

Tags

Share

About

Tags

Share

More Templates Like This