Spaces:

LimenAlex
/

signa-1

Running

App Files Files Community

LimenAlex commited on Apr 13, 2025

Commit

4cf6ee4

verified ·

1 Parent(s): eb16902

Add 1 files

Browse files

Files changed (1) hide show

index.html +85 -21

index.html CHANGED Viewed

@@ -238,6 +238,48 @@
             transform: rotate(-5deg) translateY(-10px);
             box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
         }
     </style>
 </head>
 <body class="bg-light text-dark">
@@ -285,8 +327,7 @@
                     </div>
                     <h1 class="text-6xl font-bold mb-6 leading-tight font-display">
                         <span class="shine-text">No More Paper Signs.</span><br>
-                        <span class="text-4xl">A print on an A4 stuck to the window screams<br>
-                        <span class="underline decoration-electric/50 decoration-4">"Temporary"</span> <span class="underline decoration-accent/50 decoration-4">"Amateurish"</span> and <span class="underline decoration-red-400/50 decoration-4">"Shady"</span></span>
                     </h1>
                     <p class="text-xl mb-8 opacity-90">We transform storefronts from amateurish to extraordinary with signage solutions that customers notice, remember, and talk about.</p>
                     <div class="flex flex-col sm:flex-row gap-4">
@@ -414,7 +455,7 @@
                 <!-- Step 4 -->
                 <div class="process-visual bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover-3d">
                     <div class="relative h-48 mb-6 overflow-hidden rounded-lg">
-                        <img src="https://images.unsplash.com/photo-1581093450021-33a577d12c9b?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Installation" class="w-full h-full object-cover">
                         <div class="absolute top-4 left-4 bg-primary text-white px-3 py-1 rounded-full text-sm font-bold">Step 4</div>
                     </div>
                     <h3 class="text-2xl font-bold mb-3 font-display">Installation</h3>
@@ -427,21 +468,44 @@
             </div>
             <!-- Process Visualization -->
-            <div class="mt-20 bg-gradient-to-r from-primary to-accent rounded-3xl p-8 text-white relative overflow-hidden">
                 <div class="absolute inset-0 opacity-10">
                     <div class="absolute w-40 h-40 rounded-full bg-white top-1/4 left-1/4"></div>
                     <div class="absolute w-60 h-60 rounded-full bg-white bottom-1/4 right-1/4"></div>
                 </div>
                 <div class="relative z-10">
-                    <h3 class="text-3xl font-bold mb-6 font-display">See Our Process in Action</h3>
-                    <p class="text-xl mb-8 opacity-90 max-w-3xl">Watch how we transform concepts into stunning signage that elevates businesses</p>
-                    <div class="flex flex-col sm:flex-row gap-4">
-                        <button class="bg-white text-primary hover:bg-gray-100 px-8 py-4 rounded-full font-bold transition transform hover:scale-105 shadow-xl flex items-center btn-hover-grow">
-                            <i class="fas fa-play-circle mr-3 text-2xl icon-hover"></i> Watch Video
-                        </button>
-                        <button class="border-2 border-white text-white hover:bg-white/10 px-8 py-4 rounded-full font-bold transition transform hover:scale-105 flex items-center btn-hover-grow">
-                            <i class="fas fa-calendar-alt mr-3 icon-hover"></i> Schedule Consultation
-                        </button>
                     </div>
                 </div>
             </div>
@@ -499,7 +563,7 @@
     </section>
     <!-- CTA Section -->
-    <section class="py-20 bg-primary text-white relative overflow-hidden">
         <!-- Floating elements -->
         <div class="absolute top-0 left-0 w-full h-full">
             <div class="bubble w-40 h-40 top-1/4 left-1/4"></div>
@@ -508,29 +572,29 @@
         </div>
         <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
-            <h2 class="text-4xl font-bold mb-6 font-display">Ready to <span class="shine-text">Transform Your Storefront</span>?</h2>
-            <p class="text-xl mb-8 opacity-90">Schedule your free consultation and see how professional signage can elevate your business</p>
             <div class="bg-white rounded-xl p-8 shadow-2xl max-w-2xl mx-auto">
                 <form class="grid md:grid-cols-2 gap-6">
                     <div>
-                        <label for="name" class="block text-left text-dark font-medium mb-2">Your Name</label>
                         <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
                     </div>
                     <div>
-                        <label for="business" class="block text-left text-dark font-medium mb-2">Business Name</label>
                         <input type="text" id="business" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
                     </div>
                     <div>
-                        <label for="email" class="block text-left text-dark font-medium mb-2">Email</label>
                         <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
                     </div>
                     <div>
-                        <label for="phone" class="block text-left text-dark font-medium mb-2">Phone</label>
                         <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
                     </div>
                     <div class="md:col-span-2">
-                        <label for="project" class="block text-left text-dark font-medium mb-2">Project Details</label>
                         <textarea id="project" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition-all"></textarea>
                     </div>
                     <div class="md:col-span-2">

             transform: rotate(-5deg) translateY(-10px);
             box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1);
         }
+        .fomo-box {
+            background: linear-gradient(135deg, #f59e0b, #ef4444);
+            color: white;
+            border-radius: 12px;
+            box-shadow: 0 20px 25px -5px rgba(239, 68, 68, 0.2);
+            transition: all 0.3s ease;
+        }
+        .fomo-box:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 25px 50px -12px rgba(239, 68, 68, 0.3);
+        }
+        .video-section {
+            background: linear-gradient(135deg, #1e3a8a, #3b82f6);
+            color: white;
+        }
+        .form-gradient {
+            background: linear-gradient(135deg, #1e40af, #3b82f6);
+            position: relative;
+            overflow: hidden;
+        }
+        .form-gradient::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: url('https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80') no-repeat center center/cover;
+            background-attachment: fixed;
+            opacity: 0.2;
+            z-index: 0;
+        }
+        .link-box {
+            background: linear-gradient(135deg, #f59e0b, #f97316);
+            color: white;
+        }
     </style>
 </head>
 <body class="bg-light text-dark">
                     </div>
                     <h1 class="text-6xl font-bold mb-6 leading-tight font-display">
                         <span class="shine-text">No More Paper Signs.</span><br>
+                        <span class="text-4xl">Premium Signage That Makes Your Business Shine</span>
                     </h1>
                     <p class="text-xl mb-8 opacity-90">We transform storefronts from amateurish to extraordinary with signage solutions that customers notice, remember, and talk about.</p>
                     <div class="flex flex-col sm:flex-row gap-4">
                 <!-- Step 4 -->
                 <div class="process-visual bg-white p-6 rounded-xl shadow-lg border border-gray-100 hover-3d">
                     <div class="relative h-48 mb-6 overflow-hidden rounded-lg">
+                        <img src="https://images.unsplash.com/photo-1581093450021-33a577d12c9b?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80) no-repeat center center/cover" alt="Installation" class="w-full h-full object-cover">
                         <div class="absolute top-4 left-4 bg-primary text-white px-3 py-1 rounded-full text-sm font-bold">Step 4</div>
                     </div>
                     <h3 class="text-2xl font-bold mb-3 font-display">Installation</h3>
             </div>
             <!-- Process Visualization -->
+            <div class="mt-20 video-section rounded-3xl p-8 relative overflow-hidden">
                 <div class="absolute inset-0 opacity-10">
                     <div class="absolute w-40 h-40 rounded-full bg-white top-1/4 left-1/4"></div>
                     <div class="absolute w-60 h-60 rounded-full bg-white bottom-1/4 right-1/4"></div>
                 </div>
                 <div class="relative z-10">
+                    <div class="flex flex-col md:flex-row items-center gap-12">
+                        <div class="md:w-1/2">
+                            <h3 class="text-3xl font-bold mb-6 font-display">"A print on an A4 stuck to the window screams..."</h3>
+                            <div class="fomo-box p-6 mb-8">
+                                <p class="text-xl font-medium mb-4">Did you know? 68% of customers will walk past a business with amateurish signage, assuming the quality inside matches the poor exterior presentation.</p>
+                                <p class="opacity-90">Your temporary paper signs are costing you more than you think - they're silently turning away potential customers every day.</p>
+                            </div>
+                            <p class="text-xl mb-8 opacity-90">Watch how we transform concepts into stunning signage that elevates businesses and attracts more customers.</p>
+                            <div class="flex flex-col sm:flex-row gap-4">
+                                <button class="bg-white text-primary hover:bg-gray-100 px-8 py-4 rounded-full font-bold transition transform hover:scale-105 shadow-xl flex items-center btn-hover-grow">
+                                    <i class="fas fa-play-circle mr-3 text-2xl icon-hover"></i> Watch Video
+                                </button>
+                                <button class="border-2 border-white text-white hover:bg-white/10 px-8 py-4 rounded-full font-bold transition transform hover:scale-105 flex items-center btn-hover-grow">
+                                    <i class="fas fa-calendar-alt mr-3 icon-hover"></i> Schedule Consultation
+                                </button>
+                            </div>
+                        </div>
+                        <div class="md:w-1/2">
+                            <div class="link-box p-8 rounded-xl shadow-2xl hover-3d">
+                                <h4 class="text-2xl font-bold mb-4 font-display">Limited Time Offer</h4>
+                                <p class="mb-6">Book your consultation this week and receive:</p>
+                                <ul class="space-y-3 mb-6">
+                                    <li class="flex items-start"><i class="fas fa-check-circle mr-3 mt-1"></i> <span>Free signage audit ($250 value)</span></li>
+                                    <li class="flex items-start"><i class="fas fa-check-circle mr-3 mt-1"></i> <span>15% discount on your first order</span></li>
+                                    <li class="flex items-start"><i class="fas fa-check-circle mr-3 mt-1"></i> <span>Priority installation scheduling</span></li>
+                                </ul>
+                                <button class="w-full bg-white text-orange-500 hover:bg-gray-100 px-6 py-3 rounded-lg font-bold transition transform hover:scale-[1.01] shadow-lg group btn-hover-grow">
+                                    <span class="group-hover:underline">Claim Your Offer Now</span>
+                                    <i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i>
+                                </button>
+                            </div>
+                        </div>
                     </div>
                 </div>
             </div>
     </section>
     <!-- CTA Section -->
+    <section class="py-20 form-gradient text-white relative overflow-hidden">
         <!-- Floating elements -->
         <div class="absolute top-0 left-0 w-full h-full">
             <div class="bubble w-40 h-40 top-1/4 left-1/4"></div>
         </div>
         <div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 text-center relative z-10">
+            <h2 class="text-4xl font-bold mb-6 font-display text-black">Ready to <span class="shine-text">Transform Your Storefront</span>?</h2>
+            <p class="text-xl mb-8 opacity-90 text-black">Schedule your free consultation and see how professional signage can elevate your business</p>
             <div class="bg-white rounded-xl p-8 shadow-2xl max-w-2xl mx-auto">
                 <form class="grid md:grid-cols-2 gap-6">
                     <div>
+                        <label for="name" class="block text-left text-black font-medium mb-2">Your Name</label>
                         <input type="text" id="name" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
                     </div>
                     <div>
+                        <label for="business" class="block text-left text-black font-medium mb-2">Business Name</label>
                         <input type="text" id="business" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
                     </div>
                     <div>
+                        <label for="email" class="block text-left text-black font-medium mb-2">Email</label>
                         <input type="email" id="email" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
                     </div>
                     <div>
+                        <label for="phone" class="block text-left text-black font-medium mb-2">Phone</label>
                         <input type="tel" id="phone" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition-all">
                     </div>
                     <div class="md:col-span-2">
+                        <label for="project" class="block text-left text-black font-medium mb-2">Project Details</label>
                         <textarea id="project" rows="3" class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-2 focus:ring-primary focus:border-transparent transition-all"></textarea>
                     </div>
                     <div class="md:col-span-2">