Spaces:
Running
Running
ONLY USE HTML, CSS AND JAVASCRIPT.
Browse filesIf you want to use ICON make sure to import the library first. Try to create the best UI possible by using only HTML, CSS and JAVASCRIPT.
Use as much as you can TailwindCSS for the CSS, if you can't do something with TailwindCSS, then use custom CSS (make sure to import <script src="https://cdn.tailwindcss.com"></script> in the head).
Also, try to ellaborate as much as you can, to create something unique. ALWAYS GIVE THE RESPONSE INTO A SINGLE HTML FILE
Create a website for the business 'Eddy Your Hands' which offeres these services: ["Handyman/Handywoman/Handyperson","Bathroom remodeler","Service establishment","General contractor","Kitchen remodeler","Remodeler"].
The website shoudl showcase the services, and include a booking functionality which produces a form requesting the user's name, email, phone number, choose a service from a drop down menu, pick a service date from a datepicker, and add some additional comments. This data needs to be sent in a JSON payload to https://auto.datadude.dev/webhook-test/route-booking via POST request.
Ensure the images match the business type
- README.md +8 -5
- index.html +546 -19
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title: Eddy
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: Eddy's Handy Haven 🛠️
|
| 3 |
+
colorFrom: gray
|
| 4 |
+
colorTo: green
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
index.html
CHANGED
|
@@ -1,19 +1,546 @@
|
|
| 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>Eddy's Handy Haven - Professional Home Services</title>
|
| 7 |
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 10 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 11 |
+
<style>
|
| 12 |
+
.hero-gradient {
|
| 13 |
+
background: linear-gradient(135deg, rgba(30, 58, 138, 0.9) 0%, rgba(99, 102, 241, 0.9) 100%);
|
| 14 |
+
}
|
| 15 |
+
.service-card:hover {
|
| 16 |
+
transform: translateY(-5px);
|
| 17 |
+
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
|
| 18 |
+
}
|
| 19 |
+
input:focus, textarea:focus, select:focus {
|
| 20 |
+
outline: none;
|
| 21 |
+
ring: 2px;
|
| 22 |
+
ring-color: #6366f1;
|
| 23 |
+
}
|
| 24 |
+
.datepicker {
|
| 25 |
+
z-index: 50;
|
| 26 |
+
}
|
| 27 |
+
</style>
|
| 28 |
+
</head>
|
| 29 |
+
<body class="font-sans bg-gray-50">
|
| 30 |
+
<!-- Navigation -->
|
| 31 |
+
<nav class="bg-white shadow-lg">
|
| 32 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 33 |
+
<div class="flex justify-between h-20 items-center">
|
| 34 |
+
<div class="flex items-center">
|
| 35 |
+
<div class="flex-shrink-0 flex items-center">
|
| 36 |
+
<i data-feather="tool" class="h-8 w-8 text-indigo-600"></i>
|
| 37 |
+
<span class="ml-2 text-xl font-bold text-gray-900">Eddy's Handy Haven</span>
|
| 38 |
+
</div>
|
| 39 |
+
</div>
|
| 40 |
+
<div class="hidden md:block">
|
| 41 |
+
<div class="ml-10 flex items-center space-x-4">
|
| 42 |
+
<a href="#services" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">Services</a>
|
| 43 |
+
<a href="#about" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">About</a>
|
| 44 |
+
<a href="#testimonials" class="px-3 py-2 rounded-md text-sm font-medium text-gray-700 hover:text-indigo-600">Testimonials</a>
|
| 45 |
+
<a href="#booking" class="px-3 py-2 rounded-md text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700">Book Now</a>
|
| 46 |
+
</div>
|
| 47 |
+
</div>
|
| 48 |
+
<div class="md:hidden">
|
| 49 |
+
<button id="mobile-menu-button" class="inline-flex items-center justify-center p-2 rounded-md text-gray-700 hover:text-indigo-600 focus:outline-none">
|
| 50 |
+
<i data-feather="menu" class="h-6 w-6"></i>
|
| 51 |
+
</button>
|
| 52 |
+
</div>
|
| 53 |
+
</div>
|
| 54 |
+
</div>
|
| 55 |
+
<!-- Mobile menu -->
|
| 56 |
+
<div id="mobile-menu" class="hidden md:hidden">
|
| 57 |
+
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3">
|
| 58 |
+
<a href="#services" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600">Services</a>
|
| 59 |
+
<a href="#about" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600">About</a>
|
| 60 |
+
<a href="#testimonials" class="block px-3 py-2 rounded-md text-base font-medium text-gray-700 hover:text-indigo-600">Testimonials</a>
|
| 61 |
+
<a href="#booking" class="block px-3 py-2 rounded-md text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700">Book Now</a>
|
| 62 |
+
</div>
|
| 63 |
+
</div>
|
| 64 |
+
</nav>
|
| 65 |
+
|
| 66 |
+
<!-- Hero Section -->
|
| 67 |
+
<div class="hero-gradient text-white">
|
| 68 |
+
<div class="max-w-7xl mx-auto py-24 px-4 sm:py-32 sm:px-6 lg:px-8 text-center">
|
| 69 |
+
<h1 class="text-4xl font-extrabold tracking-tight sm:text-5xl lg:text-6xl">
|
| 70 |
+
Expert Home Services You Can Trust
|
| 71 |
+
</h1>
|
| 72 |
+
<p class="mt-6 max-w-3xl mx-auto text-xl">
|
| 73 |
+
From small repairs to complete remodels, Eddy's Handy Haven delivers quality craftsmanship with a personal touch.
|
| 74 |
+
</p>
|
| 75 |
+
<div class="mt-10">
|
| 76 |
+
<a href="#booking" class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-indigo-700 bg-white hover:bg-gray-50">
|
| 77 |
+
<i data-feather="calendar" class="mr-2"></i> Book a Service
|
| 78 |
+
</a>
|
| 79 |
+
</div>
|
| 80 |
+
</div>
|
| 81 |
+
</div>
|
| 82 |
+
|
| 83 |
+
<!-- Services Section -->
|
| 84 |
+
<div id="services" class="py-16 bg-white">
|
| 85 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 86 |
+
<div class="text-center">
|
| 87 |
+
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
|
| 88 |
+
Our Professional Services
|
| 89 |
+
</h2>
|
| 90 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
|
| 91 |
+
Comprehensive solutions for all your home improvement needs
|
| 92 |
+
</p>
|
| 93 |
+
</div>
|
| 94 |
+
|
| 95 |
+
<div class="mt-20">
|
| 96 |
+
<div class="grid grid-cols-1 gap-12 sm:grid-cols-2 lg:grid-cols-3">
|
| 97 |
+
<!-- Service 1 -->
|
| 98 |
+
<div class="service-card pt-6 bg-gray-50 rounded-lg overflow-hidden shadow transition duration-300">
|
| 99 |
+
<div class="px-6 pb-8">
|
| 100 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
| 101 |
+
<i data-feather="tool"></i>
|
| 102 |
+
</div>
|
| 103 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">Handyperson Services</h3>
|
| 104 |
+
<p class="mt-2 text-base text-gray-500">
|
| 105 |
+
Expert repairs and maintenance for all those small jobs around your home.
|
| 106 |
+
</p>
|
| 107 |
+
</div>
|
| 108 |
+
</div>
|
| 109 |
+
|
| 110 |
+
<!-- Service 2 -->
|
| 111 |
+
<div class="service-card pt-6 bg-gray-50 rounded-lg overflow-hidden shadow transition duration-300">
|
| 112 |
+
<div class="px-6 pb-8">
|
| 113 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
| 114 |
+
<i data-feather="droplet"></i>
|
| 115 |
+
</div>
|
| 116 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">Bathroom Remodeling</h3>
|
| 117 |
+
<p class="mt-2 text-base text-gray-500">
|
| 118 |
+
Transform your bathroom into a luxurious retreat with our expert remodeling services.
|
| 119 |
+
</p>
|
| 120 |
+
</div>
|
| 121 |
+
</div>
|
| 122 |
+
|
| 123 |
+
<!-- Service 3 -->
|
| 124 |
+
<div class="service-card pt-6 bg-gray-50 rounded-lg overflow-hidden shadow transition duration-300">
|
| 125 |
+
<div class="px-6 pb-8">
|
| 126 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
| 127 |
+
<i data-feather="home"></i>
|
| 128 |
+
</div>
|
| 129 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">General Contracting</h3>
|
| 130 |
+
<p class="mt-2 text-base text-gray-500">
|
| 131 |
+
Complete project management for all your construction and renovation needs.
|
| 132 |
+
</p>
|
| 133 |
+
</div>
|
| 134 |
+
</div>
|
| 135 |
+
|
| 136 |
+
<!-- Service 4 -->
|
| 137 |
+
<div class="service-card pt-6 bg-gray-50 rounded-lg overflow-hidden shadow transition duration-300">
|
| 138 |
+
<div class="px-6 pb-8">
|
| 139 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
| 140 |
+
<i data-feather="utensils"></i>
|
| 141 |
+
</div>
|
| 142 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">Kitchen Remodeling</h3>
|
| 143 |
+
<p class="mt-2 text-base text-gray-500">
|
| 144 |
+
Create your dream kitchen with our custom design and remodeling services.
|
| 145 |
+
</p>
|
| 146 |
+
</div>
|
| 147 |
+
</div>
|
| 148 |
+
|
| 149 |
+
<!-- Service 5 -->
|
| 150 |
+
<div class="service-card pt-6 bg-gray-50 rounded-lg overflow-hidden shadow transition duration-300">
|
| 151 |
+
<div class="px-6 pb-8">
|
| 152 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
| 153 |
+
<i data-feather="layers"></i>
|
| 154 |
+
</div>
|
| 155 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">Home Remodeling</h3>
|
| 156 |
+
<p class="mt-2 text-base text-gray-500">
|
| 157 |
+
Comprehensive remodeling services to update and transform your entire home.
|
| 158 |
+
</p>
|
| 159 |
+
</div>
|
| 160 |
+
</div>
|
| 161 |
+
|
| 162 |
+
<!-- Service 6 -->
|
| 163 |
+
<div class="service-card pt-6 bg-gray-50 rounded-lg overflow-hidden shadow transition duration-300">
|
| 164 |
+
<div class="px-6 pb-8">
|
| 165 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
| 166 |
+
<i data-feather="settings"></i>
|
| 167 |
+
</div>
|
| 168 |
+
<h3 class="mt-6 text-lg font-medium text-gray-900">Service Establishment</h3>
|
| 169 |
+
<p class="mt-2 text-base text-gray-500">
|
| 170 |
+
Installation and setup of new appliances, systems, and home features.
|
| 171 |
+
</p>
|
| 172 |
+
</div>
|
| 173 |
+
</div>
|
| 174 |
+
</div>
|
| 175 |
+
</div>
|
| 176 |
+
</div>
|
| 177 |
+
</div>
|
| 178 |
+
|
| 179 |
+
<!-- About Section -->
|
| 180 |
+
<div id="about" class="py-16 bg-gray-50">
|
| 181 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 182 |
+
<div class="lg:grid lg:grid-cols-2 lg:gap-8">
|
| 183 |
+
<div class="mb-8 lg:mb-0">
|
| 184 |
+
<img class="rounded-lg shadow-xl" src="http://static.photos/construction/1024x576/42" alt="Eddy at work">
|
| 185 |
+
</div>
|
| 186 |
+
<div class="lg:mt-0">
|
| 187 |
+
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
|
| 188 |
+
About Eddy's Handy Haven
|
| 189 |
+
</h2>
|
| 190 |
+
<p class="mt-3 text-lg text-gray-500">
|
| 191 |
+
Founded in 2010, Eddy's Handy Haven has been serving the community with reliable, high-quality home services. Our team of skilled professionals takes pride in every project, big or small.
|
| 192 |
+
</p>
|
| 193 |
+
<div class="mt-6">
|
| 194 |
+
<div class="flex items-start">
|
| 195 |
+
<div class="flex-shrink-0">
|
| 196 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
| 197 |
+
<i data-feather="check"></i>
|
| 198 |
+
</div>
|
| 199 |
+
</div>
|
| 200 |
+
<div class="ml-4">
|
| 201 |
+
<h3 class="text-lg font-medium text-gray-900">Our Promise</h3>
|
| 202 |
+
<p class="mt-2 text-base text-gray-500">
|
| 203 |
+
Quality craftsmanship, transparent pricing, and exceptional customer service on every job.
|
| 204 |
+
</p>
|
| 205 |
+
</div>
|
| 206 |
+
</div>
|
| 207 |
+
<div class="mt-6 flex items-start">
|
| 208 |
+
<div class="flex-shrink-0">
|
| 209 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
| 210 |
+
<i data-feather="award"></i>
|
| 211 |
+
</div>
|
| 212 |
+
</div>
|
| 213 |
+
<div class="ml-4">
|
| 214 |
+
<h3 class="text-lg font-medium text-gray-900">Certified Professionals</h3>
|
| 215 |
+
<p class="mt-2 text-base text-gray-500">
|
| 216 |
+
All our technicians are licensed, insured, and background-checked for your peace of mind.
|
| 217 |
+
</p>
|
| 218 |
+
</div>
|
| 219 |
+
</div>
|
| 220 |
+
</div>
|
| 221 |
+
</div>
|
| 222 |
+
</div>
|
| 223 |
+
</div>
|
| 224 |
+
</div>
|
| 225 |
+
|
| 226 |
+
<!-- Testimonials Section -->
|
| 227 |
+
<div id="testimonials" class="py-16 bg-white">
|
| 228 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 229 |
+
<div class="text-center">
|
| 230 |
+
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
|
| 231 |
+
What Our Clients Say
|
| 232 |
+
</h2>
|
| 233 |
+
<p class="mt-4 max-w-2xl text-xl text-gray-500 mx-auto">
|
| 234 |
+
Don't just take our word for it - hear from our satisfied customers
|
| 235 |
+
</p>
|
| 236 |
+
</div>
|
| 237 |
+
|
| 238 |
+
<div class="mt-16">
|
| 239 |
+
<div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
|
| 240 |
+
<!-- Testimonial 1 -->
|
| 241 |
+
<div class="pt-6 bg-gray-50 rounded-lg overflow-hidden shadow">
|
| 242 |
+
<div class="px-6 pb-8">
|
| 243 |
+
<div class="flex items-center">
|
| 244 |
+
<div class="flex-shrink-0">
|
| 245 |
+
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/1" alt="Sarah J.">
|
| 246 |
+
</div>
|
| 247 |
+
<div class="ml-4">
|
| 248 |
+
<div class="text-lg font-medium text-gray-900">Sarah J.</div>
|
| 249 |
+
<div class="flex items-center mt-1">
|
| 250 |
+
<div class="flex items-center">
|
| 251 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 252 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 253 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 254 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 255 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 256 |
+
</div>
|
| 257 |
+
</div>
|
| 258 |
+
</div>
|
| 259 |
+
</div>
|
| 260 |
+
<p class="mt-4 text-base text-gray-500">
|
| 261 |
+
"Eddy's team completely transformed our outdated kitchen into a modern masterpiece. They were professional, clean, and completed the project on time and on budget."
|
| 262 |
+
</p>
|
| 263 |
+
</div>
|
| 264 |
+
</div>
|
| 265 |
+
|
| 266 |
+
<!-- Testimonial 2 -->
|
| 267 |
+
<div class="pt-6 bg-gray-50 rounded-lg overflow-hidden shadow">
|
| 268 |
+
<div class="px-6 pb-8">
|
| 269 |
+
<div class="flex items-center">
|
| 270 |
+
<div class="flex-shrink-0">
|
| 271 |
+
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/2" alt="Michael T.">
|
| 272 |
+
</div>
|
| 273 |
+
<div class="ml-4">
|
| 274 |
+
<div class="text-lg font-medium text-gray-900">Michael T.</div>
|
| 275 |
+
<div class="flex items-center mt-1">
|
| 276 |
+
<div class="flex items-center">
|
| 277 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 278 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 279 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 280 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 281 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 282 |
+
</div>
|
| 283 |
+
</div>
|
| 284 |
+
</div>
|
| 285 |
+
</div>
|
| 286 |
+
<p class="mt-4 text-base text-gray-500">
|
| 287 |
+
"The bathroom remodel was flawless. Attention to detail was impressive, and they worked around our schedule to minimize disruption. Will definitely use them again!"
|
| 288 |
+
</p>
|
| 289 |
+
</div>
|
| 290 |
+
</div>
|
| 291 |
+
|
| 292 |
+
<!-- Testimonial 3 -->
|
| 293 |
+
<div class="pt-6 bg-gray-50 rounded-lg overflow-hidden shadow">
|
| 294 |
+
<div class="px-6 pb-8">
|
| 295 |
+
<div class="flex items-center">
|
| 296 |
+
<div class="flex-shrink-0">
|
| 297 |
+
<img class="h-10 w-10 rounded-full" src="http://static.photos/people/200x200/3" alt="Lisa P.">
|
| 298 |
+
</div>
|
| 299 |
+
<div class="ml-4">
|
| 300 |
+
<div class="text-lg font-medium text-gray-900">Lisa P.</div>
|
| 301 |
+
<div class="flex items-center mt-1">
|
| 302 |
+
<div class="flex items-center">
|
| 303 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 304 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 305 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 306 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 307 |
+
<i data-feather="star" class="text-yellow-400 h-4 w-4"></i>
|
| 308 |
+
</div>
|
| 309 |
+
</div>
|
| 310 |
+
</div>
|
| 311 |
+
</div>
|
| 312 |
+
<p class="mt-4 text-base text-gray-500">
|
| 313 |
+
"We've used Eddy for multiple projects over the years. Always reliable, fair pricing, and excellent workmanship. They're our go-to for all home improvement needs."
|
| 314 |
+
</p>
|
| 315 |
+
</div>
|
| 316 |
+
</div>
|
| 317 |
+
</div>
|
| 318 |
+
</div>
|
| 319 |
+
</div>
|
| 320 |
+
</div>
|
| 321 |
+
|
| 322 |
+
<!-- Booking Section -->
|
| 323 |
+
<div id="booking" class="py-16 bg-indigo-50">
|
| 324 |
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
| 325 |
+
<div class="lg:grid lg:grid-cols-2 lg:gap-12">
|
| 326 |
+
<div class="mb-8 lg:mb-0">
|
| 327 |
+
<h2 class="text-3xl font-extrabold text-gray-900 sm:text-4xl">
|
| 328 |
+
Ready to Transform Your Home?
|
| 329 |
+
</h2>
|
| 330 |
+
<p class="mt-3 text-lg text-gray-500">
|
| 331 |
+
Fill out the form to request a service appointment. We'll get back to you within 24 hours to confirm details and provide a quote.
|
| 332 |
+
</p>
|
| 333 |
+
<div class="mt-8">
|
| 334 |
+
<div class="flex items-start">
|
| 335 |
+
<div class="flex-shrink-0">
|
| 336 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
| 337 |
+
<i data-feather="phone"></i>
|
| 338 |
+
</div>
|
| 339 |
+
</div>
|
| 340 |
+
<div class="ml-4">
|
| 341 |
+
<h3 class="text-lg font-medium text-gray-900">Prefer to call?</h3>
|
| 342 |
+
<p class="mt-2 text-base text-gray-500">
|
| 343 |
+
Speak directly with our customer service team at <span class="font-medium">(555) 123-4567</span>
|
| 344 |
+
</p>
|
| 345 |
+
</div>
|
| 346 |
+
</div>
|
| 347 |
+
<div class="mt-6 flex items-start">
|
| 348 |
+
<div class="flex-shrink-0">
|
| 349 |
+
<div class="flex items-center justify-center h-12 w-12 rounded-md bg-indigo-500 text-white">
|
| 350 |
+
<i data-feather="clock"></i>
|
| 351 |
+
</div>
|
| 352 |
+
</div>
|
| 353 |
+
<div class="ml-4">
|
| 354 |
+
<h3 class="text-lg font-medium text-gray-900">Business Hours</h3>
|
| 355 |
+
<p class="mt-2 text-base text-gray-500">
|
| 356 |
+
Monday - Friday: 8am - 6pm<br>
|
| 357 |
+
Saturday: 9am - 3pm<br>
|
| 358 |
+
Sunday: Closed
|
| 359 |
+
</p>
|
| 360 |
+
</div>
|
| 361 |
+
</div>
|
| 362 |
+
</div>
|
| 363 |
+
</div>
|
| 364 |
+
<div class="bg-white py-8 px-6 shadow rounded-lg">
|
| 365 |
+
<h3 class="text-lg font-medium text-gray-900 mb-6">Book a Service</h3>
|
| 366 |
+
<form id="bookingForm" class="space-y-6">
|
| 367 |
+
<div>
|
| 368 |
+
<label for="name" class="block text-sm font-medium text-gray-700">Full Name</label>
|
| 369 |
+
<div class="mt-1">
|
| 370 |
+
<input type="text" name="name" id="name" required class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
|
| 371 |
+
</div>
|
| 372 |
+
</div>
|
| 373 |
+
|
| 374 |
+
<div>
|
| 375 |
+
<label for="email" class="block text-sm font-medium text-gray-700">Email</label>
|
| 376 |
+
<div class="mt-1">
|
| 377 |
+
<input type="email" name="email" id="email" required class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
|
| 378 |
+
</div>
|
| 379 |
+
</div>
|
| 380 |
+
|
| 381 |
+
<div>
|
| 382 |
+
<label for="phone" class="block text-sm font-medium text-gray-700">Phone Number</label>
|
| 383 |
+
<div class="mt-1">
|
| 384 |
+
<input type="tel" name="phone" id="phone" required class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
|
| 385 |
+
</div>
|
| 386 |
+
</div>
|
| 387 |
+
|
| 388 |
+
<div>
|
| 389 |
+
<label for="service" class="block text-sm font-medium text-gray-700">Service Needed</label>
|
| 390 |
+
<div class="mt-1">
|
| 391 |
+
<select id="service" name="service" required class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
|
| 392 |
+
<option value="">Select a service</option>
|
| 393 |
+
<option value="Handyperson Services">Handyperson Services</option>
|
| 394 |
+
<option value="Bathroom Remodeling">Bathroom Remodeling</option>
|
| 395 |
+
<option value="General Contracting">General Contracting</option>
|
| 396 |
+
<option value="Kitchen Remodeling">Kitchen Remodeling</option>
|
| 397 |
+
<option value="Home Remodeling">Home Remodeling</option>
|
| 398 |
+
<option value="Service Establishment">Service Establishment</option>
|
| 399 |
+
</select>
|
| 400 |
+
</div>
|
| 401 |
+
</div>
|
| 402 |
+
|
| 403 |
+
<div>
|
| 404 |
+
<label for="date" class="block text-sm font-medium text-gray-700">Preferred Service Date</label>
|
| 405 |
+
<div class="mt-1 relative">
|
| 406 |
+
<input type="date" name="date" id="date" required class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md">
|
| 407 |
+
</div>
|
| 408 |
+
</div>
|
| 409 |
+
|
| 410 |
+
<div>
|
| 411 |
+
<label for="comments" class="block text-sm font-medium text-gray-700">Additional Comments</label>
|
| 412 |
+
<div class="mt-1">
|
| 413 |
+
<textarea id="comments" name="comments" rows="4" class="py-3 px-4 block w-full shadow-sm focus:ring-indigo-500 focus:border-indigo-500 border-gray-300 rounded-md"></textarea>
|
| 414 |
+
</div>
|
| 415 |
+
</div>
|
| 416 |
+
|
| 417 |
+
<div>
|
| 418 |
+
<button type="submit" class="w-full flex justify-center py-3 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
| 419 |
+
Submit Booking Request
|
| 420 |
+
</button>
|
| 421 |
+
</div>
|
| 422 |
+
</form>
|
| 423 |
+
</div>
|
| 424 |
+
</div>
|
| 425 |
+
</div>
|
| 426 |
+
</div>
|
| 427 |
+
|
| 428 |
+
<!-- Footer -->
|
| 429 |
+
<footer class="bg-gray-800">
|
| 430 |
+
<div class="max-w-7xl mx-auto py-12 px-4 sm:px-6 lg:px-8">
|
| 431 |
+
<div class="grid grid-cols-2 md:grid-cols-4 gap-8">
|
| 432 |
+
<div>
|
| 433 |
+
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Services</h3>
|
| 434 |
+
<ul class="mt-4 space-y-4">
|
| 435 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Handyperson</a></li>
|
| 436 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Bathroom Remodeling</a></li>
|
| 437 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Kitchen Remodeling</a></li>
|
| 438 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">General Contracting</a></li>
|
| 439 |
+
</ul>
|
| 440 |
+
</div>
|
| 441 |
+
<div>
|
| 442 |
+
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Company</h3>
|
| 443 |
+
<ul class="mt-4 space-y-4">
|
| 444 |
+
<li><a href="#about" class="text-base text-gray-300 hover:text-white">About Us</a></li>
|
| 445 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Careers</a></li>
|
| 446 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Privacy Policy</a></li>
|
| 447 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Terms of Service</a></li>
|
| 448 |
+
</ul>
|
| 449 |
+
</div>
|
| 450 |
+
<div>
|
| 451 |
+
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Support</h3>
|
| 452 |
+
<ul class="mt-4 space-y-4">
|
| 453 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Contact Us</a></li>
|
| 454 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">FAQs</a></li>
|
| 455 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Warranty</a></li>
|
| 456 |
+
<li><a href="#" class="text-base text-gray-300 hover:text-white">Service Areas</a></li>
|
| 457 |
+
</ul>
|
| 458 |
+
</div>
|
| 459 |
+
<div>
|
| 460 |
+
<h3 class="text-sm font-semibold text-gray-400 tracking-wider uppercase">Connect</h3>
|
| 461 |
+
<div class="mt-4 flex space-x-6">
|
| 462 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 463 |
+
<i data-feather="facebook"></i>
|
| 464 |
+
</a>
|
| 465 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 466 |
+
<i data-feather="twitter"></i>
|
| 467 |
+
</a>
|
| 468 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 469 |
+
<i data-feather="instagram"></i>
|
| 470 |
+
</a>
|
| 471 |
+
<a href="#" class="text-gray-400 hover:text-white">
|
| 472 |
+
<i data-feather="linkedin"></i>
|
| 473 |
+
</a>
|
| 474 |
+
</div>
|
| 475 |
+
<div class="mt-6">
|
| 476 |
+
<p class="text-base text-gray-300">Subscribe to our newsletter</p>
|
| 477 |
+
<form class="mt-2 sm:flex">
|
| 478 |
+
<label for="email-address" class="sr-only">Email address</label>
|
| 479 |
+
<input id="email-address" type="email" autocomplete="email" required class="w-full px-4 py-2 border border-transparent rounded-md text-base text-gray-900 placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" placeholder="Your email">
|
| 480 |
+
<div class="mt-3 rounded-md sm:mt-0 sm:ml-3 sm:flex-shrink-0">
|
| 481 |
+
<button type="submit" class="w-full flex items-center justify-center px-4 py-2 border border-transparent rounded-md text-base font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
|
| 482 |
+
Sign up
|
| 483 |
+
</button>
|
| 484 |
+
</div>
|
| 485 |
+
</form>
|
| 486 |
+
</div>
|
| 487 |
+
</div>
|
| 488 |
+
</div>
|
| 489 |
+
<div class="mt-8 border-t border-gray-700 pt-8 md:flex md:items-center md:justify-between">
|
| 490 |
+
<div class="flex space-x-6 md:order-2">
|
| 491 |
+
<p class="text-base text-gray-400">
|
| 492 |
+
© 2023 Eddy's Handy Haven. All rights reserved.
|
| 493 |
+
</p>
|
| 494 |
+
</div>
|
| 495 |
+
<div class="mt-8 md:mt-0 md:order-1">
|
| 496 |
+
<p class="text-base text-gray-400">
|
| 497 |
+
Licensed, Bonded & Insured. License #1234567
|
| 498 |
+
</p>
|
| 499 |
+
</div>
|
| 500 |
+
</div>
|
| 501 |
+
</div>
|
| 502 |
+
</footer>
|
| 503 |
+
|
| 504 |
+
<script>
|
| 505 |
+
// Mobile menu toggle
|
| 506 |
+
document.getElementById('mobile-menu-button').addEventListener('click', function() {
|
| 507 |
+
document.getElementById('mobile-menu').classList.toggle('hidden');
|
| 508 |
+
});
|
| 509 |
+
|
| 510 |
+
// Form submission
|
| 511 |
+
document.getElementById('bookingForm').addEventListener('submit', function(e) {
|
| 512 |
+
e.preventDefault();
|
| 513 |
+
|
| 514 |
+
const formData = {
|
| 515 |
+
name: document.getElementById('name').value,
|
| 516 |
+
email: document.getElementById('email').value,
|
| 517 |
+
phone: document.getElementById('phone').value,
|
| 518 |
+
service: document.getElementById('service').value,
|
| 519 |
+
date: document.getElementById('date').value,
|
| 520 |
+
comments: document.getElementById('comments').value
|
| 521 |
+
};
|
| 522 |
+
|
| 523 |
+
fetch('https://auto.datadude.dev/webhook-test/route-booking', {
|
| 524 |
+
method: 'POST',
|
| 525 |
+
headers: {
|
| 526 |
+
'Content-Type': 'application/json',
|
| 527 |
+
},
|
| 528 |
+
body: JSON.stringify(formData)
|
| 529 |
+
})
|
| 530 |
+
.then(response => response.json())
|
| 531 |
+
.then(data => {
|
| 532 |
+
alert('Booking request submitted successfully! We will contact you shortly to confirm details.');
|
| 533 |
+
document.getElementById('bookingForm').reset();
|
| 534 |
+
})
|
| 535 |
+
.catch((error) => {
|
| 536 |
+
console.error('Error:', error);
|
| 537 |
+
alert('There was an error submitting your request. Please try again or call us directly.');
|
| 538 |
+
});
|
| 539 |
+
});
|
| 540 |
+
|
| 541 |
+
// Initialize feather icons
|
| 542 |
+
feather.replace();
|
| 543 |
+
</script>
|
| 544 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 545 |
+
</body>
|
| 546 |
+
</html>
|