Spaces:

LukasBe
/

dc-template

Running

App Files Files Community

dc-template / index.html

LukasBe

Add 2 files

a8e36f7 verified 10 months ago

raw

history blame contribute delete

57.3 kB

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>DesignCraft \| Custom Kitchen & Bathroom Solutions</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>
	.gradient-bg {
	background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
	}
	.design-card: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);
	}
	.configurator-container {
	height: 500px;
	background-color: #f0f4f8;
	border-radius: 1rem;
	position: relative;
	overflow: hidden;
	}
	.progress-step {
	width: 2.5rem;
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	font-weight: 600;
	}
	.progress-step.active {
	background-color: #3b82f6;
	color: white;
	}
	.progress-step.completed {
	background-color: #10b981;
	color: white;
	}
	.progress-line {
	height: 0.25rem;
	flex: 1;
	background-color: #e5e7eb;
	}
	.progress-line.active {
	background-color: #3b82f6;
	}
	.progress-line.completed {
	background-color: #10b981;
	}
	.chat-bubble {
	max-width: 70%;
	border-radius: 1rem;
	padding: 1rem;
	margin-bottom: 0.5rem;
	}
	.user-bubble {
	background-color: #3b82f6;
	color: white;
	margin-left: auto;
	border-bottom-right-radius: 0.25rem;
	}
	.designer-bubble {
	background-color: #e5e7eb;
	margin-right: auto;
	border-bottom-left-radius: 0.25rem;
	}
	.tooltip {
	position: relative;
	display: inline-block;
	}
	.tooltip .tooltip-text {
	visibility: hidden;
	width: 200px;
	background-color: #333;
	color: #fff;
	text-align: center;
	border-radius: 6px;
	padding: 5px;
	position: absolute;
	z-index: 1;
	bottom: 125%;
	left: 50%;
	transform: translateX(-50%);
	opacity: 0;
	transition: opacity 0.3s;
	}
	.tooltip:hover .tooltip-text {
	visibility: visible;
	opacity: 1;
	}
	@keyframes pulse {
	0%, 100% {
	opacity: 1;
	}
	50% {
	opacity: 0.5;
	}
	}
	.animate-pulse {
	animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
	}
	</style>
	</head>
	<body class="font-sans antialiased text-gray-800">
	<!-- Navigation -->
	<nav class="bg-white shadow-sm sticky top-0 z-50">
	<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-ruler-combined text-blue-500 text-2xl mr-2"></i>
	<span class="text-xl font-bold text-gray-900">DesignCraft</span>
	</div>
	<div class="hidden sm:ml-6 sm:flex sm:space-x-8">
	<a href="#" class="border-blue-500 text-gray-900 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Home</a>
	<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Kitchens</a>
	<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Bathrooms</a>
	<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">Designers</a>
	<a href="#" class="border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700 inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium">About</a>
	</div>
	</div>
	<div class="hidden sm:ml-6 sm:flex sm:items-center">
	<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">Start Your Project</button>
	</div>
	<div class="-mr-2 flex items-center sm:hidden">
	<button type="button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-400 hover:text-gray-500 hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue-500" aria-controls="mobile-menu" aria-expanded="false">
	<span class="sr-only">Open main menu</span>
	<i class="fas fa-bars"></i>
	</button>
	</div>
	</div>
	</div>

	<!-- Mobile menu -->
	<div class="sm:hidden hidden" id="mobile-menu">
	<div class="pt-2 pb-3 space-y-1">
	<a href="#" class="bg-blue-50 border-blue-500 text-blue-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Home</a>
	<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Kitchens</a>
	<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Bathrooms</a>
	<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">Designers</a>
	<a href="#" class="border-transparent text-gray-500 hover:bg-gray-50 hover:border-gray-300 hover:text-gray-700 block pl-3 pr-4 py-2 border-l-4 text-base font-medium">About</a>
	<div class="mt-4 pl-3 pr-4">
	<button class="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-base font-medium transition duration-150 ease-in-out">Start Your Project</button>
	</div>
	</div>
	</div>
	</nav>

	<!-- Hero Section -->
	<div class="gradient-bg">
	<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">
	Collaborate with expert designers, visualize in 3D, and bring your vision to life with our seamless design-to-production platform.
	</p>
	<div class="mt-8 flex justify-center">
	<div class="inline-flex rounded-md shadow">
	<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700">
	Get Started
	<i class="fas fa-arrow-right ml-2"></i>
	</a>
	</div>
	<div class="ml-3 inline-flex">
	<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-700 bg-blue-100 hover:bg-blue-200">
	<i class="fas fa-play-circle mr-2"></i>
	Watch Demo
	</a>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- How It Works Section -->
	<div class="py-12 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:text-center">
	<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Process</h2>
	<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
	From Concept to Completion
	</p>
	<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
	Our streamlined process makes custom design accessible to everyone.
	</p>
	</div>

	<div class="mt-20">
	<div class="flex items-center justify-between mb-8">
	<div class="flex items-center">
	<div class="progress-step active">1</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">Discovery & Planning</h3>
	<p class="mt-1 text-gray-500">Tell us about your space and style preferences.</p>
	</div>
	</div>
	<div class="progress-line active"></div>

	<div class="flex items-center">
	<div class="progress-step">2</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">Design Collaboration</h3>
	<p class="mt-1 text-gray-500">Work with our experts to refine your vision.</p>
	</div>
	</div>
	<div class="progress-line"></div>

	<div class="flex items-center">
	<div class="progress-step">3</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">Final Approval</h3>
	<p class="mt-1 text-gray-500">Review and approve your custom design.</p>
	</div>
	</div>
	<div class="progress-line"></div>

	<div class="flex items-center">
	<div class="progress-step">4</div>
	<div class="ml-4">
	<h3 class="text-lg font-medium text-gray-900">Production & Installation</h3>
	<p class="mt-1 text-gray-500">We build and install your dream space.</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Design Configurator Section -->
	<div class="py-12 bg-gray-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:text-center mb-12">
	<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Try It Now</h2>
	<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
	Interactive Design Configurator
	</p>
	<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
	Start designing your perfect kitchen or bathroom with our easy-to-use tools.
	</p>
	</div>

	<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
	<div class="lg:col-span-2">
	<div class="configurator-container flex items-center justify-center">
	<div class="text-center p-8">
	<i class="fas fa-cube text-5xl text-gray-400 mb-4"></i>
	<h3 class="text-xl font-medium text-gray-700">3D Design Preview</h3>
	<p class="mt-2 text-gray-500">Your interactive design will appear here as you make selections.</p>
	<button class="mt-4 bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
	Start Designing
	</button>
	</div>
	</div>
	</div>
	<div>
	<div class="bg-white p-6 rounded-lg shadow-sm h-full">
	<h3 class="text-lg font-medium text-gray-900 mb-4">Design Options</h3>

	<div class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Room Type</label>
	<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
	<option>Kitchen</option>
	<option>Bathroom</option>
	<option>Laundry Room</option>
	<option>Walk-in Closet</option>
	</select>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Style</label>
	<div class="grid grid-cols-3 gap-2">
	<button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
	<i class="fas fa-home text-gray-600"></i>
	<span class="block text-xs mt-1">Modern</span>
	</button>
	<button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
	<i class="fas fa-archway text-gray-600"></i>
	<span class="block text-xs mt-1">Traditional</span>
	</button>
	<button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
	<i class="fas fa-industry text-gray-600"></i>
	<span class="block text-xs mt-1">Industrial</span>
	</button>
	<button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
	<i class="fas fa-leaf text-gray-600"></i>
	<span class="block text-xs mt-1">Scandinavian</span>
	</button>
	<button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
	<i class="fas fa-umbrella-beach text-gray-600"></i>
	<span class="block text-xs mt-1">Coastal</span>
	</button>
	<button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
	<i class="fas fa-paint-roller text-gray-600"></i>
	<span class="block text-xs mt-1">Custom</span>
	</button>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Color Scheme</label>
	<div class="flex space-x-2">
	<div class="w-8 h-8 rounded-full bg-gray-200 border-2 border-white shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
	<div class="w-8 h-8 rounded-full bg-gray-800 border-2 border-white shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
	<div class="w-8 h-8 rounded-full bg-white border-2 border-gray-200 shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
	<div class="w-8 h-8 rounded-full bg-blue-500 border-2 border-white shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
	<div class="w-8 h-8 rounded-full bg-green-500 border-2 border-white shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
	<div class="w-8 h-8 rounded-full bg-yellow-500 border-2 border-white shadow-sm cursor-pointer hover:ring-2 hover:ring-blue-500"></div>
	</div>
	</div>

	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Upload Your Floor Plan (Optional)</label>
	<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md">
	<div class="space-y-1 text-center">
	<div class="flex text-sm text-gray-600">
	<label class="relative cursor-pointer bg-white rounded-md font-medium text-blue-600 hover:text-blue-500 focus-within:outline-none">
	<span>Upload a file</span>
	<input type="file" class="sr-only">
	</label>
	<p class="pl-1">or drag and drop</p>
	</div>
	<p class="text-xs text-gray-500">PNG, JPG, PDF up to 10MB</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Design Collaboration Demo -->
	<div class="py-12 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:text-center mb-12">
	<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Collaboration</h2>
	<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
	Work With Expert Designers
	</p>
	<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
	Our platform connects you with professionals who will help refine your vision.
	</p>
	</div>

	<div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
	<div>
	<div class="bg-gray-50 p-6 rounded-lg h-full">
	<h3 class="text-lg font-medium text-gray-900 mb-4">Designer Collaboration Tools</h3>

	<div class="space-y-6">
	<div>
	<div class="flex items-start">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-10 w-10 rounded-md bg-blue-500 text-white">
	<i class="fas fa-comments"></i>
	</div>
	</div>
	<div class="ml-4">
	<h4 class="text-sm font-medium text-gray-900">Real-time Messaging</h4>
	<p class="mt-1 text-sm text-gray-500">Chat directly with your designer to discuss ideas and changes.</p>
	</div>
	</div>
	</div>

	<div>
	<div class="flex items-start">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-10 w-10 rounded-md bg-green-500 text-white">
	<i class="fas fa-drafting-compass"></i>
	</div>
	</div>
	<div class="ml-4">
	<h4 class="text-sm font-medium text-gray-900">Design Annotations</h4>
	<p class="mt-1 text-sm text-gray-500">Mark up designs with notes and sketches for precise feedback.</p>
	</div>
	</div>
	</div>

	<div>
	<div class="flex items-start">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-10 w-10 rounded-md bg-purple-500 text-white">
	<i class="fas fa-history"></i>
	</div>
	</div>
	<div class="ml-4">
	<h4 class="text-sm font-medium text-gray-900">Version History</h4>
	<p class="mt-1 text-sm text-gray-500">Track all changes and revert to previous versions if needed.</p>
	</div>
	</div>
	</div>

	<div>
	<div class="flex items-start">
	<div class="flex-shrink-0">
	<div class="flex items-center justify-center h-10 w-10 rounded-md bg-yellow-500 text-white">
	<i class="fas fa-file-invoice-dollar"></i>
	</div>
	</div>
	<div class="ml-4">
	<h4 class="text-sm font-medium text-gray-900">Instant Quotes</h4>
	<p class="mt-1 text-sm text-gray-500">Get real-time pricing updates as you make design changes.</p>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<div>
	<div class="border rounded-lg overflow-hidden h-full">
	<div class="bg-gray-800 text-white px-4 py-3 flex items-center">
	<div class="flex-shrink-0 h-3 w-3 rounded-full bg-red-500 mr-2"></div>
	<div class="flex-shrink-0 h-3 w-3 rounded-full bg-yellow-500 mr-2"></div>
	<div class="flex-shrink-0 h-3 w-3 rounded-full bg-green-500 mr-2"></div>
	<div class="ml-2 text-sm font-medium">Design Collaboration</div>
	</div>
	<div class="bg-white p-4 h-96 overflow-y-auto">
	<div class="space-y-4">
	<div class="chat-bubble designer-bubble">
	<div class="flex items-start">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
	<i class="fas fa-user-tie text-gray-600"></i>
	</div>
	<div class="ml-3">
	<div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
	<div class="mt-1 text-sm text-gray-700">
	<p>Hi there! I'm your assigned designer. I've reviewed your initial kitchen layout and have some suggestions to optimize the workflow.</p>
	</div>
	<div class="mt-1 text-xs text-gray-500">10:24 AM</div>
	</div>
	</div>
	</div>

	<div class="chat-bubble user-bubble">
	<div class="flex items-start">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-blue-500 flex items-center justify-center text-white">
	<i class="fas fa-user"></i>
	</div>
	<div class="ml-3">
	<div class="text-sm font-medium text-white">You</div>
	<div class="mt-1 text-sm text-white">
	<p>Hi Sarah! Thanks for looking at my design. What changes would you recommend?</p>
	</div>
	<div class="mt-1 text-xs text-blue-100">10:26 AM</div>
	</div>
	</div>
	</div>

	<div class="chat-bubble designer-bubble">
	<div class="flex items-start">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
	<i class="fas fa-user-tie text-gray-600"></i>
	</div>
	<div class="ml-3">
	<div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
	<div class="mt-1 text-sm text-gray-700">
	<p>I've marked up your design with some suggestions. The main changes are:</p>
	<ul class="list-disc pl-5 mt-2">
	<li>Moving the refrigerator closer to the prep area</li>
	<li>Adding more counter space near the stove</li>
	<li>Suggesting a different cabinet configuration for better storage</li>
	</ul>
	<div class="mt-2 p-2 bg-gray-100 rounded">
	<div class="flex items-center">
	<i class="fas fa-paperclip text-gray-500 mr-2"></i>
	<span class="text-sm font-medium text-blue-600 hover:text-blue-500 cursor-pointer">Revised_Kitchen_Design_v2.pdf</span>
	</div>
	</div>
	</div>
	<div class="mt-1 text-xs text-gray-500">10:28 AM</div>
	</div>
	</div>
	</div>

	<div class="chat-bubble designer-bubble">
	<div class="flex items-start">
	<div class="flex-shrink-0 h-10 w-10 rounded-full bg-gray-300 flex items-center justify-center">
	<i class="fas fa-user-tie text-gray-600"></i>
	</div>
	<div class="ml-3">
	<div class="text-sm font-medium text-gray-900">Sarah Johnson</div>
	<div class="mt-1 text-sm text-gray-700">
	<p>I've also updated the 3D model so you can visualize these changes. Click the link below to view it:</p>
	<button class="mt-2 inline-flex items-center px-3 py-1 border border-transparent text-xs font-medium rounded shadow-sm text-white bg-blue-600 hover:bg-blue-700">
	View 3D Model
	</button>
	</div>
	<div class="mt-1 text-xs text-gray-500">10:29 AM</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	<div class="bg-gray-50 px-4 py-3 border-t">
	<div class="flex">
	<input type="text" placeholder="Type your message..." class="flex-1 border rounded-l-md px-3 py-2 focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
	<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-r-md">
	<i class="fas fa-paper-plane"></i>
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Production & Fulfillment -->
	<div class="py-12 bg-gray-50">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:text-center mb-12">
	<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Manufacturing</h2>
	<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
	Seamless Production Process
	</p>
	<p class="mt-4 max-w-2xl text-xl text-gray-500 lg:mx-auto">
	From approved design to installation, we handle everything with precision.
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">
	<div class="bg-white p-6 rounded-lg shadow-sm">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-blue-500 text-white mb-4">
	<i class="fas fa-file-signature"></i>
	</div>
	<h3 class="text-lg font-medium text-gray-900 mb-2">Design Approval</h3>
	<p class="text-gray-500">Your final design is converted into production-ready specifications with detailed measurements and material requirements.</p>
	</div>

	<div class="bg-white p-6 rounded-lg shadow-sm">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-green-500 text-white mb-4">
	<i class="fas fa-cogs"></i>
	</div>
	<h3 class="text-lg font-medium text-gray-900 mb-2">Precision Manufacturing</h3>
	<p class="text-gray-500">Our state-of-the-art facilities use CNC machines and skilled craftsmen to build your custom components.</p>
	</div>

	<div class="bg-white p-6 rounded-lg shadow-sm">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-yellow-500 text-white mb-4">
	<i class="fas fa-truck"></i>
	</div>
	<h3 class="text-lg font-medium text-gray-900 mb-2">White Glove Delivery</h3>
	<p class="text-gray-500">All components are carefully packaged and delivered to your home with protective coverings for your existing spaces.</p>
	</div>

	<div class="bg-white p-6 rounded-lg shadow-sm">
	<div class="flex items-center justify-center h-12 w-12 rounded-md bg-purple-500 text-white mb-4">
	<i class="fas fa-tools"></i>
	</div>
	<h3 class="text-lg font-medium text-gray-900 mb-2">Professional Installation</h3>
	<p class="text-gray-500">Our certified installers ensure perfect placement and finishing touches for a flawless result.</p>
	</div>
	</div>

	<div class="mt-12 bg-white rounded-lg shadow-sm overflow-hidden">
	<div class="grid grid-cols-1 lg:grid-cols-2">
	<div class="p-8">
	<h3 class="text-lg font-medium text-gray-900 mb-4">Project Tracking Dashboard</h3>
	<p class="text-gray-500 mb-6">Monitor every stage of your project's journey from design to installation with real-time updates.</p>

	<div class="space-y-4">
	<div>
	<div class="flex justify-between mb-1">
	<span class="text-sm font-medium text-gray-700">Design Phase</span>
	<span class="text-sm text-gray-500">Completed</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-green-500 h-2.5 rounded-full" style="width: 100%"></div>
	</div>
	</div>

	<div>
	<div class="flex justify-between mb-1">
	<span class="text-sm font-medium text-gray-700">Material Procurement</span>
	<span class="text-sm text-gray-500">In Progress</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-blue-500 h-2.5 rounded-full" style="width: 75%"></div>
	</div>
	</div>

	<div>
	<div class="flex justify-between mb-1">
	<span class="text-sm font-medium text-gray-700">Manufacturing</span>
	<span class="text-sm text-gray-500">Scheduled</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-yellow-500 h-2.5 rounded-full" style="width: 10%"></div>
	</div>
	</div>

	<div>
	<div class="flex justify-between mb-1">
	<span class="text-sm font-medium text-gray-700">Installation</span>
	<span class="text-sm text-gray-500">Pending</span>
	</div>
	<div class="w-full bg-gray-200 rounded-full h-2.5">
	<div class="bg-gray-300 h-2.5 rounded-full" style="width: 0%"></div>
	</div>
	</div>
	</div>

	<div class="mt-6">
	<button class="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium transition duration-150 ease-in-out">
	View Full Project Details
	</button>
	</div>
	</div>
	<div class="bg-gray-50 p-8 flex items-center justify-center">
	<div class="text-center">
	<i class="fas fa-mobile-alt text-5xl text-gray-400 mb-4"></i>
	<h4 class="text-lg font-medium text-gray-900">Mobile Friendly</h4>
	<p class="mt-2 text-gray-500">Track your project on the go with our mobile-optimized dashboard.</p>
	<div class="mt-4 flex justify-center space-x-3">
	<button class="flex items-center px-3 py-1 bg-gray-800 text-white rounded-md text-sm">
	<i class="fab fa-apple mr-1"></i> App Store
	</button>
	<button class="flex items-center px-3 py-1 bg-green-600 text-white rounded-md text-sm">
	<i class="fab fa-google-play mr-1"></i> Play Store
	</button>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Testimonials -->
	<div class="py-12 bg-white">
	<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
	<div class="lg:text-center mb-12">
	<h2 class="text-base text-blue-600 font-semibold tracking-wide uppercase">Testimonials</h2>
	<p class="mt-2 text-3xl leading-8 font-extrabold tracking-tight text-gray-900 sm:text-4xl">
	What Our Customers Say
	</p>
	</div>

	<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
	<div class="bg-gray-50 p-6 rounded-lg">
	<div class="flex items-center mb-4">
	<div class="flex-shrink-0">
	<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
	</div>
	<div class="ml-3">
	<p class="text-sm font-medium text-gray-900">Emily Johnson</p>
	<div class="flex space-x-1">
	<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>
	<p class="text-gray-600 italic">"The design process was so intuitive and working with the designer was a pleasure. Our kitchen turned out even better than we imagined!"</p>
	</div>

	<div class="bg-gray-50 p-6 rounded-lg">
	<div class="flex items-center mb-4">
	<div class="flex-shrink-0">
	<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1519244703995-f4e0f30006d5?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
	</div>
	<div class="ml-3">
	<p class="text-sm font-medium text-gray-900">Michael Rodriguez</p>
	<div class="flex space-x-1">
	<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>
	<p class="text-gray-600 italic">"As a contractor, I use DesignCraft for all my client projects. The seamless design-to-production workflow saves me time and my clients love the results."</p>
	</div>

	<div class="bg-gray-50 p-6 rounded-lg">
	<div class="flex items-center mb-4">
	<div class="flex-shrink-0">
	<img class="h-10 w-10 rounded-full" src="https://images.unsplash.com/photo-1506794778202-cad84cf45f1d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
	</div>
	<div class="ml-3">
	<p class="text-sm font-medium text-gray-900">David Thompson</p>
	<div class="flex space-x-1">
	<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-half-alt text-yellow-400"></i>
	</div>
	</div>
	</div>
	<p class="text-gray-600 italic">"The 3D visualization helped us make decisions with confidence. The installation team was professional and meticulous."</p>
	</div>
	</div>
	</div>
	</div>

	<!-- CTA Section -->
	<div class="bg-blue-700">
	<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
	<div class="lg:grid lg:grid-cols-2 lg:gap-8 items-center">
	<div>
	<h2 class="text-3xl font-extrabold tracking-tight text-white sm:text-4xl">
	Ready to create your dream space?
	</h2>
	<p class="mt-3 max-w-3xl text-lg leading-6 text-blue-200">
	Start your design journey today with our easy-to-use platform and expert guidance.
	</p>
	</div>
	<div class="mt-8 flex lg:mt-0 lg:flex-shrink-0 justify-end">
	<div class="inline-flex rounded-md shadow">
	<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-blue-600 bg-white hover:bg-blue-50">
	Begin Designing
	<i class="fas fa-arrow-right ml-2"></i>
	</a>
	</div>
	<div class="ml-3 inline-flex">
	<a href="#" class="inline-flex items-center justify-center px-5 py-3 border border-transparent text-base font-medium rounded-md text-white bg-blue-800 hover:bg-blue-700">
	<i class="fas fa-phone-alt mr-2"></i>
	Speak to a Designer
	</a>
	</div>
	</div>
	</div>
	</div>
	</div>

	<!-- Footer -->
	<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-sm font-semibold text-gray-300 tracking-wider uppercase">Products</h3>
	<ul class="mt-4 space-y-4">
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Kitchens</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Bathrooms</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Closets</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Laundry Rooms</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Services</h3>
	<ul class="mt-4 space-y-4">
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Design Services</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Installation</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Renovation Planning</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Maintenance</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Company</h3>
	<ul class="mt-4 space-y-4">
	<li><a href="#" class="text-base text-gray-400 hover:text-white">About</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Careers</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Press</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Partners</a></li>
	</ul>
	</div>
	<div>
	<h3 class="text-sm font-semibold text-gray-300 tracking-wider uppercase">Legal</h3>
	<ul class="mt-4 space-y-4">
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Privacy</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Terms</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Cookie Policy</a></li>
	<li><a href="#" class="text-base text-gray-400 hover:text-white">Contact</a></li>
	</ul>
	</div>
	</div>
	<div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
	<div class="flex space-x-6 md:order-2">
	<a href="#" class="text-gray-400 hover:text-gray-300">
	<span class="sr-only">Facebook</span>
	<i class="fab fa-facebook-f"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-gray-300">
	<span class="sr-only">Instagram</span>
	<i class="fab fa-instagram"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-gray-300">
	<span class="sr-only">Twitter</span>
	<i class="fab fa-twitter"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-gray-300">
	<span class="sr-only">YouTube</span>
	<i class="fab fa-youtube"></i>
	</a>
	<a href="#" class="text-gray-400 hover:text-gray-300">
	<span class="sr-only">Pinterest</span>
	<i class="fab fa-pinterest"></i>
	</a>
	</div>
	<p class="mt-8 text-base text-gray-400 md:mt-0 md:order-1">
	© 2023 DesignCraft. All rights reserved.
	</p>
	</div>
	</div>
	</footer>

	<script>
	// Mobile menu toggle
	document.querySelector('[aria-controls="mobile-menu"]').addEventListener('click', function() {
	const menu = document.getElementById('mobile-menu');
	menu.classList.toggle('hidden');
	});

	// Simple animation for design cards
	const designCards = document.querySelectorAll('.design-card');
	designCards.forEach(card => {
	card.addEventListener('mouseenter', function() {
	this.style.transition = 'transform 0.3s ease, box-shadow 0.3s ease';
	});
	});

	// Tooltip functionality
	const tooltips = document.querySelectorAll('.tooltip');
	tooltips.forEach(tooltip => {
	tooltip.addEventListener('mouseenter', function() {
	this.querySelector('.tooltip-text').style.opacity = '1';
	this.querySelector('.tooltip-text').style.visibility = 'visible';
	});
	tooltip.addEventListener('mouseleave', function() {
	this.querySelector('.tooltip-text').style.opacity = '0';
	this.querySelector('.tooltip-text').style.visibility = 'hidden';
	});
	});

	// Simulate loading for the configurator
	document.querySelector('.configurator-container button').addEventListener('click', function() {
	const container = this.closest('.configurator-container');
	container.innerHTML = `
	<div class="absolute inset-0 flex items-center justify-center">
	<div class="text-center p-8">
	<div class="animate-pulse flex space-x-4 mb-4 justify-center">
	<div class="rounded-full bg-gray-300 h-12 w-12"></div>
	</div>
	<h3 class="text-xl font-medium text-gray-700 mb-2">Loading 3D Configurator</h3>
	<p class="text-gray-500">This may take a few moments...</p>
	</div>
	</div>
	`;

	setTimeout(() => {
	container.innerHTML = `
	<div class="absolute inset-0 flex flex-col">
	<div class="bg-gray-800 text-white px-4 py-2 flex justify-between items-center">
	<div class="flex items-center">
	<button class="mr-2 text-gray-300 hover:text-white">
	<i class="fas fa-arrow-left"></i>
	</button>
	<span class="text-sm">Kitchen Configurator</span>
	</div>
	<div class="flex items-center space-x-2">
	<button class="text-gray-300 hover:text-white">
	<i class="fas fa-expand"></i>
	</button>
	<button class="text-gray-300 hover:text-white">
	<i class="fas fa-question-circle"></i>
	</button>
	</div>
	</div>
	<div class="flex-1 grid grid-cols-4">
	<div class="col-span-3 bg-gray-100 flex items-center justify-center">
	<div class="text-center">
	<i class="fas fa-cube text-5xl text-gray-400 mb-4"></i>
	<h3 class="text-xl font-medium text-gray-700">3D Design View</h3>
	<p class="mt-2 text-gray-500">Interactive 3D visualization would appear here</p>
	</div>
	</div>
	<div class="bg-white p-4 overflow-y-auto">
	<h3 class="text-lg font-medium mb-3">Design Options</h3>
	<div class="space-y-4">
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Layout</label>
	<select class="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md">
	<option>L-Shaped</option>
	<option>U-Shaped</option>
	<option>Galley</option>
	<option>Island</option>
	</select>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Cabinet Style</label>
	<div class="grid grid-cols-2 gap-2">
	<button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
	<span class="block text-xs">Shaker</span>
	</button>
	<button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
	<span class="block text-xs">Flat Panel</span>
	</button>
	<button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
	<span class="block text-xs">Raised Panel</span>
	</button>
	<button class="p-2 border rounded-md hover:border-blue-500 hover:bg-blue-50">
	<span class="block text-xs">Beadboard</span>
	</button>
	</div>
	</div>
	<div>
	<label class="block text-sm font-medium text-gray-700 mb-1">Countertop</label>
	<div class="flex space-x-2">
	<div class="w-8 h-8 bg-gray-200 rounded-sm cursor-pointer border-2 border-white hover:ring-2 hover:ring-blue-500"></div>
	<div class="w-8 h-8 bg-gray-800 rounded-sm cursor-pointer border-2 border-white hover:ring-2 hover:ring-blue-500"></div>
	<div class="w-8 h-8 bg-blue-100 rounded-sm cursor-pointer border-2 border-white hover:ring-2 hover:ring-blue-500"></div>
	<div class="w-8 h-8 bg-green-100 rounded-sm cursor-pointer border-2 border-white hover:ring-2 hover:ring-blue-500"></div>
	</div>
	</div>
	<button class="w-full bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-md text-sm font-medium">
	Save Design
	</button>
	</div>
	</div>
	</div>
	</div>
	`;
	}, 1500);
	});
	</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/dc-template" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
	</html>