Spaces:
Running
Running
Design a professional, emotionally impactful website dedicated to orchestrating surprise parties, unforgettable proposals, and other high-emotion events. The site should be both inspirational and actionable, combining vivid imagery, clear packages, and frequent calls to action. Homepage Hero Section Headline: “Create Lifelong Memories. We Make Surprises Unforgettable.” Subheadline: “From magical proposals to unforgettable surprise parties, we handle every detail so you can focus on the moment.” Primary Action Button: Plan Your Moment (scrolls to packages or opens application form) Services Provided Venue Location & Booking: Find, suggest, and book stunning venues tailored to each event type. Proposal/Party Planning: Custom, creative plans for birthday parties, wedding proposals, reunions, or any high-stakes event. Crowd Sourcing: Organize a crowd for flash mobs or audience participation. Musicians & Entertainers: Book musicians, vocalists, or other performers. Venue Decoration: Thematic décor (floral, lighting, personalized props, signs). Photography & Videography: Capture every moment professionally. Event Execution & Coordination: On-site coordinators to manage surprises smoothly. Action Button: “See How It Works” – leads to a step-by-step overview with action buttons at each step. Use Cases For Couples: Surprise engagement proposals that are personalized and memorable. For Families: Milestone birthday parties, anniversary celebrations. For Friends: Reunion parties, “just because” surprise gatherings. For Businesses: Company milestone surprises, retirement parties. Action Button: “Get Inspired” – takes user to testimonials and showcase gallery. Highlights Every detail handled: From planning to execution, you only need to show up and enjoy. Emotion at the center: We specialize in creating moments that move, surprise, and captivate. Sydney-local expertise: In-depth knowledge of Sydney venues, vendors, and trends. Packages & Pricing Package Name Inclusions Price (AUD) Proposal Planning Creative planning, consultation $250 Venue Booking & Decoration Venue search, booking, themed décor $500 Proposal Execution Complete logistics, crowd, musicians $990 VIP Package All of the above, limo, video, flowers $4,500 Action Button: “Book This Package” (visible for each package; clicking opens the application form) Testimonials “The team made my marriage proposal truly magical—she still cries when she watches the video!” “We surprised our dad for his 60th with all our family from overseas—perfectly organized, stress-free.” “From venue, to lights, to the band—they thought of everything. I’ll never forget the look on my best friend’s face!” Action Button: “Read More Stories” (opens full testimonial page) Chatbot & Support Persistent chat bubble: “Questions? Chat with Us.” Seamless handoff to human agent available. FAQ chatbot for basic queries, with instant answers about packages, services, and booking process. Application/Conversion Form Fields to include: Name, Email, Phone Type of Event (dropdown: Proposal, Birthday, Reunion, Other + textbox) Desired Date(s) & Location (Sydney or specify) Guest Count Estimated Desired Package (select one or more) Special Requests/Notes Preferred Contact Method How did you hear about us? Action Button: “Submit & Get My Quote” Form submission should send instant confirmation and route to a team member for follow-up and quoting. Visual & UI Guidance Colour Theme: Warm gold, soft white, deep emerald, rose blush—conveying romance, joy, and celebration. High-quality photography: Candid emotional moments—smiles, surprises, happy tears. Clear, prominent action buttons throughout. Minimalist, elegant fonts; plenty of whitespace. Footer Contact details Social media links Privacy policy, T&Cs All elements above are aimed at converting visitors into leads, reinforcing trust, emotional connection, and encouraging users to take action at every step. - Initial Deployment
Browse files- README.md +7 -5
- index.html +555 -19
README.md
CHANGED
|
@@ -1,10 +1,12 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
emoji:
|
| 4 |
-
colorFrom:
|
| 5 |
-
colorTo:
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
|
|
|
| 1 |
---
|
| 2 |
+
title: a-word-or-two
|
| 3 |
+
emoji: 🐳
|
| 4 |
+
colorFrom: purple
|
| 5 |
+
colorTo: purple
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite
|
| 10 |
---
|
| 11 |
|
| 12 |
+
Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
|
index.html
CHANGED
|
@@ -1,19 +1,555 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Unforgettable Moments - Create Magical Surprises</title>
|
| 7 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 8 |
+
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
|
| 9 |
+
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
|
| 10 |
+
<link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
|
| 11 |
+
<style>
|
| 12 |
+
:root {
|
| 13 |
+
--gold: #D4AF37;
|
| 14 |
+
--emerald: #064E3B;
|
| 15 |
+
--rose: #FCE7F3;
|
| 16 |
+
--white: #FFFFFF;
|
| 17 |
+
}
|
| 18 |
+
|
| 19 |
+
body {
|
| 20 |
+
font-family: 'Inter', sans-serif;
|
| 21 |
+
}
|
| 22 |
+
|
| 23 |
+
.font-serif {
|
| 24 |
+
font-family: 'Playfair Display', serif;
|
| 25 |
+
}
|
| 26 |
+
|
| 27 |
+
.hero-gradient {
|
| 28 |
+
background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(6, 78, 59, 0.2) 100%);
|
| 29 |
+
}
|
| 30 |
+
|
| 31 |
+
.gold-gradient {
|
| 32 |
+
background: linear-gradient(135deg, #D4AF37 0%, #F7D794 100%);
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
.emerald-gradient {
|
| 36 |
+
background: linear-gradient(135deg, #064E3B 0%, #10B981 100%);
|
| 37 |
+
}
|
| 38 |
+
|
| 39 |
+
.floating {
|
| 40 |
+
animation: floating 3s ease-in-out infinite;
|
| 41 |
+
}
|
| 42 |
+
|
| 43 |
+
@keyframes floating {
|
| 44 |
+
0% { transform: translateY(0px); }
|
| 45 |
+
50% { transform: translateY(-10px); }
|
| 46 |
+
100% { transform: translateY(0px); }
|
| 47 |
+
}
|
| 48 |
+
|
| 49 |
+
.pulse-gold {
|
| 50 |
+
animation: pulse-gold 2s infinite;
|
| 51 |
+
}
|
| 52 |
+
|
| 53 |
+
@keyframes pulse-gold {
|
| 54 |
+
0% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7); }
|
| 55 |
+
70% { box-shadow: 0 0 0 10px rgba(212, 175, 55, 0); }
|
| 56 |
+
100% { box-shadow: 0 0 0 0 rgba(212, 175, 55, 0); }
|
| 57 |
+
}
|
| 58 |
+
|
| 59 |
+
.chat-bubble {
|
| 60 |
+
transition: all 0.3s ease;
|
| 61 |
+
}
|
| 62 |
+
|
| 63 |
+
.chat-bubble:hover {
|
| 64 |
+
transform: scale(1.1);
|
| 65 |
+
}
|
| 66 |
+
|
| 67 |
+
.service-card {
|
| 68 |
+
transition: all 0.3s ease;
|
| 69 |
+
}
|
| 70 |
+
|
| 71 |
+
.service-card:hover {
|
| 72 |
+
transform: translateY(-5px);
|
| 73 |
+
box-shadow: 0 20px 40px rgba(0,0,0,0.1);
|
| 74 |
+
}
|
| 75 |
+
|
| 76 |
+
.package-card {
|
| 77 |
+
transition: all 0.3s ease;
|
| 78 |
+
border: 2px solid transparent;
|
| 79 |
+
}
|
| 80 |
+
|
| 81 |
+
.package-card:hover {
|
| 82 |
+
border-color: #D4AF37;
|
| 83 |
+
transform: translateY(-5px);
|
| 84 |
+
}
|
| 85 |
+
|
| 86 |
+
.testimonial-card {
|
| 87 |
+
backdrop-filter: blur(10px);
|
| 88 |
+
background: rgba(255, 255, 255, 0.9);
|
| 89 |
+
}
|
| 90 |
+
</style>
|
| 91 |
+
</head>
|
| 92 |
+
<body class="bg-gray-50 overflow-x-hidden">
|
| 93 |
+
<!-- Navigation -->
|
| 94 |
+
<nav class="fixed top-0 w-full bg-white/90 backdrop-blur-md z-50 shadow-sm">
|
| 95 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 96 |
+
<div class="flex justify-between items-center h-16">
|
| 97 |
+
<div class="font-serif text-2xl font-bold text-gray-800">
|
| 98 |
+
Unforgettable Moments
|
| 99 |
+
</div>
|
| 100 |
+
<div class="hidden md:flex space-x-8">
|
| 101 |
+
<a href="#services" class="text-gray-700 hover:text-gold transition">Services</a>
|
| 102 |
+
<a href="#packages" class="text-gray-700 hover:text-gold transition">Packages</a>
|
| 103 |
+
<a href="#testimonials" class="text-gray-700 hover:text-gold transition">Stories</a>
|
| 104 |
+
<a href="#contact" class="text-gray-700 hover:text-gold transition">Contact</a>
|
| 105 |
+
</div>
|
| 106 |
+
<button id="mobile-menu-btn" class="md:hidden">
|
| 107 |
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| 108 |
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
|
| 109 |
+
</svg>
|
| 110 |
+
</button>
|
| 111 |
+
</div>
|
| 112 |
+
</div>
|
| 113 |
+
</nav>
|
| 114 |
+
|
| 115 |
+
<!-- Hero Section -->
|
| 116 |
+
<section class="relative min-h-screen flex items-center justify-center hero-gradient">
|
| 117 |
+
<div class="absolute inset-0">
|
| 118 |
+
<img src="https://images.unsplash.com/photo-1519741497674-611481863552?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80"
|
| 119 |
+
alt="Magical moment" class="w-full h-full object-cover opacity-30">
|
| 120 |
+
</div>
|
| 121 |
+
<div class="relative z-10 text-center px-4 max-w-4xl mx-auto">
|
| 122 |
+
<h1 data-aos="fade-up" class="font-serif text-4xl md:text-6xl font-bold text-gray-800 mb-6 leading-tight">
|
| 123 |
+
Create Lifelong Memories.<br>
|
| 124 |
+
<span class="text-gold">We Make Surprises Unforgettable.</span>
|
| 125 |
+
</h1>
|
| 126 |
+
<p data-aos="fade-up" data-aos-delay="200" class="text-xl md:text-2xl text-gray-600 mb-8 leading-relaxed">
|
| 127 |
+
From magical proposals to unforgettable surprise parties, we handle every detail so you can focus on the moment.
|
| 128 |
+
</p>
|
| 129 |
+
<div data-aos="fade-up" data-aos-delay="400" class="space-x-4">
|
| 130 |
+
<button onclick="scrollToSection('packages')" class="gold-gradient text-white px-8 py-4 rounded-full font-semibold text-lg pulse-gold">
|
| 131 |
+
Plan Your Moment
|
| 132 |
+
</button>
|
| 133 |
+
<button onclick="scrollToSection('how-it-works')" class="border-2 border-gold text-gold px-8 py-4 rounded-full font-semibold text-lg hover:bg-gold hover:text-white transition">
|
| 134 |
+
See How It Works
|
| 135 |
+
</button>
|
| 136 |
+
</div>
|
| 137 |
+
</div>
|
| 138 |
+
</section>
|
| 139 |
+
|
| 140 |
+
<!-- Services Section -->
|
| 141 |
+
<section id="services" class="py-20 bg-white">
|
| 142 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 143 |
+
<div class="text-center mb-16">
|
| 144 |
+
<h2 class="font-serif text-4xl font-bold text-gray-800 mb-4">Every Detail Perfected</h2>
|
| 145 |
+
<p class="text-xl text-gray-600">From intimate proposals to grand celebrations, we craft moments that last forever</p>
|
| 146 |
+
</div>
|
| 147 |
+
|
| 148 |
+
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
|
| 149 |
+
<div data-aos="fade-up" class="service-card bg-white p-8 rounded-2xl shadow-lg">
|
| 150 |
+
<div class="w-16 h-16 gold-gradient rounded-full flex items-center justify-center mb-4">
|
| 151 |
+
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
|
| 152 |
+
<path d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
|
| 153 |
+
</svg>
|
| 154 |
+
</div>
|
| 155 |
+
<h3 class="font-serif text-2xl font-semibold mb-3">Venue Location & Booking</h3>
|
| 156 |
+
<p class="text-gray-600">Discover and secure Sydney's most stunning venues, perfectly matched to your vision and budget.</p>
|
| 157 |
+
</div>
|
| 158 |
+
|
| 159 |
+
<div data-aos="fade-up" data-aos-delay="100" class="service-card bg-white p-8 rounded-2xl shadow-lg">
|
| 160 |
+
<div class="w-16 h-16 emerald-gradient rounded-full flex items-center justify-center mb-4">
|
| 161 |
+
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
|
| 162 |
+
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
|
| 163 |
+
</svg>
|
| 164 |
+
</div>
|
| 165 |
+
<h3 class="font-serif text-2xl font-semibold mb-3">Custom Event Planning</h3>
|
| 166 |
+
<p class="text-gray-600">Creative, personalized plans for proposals, birthdays, reunions, and any high-stakes celebration.</p>
|
| 167 |
+
</div>
|
| 168 |
+
|
| 169 |
+
<div data-aos="fade-up" data-aos-delay="200" class="service-card bg-white p-8 rounded-2xl shadow-lg">
|
| 170 |
+
<div class="w-16 h-16 gold-gradient rounded-full flex items-center justify-center mb-4">
|
| 171 |
+
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
|
| 172 |
+
<path d="M13 6a3 3 0 11-6 0 3 3 0 016 0zM18 8a2 2 0 11-4 0 2 2 0 014 0zM14 15a4 4 0 00-8 0v3h8v-3z"></path>
|
| 173 |
+
</svg>
|
| 174 |
+
</div>
|
| 175 |
+
<h3 class="font-serif text-2xl font-semibold mb-3">Crowd Sourcing</h3>
|
| 176 |
+
<p class="text-gray-600">Organize flash mobs or audience participation to amplify the surprise and create viral moments.</p>
|
| 177 |
+
</div>
|
| 178 |
+
|
| 179 |
+
<div data-aos="fade-up" class="service-card bg-white p-8 rounded-2xl shadow-lg">
|
| 180 |
+
<div class="w-16 h-16 emerald-gradient rounded-full flex items-center justify-center mb-4">
|
| 181 |
+
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
|
| 182 |
+
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z"></path>
|
| 183 |
+
</svg>
|
| 184 |
+
</div>
|
| 185 |
+
<h3 class="font-serif text-2xl font-semibold mb-3">Musicians & Entertainers</h3>
|
| 186 |
+
<p class="text-gray-600">Book Sydney's finest musicians, vocalists, and performers to elevate your celebration.</p>
|
| 187 |
+
</div>
|
| 188 |
+
|
| 189 |
+
<div data-aos="fade-up" data-aos-delay="100" class="service-card bg-white p-8 rounded-2xl shadow-lg">
|
| 190 |
+
<div class="w-16 h-16 gold-gradient rounded-full flex items-center justify-center mb-4">
|
| 191 |
+
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
|
| 192 |
+
<path d="M3 4a1 1 0 011-1h12a1 1 0 011 1v2a1 1 0 01-1 1H4a1 1 0 01-1-1V4zM3 10a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H4a1 1 0 01-1-1v-6zM14 9a1 1 0 00-1 1v6a1 1 0 001 1h2a1 1 0 001-1v-6a1 1 0 00-1-1h-2z"></path>
|
| 193 |
+
</svg>
|
| 194 |
+
</div>
|
| 195 |
+
<h3 class="font-serif text-2xl font-semibold mb-3">Venue Decoration</h3>
|
| 196 |
+
<p class="text-gray-600">Thematic décor including floral arrangements, lighting, personalized props, and meaningful signs.</p>
|
| 197 |
+
</div>
|
| 198 |
+
|
| 199 |
+
<div data-aos="fade-up" data-aos-delay="200" class="service-card bg-white p-8 rounded-2xl shadow-lg">
|
| 200 |
+
<div class="w-16 h-16 emerald-gradient rounded-full flex items-center justify-center mb-4">
|
| 201 |
+
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
|
| 202 |
+
<path fill-rule="evenodd" d="M4 5a2 2 0 00-2 2v8a2 2 0 002 2h12a2 2 0 002-2V7a2 2 0 00-2-2H4zm3 2a1 1 0 000 2h6a1 1 0 100-2H7z" clip-rule="evenodd"></path>
|
| 203 |
+
</svg>
|
| 204 |
+
</div>
|
| 205 |
+
<h3 class="font-serif text-2xl font-semibold mb-3">Photography & Videography</h3>
|
| 206 |
+
<p class="text-gray-600">Professional capture of every emotional moment, ensuring your memories last forever.</p>
|
| 207 |
+
</div>
|
| 208 |
+
</div>
|
| 209 |
+
</div>
|
| 210 |
+
</section>
|
| 211 |
+
|
| 212 |
+
<!-- How It Works Section -->
|
| 213 |
+
<section id="how-it-works" class="py-20 bg-gray-100">
|
| 214 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 215 |
+
<div class="text-center mb-16">
|
| 216 |
+
<h2 class="font-serif text-4xl font-bold text-gray-800 mb-4">How It Works</h2>
|
| 217 |
+
<p class="text-xl text-gray-600">From dream to reality in four simple steps</p>
|
| 218 |
+
</div>
|
| 219 |
+
|
| 220 |
+
<div class="grid md:grid-cols-4 gap-8">
|
| 221 |
+
<div data-aos="fade-up" class="text-center">
|
| 222 |
+
<div class="w-20 h-20 gold-gradient rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">1</div>
|
| 223 |
+
<h3 class="font-serif text-xl font-semibold mb-2">Share Your Vision</h3>
|
| 224 |
+
<p class="text-gray-600">Tell us about your dream moment</p>
|
| 225 |
+
<button onclick="openForm()" class="mt-4 text-gold hover:underline">Start Now</button>
|
| 226 |
+
</div>
|
| 227 |
+
|
| 228 |
+
<div data-aos="fade-up" data-aos-delay="100" class="text-center">
|
| 229 |
+
<div class="w-20 h-20 gold-gradient rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">2</div>
|
| 230 |
+
<h3 class="font-serif text-xl font-semibold mb-2">Plan & Design</h3>
|
| 231 |
+
<p class="text-gray-600">We create your custom plan</p>
|
| 232 |
+
<button onclick="scrollToSection('packages')" class="mt-4 text-gold hover:underline">View Packages</button>
|
| 233 |
+
</div>
|
| 234 |
+
|
| 235 |
+
<div data-aos="fade-up" data-aos-delay="200" class="text-center">
|
| 236 |
+
<div class="w-20 h-20 gold-gradient rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">3</div>
|
| 237 |
+
<h3 class="font-serif text-xl font-semibold mb-2">Execute Perfectly</h3>
|
| 238 |
+
<p class="text-gray-600">We handle every detail</p>
|
| 239 |
+
<button onclick="scrollToSection('services')" class="mt-4 text-gold hover:underline">See Services</button>
|
| 240 |
+
</div>
|
| 241 |
+
|
| 242 |
+
<div data-aos="fade-up" data-aos-delay="300" class="text-center">
|
| 243 |
+
<div class="w-20 h-20 gold-gradient rounded-full flex items-center justify-center mx-auto mb-4 text-white text-2xl font-bold">4</div>
|
| 244 |
+
<h3 class="font-serif text-xl font-semibold mb-2">Enjoy & Remember</h3>
|
| 245 |
+
<p class="text-gray-600">Create memories that last</p>
|
| 246 |
+
<button onclick="scrollToSection('testimonials')" class="mt-4 text-gold hover:underline">See Stories</button>
|
| 247 |
+
</div>
|
| 248 |
+
</div>
|
| 249 |
+
</div>
|
| 250 |
+
</section>
|
| 251 |
+
|
| 252 |
+
<!-- Packages Section -->
|
| 253 |
+
<section id="packages" class="py-20 bg-white">
|
| 254 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 255 |
+
<div class="text-center mb-16">
|
| 256 |
+
<h2 class="font-serif text-4xl font-bold text-gray-800 mb-4">Choose Your Perfect Package</h2>
|
| 257 |
+
<p class="text-xl text-gray-600">Select the experience that matches your dreams</p>
|
| 258 |
+
</div>
|
| 259 |
+
|
| 260 |
+
<div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
|
| 261 |
+
<div data-aos="fade-up" class="package-card bg-white p-8 rounded-2xl shadow-lg">
|
| 262 |
+
<h3 class="font-serif text-2xl font-bold mb-4">Proposal Planning</h3>
|
| 263 |
+
<p class="text-gray-600 mb-4">Creative planning & consultation</p>
|
| 264 |
+
<p class="text-3xl font-bold text-gold mb-6">$250</p>
|
| 265 |
+
<ul class="text-gray-600 mb-6 space-y-2">
|
| 266 |
+
<li>• Initial consultation</li>
|
| 267 |
+
<li>• Creative concept design</li>
|
| 268 |
+
<li>• Timeline planning</li>
|
| 269 |
+
</ul>
|
| 270 |
+
<button onclick="selectPackage('Proposal Planning')" class="w-full gold-gradient text-white py-3 rounded-full font-semibold hover:opacity-90 transition">
|
| 271 |
+
Book This Package
|
| 272 |
+
</button>
|
| 273 |
+
</div>
|
| 274 |
+
|
| 275 |
+
<div data-aos="fade-up" data-aos-delay="100" class="package-card bg-white p-8 rounded-2xl shadow-lg">
|
| 276 |
+
<h3 class="font-serif text-2xl font-bold mb-4">Venue & Decoration</h3>
|
| 277 |
+
<p class="text-gray-600 mb-4">Venue search, booking & themed décor</p>
|
| 278 |
+
<p class="text-3xl font-bold text-gold mb-6">$500</p>
|
| 279 |
+
<ul class="text-gray-600 mb-6 space-y-2">
|
| 280 |
+
<li>• Venue research & booking</li>
|
| 281 |
+
<li>• Themed decoration</li>
|
| 282 |
+
<li>• Setup & coordination</li>
|
| 283 |
+
</ul>
|
| 284 |
+
<button onclick="selectPackage('Venue & Decoration')" class="w-full gold-gradient text-white py-3 rounded-full font-semibold hover:opacity-90 transition">
|
| 285 |
+
Book This Package
|
| 286 |
+
</button>
|
| 287 |
+
</div>
|
| 288 |
+
|
| 289 |
+
<div data-aos="fade-up" data-aos-delay="200" class="package-card bg-white p-8 rounded-2xl shadow-lg">
|
| 290 |
+
<h3 class="font-serif text-2xl font-bold mb-4">Proposal Execution</h3>
|
| 291 |
+
<p class="text-gray-600 mb-4">Complete logistics & coordination</p>
|
| 292 |
+
<p class="text-3xl font-bold text-gold mb-6">$990</p>
|
| 293 |
+
<ul class="text-gray-600 mb-6 space-y-2">
|
| 294 |
+
<li>• Full event coordination</li>
|
| 295 |
+
<li>• Crowd management</li>
|
| 296 |
+
<li>• Live performers</li>
|
| 297 |
+
</ul>
|
| 298 |
+
<button onclick="selectPackage('Proposal Execution')" class="w-full gold-gradient text-white py-3 rounded-full font-semibold hover:opacity-90 transition">
|
| 299 |
+
Book This Package
|
| 300 |
+
</button>
|
| 301 |
+
</div>
|
| 302 |
+
|
| 303 |
+
<div data-aos="fade-up" data-aos-delay="300" class="package-card bg-white p-8 rounded-2xl shadow-lg border-2 border-gold">
|
| 304 |
+
<div class="absolute -top-3 -right-3 bg-gold text-white px-3 py-1 rounded-full text-sm font-semibold">Most Popular</div>
|
| 305 |
+
<h3 class="font-serif text-2xl font-bold mb-4">VIP Package</h3>
|
| 306 |
+
<p class="text-gray-600 mb-4">Everything included plus luxury</p>
|
| 307 |
+
<p class="text-3xl font-bold text-gold mb-6">$4,500</p>
|
| 308 |
+
<ul class="text-gray-600 mb-6 space-y-2">
|
| 309 |
+
<li>• All services included</li>
|
| 310 |
+
<li>• Luxury transportation</li>
|
| 311 |
+
<li>• Professional photography</li>
|
| 312 |
+
<li>• Premium flowers</li>
|
| 313 |
+
</ul>
|
| 314 |
+
<button onclick="selectPackage('VIP Package')" class="w-full gold-gradient text-white py-3 rounded-full font-semibold hover:opacity-90 transition">
|
| 315 |
+
Book This Package
|
| 316 |
+
</button>
|
| 317 |
+
</div>
|
| 318 |
+
</div>
|
| 319 |
+
</div>
|
| 320 |
+
</section>
|
| 321 |
+
|
| 322 |
+
<!-- Testimonials Section -->
|
| 323 |
+
<section id="testimonials" class="py-20 bg-gray-100">
|
| 324 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 325 |
+
<div class="text-center mb-16">
|
| 326 |
+
<h2 class="font-serif text-4xl font-bold text-gray-800 mb-4">Real Stories, Real Magic</h2>
|
| 327 |
+
<p class="text-xl text-gray-600">See how we've created unforgettable moments</p>
|
| 328 |
+
</div>
|
| 329 |
+
|
| 330 |
+
<div class="grid md:grid-cols-3 gap-8">
|
| 331 |
+
<div data-aos="fade-up" class="testimonial-card p-8 rounded-2xl shadow-lg">
|
| 332 |
+
<div class="text-gold text-2xl mb-4">★★★★★</div>
|
| 333 |
+
<p class="text-gray-700 mb-4 italic">"The team made my marriage proposal truly magical—she still cries when she watches the video!"</p>
|
| 334 |
+
<p class="font-semibold">- James M.</p>
|
| 335 |
+
</div>
|
| 336 |
+
|
| 337 |
+
<div data-aos="fade-up" data-aos-delay="100" class="testimonial-card p-8 rounded-2xl shadow-lg">
|
| 338 |
+
<div class="text-gold text-2xl mb-4">★★★★★</div>
|
| 339 |
+
<p class="text-gray-700 mb-4 italic">"We surprised our dad for his 60th with all our family from overseas—perfectly organized, stress-free."</p>
|
| 340 |
+
<p class="font-semibold">- Sarah K.</p>
|
| 341 |
+
</div>
|
| 342 |
+
|
| 343 |
+
<div data-aos="fade-up" data-aos-delay="200" class="testimonial-card p-8 rounded-2xl shadow-lg">
|
| 344 |
+
<div class="text-gold text-2xl mb-4">★★★★★</div>
|
| 345 |
+
<p class="text-gray-700 mb-4 italic">"From venue, to lights, to the band—they thought of everything. I'll never forget the look on my best friend's face!"</p>
|
| 346 |
+
<p class="font-semibold">- Emma L.</p>
|
| 347 |
+
</div>
|
| 348 |
+
</div>
|
| 349 |
+
|
| 350 |
+
<div class="text-center mt-12">
|
| 351 |
+
<button onclick="openForm()" class="text-gold hover:underline font-semibold">Read More Stories →</button>
|
| 352 |
+
</div>
|
| 353 |
+
</div>
|
| 354 |
+
</section>
|
| 355 |
+
|
| 356 |
+
<!-- Contact Form -->
|
| 357 |
+
<section id="contact" class="py-20 bg-white">
|
| 358 |
+
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 359 |
+
<div class="text-center mb-12">
|
| 360 |
+
<h2 class="font-serif text-4xl font-bold text-gray-800 mb-4">Let's Create Your Moment</h2>
|
| 361 |
+
<p class="text-xl text-gray-600">Tell us about your dream celebration</p>
|
| 362 |
+
</div>
|
| 363 |
+
|
| 364 |
+
<form id="contactForm" class="space-y-6">
|
| 365 |
+
<div class="grid md:grid-cols-2 gap-6">
|
| 366 |
+
<div>
|
| 367 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Name *</label>
|
| 368 |
+
<input type="text" name="name" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
|
| 369 |
+
</div>
|
| 370 |
+
<div>
|
| 371 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Email *</label>
|
| 372 |
+
<input type="email" name="email" required class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
|
| 373 |
+
</div>
|
| 374 |
+
</div>
|
| 375 |
+
|
| 376 |
+
<div class="grid md:grid-cols-2 gap-6">
|
| 377 |
+
<div>
|
| 378 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Phone</label>
|
| 379 |
+
<input type="tel" name="phone" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
|
| 380 |
+
</div>
|
| 381 |
+
<div>
|
| 382 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Type of Event</label>
|
| 383 |
+
<select name="eventType" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
|
| 384 |
+
<option>Proposal</option>
|
| 385 |
+
<option>Birthday</option>
|
| 386 |
+
<option>Reunion</option>
|
| 387 |
+
<option>Anniversary</option>
|
| 388 |
+
<option>Other</option>
|
| 389 |
+
</select>
|
| 390 |
+
</div>
|
| 391 |
+
</div>
|
| 392 |
+
|
| 393 |
+
<div class="grid md:grid-cols-2 gap-6">
|
| 394 |
+
<div>
|
| 395 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Desired Date</label>
|
| 396 |
+
<input type="date" name="date" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
|
| 397 |
+
</div>
|
| 398 |
+
<div>
|
| 399 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Guest Count</label>
|
| 400 |
+
<input type="number" name="guestCount" placeholder="Approximate" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
|
| 401 |
+
</div>
|
| 402 |
+
</div>
|
| 403 |
+
|
| 404 |
+
<div>
|
| 405 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Desired Package</label>
|
| 406 |
+
<select name="package" class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent">
|
| 407 |
+
<option>Proposal Planning</option>
|
| 408 |
+
<option>Venue & Decoration</option>
|
| 409 |
+
<option>Proposal Execution</option>
|
| 410 |
+
<option>VIP Package</option>
|
| 411 |
+
<option>Custom</option>
|
| 412 |
+
</select>
|
| 413 |
+
</div>
|
| 414 |
+
|
| 415 |
+
<div>
|
| 416 |
+
<label class="block text-sm font-medium text-gray-700 mb-2">Special Requests</label>
|
| 417 |
+
<textarea name="message" rows="4" placeholder="Tell us more about your vision..." class="w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gold focus:border-transparent"></textarea>
|
| 418 |
+
</div>
|
| 419 |
+
|
| 420 |
+
<button type="submit" class="w-full gold-gradient text-white py-4 rounded-full font-semibold text-lg hover:opacity-90 transition">
|
| 421 |
+
Submit & Get My Quote
|
| 422 |
+
</button>
|
| 423 |
+
</form>
|
| 424 |
+
</div>
|
| 425 |
+
</section>
|
| 426 |
+
|
| 427 |
+
<!-- Footer -->
|
| 428 |
+
<footer class="bg-gray-800 text-white py-12">
|
| 429 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 430 |
+
<div class="grid md:grid-cols-4 gap-8">
|
| 431 |
+
<div>
|
| 432 |
+
<h3 class="font-serif text-2xl font-bold mb-4">Unforgettable Moments</h3>
|
| 433 |
+
<p class="text-gray-400">Creating magical surprises across Sydney</p>
|
| 434 |
+
</div>
|
| 435 |
+
<div>
|
| 436 |
+
<h4 class="font-semibold mb-4">Services</h4>
|
| 437 |
+
<ul class="text-gray-400 space-y-2">
|
| 438 |
+
<li><a href="#" class="hover:text-gold transition">Proposal Planning</a></li>
|
| 439 |
+
<li><a href="#" class="hover:text-gold transition">Birthday Parties</a></li>
|
| 440 |
+
<li><a href="#" class="hover:text-gold transition">Reunions</a></li>
|
| 441 |
+
<li><a href="#" class="hover:text-gold transition">Corporate Events</a></li>
|
| 442 |
+
</ul>
|
| 443 |
+
</div>
|
| 444 |
+
<div>
|
| 445 |
+
<h4 class="font-semibold mb-4">Contact</h4>
|
| 446 |
+
<ul class="text-gray-400 space-y-2">
|
| 447 |
+
<li>hello@unforgettablemoments.com.au</li>
|
| 448 |
+
<li>+61 400 123 456</li>
|
| 449 |
+
<li>Sydney, Australia</li>
|
| 450 |
+
</ul>
|
| 451 |
+
</div>
|
| 452 |
+
<div>
|
| 453 |
+
<h4 class="font-semibold mb-4">Follow Us</h4>
|
| 454 |
+
<div class="flex space-x-4">
|
| 455 |
+
<a href="#" class="text-gray-400 hover:text-gold transition">Instagram</a>
|
| 456 |
+
<a href="#" class="text-gray-400 hover:text-gold transition">Facebook</a>
|
| 457 |
+
<a href="#" class="text-gray-400 hover:text-gold transition">TikTok</a>
|
| 458 |
+
</div>
|
| 459 |
+
</div>
|
| 460 |
+
</div>
|
| 461 |
+
<div class="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
|
| 462 |
+
<p>© 2024 Unforgettable Moments. All rights reserved. | Privacy Policy | Terms & Conditions</p>
|
| 463 |
+
</div>
|
| 464 |
+
</div>
|
| 465 |
+
</footer>
|
| 466 |
+
|
| 467 |
+
<!-- Chat Bubble -->
|
| 468 |
+
<div class="fixed bottom-6 right-6 z-50">
|
| 469 |
+
<button id="chatBtn" class="chat-bubble w-16 h-16 gold-gradient rounded-full shadow-lg flex items-center justify-center">
|
| 470 |
+
<svg class="w-8 h-8 text-white" fill="currentColor" viewBox="0 0 20 20">
|
| 471 |
+
<path fill-rule="evenodd" d="M18 10c0 3.866-3.582 7-8 7a8.841 8.841 0 01-4.083-.98L2 17l1.338-3.123C2.493 12.767 2 11.434 2 10c0-3.866 3.582-7 8-7s8 3.134 8 7zM7 9H5v2h2V9zm8 0h-2v2h2V9zM9 9h2v2H9V9z" clip-rule="evenodd"></path>
|
| 472 |
+
</svg>
|
| 473 |
+
</button>
|
| 474 |
+
</div>
|
| 475 |
+
|
| 476 |
+
<!-- Chat Modal -->
|
| 477 |
+
<div id="chatModal" class="fixed inset-0 bg-black bg-opacity-50 z-50 hidden">
|
| 478 |
+
<div class="absolute bottom-20 right-6 w-80 bg-white rounded-2xl shadow-2xl">
|
| 479 |
+
<div class="p-4 border-b">
|
| 480 |
+
<div class="flex justify-between items-center">
|
| 481 |
+
<h3 class="font-semibold">Chat with us</h3>
|
| 482 |
+
<button onclick="closeChat()" class="text-gray-500 hover:text-gray-700">
|
| 483 |
+
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
| 484 |
+
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
| 485 |
+
</svg>
|
| 486 |
+
</button>
|
| 487 |
+
</div>
|
| 488 |
+
</div>
|
| 489 |
+
<div class="p-4 h-64 overflow-y-auto">
|
| 490 |
+
<div class="mb-4">
|
| 491 |
+
<div class="bg-gray-100 p-3 rounded-lg">
|
| 492 |
+
<p class="text-sm">Hi! How can we help you create an unforgettable moment?</p>
|
| 493 |
+
</div>
|
| 494 |
+
</div>
|
| 495 |
+
</div>
|
| 496 |
+
<div class="p-4 border-t">
|
| 497 |
+
<input type="text" placeholder="Type your message..." class="w-full px-3 py-2 border rounded-lg">
|
| 498 |
+
</div>
|
| 499 |
+
</div>
|
| 500 |
+
</div>
|
| 501 |
+
|
| 502 |
+
<script>
|
| 503 |
+
// Initialize AOS
|
| 504 |
+
AOS.init({
|
| 505 |
+
duration: 1000,
|
| 506 |
+
once: true
|
| 507 |
+
});
|
| 508 |
+
|
| 509 |
+
// Smooth scroll function
|
| 510 |
+
function scrollToSection(sectionId) {
|
| 511 |
+
document.getElementById(sectionId).scrollIntoView({ behavior: 'smooth' });
|
| 512 |
+
}
|
| 513 |
+
|
| 514 |
+
// Form handling
|
| 515 |
+
document.getElementById('contactForm').addEventListener('submit', function(e) {
|
| 516 |
+
e.preventDefault();
|
| 517 |
+
alert('Thank you! We\'ll be in touch within 24 hours to discuss your special moment.');
|
| 518 |
+
this.reset();
|
| 519 |
+
});
|
| 520 |
+
|
| 521 |
+
// Package selection
|
| 522 |
+
function selectPackage(packageName) {
|
| 523 |
+
alert(`You've selected the ${packageName}. We'll reach out shortly to discuss your vision!`);
|
| 524 |
+
}
|
| 525 |
+
|
| 526 |
+
// Chat functionality
|
| 527 |
+
const chatBtn = document.getElementById('chatBtn');
|
| 528 |
+
const chatModal = document.getElementById('chatModal');
|
| 529 |
+
|
| 530 |
+
chatBtn.addEventListener('click', () => {
|
| 531 |
+
chatModal.classList.remove('hidden');
|
| 532 |
+
});
|
| 533 |
+
|
| 534 |
+
function closeChat() {
|
| 535 |
+
chatModal.classList.add('hidden');
|
| 536 |
+
}
|
| 537 |
+
|
| 538 |
+
// Mobile menu
|
| 539 |
+
const mobileMenuBtn = document.getElementById('mobile-menu-btn');
|
| 540 |
+
// Add mobile menu functionality here if needed
|
| 541 |
+
|
| 542 |
+
// Close modal when clicking outside
|
| 543 |
+
window.addEventListener('click', (e) => {
|
| 544 |
+
if (e.target === chatModal) {
|
| 545 |
+
closeChat();
|
| 546 |
+
}
|
| 547 |
+
});
|
| 548 |
+
|
| 549 |
+
// Form opening
|
| 550 |
+
function openForm() {
|
| 551 |
+
scrollToSection('contact');
|
| 552 |
+
}
|
| 553 |
+
</script>
|
| 554 |
+
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=concensure/a-word-or-two" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
|
| 555 |
+
</html>
|