|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>DreamSpace - Design Your Perfect Kitchen or Bathroom</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"> |
|
|
<style> |
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%); |
|
|
} |
|
|
.card-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.quiz-option { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.quiz-option:hover { |
|
|
transform: scale(1.03); |
|
|
} |
|
|
.quiz-option.selected { |
|
|
border-color: #3b82f6; |
|
|
background-color: #eff6ff; |
|
|
} |
|
|
.fade-in { |
|
|
animation: fadeIn 0.5s ease-in; |
|
|
} |
|
|
@keyframes fadeIn { |
|
|
from { opacity: 0; } |
|
|
to { opacity: 1; } |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="font-sans antialiased text-gray-800"> |
|
|
|
|
|
<nav class="bg-white shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-16"> |
|
|
<div class="flex items-center"> |
|
|
<div class="flex-shrink-0 flex items-center"> |
|
|
<i class="fas fa-cubes text-blue-500 text-2xl mr-2"></i> |
|
|
<span class="text-xl font-bold text-gray-900">DreamSpace</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="hidden sm:ml-6 sm:flex sm:items-center"> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600">Inspiration</a> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600">How It Works</a> |
|
|
<a href="#" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-blue-600">Reviews</a> |
|
|
<button class="ml-4 px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"> |
|
|
Start My Project |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<div class="hero-gradient"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:py-24 sm:px-6 lg:px-8"> |
|
|
<div class="text-center"> |
|
|
<h1 class="text-4xl font-extrabold tracking-tight text-gray-900 sm:text-5xl md:text-6xl"> |
|
|
<span class="block">Design Your Dream</span> |
|
|
<span class="block text-blue-600">Kitchen or Bathroom</span> |
|
|
</h1> |
|
|
<p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"> |
|
|
From inspiration to installation - we guide you through every step of creating your perfect space. |
|
|
</p> |
|
|
<div class="mt-8 flex justify-center"> |
|
|
<div class="inline-flex rounded-md shadow"> |
|
|
<button id="startProjectBtn" class="inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 md:py-4 md:text-lg md:px-10 transition duration-300 transform hover:scale-105"> |
|
|
Start My Project |
|
|
<i class="fas fa-arrow-right ml-2"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Get Inspired |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
Browse our collection of beautifully designed kitchens and bathrooms |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="card-hover rounded-lg overflow-hidden shadow-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Modern Kitchen" class="w-full h-64 object-cover"> |
|
|
<div class="px-6 py-4"> |
|
|
<div class="font-bold text-xl mb-2">Modern Minimalist Kitchen</div> |
|
|
<p class="text-gray-700 text-base"> |
|
|
Sleek cabinetry with quartz countertops and smart storage solutions. |
|
|
</p> |
|
|
</div> |
|
|
<div class="px-6 pt-4 pb-2"> |
|
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Contemporary</span> |
|
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#SmartHome</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-hover rounded-lg overflow-hidden shadow-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1600121848594-d8644e57abab?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Rustic Bathroom" class="w-full h-64 object-cover"> |
|
|
<div class="px-6 py-4"> |
|
|
<div class="font-bold text-xl mb-2">Rustic Spa Bathroom</div> |
|
|
<p class="text-gray-700 text-base"> |
|
|
Natural wood accents with freestanding tub and rainfall shower. |
|
|
</p> |
|
|
</div> |
|
|
<div class="px-6 pt-4 pb-2"> |
|
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Rustic</span> |
|
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Spa</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="card-hover rounded-lg overflow-hidden shadow-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1556911220-bff31c812dba?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Traditional Kitchen" class="w-full h-64 object-cover"> |
|
|
<div class="px-6 py-4"> |
|
|
<div class="font-bold text-xl mb-2">Classic Country Kitchen</div> |
|
|
<p class="text-gray-700 text-base"> |
|
|
Warm wood tones with farmhouse sink and custom cabinetry. |
|
|
</p> |
|
|
</div> |
|
|
<div class="px-6 pt-4 pb-2"> |
|
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Traditional</span> |
|
|
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2">#Family</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto py-16 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl"> |
|
|
Real Homeowner Stories |
|
|
</h2> |
|
|
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto"> |
|
|
See how we've transformed spaces for families just like yours |
|
|
</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/32.jpg" alt="Sarah J."> |
|
|
<div> |
|
|
<h3 class="font-bold text-gray-900">Sarah J.</h3> |
|
|
<p class="text-gray-600">Austin, TX</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4"> |
|
|
"DreamSpace made our kitchen renovation stress-free. The 3D design tool helped us visualize exactly what we wanted before committing." |
|
|
</p> |
|
|
<div class="flex"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/men/45.jpg" alt="Michael T."> |
|
|
<div> |
|
|
<h3 class="font-bold text-gray-900">Michael T.</h3> |
|
|
<p class="text-gray-600">Denver, CO</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4"> |
|
|
"Our master bathroom is now a sanctuary. The team helped us maximize our small space with clever storage solutions we never would have thought of." |
|
|
</p> |
|
|
<div class="flex"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-6 rounded-lg shadow-md card-hover"> |
|
|
<div class="flex items-center mb-4"> |
|
|
<img class="w-12 h-12 rounded-full mr-4" src="https://randomuser.me/api/portraits/women/68.jpg" alt="Priya K."> |
|
|
<div> |
|
|
<h3 class="font-bold text-gray-900">Priya K.</h3> |
|
|
<p class="text-gray-600">Seattle, WA</p> |
|
|
</div> |
|
|
</div> |
|
|
<p class="text-gray-700 mb-4"> |
|
|
"From the initial design consultation to the final installation, every step was seamless. We love our new kitchen and use it every day!" |
|
|
</p> |
|
|
<div class="flex"> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
<i class="fas fa-star text-yellow-400"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="quizModal" class="fixed inset-0 overflow-y-auto z-50 hidden"> |
|
|
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0"> |
|
|
<div class="fixed inset-0 transition-opacity" aria-hidden="true"> |
|
|
<div class="absolute inset-0 bg-gray-500 opacity-75"></div> |
|
|
</div> |
|
|
|
|
|
<div class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full"> |
|
|
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4"> |
|
|
|
|
|
<div class="mb-6"> |
|
|
<div class="flex justify-between mb-1"> |
|
|
<span class="text-sm font-medium text-blue-700">Project Discovery</span> |
|
|
<span id="progressPercent" class="text-sm font-medium text-blue-700">0%</span> |
|
|
</div> |
|
|
<div class="w-full bg-gray-200 rounded-full h-2.5"> |
|
|
<div id="progressBar" class="bg-blue-600 h-2.5 rounded-full" style="width: 0%"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="quizContent"> |
|
|
|
|
|
<div id="step1" class="fade-in"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> |
|
|
What type of project are you planning? |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'projectType', 'kitchen')"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-utensils text-2xl text-blue-500 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">Kitchen</h4> |
|
|
<p class="text-sm text-gray-500">Remodel or new installation</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'projectType', 'bathroom')"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-bath text-2xl text-blue-500 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">Bathroom</h4> |
|
|
<p class="text-sm text-gray-500">Full or partial remodel</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'projectType', 'both')"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-home text-2xl text-blue-500 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">Both</h4> |
|
|
<p class="text-sm text-gray-500">Whole space transformation</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'projectType', 'not-sure')"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-question-circle text-2xl text-blue-500 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">Not Sure</h4> |
|
|
<p class="text-sm text-gray-500">Need guidance</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step2" class="hidden fade-in"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> |
|
|
Which style speaks to you most? |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'style', 'modern')"> |
|
|
<img src="https://images.unsplash.com/photo-1583845112208-97331140aca9?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Modern" class="w-full h-32 object-cover rounded mb-2"> |
|
|
<h4 class="font-medium">Modern</h4> |
|
|
<p class="text-sm text-gray-500">Clean lines, minimal, sleek</p> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'style', 'traditional')"> |
|
|
<img src="https://images.unsplash.com/photo-1600121848594-d8644e57abab?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Traditional" class="w-full h-32 object-cover rounded mb-2"> |
|
|
<h4 class="font-medium">Traditional</h4> |
|
|
<p class="text-sm text-gray-500">Classic, timeless details</p> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'style', 'transitional')"> |
|
|
<img src="https://images.unsplash.com/photo-1600566752227-8f3a8a8f8b8d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Transitional" class="w-full h-32 object-cover rounded mb-2"> |
|
|
<h4 class="font-medium">Transitional</h4> |
|
|
<p class="text-sm text-gray-500">Mix of modern and traditional</p> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'style', 'not-sure')"> |
|
|
<img src="https://images.unsplash.com/photo-1600566753190-17f0baa2a6c3?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60" alt="Not Sure" class="w-full h-32 object-cover rounded mb-2"> |
|
|
<h4 class="font-medium">Not Sure</h4> |
|
|
<p class="text-sm text-gray-500">Need style consultation</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step3" class="hidden fade-in"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> |
|
|
What's your estimated budget range? |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'budget', '5k-15k')"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h4 class="font-medium">$5K - $15K</h4> |
|
|
<p class="text-sm text-gray-500">Cosmetic updates, partial remodel</p> |
|
|
</div> |
|
|
<i class="fas fa-paint-roller text-blue-500 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'budget', '15k-30k')"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h4 class="font-medium">$15K - $30K</h4> |
|
|
<p class="text-sm text-gray-500">Full remodel with mid-range materials</p> |
|
|
</div> |
|
|
<i class="fas fa-tools text-blue-500 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'budget', '30k-50k')"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h4 class="font-medium">$30K - $50K</h4> |
|
|
<p class="text-sm text-gray-500">High-end materials with custom features</p> |
|
|
</div> |
|
|
<i class="fas fa-gem text-blue-500 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'budget', '50k+')"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h4 class="font-medium">$50K+</h4> |
|
|
<p class="text-sm text-gray-500">Luxury materials and complete transformation</p> |
|
|
</div> |
|
|
<i class="fas fa-crown text-blue-500 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'budget', 'not-sure')"> |
|
|
<div class="flex justify-between items-center"> |
|
|
<div> |
|
|
<h4 class="font-medium">Not Sure</h4> |
|
|
<p class="text-sm text-gray-500">Need budget consultation</p> |
|
|
</div> |
|
|
<i class="fas fa-question text-blue-500 text-xl"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step4" class="hidden fade-in"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> |
|
|
When would you like to start your project? |
|
|
</h3> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'timeline', 'immediately')"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-bolt text-2xl text-blue-500 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">Immediately</h4> |
|
|
<p class="text-sm text-gray-500">Ready to start within 1 month</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'timeline', '1-3-months')"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-calendar-week text-2xl text-blue-500 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">1-3 Months</h4> |
|
|
<p class="text-sm text-gray-500">Planning phase</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'timeline', '3-6-months')"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-calendar-alt text-2xl text-blue-500 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">3-6 Months</h4> |
|
|
<p class="text-sm text-gray-500">Saving/budgeting phase</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="quiz-option p-4 border-2 border-gray-200 rounded-lg cursor-pointer" onclick="selectOption(this, 'timeline', 'not-sure')"> |
|
|
<div class="flex items-center"> |
|
|
<i class="fas fa-question-circle text-2xl text-blue-500 mr-3"></i> |
|
|
<div> |
|
|
<h4 class="font-medium">Not Sure</h4> |
|
|
<p class="text-sm text-gray-500">Exploring options</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step5" class="hidden fade-in"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> |
|
|
Let's get in touch |
|
|
</h3> |
|
|
<p class="text-gray-500 mb-6">We'll use this information to create your personalized project dashboard.</p> |
|
|
|
|
|
<div class="grid grid-cols-1 gap-4"> |
|
|
<div> |
|
|
<label for="name" class="block text-sm font-medium text-gray-700">Full Name</label> |
|
|
<input type="text" id="name" name="name" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="email" class="block text-sm font-medium text-gray-700">Email Address</label> |
|
|
<input type="email" id="email" name="email" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border"> |
|
|
</div> |
|
|
<div> |
|
|
<label for="phone" class="block text-sm font-medium text-gray-700">Phone Number (optional)</label> |
|
|
<input type="tel" id="phone" name="phone" class="mt-1 focus:ring-blue-500 focus:border-blue-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md p-2 border"> |
|
|
</div> |
|
|
<div class="flex items-center"> |
|
|
<input id="createAccount" name="createAccount" type="checkbox" class="focus:ring-blue-500 h-4 w-4 text-blue-600 border-gray-300 rounded"> |
|
|
<label for="createAccount" class="ml-2 block text-sm text-gray-700"> |
|
|
Create an account to save my progress |
|
|
</label> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="step6" class="hidden fade-in"> |
|
|
<h3 class="text-lg leading-6 font-medium text-gray-900 mb-4"> |
|
|
Your Project Summary |
|
|
</h3> |
|
|
<p class="text-gray-500 mb-6">Review your selections before we create your personalized dashboard.</p> |
|
|
|
|
|
<div class="bg-gray-50 p-4 rounded-lg mb-6"> |
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-4"> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700">Project Type</h4> |
|
|
<p id="summaryProjectType" class="text-gray-900">-</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700">Style Preference</h4> |
|
|
<p id="summaryStyle" class="text-gray-900">-</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700">Budget Range</h4> |
|
|
<p id="summaryBudget" class="text-gray-900">-</p> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700">Timeline</h4> |
|
|
<p id="summaryTimeline" class="text-gray-900">-</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="bg-blue-50 p-4 rounded-lg"> |
|
|
<h4 class="font-medium text-blue-800 mb-2">Next Steps</h4> |
|
|
<ul class="list-disc list-inside text-blue-700 text-sm space-y-1"> |
|
|
<li>Access your personalized project dashboard</li> |
|
|
<li>Browse designs matched to your preferences</li> |
|
|
<li>Connect with a design consultant</li> |
|
|
<li>Get accurate cost estimates</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"> |
|
|
<button id="nextBtn" type="button" class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-blue-600 text-base font-medium text-white hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
Next |
|
|
</button> |
|
|
<button id="backBtn" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm hidden"> |
|
|
Back |
|
|
</button> |
|
|
<button id="closeBtn" type="button" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"> |
|
|
Close |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<footer class="bg-gray-800"> |
|
|
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid grid-cols-2 md:grid-cols-4 gap-8"> |
|
|
<div> |
|
|
<h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Services</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Kitchen Design</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Bathroom Design</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">3D Planning</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Installation</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Resources</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Inspiration Gallery</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Cost Calculator</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Design Tips</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">FAQ</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Company</h3> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">About Us</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Reviews</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Careers</a></li> |
|
|
<li><a href="#" class="text-gray-300 hover:text-white">Contact</a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h3 class="text-white text-sm font-semibold tracking-wider uppercase mb-4">Connect</h3> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-facebook-f"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-instagram"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-pinterest-p"></i> |
|
|
</a> |
|
|
<a href="#" class="text-gray-300 hover:text-white"> |
|
|
<i class="fab fa-houzz"></i> |
|
|
</a> |
|
|
</div> |
|
|
<div class="mt-4"> |
|
|
<button class="px-4 py-2 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700"> |
|
|
Start My Project |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-8 border-t border-gray-700 pt-8 flex flex-col md:flex-row justify-between"> |
|
|
<p class="text-gray-400 text-sm"> |
|
|
© 2023 DreamSpace. All rights reserved. |
|
|
</p> |
|
|
<div class="flex space-x-6 mt-4 md:mt-0"> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300 text-sm">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300 text-sm">Terms of Service</a> |
|
|
<a href="#" class="text-gray-400 hover:text-gray-300 text-sm">Accessibility</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
const quizState = { |
|
|
currentStep: 1, |
|
|
totalSteps: 6, |
|
|
answers: { |
|
|
projectType: null, |
|
|
style: null, |
|
|
budget: null, |
|
|
timeline: null, |
|
|
contactInfo: null |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
const quizModal = document.getElementById('quizModal'); |
|
|
const startProjectBtn = document.getElementById('startProjectBtn'); |
|
|
const closeBtn = document.getElementById('closeBtn'); |
|
|
const nextBtn = document.getElementById('nextBtn'); |
|
|
const backBtn = document.getElementById('backBtn'); |
|
|
const progressBar = document.getElementById('progressBar'); |
|
|
const progressPercent = document.getElementById('progressPercent'); |
|
|
|
|
|
|
|
|
startProjectBtn.addEventListener('click', openQuizModal); |
|
|
closeBtn.addEventListener('click', closeQuizModal); |
|
|
nextBtn.addEventListener('click', goToNextStep); |
|
|
backBtn.addEventListener('click', goToPreviousStep); |
|
|
|
|
|
|
|
|
function openQuizModal() { |
|
|
quizModal.classList.remove('hidden'); |
|
|
document.body.style.overflow = 'hidden'; |
|
|
updateProgress(); |
|
|
} |
|
|
|
|
|
function closeQuizModal() { |
|
|
quizModal.classList.add('hidden'); |
|
|
document.body.style.overflow = 'auto'; |
|
|
resetQuiz(); |
|
|
} |
|
|
|
|
|
function resetQuiz() { |
|
|
quizState.currentStep = 1; |
|
|
quizState.answers = { |
|
|
projectType: null, |
|
|
style: null, |
|
|
budget: null, |
|
|
timeline: null, |
|
|
contactInfo: null |
|
|
}; |
|
|
|
|
|
|
|
|
document.querySelectorAll('[id^="step"]').forEach(step => { |
|
|
step.classList.add('hidden'); |
|
|
}); |
|
|
document.getElementById('step1').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
backBtn.classList.add('hidden'); |
|
|
nextBtn.textContent = 'Next'; |
|
|
updateProgress(); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.quiz-option').forEach(option => { |
|
|
option.classList.remove('selected'); |
|
|
}); |
|
|
} |
|
|
|
|
|
function selectOption(element, question, value) { |
|
|
|
|
|
const parent = element.parentElement; |
|
|
parent.querySelectorAll('.quiz-option').forEach(option => { |
|
|
option.classList.remove('selected'); |
|
|
}); |
|
|
|
|
|
|
|
|
element.classList.add('selected'); |
|
|
|
|
|
|
|
|
quizState.answers[question] = value; |
|
|
|
|
|
|
|
|
if (quizState.currentStep !== 5) { |
|
|
nextBtn.disabled = false; |
|
|
} |
|
|
} |
|
|
|
|
|
function goToNextStep() { |
|
|
|
|
|
if (!validateCurrentStep()) return; |
|
|
|
|
|
|
|
|
if (quizState.currentStep === quizState.totalSteps) { |
|
|
submitQuiz(); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById(`step${quizState.currentStep}`).classList.add('hidden'); |
|
|
|
|
|
|
|
|
quizState.currentStep++; |
|
|
|
|
|
|
|
|
document.getElementById(`step${quizState.currentStep}`).classList.remove('hidden'); |
|
|
|
|
|
|
|
|
updateProgress(); |
|
|
backBtn.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
if (quizState.currentStep === quizState.totalSteps) { |
|
|
updateSummary(); |
|
|
nextBtn.textContent = 'Create My Dashboard'; |
|
|
} |
|
|
} |
|
|
|
|
|
function goToPreviousStep() { |
|
|
|
|
|
document.getElementById(`step${quizState.currentStep}`).classList.add('hidden'); |
|
|
|
|
|
|
|
|
quizState.currentStep--; |
|
|
|
|
|
|
|
|
document.getElementById(`step${quizState.currentStep}`).classList.remove('hidden'); |
|
|
|
|
|
|
|
|
updateProgress(); |
|
|
|
|
|
|
|
|
if (quizState.currentStep === 1) { |
|
|
backBtn.classList.add('hidden'); |
|
|
} |
|
|
|
|
|
|
|
|
if (quizState.currentStep !== quizState.totalSteps) { |
|
|
nextBtn.textContent = 'Next'; |
|
|
} |
|
|
} |
|
|
|
|
|
function validateCurrentStep() { |
|
|
switch(quizState.currentStep) { |
|
|
case 1: |
|
|
if (!quizState.answers.projectType) { |
|
|
alert('Please select a project type'); |
|
|
return false; |
|
|
} |
|
|
break; |
|
|
case 2: |
|
|
if (!quizState.answers.style) { |
|
|
alert('Please select a style preference'); |
|
|
return false; |
|
|
} |
|
|
break; |
|
|
case 3: |
|
|
if (!quizState.answers.budget) { |
|
|
alert('Please select a budget range'); |
|
|
return false; |
|
|
} |
|
|
break; |
|
|
case 4: |
|
|
if (!quizState.answers.timeline) { |
|
|
alert('Please select a timeline'); |
|
|
return false; |
|
|
} |
|
|
break; |
|
|
case 5: |
|
|
const name = document.getElementById('name').value; |
|
|
const email = document.getElementById('email').value; |
|
|
|
|
|
if (!name || !email) { |
|
|
alert('Please provide at least your name and email'); |
|
|
return false; |
|
|
} |
|
|
|
|
|
|
|
|
quizState.answers.contactInfo = { |
|
|
name: name, |
|
|
email: email, |
|
|
phone: document.getElementById('phone').value, |
|
|
createAccount: document.getElementById('createAccount').checked |
|
|
}; |
|
|
break; |
|
|
} |
|
|
return true; |
|
|
} |
|
|
|
|
|
function updateProgress() { |
|
|
const progress = (quizState.currentStep / quizState.totalSteps) * 100; |
|
|
progressBar.style.width = `${progress}%`; |
|
|
progressPercent.textContent = `${Math.round(progress)}%`; |
|
|
} |
|
|
|
|
|
function updateSummary() { |
|
|
document.getElementById('summaryProjectType').textContent = formatAnswer(quizState.answers.projectType); |
|
|
document.getElementById('summaryStyle').textContent = formatAnswer(quizState.answers.style); |
|
|
document.getElementById('summaryBudget').textContent = formatAnswer(quizState.answers.budget); |
|
|
document.getElementById('summaryTimeline').textContent = formatAnswer(quizState.answers.timeline); |
|
|
} |
|
|
|
|
|
function formatAnswer(value) { |
|
|
if (!value) return 'Not specified'; |
|
|
|
|
|
const mappings = { |
|
|
'kitchen': 'Kitchen', |
|
|
'bathroom': 'Bathroom', |
|
|
'both': 'Kitchen & Bathroom', |
|
|
'not-sure': 'Need guidance', |
|
|
'modern': 'Modern', |
|
|
'traditional': 'Traditional', |
|
|
'transitional': 'Transitional', |
|
|
'5k-15k': '$5K - $15K', |
|
|
'15k-30k': '$15K - $30K', |
|
|
'30k-50k': '$30K - $50K', |
|
|
'50k+': '$50K+', |
|
|
'immediately': 'Immediately (within 1 month)', |
|
|
'1-3-months': '1-3 Months', |
|
|
'3-6-months': '3-6 Months' |
|
|
}; |
|
|
|
|
|
return mappings[value] || value; |
|
|
} |
|
|
|
|
|
function submitQuiz() { |
|
|
|
|
|
console.log('Quiz submitted:', quizState.answers); |
|
|
|
|
|
|
|
|
alert('Thank you! Your project dashboard is being created. You will receive an email with next steps shortly.'); |
|
|
|
|
|
|
|
|
closeQuizModal(); |
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
</script> |
|
|
<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=LukasBe/ds" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
