Spaces:

karabinosh
/

site-sova

Running

App Files Files Community

karabinosh commited on May 1

Commit

8049594

verified ·

1 Parent(s): c68b1a0

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +1063 -19
prompts.txt +3 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Site Sova
-emoji: ⚡
-colorFrom: pink
-colorTo: blue
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: site-sova
+emoji: 🐳
+colorFrom: gray
+colorTo: yellow
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,1063 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SOVA Event Agency | Premium Event Planning in Fort Mill</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&family=Raleway:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        :root {
+            --primary: #4a1d96;
+            --secondary: #d1a054;
+            --accent: #86efac;
+            --light: #f8fafc;
+        }
+        body {
+            font-family: 'Raleway', sans-serif;
+            scroll-behavior: smooth;
+            background-color: var(--light);
+        }
+        h1, h2, h3, h4 {
+            font-family: 'Montserrat', sans-serif;
+        }
+        .hero-gradient {
+            background: linear-gradient(135deg, var(--primary) 0%, #7e22ce 100%);
+        }
+        .service-card {
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+            perspective: 1000px;
+        }
+        .service-card:hover {
+            transform: translateY(-10px) rotateX(5deg);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+        }
+        .portfolio-item {
+            transition: all 0.5s ease;
+            overflow: hidden;
+        }
+        .portfolio-item:hover {
+            transform: scale(1.03);
+            z-index: 10;
+        }
+        .portfolio-item img {
+            transition: transform 0.5s ease;
+        }
+        .portfolio-item:hover img {
+            transform: scale(1.1);
+        }
+        .floating-whatsapp {
+            animation: float 3s ease-in-out infinite;
+        }
+        @keyframes float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .parallax {
+            background-attachment: fixed;
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: cover;
+        }
+        .testimonial-card {
+            transition: all 0.3s ease;
+        }
+        .testimonial-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+        }
+        .nav-link {
+            position: relative;
+        }
+        .nav-link:after {
+            content: '';
+            position: absolute;
+            width: 0;
+            height: 2px;
+            bottom: -2px;
+            left: 0;
+            background-color: var(--accent);
+            transition: width 0.3s ease;
+        }
+        .nav-link:hover:after {
+            width: 100%;
+        }
+        .input-field:focus {
+            outline: none;
+            box-shadow: 0 0 0 2px var(--accent);
+        }
+        .btn-primary {
+            background-color: var(--primary);
+            transition: all 0.3s ease;
+        }
+        .btn-primary:hover {
+            background-color: #5b21b6;
+            transform: translateY(-2px);
+        }
+        .btn-secondary {
+            background-color: var(--secondary);
+            transition: all 0.3s ease;
+        }
+        .btn-secondary:hover {
+            background-color: #b78a3a;
+            transform: translateY(-2px);
+        }
+        .btn-accent {
+            background-color: var(--accent);
+            color: #1e293b;
+            transition: all 0.3s ease;
+        }
+        .btn-accent:hover {
+            background-color: #4ade80;
+            transform: translateY(-2px);
+        }
+        .fade-in {
+            animation: fadeIn 1s ease-in;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(20px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .slide-in-left {
+            animation: slideInLeft 1s ease-out;
+        }
+        @keyframes slideInLeft {
+            from { opacity: 0; transform: translateX(-50px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        .slide-in-right {
+            animation: slideInRight 1s ease-out;
+        }
+        @keyframes slideInRight {
+            from { opacity: 0; transform: translateX(50px); }
+            to { opacity: 1; transform: translateX(0); }
+        }
+        /* Hero Slider */
+        .slider-container {
+            position: relative;
+            height: 100vh;
+            overflow: hidden;
+        }
+        .slider-slide {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            opacity: 0;
+            transition: opacity 1s ease-in-out;
+            background-size: cover;
+            background-position: center;
+        }
+        .slider-slide.active {
+            opacity: 1;
+        }
+        /* FAQ Accordion */
+        .accordion-item {
+            border-bottom: 1px solid #e2e8f0;
+        }
+        .accordion-header {
+            cursor: pointer;
+            padding: 1rem 0;
+        }
+        .accordion-content {
+            max-height: 0;
+            overflow: hidden;
+            transition: max-height 0.3s ease-out;
+        }
+        .accordion-content.open {
+            max-height: 500px;
+        }
+        /* Quiz Styling */
+        .quiz-container {
+            background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%);
+            border-radius: 1rem;
+        }
+        .quiz-question {
+            display: none;
+        }
+        .quiz-question.active {
+            display: block;
+            animation: fadeIn 0.5s ease-in;
+        }
+        .quiz-option {
+            transition: all 0.2s ease;
+        }
+        .quiz-option:hover {
+            background-color: #e2e8f0;
+        }
+        .quiz-option.selected {
+            background-color: var(--accent);
+            color: #1e293b;
+        }
+    </style>
+</head>
+<body class="bg-gray-50">
+    <!-- WhatsApp Floating Button -->
+    <a href="https://wa.me/+13474162055?text=Hello! I'd like to learn more about event planning with SOVA Event Agency."
+       class="fixed bottom-8 right-8 bg-green-500 text-white w-16 h-16 rounded-full flex items-center justify-center text-2xl shadow-xl floating-whatsapp z-50"
+       target="_blank">
+        <i class="fab fa-whatsapp"></i>
+    </a>
+    <!-- Navigation -->
+    <nav class="bg-white shadow-lg fixed w-full z-40">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="flex justify-between h-20 items-center">
+                <div class="flex items-center">
+                    <div class="flex-shrink-0">
+                        <a href="#" class="flex items-center">
+                            <div class="h-10 w-10 rounded-full bg-purple-900 flex items-center justify-center text-white font-bold text-xl">
+                                <i class="fas fa-owl"></i>
+                            </div>
+                            <span class="ml-3 text-xl font-bold text-gray-900">SOVA EVENT AGENCY</span>
+                        </a>
+                    </div>
+                </div>
+                <div class="hidden md:block">
+                    <div class="ml-10 flex items-center space-x-8">
+                        <a href="#home" class="nav-link text-gray-900 hover:text-purple-900 px-3 py-2 text-sm font-medium">Home</a>
+                        <a href="#about" class="nav-link text-gray-900 hover:text-purple-900 px-3 py-2 text-sm font-medium">About</a>
+                        <a href="#services" class="nav-link text-gray-900 hover:text-purple-900 px-3 py-2 text-sm font-medium">Services</a>
+                        <a href="#portfolio" class="nav-link text-gray-900 hover:text-purple-900 px-3 py-2 text-sm font-medium">Portfolio</a>
+                        <a href="#testimonials" class="nav-link text-gray-900 hover:text-purple-900 px-3 py-2 text-sm font-medium">Testimonials</a>
+                        <a href="#contact" class="nav-link text-gray-900 hover:text-purple-900 px-3 py-2 text-sm font-medium">Contact</a>
+                        <a href="tel:+13474162055" class="bg-purple-900 text-white px-4 py-2 rounded-lg font-medium hover:bg-purple-700 transition duration-300">
+                            <i class="fas fa-phone-alt mr-2"></i>Call Us
+                        </a>
+                    </div>
+                </div>
+                <div class="md:hidden">
+                    <button id="mobile-menu-button" class="p-2 rounded-md text-gray-700 hover:text-purple-900 hover:bg-gray-100 focus:outline-none">
+                        <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
+                        </svg>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- Mobile Menu -->
+    <div id="mobile-menu" class="hidden md:hidden bg-white shadow-lg fixed w-full z-30 mt-20">
+        <div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
+            <a href="#home" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-900 hover:bg-gray-50">Home</a>
+            <a href="#about" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-900 hover:bg-gray-50">About</a>
+            <a href="#services" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-900 hover:bg-gray-50">Services</a>
+            <a href="#portfolio" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-900 hover:bg-gray-50">Portfolio</a>
+            <a href="#testimonials" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-900 hover:bg-gray-50">Testimonials</a>
+            <a href="#contact" class="block px-3 py-2 text-base font-medium text-gray-900 hover:text-purple-900 hover:bg-gray-50">Contact</a>
+            <a href="tel:+13474162055" class="block px-3 py-2 text-base font-medium text-purple-900 hover:bg-gray-50">
+                <i class="fas fa-phone-alt mr-2"></i>Call Us
+            </a>
+        </div>
+    </div>
+    <!-- Hero Section -->
+    <section id="home" class="slider-container relative">
+        <!-- Slide 1 -->
+        <div class="slider-slide active" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
+            <div class="absolute inset-0 flex items-center justify-center text-center px-4">
+                <div class="max-w-4xl mx-auto text-white fade-in">
+                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">SOVA Event Agency – <span class="text-green-300">Your Celebration, Our Passion!</span></h1>
+                    <p class="text-xl md:text-2xl mb-8 opacity-90">Crafting unforgettable experiences for you and your guests.</p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
+                        <a href="#contact" class="bg-white text-purple-900 hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">Contact Us</a>
+                        <a href="https://wa.me/+13474162055?text=Hello! I'd like to learn more about event planning with SOVA Event Agency."
+                           class="border-2 border-white text-white hover:bg-white hover:text-purple-900 px-8 py-3 rounded-lg font-semibold text-center transition duration-300"
+                           target="_blank">
+                            <i class="fab fa-whatsapp mr-2"></i>WhatsApp
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Slide 2 -->
+        <div class="slider-slide" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
+            <div class="absolute inset-0 flex items-center justify-center text-center px-4">
+                <div class="max-w-4xl mx-auto text-white">
+                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">Your Dreams, <span class="text-yellow-300">Our Reality!</span></h1>
+                    <p class="text-xl md:text-2xl mb-8 opacity-90">From intimate gatherings to grand celebrations, we make every moment special.</p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
+                        <a href="#services" class="bg-white text-purple-900 hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">Our Services</a>
+                        <a href="#portfolio" class="border-2 border-white text-white hover:bg-white hover:text-purple-900 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">View Portfolio</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Slide 3 -->
+        <div class="slider-slide" style="background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80');">
+            <div class="absolute inset-0 flex items-center justify-center text-center px-4">
+                <div class="max-w-4xl mx-auto text-white">
+                    <h1 class="text-4xl md:text-5xl lg:text-6xl font-bold leading-tight mb-6">With SOVA, <span class="text-green-300">Every Moment is Extraordinary</span></h1>
+                    <p class="text-xl md:text-2xl mb-8 opacity-90">Professional event planning with a personal touch.</p>
+                    <div class="flex flex-col sm:flex-row space-y-4 sm:space-y-0 sm:space-x-4 justify-center">
+                        <a href="#testimonials" class="bg-white text-purple-900 hover:bg-gray-100 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">Client Stories</a>
+                        <a href="#about" class="border-2 border-white text-white hover:bg-white hover:text-purple-900 px-8 py-3 rounded-lg font-semibold text-center transition duration-300">About Us</a>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Slider Controls -->
+        <button id="prev-slide" class="absolute left-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-70 transition duration-300 z-10">
+            <i class="fas fa-chevron-left"></i>
+        </button>
+        <button id="next-slide" class="absolute right-4 top-1/2 transform -translate-y-1/2 bg-black bg-opacity-50 text-white p-2 rounded-full hover:bg-opacity-70 transition duration-300 z-10">
+            <i class="fas fa-chevron-right"></i>
+        </button>
+        <!-- Slider Dots -->
+        <div class="absolute bottom-8 left-0 right-0 flex justify-center space-x-2 z-10">
+            <button class="slider-dot w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-70 transition duration-300" data-index="0"></button>
+            <button class="slider-dot w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-70 transition duration-300" data-index="1"></button>
+            <button class="slider-dot w-3 h-3 rounded-full bg-white bg-opacity-50 hover:bg-opacity-70 transition duration-300" data-index="2"></button>
+        </div>
+    </section>
+    <!-- About Us Section -->
+    <section id="about" class="py-20 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4 slide-in-left">Who We Are</h2>
+                <div class="w-20 h-1 bg-purple-900 mx-auto mb-6"></div>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto slide-in-right">We're a team of dreamers and professionals, turning your ideas into unforgettable events.</p>
+            </div>
+            <div class="flex flex-col lg:flex-row items-center gap-12">
+                <div class="lg:w-1/2">
+                    <div class="grid grid-cols-2 gap-4">
+                        <div class="relative overflow-hidden rounded-lg shadow-lg h-64">
+                            <img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                                 alt="SOVA Team"
+                                 class="w-full h-full object-cover transition duration-500 hover:scale-110">
+                            <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                            <div class="absolute bottom-0 left-0 p-4 text-white">
+                                <h3 class="text-xl font-semibold">Our Creative Team</h3>
+                            </div>
+                        </div>
+                        <div class="relative overflow-hidden rounded-lg shadow-lg h-64">
+                            <img src="https://images.unsplash.com/photo-1530103862676-de8c9debad1d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                                 alt="Event Setup"
+                                 class="w-full h-full object-cover transition duration-500 hover:scale-110">
+                            <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                            <div class="absolute bottom-0 left-0 p-4 text-white">
+                                <h3 class="text-xl font-semibold">Meticulous Setup</h3>
+                            </div>
+                        </div>
+                        <div class="relative overflow-hidden rounded-lg shadow-lg h-64">
+                            <img src="https://images.unsplash.com/photo-1469371670807-013ccf25f16a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                                 alt="Happy Guests"
+                                 class="w-full h-full object-cover transition duration-500 hover:scale-110">
+                            <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                            <div class="absolute bottom-0 left-0 p-4 text-white">
+                                <h3 class="text-xl font-semibold">Happy Guests</h3>
+                            </div>
+                        </div>
+                        <div class="relative overflow-hidden rounded-lg shadow-lg h-64">
+                            <img src="https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                                 alt="Event Details"
+                                 class="w-full h-full object-cover transition duration-500 hover:scale-110">
+                            <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                            <div class="absolute bottom-0 left-0 p-4 text-white">
+                                <h3 class="text-xl font-semibold">Attention to Detail</h3>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+                <div class="lg:w-1/2 mt-8 lg:mt-0">
+                    <div class="bg-gray-50 p-8 rounded-xl shadow-sm">
+                        <h3 class="text-2xl font-bold text-gray-900 mb-4">Our Mission</h3>
+                        <p class="text-gray-600 mb-6">Creating memorable emotions for every occasion. At SOVA Event Agency, we believe that every celebration should be as unique as the people we're celebrating.</p>
+                        <div class="mb-6">
+                            <div class="flex items-start mb-4">
+                                <div class="flex-shrink-0 bg-purple-100 rounded-full p-2 mr-4">
+                                    <i class="fas fa-lightbulb text-purple-900"></i>
+                                </div>
+                                <div>
+                                    <h4 class="text-lg font-semibold text-gray-900">Creativity</h4>
+                                    <p class="text-gray-600">Innovative concepts tailored to your vision</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start mb-4">
+                                <div class="flex-shrink-0 bg-purple-100 rounded-full p-2 mr-4">
+                                    <i class="fas fa-star text-purple-900"></i>
+                                </div>
+                                <div>
+                                    <h4 class="text-lg font-semibold text-gray-900">Excellence</h4>
+                                    <p class="text-gray-600">Uncompromising quality in every detail</p>
+                                </div>
+                            </div>
+                            <div class="flex items-start">
+                                <div class="flex-shrink-0 bg-purple-100 rounded-full p-2 mr-4">
+                                    <i class="fas fa-heart text-purple-900"></i>
+                                </div>
+                                <div>
+                                    <h4 class="text-lg font-semibold text-gray-900">Passion</h4>
+                                    <p class="text-gray-600">We love what we do and it shows</p>
+                                </div>
+                            </div>
+                        </div>
+                        <a href="#services" class="inline-block bg-purple-900 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-800 transition duration-300">
+                            Explore Our Services
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Services Section -->
+    <section id="services" class="py-20 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">What We Offer</h2>
+                <div class="w-20 h-1 bg-purple-900 mx-auto mb-6"></div>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto">Comprehensive event services tailored to your unique needs</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Wedding Services -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
+                    <div class="relative overflow-hidden h-48">
+                        <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Wedding Planning"
+                             class="w-full h-full object-cover transition duration-500 hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50"></div>
+                        <div class="absolute top-4 right-4 bg-purple-900 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            <i class="fas fa-ring mr-1"></i> Weddings
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-2">Wedding Planning</h3>
+                        <p class="text-gray-600 mb-4">From romantic ceremonies to grand receptions, we'll make your special day unforgettable.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-purple-100 text-purple-900 text-xs px-3 py-1 rounded-full">Full Planning</span>
+                            <span class="bg-purple-100 text-purple-900 text-xs px-3 py-1 rounded-full">Day Coordination</span>
+                            <span class="bg-purple-100 text-purple-900 text-xs px-3 py-1 rounded-full">Custom Design</span>
+                        </div>
+                        <a href="#contact" class="inline-block text-purple-900 font-medium hover:text-purple-700 transition duration-300">
+                            Learn More <i class="fas fa-arrow-right ml-1"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Birthday Services -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
+                    <div class="relative overflow-hidden h-48">
+                        <img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Birthday Parties"
+                             class="w-full h-full object-cover transition duration-500 hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50"></div>
+                        <div class="absolute top-4 right-4 bg-yellow-600 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            <i class="fas fa-birthday-cake mr-1"></i> Birthdays
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-2">Birthday Celebrations</h3>
+                        <p class="text-gray-600 mb-4">Whether it's a child's first birthday or a milestone celebration, we create magical moments.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-yellow-100 text-yellow-900 text-xs px-3 py-1 rounded-full">Themed Parties</span>
+                            <span class="bg-yellow-100 text-yellow-900 text-xs px-3 py-1 rounded-full">Entertainment</span>
+                            <span class="bg-yellow-100 text-yellow-900 text-xs px-3 py-1 rounded-full">Custom Cakes</span>
+                        </div>
+                        <a href="#contact" class="inline-block text-purple-900 font-medium hover:text-purple-700 transition duration-300">
+                            Learn More <i class="fas fa-arrow-right ml-1"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Corporate Events -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
+                    <div class="relative overflow-hidden h-48">
+                        <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Corporate Events"
+                             class="w-full h-full object-cover transition duration-500 hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50"></div>
+                        <div class="absolute top-4 right-4 bg-blue-600 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            <i class="fas fa-briefcase mr-1"></i> Corporate
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-2">Corporate Events</h3>
+                        <p class="text-gray-600 mb-4">Impress clients and reward employees with professionally executed corporate gatherings.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-blue-100 text-blue-900 text-xs px-3 py-1 rounded-full">Conferences</span>
+                            <span class="bg-blue-100 text-blue-900 text-xs px-3 py-1 rounded-full">Product Launches</span>
+                            <span class="bg-blue-100 text-blue-900 text-xs px-3 py-1 rounded-full">Holiday Parties</span>
+                        </div>
+                        <a href="#contact" class="inline-block text-purple-900 font-medium hover:text-purple-700 transition duration-300">
+                            Learn More <i class="fas fa-arrow-right ml-1"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Team Building -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
+                    <div class="relative overflow-hidden h-48">
+                        <img src="https://images.unsplash.com/photo-1542621334-a254cf47733d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Team Building"
+                             class="w-full h-full object-cover transition duration-500 hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50"></div>
+                        <div class="absolute top-4 right-4 bg-green-600 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            <i class="fas fa-users mr-1"></i> Team Building
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-2">Team Building</h3>
+                        <p class="text-gray-600 mb-4">Engaging activities that strengthen teamwork and boost morale in any organization.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-green-100 text-green-900 text-xs px-3 py-1 rounded-full">Outdoor Challenges</span>
+                            <span class="bg-green-100 text-green-900 text-xs px-3 py-1 rounded-full">Problem Solving</span>
+                            <span class="bg-green-100 text-green-900 text-xs px-3 py-1 rounded-full">Creative Workshops</span>
+                        </div>
+                        <a href="#contact" class="inline-block text-purple-900 font-medium hover:text-purple-700 transition duration-300">
+                            Learn More <i class="fas fa-arrow-right ml-1"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Quests & Games -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
+                    <div class="relative overflow-hidden h-48">
+                        <img src="https://images.unsplash.com/photo-1547153760-18fc86324498?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Quests & Games"
+                             class="w-full h-full object-cover transition duration-500 hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50"></div>
+                        <div class="absolute top-4 right-4 bg-red-600 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            <i class="fas fa-gamepad mr-1"></i> Quests
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-2">Interactive Quests</h3>
+                        <p class="text-gray-600 mb-4">Immersive game experiences that entertain and challenge participants of all ages.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-red-100 text-red-900 text-xs px-3 py-1 rounded-full">Escape Rooms</span>
+                            <span class="bg-red-100 text-red-900 text-xs px-3 py-1 rounded-full">Treasure Hunts</span>
+                            <span class="bg-red-100 text-red-900 text-xs px-3 py-1 rounded-full">Mystery Games</span>
+                        </div>
+                        <a href="#contact" class="inline-block text-purple-900 font-medium hover:text-purple-700 transition duration-300">
+                            Learn More <i class="fas fa-arrow-right ml-1"></i>
+                        </a>
+                    </div>
+                </div>
+                <!-- Show Programs -->
+                <div class="service-card bg-white rounded-xl shadow-md overflow-hidden hover:shadow-xl transition duration-300">
+                    <div class="relative overflow-hidden h-48">
+                        <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Show Programs"
+                             class="w-full h-full object-cover transition duration-500 hover:scale-110">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-50"></div>
+                        <div class="absolute top-4 right-4 bg-indigo-600 text-white px-3 py-1 rounded-full text-sm font-medium">
+                            <i class="fas fa-magic mr-1"></i> Show Programs
+                        </div>
+                    </div>
+                    <div class="p-6">
+                        <h3 class="text-xl font-bold text-gray-900 mb-2">Entertainment Programs</h3>
+                        <p class="text-gray-600 mb-4">Professional performers and customized shows that elevate any event experience.</p>
+                        <div class="flex flex-wrap gap-2 mb-4">
+                            <span class="bg-indigo-100 text-indigo-900 text-xs px-3 py-1 rounded-full">Live Music</span>
+                            <span class="bg-indigo-100 text-indigo-900 text-xs px-3 py-1 rounded-full">DJ Services</span>
+                            <span class="bg-indigo-100 text-indigo-900 text-xs px-3 py-1 rounded-full">Themed Performances</span>
+                        </div>
+                        <a href="#contact" class="inline-block text-purple-900 font-medium hover:text-purple-700 transition duration-300">
+                            Learn More <i class="fas fa-arrow-right ml-1"></i>
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Portfolio Section -->
+    <section id="portfolio" class="py-20 bg-gray-900 text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">Our Work</h2>
+                <div class="w-20 h-1 bg-purple-400 mx-auto mb-6"></div>
+                <p class="text-lg text-gray-300 max-w-3xl mx-auto">A glimpse into the magical events we've created</p>
+            </div>
+            <!-- Portfolio Filters -->
+            <div class="flex flex-wrap justify-center gap-4 mb-12">
+                <button class="portfolio-filter px-4 py-2 rounded-full bg-purple-900 text-white font-medium" data-filter="all">All Events</button>
+                <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-700 text-white font-medium hover:bg-gray-600 transition duration-300" data-filter="wedding">Weddings</button>
+                <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-700 text-white font-medium hover:bg-gray-600 transition duration-300" data-filter="birthday">Birthdays</button>
+                <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-700 text-white font-medium hover:bg-gray-600 transition duration-300" data-filter="corporate">Corporate</button>
+                <button class="portfolio-filter px-4 py-2 rounded-full bg-gray-700 text-white font-medium hover:bg-gray-600 transition duration-300" data-filter="team-building">Team Building</button>
+            </div>
+            <!-- Portfolio Grid -->
+            <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+                <!-- Wedding 1 -->
+                <div class="portfolio-item rounded-xl overflow-hidden shadow-lg" data-category="wedding">
+                    <div class="relative">
+                        <img src="https://images.unsplash.com/photo-1519225421980-715cb0215aed?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Wedding Celebration"
+                             class="w-full h-64 object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                        <div class="absolute bottom-0 left-0 p-6">
+                            <span class="bg-purple-900 text-white text-xs px-3 py-1 rounded-full mb-2 inline-block">Wedding</span>
+                            <h3 class="text-xl font-bold text-white">Sarah & Michael's Fairytale Wedding</h3>
+                            <p class="text-gray-300 text-sm">June 2023 • 150 guests</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Birthday 1 -->
+                <div class="portfolio-item rounded-xl overflow-hidden shadow-lg" data-category="birthday">
+                    <div class="relative">
+                        <img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Birthday Party"
+                             class="w-full h-64 object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                        <div class="absolute bottom-0 left-0 p-6">
+                            <span class="bg-yellow-600 text-white text-xs px-3 py-1 rounded-full mb-2 inline-block">Birthday</span>
+                            <h3 class="text-xl font-bold text-white">Emma's 10th Unicorn Birthday</h3>
+                            <p class="text-gray-300 text-sm">March 2023 • 30 guests</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Corporate 1 -->
+                <div class="portfolio-item rounded-xl overflow-hidden shadow-lg" data-category="corporate">
+                    <div class="relative">
+                        <img src="https://images.unsplash.com/photo-1492684223066-81342ee5ff30?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Corporate Event"
+                             class="w-full h-64 object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                        <div class="absolute bottom-0 left-0 p-6">
+                            <span class="bg-blue-600 text-white text-xs px-3 py-1 rounded-full mb-2 inline-block">Corporate</span>
+                            <h3 class="text-xl font-bold text-white">TechCorp Annual Gala</h3>
+                            <p class="text-gray-300 text-sm">December 2022 • 200 guests</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Team Building 1 -->
+                <div class="portfolio-item rounded-xl overflow-hidden shadow-lg" data-category="team-building">
+                    <div class="relative">
+                        <img src="https://images.unsplash.com/photo-1542621334-a254cf47733d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Team Building"
+                             class="w-full h-64 object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                        <div class="absolute bottom-0 left-0 p-6">
+                            <span class="bg-green-600 text-white text-xs px-3 py-1 rounded-full mb-2 inline-block">Team Building</span>
+                            <h3 class="text-xl font-bold text-white">Marketing Team Retreat</h3>
+                            <p class="text-gray-300 text-sm">August 2023 • 25 participants</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Wedding 2 -->
+                <div class="portfolio-item rounded-xl overflow-hidden shadow-lg" data-category="wedding">
+                    <div class="relative">
+                        <img src="https://images.unsplash.com/photo-1519671482749-fd09be7ccebf?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Wedding Reception"
+                             class="w-full h-64 object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                        <div class="absolute bottom-0 left-0 p-6">
+                            <span class="bg-purple-900 text-white text-xs px-3 py-1 rounded-full mb-2 inline-block">Wedding</span>
+                            <h3 class="text-xl font-bold text-white">Jessica & David's Garden Wedding</h3>
+                            <p class="text-gray-300 text-sm">May 2023 • 120 guests</p>
+                        </div>
+                    </div>
+                </div>
+                <!-- Birthday 2 -->
+                <div class="portfolio-item rounded-xl overflow-hidden shadow-lg" data-category="birthday">
+                    <div class="relative">
+                        <img src="https://images.unsplash.com/photo-1513151233558-d860c5398176?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
+                             alt="Surprise Birthday"
+                             class="w-full h-64 object-cover">
+                        <div class="absolute inset-0 bg-gradient-to-t from-black to-transparent opacity-70"></div>
+                        <div class="absolute bottom-0 left-0 p-6">
+                            <span class="bg-yellow-600 text-white text-xs px-3 py-1 rounded-full mb-2 inline-block">Birthday</span>
+                            <h3 class="text-xl font-bold text-white">John's 40th Surprise Party</h3>
+                            <p class="text-gray-300 text-sm">February 2023 • 50 guests</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="text-center mt-12">
+                <button id="load-more-portfolio" class="bg-purple-900 text-white px-6 py-3 rounded-lg font-medium hover:bg-purple-800 transition duration-300">
+                    Load More
+                </button>
+            </div>
+        </div>
+    </section>
+    <!-- Testimonials Section -->
+    <section id="testimonials" class="py-20 bg-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Client Stories</h2>
+                <div class="w-20 h-1 bg-purple-900 mx-auto mb-6"></div>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto">What our clients say about their experiences with SOVA Event Agency</p>
+            </div>
+            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
+                <!-- Testimonial 1 -->
+                <div class="testimonial-card bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
+                    <div class="flex items-center mb-6">
+                        <img src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah Johnson" class="w-12 h-12 rounded-full object-cover mr-4">
+                        <div>
+                            <h4 class="text-lg font-semibold text-gray-900">Sarah Johnson</h4>
+                            <p class="text-gray-600 text-sm">Wedding Client</p>
+                        </div>
+                    </div>
+                    <div class="text-gray-700 mb-6">
+                        <i class="fas fa-quote-left text-purple-900 opacity-30 mr-2"></i>
+                        SOVA made our wedding dreams come true! Every detail was perfect, from the floral arrangements to the timeline execution. Our guests are still talking about how amazing everything was.
+                        <i class="fas fa-quote-right text-purple-900 opacity-30 ml-2"></i>
+                    </div>
+                    <div class="flex text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <!-- Testimonial 2 -->
+                <div class="testimonial-card bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
+                    <div class="flex items-center mb-6">
+                        <img src="https://randomuser.me/api/portraits/men/45.jpg" alt="Mark Williams" class="w-12 h-12 rounded-full object-cover mr-4">
+                        <div>
+                            <h4 class="text-lg font-semibold text-gray-900">Mark Williams</h4>
+                            <p class="text-gray-600 text-sm">Corporate Client</p>
+                        </div>
+                    </div>
+                    <div class="text-gray-700 mb-6">
+                        <i class="fas fa-quote-left text-purple-900 opacity-30 mr-2"></i>
+                        Our annual conference was elevated to a whole new level thanks to SOVA. The team handled everything seamlessly, allowing us to focus on our content and networking. The feedback from attendees has been overwhelmingly positive.
+                        <i class="fas fa-quote-right text-purple-900 opacity-30 ml-2"></i>
+                    </div>
+                    <div class="flex text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+                <!-- Testimonial 3 -->
+                <div class="testimonial-card bg-gray-50 p-8 rounded-xl shadow-sm hover:shadow-md transition duration-300">
+                    <div class="flex items-center mb-6">
+                        <img src="https://randomuser.me/api/portraits/women/68.jpg" alt="Lisa Chen" class="w-12 h-12 rounded-full object-cover mr-4">
+                        <div>
+                            <h4 class="text-lg font-semibold text-gray-900">Lisa Chen</h4>
+                            <p class="text-gray-600 text-sm">Birthday Client</p>
+                        </div>
+                    </div>
+                    <div class="text-gray-700 mb-6">
+                        <i class="fas fa-quote-left text-purple-900 opacity-30 mr-2"></i>
+                        My daughter's 8th birthday party was magical thanks to SOVA! The unicorn theme was executed perfectly, and the entertainment kept all the kids engaged. It was stress-free for me and unforgettable for my daughter.
+                        <i class="fas fa-quote-right text-purple-900 opacity-30 ml-2"></i>
+                    </div>
+                    <div class="flex text-yellow-400">
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                        <i class="fas fa-star"></i>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- FAQ Section -->
+    <section class="py-20 bg-gray-50">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-gray-900 mb-4">Frequently Asked Questions</h2>
+                <div class="w-20 h-1 bg-purple-900 mx-auto mb-6"></div>
+                <p class="text-lg text-gray-600 max-w-3xl mx-auto">Answers to common questions about our services</p>
+            </div>
+            <div class="max-w-3xl mx-auto">
+                <!-- FAQ Item 1 -->
+                <div class="accordion-item mb-4">
+                    <div class="accordion-header bg-white p-4 rounded-lg shadow-sm cursor-pointer flex justify-between items-center">
+                        <h3 class="text-lg font-medium text-gray-900">How far in advance should I book your services?</h3>
+                        <i class="fas fa-chevron-down text-purple-900 transition-transform duration-300"></i>
+                    </div>
+                    <div class="accordion-content bg-white px-4 rounded-b-lg shadow-sm">
+                        <p class="py-4 text-gray-600">
+                            We recommend booking as early as possible, especially for weddings and popular dates. For weddings, 9-12 months in advance is ideal. For corporate events and parties, 3-6 months is usually sufficient, but we can sometimes accommodate last-minute requests depending on availability.
+                        </p>
+                    </div>
+                </div>
+                <!-- FAQ Item 2 -->
+                <div class="accordion-item mb-4">
+                    <div class="accordion-header bg-white p-4 rounded-lg shadow-sm cursor-pointer flex justify-between items-center">
+                        <h3 class="text-lg font-medium text-gray-900">What areas do you serve?</h3>
+                        <i class="fas fa-chevron-down text-purple-900 transition-transform duration-300"></i>
+                    </div>
+                    <div class="accordion-content bg-white px-4 rounded-b-lg shadow-sm">
+                        <p class="py-4 text-gray-600">
+                            We're based in Fort Mill, SC but serve the entire Charlotte metro area and beyond. We regularly organize events in Rock Hill, Charlotte, Ballantyne, and surrounding communities. For destination events outside our immediate area, travel fees may apply.
+                        </p>
+                    </div>
+                </div>
+                <!-- FAQ Item 3 -->
+                <div class="accordion-item mb-4">
+                    <div class="accordion-header bg-white p-4 rounded-lg shadow-sm cursor-pointer flex justify-between items-center">
+                        <h3 class="text-lg font-medium text-gray-900">Can you work within my budget?</h3>
+                        <i class="fas fa-chevron-down text-purple-900 transition-transform duration-300"></i>
+                    </div>
+                    <div class="accordion-content bg-white px-4 rounded-b-lg shadow-sm">
+                        <p class="py-4 text-gray-600">
+                            Absolutely! We pride ourselves on creating beautiful events at various price points. During our initial consultation, we'll discuss your vision and budget to create a customized proposal that meets your needs without compromising quality.
+                        </p>
+                    </div>
+                </div>
+                <!-- FAQ Item 4 -->
+                <div class="accordion-item mb-4">
+                    <div class="accordion-header bg-white p-4 rounded-lg shadow-sm cursor-pointer flex justify-between items-center">
+                        <h3 class="text-lg font-medium text-gray-900">What makes SOVA different from other event planners?</h3>
+                        <i class="fas fa-chevron-down text-purple-900 transition-transform duration-300"></i>
+                    </div>
+                    <div class="accordion-content bg-white px-4 rounded-b-lg shadow-sm">
+                        <p class="py-4 text-gray-600">
+                            Three things set us apart: 1) Our creative approach - we don't just execute, we innovate. 2) Our attention to detail - no element is too small. 3) Our personal service - you'll work directly with our principals, not junior staff. Plus, our interactive game offerings add unique entertainment options you won't find elsewhere.
+                        </p>
+                    </div>
+                </div>
+                <!-- FAQ Item 5 -->
+                <div class="accordion-item">
+                    <div class="accordion-header bg-white p-4 rounded-lg shadow-sm cursor-pointer flex justify-between items-center">
+                        <h3 class="text-lg font-medium text-gray-900">Do you handle all vendor coordination?</h3>
+                        <i class="fas fa-chevron-down text-purple-900 transition-transform duration-300"></i>
+                    </div>
+                    <div class="accordion-content bg-white px-4 rounded-b-lg shadow-sm">
+                        <p class="py-4 text-gray-600">
+                            Yes, we offer full-service planning where we handle all vendor coordination, contracts, and logistics. We have trusted relationships with top vendors in the area but can also work with your preferred vendors. For partial planning packages, we're happy to coordinate with vendors you've already booked.
+                        </p>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </section>
+    <!-- Event Quiz Section -->
+    <section class="py-20 bg-purple-900 text-white">
+        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+            <div class="text-center mb-16">
+                <h2 class="text-3xl md:text-4xl font-bold text-white mb-4">What's Your Perfect Event?</h2>
+                <div class="w-20 h-1 bg-green-300 mx-auto mb-6"></div>
+                <p class="text-lg text-purple-200 max-w-3xl mx-auto">Take our quick quiz to discover the ideal event format for your celebration</p>
+            </div>
+            <div class="quiz-container max-w-3xl mx-auto p-8 rounded-xl">
+                <!-- Quiz Progress -->
+                <div class="mb-6">
+                    <div class="flex justify-between mb-2">
+                        <span class="text-sm font-medium text-purple-900">Progress</span>
+                        <span class="text-sm font-medium text-purple-900"><span id="current-question">1</span>/5</span>
+                    </div>
+                    <div class="w-full bg-gray-200 rounded-full h-2.5">
+                        <div id="quiz-progress" class="bg-green-500 h-2.5 rounded-full" style="width: 20%"></div>
+                    </div>
+                </div>
+                <!-- Quiz Questions -->
+                <div id="quiz-questions">
+                    <!-- Question 1 -->
+                    <div class="quiz-question active">
+                        <h3 class="text-xl font-bold text-purple-900 mb-4">1. What type of event are you planning?</h3>
+                        <div class="space-y-3">
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="wedding">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Wedding</span>
+                                </div>
+                            </div>
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="birthday">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Birthday Party</span>
+                                </div>
+                            </div>
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="corporate">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Corporate Event</span>
+                                </div>
+                            </div>
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="other">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Other Celebration</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-6 flex justify-end">
+                            <button class="quiz-next bg-purple-900 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-800 transition duration-300">Next</button>
+                        </div>
+                    </div>
+                    <!-- Question 2 -->
+                    <div class="quiz-question">
+                        <h3 class="text-xl font-bold text-purple-900 mb-4">2. Approximately how many guests will attend?</h3>
+                        <div class="space-y-3">
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="small">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Intimate (1-20 guests)</span>
+                                </div>
+                            </div>
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="medium">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Medium (21-50 guests)</span>
+                                </div>
+                            </div>
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="large">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Large (51-150 guests)</span>
+                                </div>
+                            </div>
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="xl">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Extra Large (150+ guests)</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-6 flex justify-between">
+                            <button class="quiz-prev text-purple-900 px-6 py-2 rounded-lg font-medium hover:text-purple-800 transition duration-300">Back</button>
+                            <button class="quiz-next bg-purple-900 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-800 transition duration-300">Next</button>
+                        </div>
+                    </div>
+                    <!-- Question 3 -->
+                    <div class="quiz-question">
+                        <h3 class="text-xl font-bold text-purple-900 mb-4">3. What's your preferred event style?</h3>
+                        <div class="space-y-3">
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="formal">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Formal & Elegant</span>
+                                </div>
+                            </div>
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="casual">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Casual & Relaxed</span>
+                                </div>
+                            </div>
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="themed">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Themed & Creative</span>
+                                </div>
+                            </div>
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="interactive">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center mr-3">
+                                        <div class="h-3 w-3 rounded-full bg-purple-900 hidden"></div>
+                                    </div>
+                                    <span class="text-gray-900">Interactive & Engaging</span>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mt-6 flex justify-between">
+                            <button class="quiz-prev text-purple-900 px-6 py-2 rounded-lg font-medium hover:text-purple-800 transition duration-300">Back</button>
+                            <button class="quiz-next bg-purple-900 text-white px-6 py-2 rounded-lg font-medium hover:bg-purple-800 transition duration-300">Next</button>
+                        </div>
+                    </div>
+                    <!-- Question 4 -->
+                    <div class="quiz-question">
+                        <h3 class="text-xl font-bold text-purple-900 mb-4">4. What's most important for your event?</h3>
+                        <div class="space-y-3">
+                            <div class="quiz-option bg-white p-4 rounded-lg cursor-pointer border border-gray-200" data-value="food">
+                                <div class="flex items-center">
+                                    <div class="flex-shrink-0 h-5 w-5 rounded-full border border-gray-300 flex items-center justify-center
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+измени название сайта и компанию www.sovaevent.com а компания SOVA EVANT AGENCY
+Создайте сайт для компании SOVA Event Agency, специализирующейся на организации вечеринок, дней рождений, свадеб и интерактивных игр на мероприятиях. Дизайн должен быть современным, визуально привлекательным, интерактивным и отражать праздничную атмосферу. Сайт должен подчеркивать профессионализм и креативность компании, мотивируя посетителей заказать услуги. Включите интеграцию WhatsApp для удобной связи.  Основные требования:      Визуальный стиль:      Используйте яркую, но элегантную цветовую палитру (например, глубокий фиолетовый, золотой, белый, акценты мятного).    Применяйте современные шрифты без засечек (например, Montserrat, Raleway) и плавные анимации (параллакс-эффекты, ховер-анимации кнопок, переходы между секциями).    Фоновые изображения или видео должны демонстрировать яркие моменты мероприятий (улыбающиеся гости, украшенные залы, игры).    Структура сайта:      Главная страница: Полноэкранная герой-секция с динамичным слайдером или видео, показывающим сцены с мероприятий. Заголовок: "SOVA Event Agency – Ваш праздник, наша забота!" с кнопкой CTA ("Связаться с нами"). Логотип компании в верхнем левом углу.    О нас: Раздел с краткой историей SOVA Event Agency, акцент на креативность, опыт и индивидуальный подход. Включите фото команды или мероприятий. Упомяните миссию: "Создаем незабываемые эмоции для каждого события".    Услуги: Интерактивные карточки с категориями: свадьбы, дни рождения, корпоративные вечеринки, тимбилдинг, квесты, шоу-программы. При наведении карточки анимируются, показывая краткое описание и фото.    Портфолио: Галерея с фотографиями и короткими видео с прошлых мероприятий, с фильтрацией по типу события (свадьба, день рождения, корпоратив). Каждое событие сопровождается кратким описанием.    Контакты:      Форма обратной связи с полями для имени, телефона, email и сообщения.    Информация: телефон +13474162055, email [email protected], адрес 1341 Hideaway Gulch dr. Fort Mill, SC, 29715.    Интерактивная карта с отмеченным адресом.    Кликабельные иконки социальных сетей (предположительно Instagram, Facebook).    WhatsApp интеграция:      Кнопка "Написать в WhatsApp" с иконкой WhatsApp, привязанная к номеру +13474162055. При клике открывается чат в WhatsApp с предзаполненным сообщением: "Здравствуйте! Хочу узнать больше об организации мероприятия с SOVA Event Agency."    Плавающая иконка WhatsApp в правом нижнем углу сайта (фиксированная, появляется при скролле) для быстрого доступа к чату.    Интерактивные элементы:      Добавьте квиз "Какой формат мероприятия вам подходит?" (вопросы о количестве гостей, типе события, бюджете), который предлагает рекомендации и предлагает связаться через WhatsApp, форму или звонок.    Включите чат-бот для быстрых ответов на вопросы (например, о ценах или доступных датах), с возможностью переключения на WhatsApp.    Реализуйте слайдер с отзывами клиентов, с анимацией перелистывания и фото мероприятий.    Технические аспекты:      Сайт должен быть полностью адаптивным для мобильных устройств, планшетов и десктопов.    Используйте современные технологии: HTML5, CSS3, JavaScript, фреймворки вроде React для интерактивности.    Реализуйте WhatsApp API для кнопки и плавающей иконки (например, через https://wa.me/+13474162055?text=...).    Оптимизируйте скорость загрузки (ленивая загрузка изображений, минификация файлов).    Включите SEO-оптимизацию с ключевыми словами: "организация свадеб Fort Mill", "дни рождения SOVA Event Agency", "ивенты Южная Каролина".    Тон и посыл:      Энергичный, теплый, профессиональный. Текст должен передавать радость, предвкушение праздника и уверенность в качестве услуг.    Примеры фраз: "Ваши мечты – наша реальность!", "С SOVA каждый момент станет особенным".    Дополнительно:      Добавьте раздел "Часто задаваемые вопросы" (FAQ) с ответами о ценах, процессе бронирования, кастомизации мероприятий.    Включите кнопку "Заказать звонок" в шапке сайта и ссылку на WhatsApp для быстрого контакта.  Пример настроения: Сайт должен вызывать ощущение праздника, быть интуитивно понятным, вдохновлять доверие и побуждать посетителей связаться с SOVA Event Agency через WhatsApp, форму или звонок для организации их мероприятия.
+Create a website for SOVA Event Agency, specializing in organizing parties, birthdays, weddings, and interactive games for events. The design must be modern, visually appealing, interactive, and convey a festive atmosphere. The site should highlight professionalism, creativity, and encourage users to book services. Integrate WhatsApp for convenient communication. Below are the detailed sections of the website:  **1. Homepage (Hero Section)**: - **Description**: A full-screen section creating a strong first impression. Features a dynamic slider or video showcasing vibrant event moments (weddings, birthdays, games). - **Visual Style**: Darkened background for text readability. Color palette: deep purple, gold, white, with mint accents. Use sans-serif fonts like Montserrat or Raleway. - **Elements**:   - Headline: "SOVA Event Agency – Your Celebration, Our Passion!"   - Subheadline: "Crafting unforgettable experiences for you and your guests."   - CTA Button: "Contact Us" (links to the contact section or opens WhatsApp).   - Company logo in the top-left corner.   - Smooth loading animation (e.g., text fades in with a slight upward motion). - **Interactivity**: Auto-scrolling slider with pause on hover. Button with hover effect (scale-up, color change).  **2. About Us**: - **Description**: A section introducing the company, its mission, and values. - **Visual Style**: Clean background (white or light gray) with vibrant accents (gold lines, mint elements). High-quality photos of the team or events. - **Elements**:   - Headline: "Who We Are".   - Text: Brief history of SOVA Event Agency, emphasizing creativity, experience, and personalized service. Example: "We’re a team of dreamers and professionals, turning your ideas into unforgettable events."   - Mission: "Creating memorable emotions for every occasion."   - 2-3 photos (team, decorations, happy guests).   - Button: "Explore Our Services" (links to the services section). - **Interactivity**: Photos scale up on hover. Text animates into view on scroll.  **3. Services**: - **Description**: Showcase the company’s services through interactive cards. - **Visual Style**: Subtle gradient background (purple to mint). Cards with rounded corners, shadows, and animations. - **Elements**:   - Headline: "What We Offer".   - Service categories (as cards): weddings, birthdays, corporate parties, team-building, quests, show programs.   - Each card includes: title, brief description, photo. Example: "Weddings – From romantic ceremonies to grand receptions."   - Button on each card: "Learn More" (links to a dedicated page or opens a modal). - **Interactivity**: Cards lift slightly on hover, with animations (e.g., photo zooms, text highlights). Filterable by service type.  **4. Portfolio**: - **Description**: A gallery showcasing past events to demonstrate quality and expertise. - **Visual Style**: Dark background for contrast with vibrant photos. Minimalist grid layout. - **Elements**:   - Headline: "Our Work".   - Gallery with photos and short videos (weddings, birthdays, corporate events).   - Filters: "All", "Weddings", "Birthdays", "Corporate".   - Each item includes a brief description (e.g., "Anna & Michael’s Wedding, 2024, 150 guests").   - Button: "See More" (loads additional items). - **Interactivity**: Photos open in a modal on click. Smooth animation for loading new items on scroll.  **5. Contact Us**: - **Description**: A section for connecting with the company, including WhatsApp integration. - **Visual Style**: Clean background (white or light gray) with vibrant accents (gold buttons, mint form fields). - **Elements**:   - Headline: "Get in Touch".   - Contact form: fields for name, phone, email, and message.   - Contact Information:     - Phone: +13474162055.     - Email: [email protected].     - Address: 1341 Hideaway Gulch dr. Fort Mill, SC, 29715.   - Interactive map (Google Maps) with the address pinned.   - Clickable social media icons (Instagram, Facebook).   - **WhatsApp Integration**:     - "Message on WhatsApp" button with WhatsApp icon, linked to +13474162055. Opens a chat with a pre-filled message: "Hello! I’d like to learn more about event planning with SOVA Event Agency."     - Floating WhatsApp icon in the bottom-right corner (fixed, appears on scroll) for quick access. - **Interactivity**: Form fields animate on focus. WhatsApp button with hover effect.  **Technical Requirements**: - Fully responsive for mobile, tablet, and desktop devices. - Use modern technologies: HTML5, CSS3, JavaScript, and frameworks like React for interactivity. - Implement WhatsApp API for the button and floating icon (e.g., `https://wa.me/+13474162055?text=...`). - Optimize loading speed (lazy-load images, minify files). - Include SEO optimization with keywords: "wedding planner Fort Mill", "SOVA Event Agency birthdays", "South Carolina events".  **Tone and Messaging**: - Energetic, warm, professional. Text should convey joy, anticipation of celebration, and confidence in service quality. - Example phrases: "Your dreams, our reality!", "With SOVA, every moment is extraordinary."  **Additional Features**: - Add a "Frequently Asked Questions" (FAQ) section addressing pricing, booking process, and event customization. - Include a "Request a Call" button in the header and a WhatsApp link for quick contact. - Implement an interactive quiz: "What’s Your Perfect Event?" (questions about guest count, event type, budget), recommending services and suggesting contact via WhatsApp, form, or call. - Add a chatbot for quick responses (e.g., pricing, availability), with an option to switch to WhatsApp.  **Mood and Goal**: The site should evoke a sense of celebration, be intuitive, inspire trust, and prompt users to contact SOVA Event Agency via WhatsApp, form, or phone to plan their event.