[V0_FILE]typescriptreact:file="tailwind.config.js" 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/globals.css" isEdit="true" isQuickEdit="true" isMerged="true" @tailwind base; @tailwind components; @tailwind utilities; @layer base { :root { --background: 0 0% 100%; --foreground: 222.2 84% 4.9%; --card: 0 0% 100%; --card-foreground: 222.2 84% 4.9%; --popover: 0 0% 100%; --popover-foreground: 222.2 84% 4.9%; --primary: 335 95% 65%; --primary-foreground: 210 40% 98%; --secondary: 335 50% 95%; --secondary-foreground: 335 70% 30%; --muted: 335 30% 96.1%; --muted-foreground: 335 30% 46.9%; --accent: 335 50% 96.1%; --accent-foreground: 335 70% 30%; --destructive: 0 84.2% 60.2%; --destructive-foreground: 210 40% 98%; --border: 335 30% 91.4%; --input: 335 30% 91.4%; --ring: 335 95% 65%; --radius: 0.8rem; } .dark { --background: 222.2 84% 4.9%; --foreground: 210 40% 98%; --card: 222.2 84% 4.9%; --card-foreground: 210 40% 98%; --popover: 222.2 84% 4.9%; --popover-foreground: 210 40% 98%; --primary: 335 95% 65%; --primary-foreground: 222.2 47.4% 11.2%; --secondary: 335 30% 17.5%; --secondary-foreground: 210 40% 98%; --muted: 335 30% 17.5%; --muted-foreground: 335 20% 65.1%; --accent: 335 30% 17.5%; --accent-foreground: 210 40% 98%; --destructive: 0 62.8% 30.6%; --destructive-foreground: 210 40% 98%; --border: 335 30% 17.5%; --input: 335 30% 17.5%; --ring: 335 95% 65%; } } @layer base { * { @apply border-border; } body { @apply bg-background text-foreground; } } /* Add custom animations */ @keyframes float { 0% { transform: translateY(0px); } 50% { transform: translateY(-10px); } 100% { transform: translateY(0px); } } .float { animation: float 3s ease-in-out infinite; } @keyframes pulse-glow { 0% { box-shadow: 0 0 5px 0 rgba(236, 72, 153, 0.3); } 50% { box-shadow: 0 0 20px 5px rgba(236, 72, 153, 0.5); } 100% { box-shadow: 0 0 5px 0 rgba(236, 72, 153, 0.3); } } .pulse-glow { animation: pulse-glow 3s ease-in-out infinite; } [V0_FILE]typescriptreact:file="app/components/image-gallery.tsx" isEdit="true" "use client" import Image from "next/image" import { motion } from "framer-motion" // Beautiful greeting images for Women's Day const GREETING_IMAGES = [ { src: "https://images.unsplash.com/photo-1520939817895-060bdaf4fe1b?q=80&w=300&h=300&auto=format&fit=crop", alt: "Букет розовых тюльпанов", description: "С праздником весны!", }, { src: "https://images.unsplash.com/photo-1494972308805-463bc619d34e?q=80&w=300&h=300&auto=format&fit=crop", alt: "Розовые розы", description: "Самой лучшей маме", }, { src: "https://images.unsplash.com/photo-1490349368154-73de9c9bc37c?q=80&w=300&h=300&auto=format&fit=crop", alt: "Весенние цветы", description: "Любим тебя!", }, ] // Decorative images export const DECORATIVE_IMAGES = { topLeft: "https://images.unsplash.com/photo-1518709766631-a6a7f45921c3?q=80&w=200&h=200&auto=format&fit=crop", bottomRight: "https://images.unsplash.com/photo-1526047932273-341f2a7631f9?q=80&w=200&h=200&auto=format&fit=crop", background: "https://images.unsplash.com/photo-1490750967868-88aa4486c946?q=80&w=1200&h=800&auto=format&fit=crop", profile: "https://images.unsplash.com/photo-1556911220-e15b29be8c8f?q=80&w=200&h=200&auto=format&fit=crop", } export default function ImageGallery() { return (

{GREETING_IMAGES.map((image, i) => ( {image.alt}

{image.description}

))}

) } [V0_FILE]typescriptreact:file="app/page.tsx" isEdit="true" "use client" import { useState, useEffect } from "react" import { motion, AnimatePresence } from "framer-motion" import { Heart, Sparkles, Star, Flower } from "lucide-react" import { Button } from "@/components/ui/button" import Image from "next/image" import ImageGallery, { DECORATIVE_IMAGES } from "./components/image-gallery" export default function Home() { const [showGreeting, setShowGreeting] = useState(false) const [sparkles, setSparkles] = useState<{ x: number; y: number; size: number }[]>([]) // Generate random sparkles for background effect useEffect(() => { if (showGreeting) { const newSparkles = Array(20) .fill(0) .map(() => ({ x: Math.random() * 100, y: Math.random() * 100, size: Math.random() * 10 + 5, })) setSparkles(newSparkles) } }, [showGreeting]) return (

{/* Background decorative elements */}

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

{!showGreeting ? (

Особенный сюрприз для Мамы

Нажми на кнопку, чтобы увидеть поздравление

) : ( {/* Sparkles animation */} {sparkles.map((sparkle, i) => ( ))} {/* Animated hearts */} {[...Array(15)].map((_, i) => ( ))} {/* Decorative images */}

{/* Photo gallery */} {/* Main greeting content */}

С 8 Марта, дорогая Мама!

Самой замечательной маме на свете

Спасибо за твою бесконечную любовь, силу и вдохновение. Ты делаешь каждый день ярче своей улыбкой и теплом. Я так благодарна, что ты моя мама.

Пусть этот весенний день принесет тебе столько же радости, сколько ты даришь всем нам. Ты заслуживаешь всего самого прекрасного!

С любовью и нежностью ❤️ )}

) } [V0_FILE]typescriptreact:file="next.config.js" /** @type {import('next').NextConfig} */ const nextConfig = { images: { remotePatterns: [ { protocol: "https", hostname: "images.unsplash.com", port: "", pathname: "/**", }, ], }, } module.exports = nextConfig

About

About