|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Window Crafts | Premium Signage That Makes Your Business Shine</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"> |
|
|
<link href="https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> |
|
|
<style> |
|
|
body { |
|
|
font-family: 'Inter', sans-serif; |
|
|
overflow-x: hidden; |
|
|
scroll-behavior: smooth; |
|
|
} |
|
|
|
|
|
.hero-gradient { |
|
|
background: linear-gradient(135deg, rgba(37,99,235,0.98) 0%, rgba(96,165,250,0.98) 100%), url('https://images.unsplash.com/photo-1600585152220-90363fe7e115?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80') no-repeat center center/cover; |
|
|
} |
|
|
|
|
|
.panel { |
|
|
transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); |
|
|
} |
|
|
|
|
|
.panel:hover { |
|
|
transform: translateY(-8px); |
|
|
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15); |
|
|
} |
|
|
|
|
|
.shine-text { |
|
|
background: linear-gradient(90deg, #3b82f6, #60a5fa, #93c5fd, #60a5fa, #3b82f6); |
|
|
background-size: 200% auto; |
|
|
color: transparent; |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
} |
|
|
|
|
|
.glass-effect { |
|
|
background: rgba(255,255,255,0.08); |
|
|
backdrop-filter: blur(12px); |
|
|
-webkit-backdrop-filter: blur(12px); |
|
|
border: 1px solid rgba(255,255,255,0.1); |
|
|
} |
|
|
|
|
|
.flip-card { |
|
|
perspective: 2000px; |
|
|
} |
|
|
|
|
|
.flip-card-inner { |
|
|
transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.55); |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.flip-card:hover .flip-card-inner { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
|
|
|
.flip-card-front, .flip-card-back { |
|
|
position: absolute; |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
backface-visibility: hidden; |
|
|
border-radius: 1rem; |
|
|
overflow: hidden; |
|
|
} |
|
|
|
|
|
.flip-card-back { |
|
|
transform: rotateY(180deg); |
|
|
} |
|
|
|
|
|
.nav-link { |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.nav-link:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
width: 0; |
|
|
height: 2px; |
|
|
bottom: -2px; |
|
|
left: 0; |
|
|
background-color: #3b82f6; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
|
|
|
.nav-link:hover:after { |
|
|
width: 100%; |
|
|
} |
|
|
|
|
|
.progress-bar { |
|
|
height: 4px; |
|
|
background: #e2e8f0; |
|
|
position: relative; |
|
|
} |
|
|
|
|
|
.progress-bar:after { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
top: 0; |
|
|
height: 100%; |
|
|
width: var(--progress); |
|
|
background: linear-gradient(90deg, #2563eb, #3b82f6); |
|
|
transition: width 0.4s ease; |
|
|
} |
|
|
|
|
|
.process-step { |
|
|
position: relative; |
|
|
z-index: 1; |
|
|
} |
|
|
|
|
|
.process-step:before { |
|
|
content: ''; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
width: 3px; |
|
|
height: 100%; |
|
|
background: linear-gradient(to bottom, #2563eb, #10b981); |
|
|
z-index: -1; |
|
|
} |
|
|
|
|
|
.process-step:last-child:before { |
|
|
display: none; |
|
|
} |
|
|
|
|
|
.process-dot { |
|
|
width: 24px; |
|
|
height: 24px; |
|
|
border-radius: 50%; |
|
|
background: #2563eb; |
|
|
border: 4px solid #3b82f6; |
|
|
position: absolute; |
|
|
top: 0; |
|
|
left: 50%; |
|
|
transform: translateX(-50%); |
|
|
} |
|
|
|
|
|
.parallax { |
|
|
background-attachment: fixed; |
|
|
background-position: center; |
|
|
background-repeat: no-repeat; |
|
|
background-size: cover; |
|
|
} |
|
|
|
|
|
.hover-3d { |
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease; |
|
|
transform-style: preserve-3d; |
|
|
} |
|
|
|
|
|
.hover-3d:hover { |
|
|
transform: translateY(-10px) rotateX(5deg) rotateY(5deg); |
|
|
box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25); |
|
|
} |
|
|
|
|
|
.text-gradient { |
|
|
background: linear-gradient(90deg, #2563eb, #10b981); |
|
|
-webkit-background-clip: text; |
|
|
background-clip: text; |
|
|
color: transparent; |
|
|
} |
|
|
|
|
|
.glow { |
|
|
filter: drop-shadow(0 0 8px rgba(59, 130, 246, 0.6)); |
|
|
} |
|
|
|
|
|
.animate-on-scroll { |
|
|
opacity: 0; |
|
|
transform: translateY(30px); |
|
|
transition: all 0.6s cubic-bezier(0.16, 1, 0.3, 1); |
|
|
} |
|
|
|
|
|
.animate-on-scroll.active { |
|
|
opacity: 1; |
|
|
transform: translateY(0); |
|
|
} |
|
|
|
|
|
@keyframes float-bubble { |
|
|
0%, 100% { transform: translateY(0) rotate(0deg); } |
|
|
50% { transform: translateY(-20px) rotate(5deg); } |
|
|
} |
|
|
|
|
|
.float-bubble { |
|
|
transition: transform 0.6s ease; |
|
|
} |
|
|
|
|
|
.float-bubble:hover { |
|
|
transform: translateY(-20px) rotate(5deg); |
|
|
} |
|
|
|
|
|
.bubble { |
|
|
position: absolute; |
|
|
border-radius: 50%; |
|
|
background: rgba(255,255,255,0.1); |
|
|
backdrop-filter: blur(5px); |
|
|
z-index: 0; |
|
|
transition: all 0.6s ease; |
|
|
} |
|
|
|
|
|
.bubble:hover { |
|
|
transform: scale(1.2); |
|
|
background: rgba(255,255,255,0.2); |
|
|
} |
|
|
|
|
|
.process-visual { |
|
|
transition: all 0.4s ease; |
|
|
} |
|
|
|
|
|
.process-visual:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.btn-hover-grow { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.btn-hover-grow:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); |
|
|
} |
|
|
|
|
|
.icon-hover { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
|
|
|
.icon-hover:hover { |
|
|
transform: scale(1.2) rotate(10deg); |
|
|
} |
|
|
|
|
|
.paper-sign { |
|
|
transition: all 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55); |
|
|
transform-origin: top left; |
|
|
} |
|
|
|
|
|
.paper-sign:hover { |
|
|
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"> |
|
|
|
|
|
<nav class="fixed w-full z-50 bg-white/95 backdrop-blur-md shadow-sm"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="flex justify-between h-20 items-center"> |
|
|
<div class="flex items-center"> |
|
|
<div class="text-3xl font-bold text-primary font-craft tracking-tight hover:scale-105 transition-transform duration-300">WINDOW CRAFTS</div> |
|
|
</div> |
|
|
<div class="hidden md:flex space-x-8 items-center"> |
|
|
<a href="#" class="nav-link text-dark hover:text-primary font-medium transition">Home</a> |
|
|
<a href="#" class="nav-link text-dark hover:text-primary font-medium transition">Services</a> |
|
|
<a href="#" class="nav-link text-dark hover:text-primary font-medium transition">Portfolio</a> |
|
|
<a href="#process" class="nav-link text-dark hover:text-primary font-medium transition">Process</a> |
|
|
<a href="#" class="nav-link text-dark hover:text-primary font-medium transition">About</a> |
|
|
<a href="#" class="nav-link text-dark hover:text-primary font-medium transition">Contact</a> |
|
|
<button class="bg-primary hover:bg-secondary text-white px-6 py-2 rounded-full font-medium transition-all transform hover:scale-105 shadow-md hover:shadow-lg ml-4 btn-hover-grow"> |
|
|
Free Quote |
|
|
</button> |
|
|
</div> |
|
|
<div class="md:hidden"> |
|
|
<button type="button" class="text-dark hover:text-primary focus:outline-none"> |
|
|
<i class="fas fa-bars text-2xl"></i> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="progress-bar"></div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section class="hero-gradient min-h-screen flex items-center text-white pt-20 relative overflow-hidden"> |
|
|
|
|
|
<div class="bubble w-20 h-20 top-1/4 left-1/4"></div> |
|
|
<div class="bubble w-32 h-32 top-1/3 right-1/5"></div> |
|
|
<div class="bubble w-16 h-16 bottom-1/4 left-1/5"></div> |
|
|
<div class="bubble w-24 h-24 bottom-1/3 right-1/4"></div> |
|
|
|
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-20 relative z-10"> |
|
|
<div class="flex flex-col md:flex-row items-center gap-16"> |
|
|
<div class="md:w-1/2"> |
|
|
<div class="glass-effect inline-block px-4 py-2 rounded-full mb-6"> |
|
|
<span class="text-sm font-bold tracking-wider">EST. 2012</span> |
|
|
</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"> |
|
|
<button class="bg-white text-primary hover:bg-gray-100 px-8 py-4 rounded-full font-bold transition-all transform hover:scale-105 shadow-xl hover:shadow-2xl flex items-center btn-hover-grow"> |
|
|
<i class="fas fa-pen-fancy mr-3 icon-hover"></i> Get Your Free Design |
|
|
</button> |
|
|
<button class="border-2 border-white text-white hover:bg-white/10 px-8 py-4 rounded-full font-bold transition-all transform hover:scale-105 flex items-center btn-hover-grow"> |
|
|
<i class="fas fa-play mr-3 icon-hover"></i> Watch Our Process |
|
|
</button> |
|
|
</div> |
|
|
<div class="mt-12 flex items-center space-x-6"> |
|
|
<div class="flex -space-x-2"> |
|
|
<img src="https://randomuser.me/api/portraits/women/44.jpg" class="w-10 h-10 rounded-full border-2 border-white hover:scale-110 transition-transform" alt="Client"> |
|
|
<img src="https://randomuser.me/api/portraits/men/32.jpg" class="w-10 h-10 rounded-full border-2 border-white hover:scale-110 transition-transform" alt="Client"> |
|
|
<img src="https://randomuser.me/api/portraits/women/68.jpg" class="w-10 h-10 rounded-full border-2 border-white hover:scale-110 transition-transform" alt="Client"> |
|
|
</div> |
|
|
<div> |
|
|
<div class="font-bold">Trusted by 850+ businesses</div> |
|
|
<div class="flex items-center mt-1"> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<i class="fas fa-star text-yellow-400 mr-1"></i> |
|
|
<span class="ml-2 text-sm">4.9 (328 reviews)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="md:w-1/2 relative"> |
|
|
<div class="relative sign-animation float-bubble"> |
|
|
<img src="https://images.unsplash.com/photo-1598301257982-0cf014dabbcd?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Premium window signage" class="rounded-3xl shadow-2xl border-8 border-white/20 transform rotate-2 hover:rotate-0 transition-transform duration-500"> |
|
|
<div class="absolute -bottom-6 -right-6 bg-white p-5 rounded-xl shadow-2xl border border-gray-100 w-64 hover:scale-105 transition-transform btn-hover-grow"> |
|
|
<div class="text-primary font-bold text-lg leading-tight">"Our foot traffic increased 42% after new signage!"</div> |
|
|
<div class="mt-2 flex items-center"> |
|
|
<img src="https://randomuser.me/api/portraits/men/54.jpg" class="w-8 h-8 rounded-full mr-2 hover:scale-110 transition-transform" alt="Client"> |
|
|
<div class="text-sm font-medium">Mark T., Retail Owner</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-16 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-12"> |
|
|
<h2 class="text-3xl font-bold mb-4 font-display">Trusted By Brands That Demand Excellence</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto">From boutique shops to national retail chains, we create signage that delivers measurable results</p> |
|
|
</div> |
|
|
<div class="grid grid-cols-2 md:grid-cols-5 gap-8 items-center"> |
|
|
<div class="flex items-center justify-center opacity-80 hover:opacity-100 transition hover:scale-110"> |
|
|
<div class="text-3xl font-bold text-gray-700 font-craft tracking-tighter">NIKE</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-center opacity-80 hover:opacity-100 transition hover:scale-110"> |
|
|
<div class="text-3xl font-bold text-red-600 font-craft tracking-tighter">ZARA</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-center opacity-80 hover:opacity-100 transition hover:scale-110"> |
|
|
<div class="text-3xl font-bold text-green-600 font-craft tracking-tighter">STARBUCKS</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-center opacity-80 hover:opacity-100 transition hover:scale-110"> |
|
|
<div class="text-3xl font-bold text-yellow-500 font-craft tracking-tighter">MCDONALD'S</div> |
|
|
</div> |
|
|
<div class="flex items-center justify-center opacity-80 hover:opacity-100 transition hover:scale-110"> |
|
|
<div class="text-3xl font-bold text-gray-800 font-craft tracking-tighter">APPLE</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="process" class="py-20 bg-white"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<div class="text-accent text-sm font-bold mb-2 tracking-wider">OUR PROCESS</div> |
|
|
<h2 class="text-4xl font-bold mb-4 font-display">Simple <span class="text-gradient">4-Step Process</span> to Premium Signage</h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto">Getting professional signage has never been easier with our streamlined approach</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-4 gap-8"> |
|
|
|
|
|
<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-1600880292203-757bb62b4baf?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Consultation" 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 1</div> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 font-display">Consultation</h3> |
|
|
<p class="text-gray-600 mb-4">We start with a free 30-minute consultation to understand your business needs and vision.</p> |
|
|
<div class="flex items-center text-primary font-medium group"> |
|
|
<span class="group-hover:underline">Learn more</span> |
|
|
<i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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-1542744173-8e7e53415bb0?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Design" 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 2</div> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 font-display">Design</h3> |
|
|
<p class="text-gray-600 mb-4">Our designers create 3 custom concepts for your review, incorporating your brand identity.</p> |
|
|
<div class="flex items-center text-primary font-medium group"> |
|
|
<span class="group-hover:underline">See examples</span> |
|
|
<i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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-1552664730-d307ca884978?ixlib=rb-4.0.3&auto=format&fit=crop&w=2070&q=80" alt="Production" 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 3</div> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold mb-3 font-display">Production</h3> |
|
|
<p class="text-gray-600 mb-4">Our craftsmen hand-produce your signage using premium materials and commercial equipment.</p> |
|
|
<div class="flex items-center text-primary font-medium group"> |
|
|
<span class="group-hover:underline">Our materials</span> |
|
|
<i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
<p class="text-gray-600 mb-4">Our certified installers mount your signage with precision for flawless, lasting results.</p> |
|
|
<div class="flex items-center text-primary font-medium group"> |
|
|
<span class="group-hover:underline">Installation guide</span> |
|
|
<i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<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> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 bg-gray-50"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="text-center mb-16"> |
|
|
<h2 class="text-4xl font-bold mb-4 font-display">From <span class="paper-sign inline-block px-4 py-2 bg-white text-dark rounded-lg shadow-md">Paper Signs</span> to <span class="shine-text">Premium Signage</span></h2> |
|
|
<p class="text-lg text-gray-600 max-w-3xl mx-auto">See the dramatic transformation our clients experience when they upgrade from temporary fixes to professional solutions</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 gap-12"> |
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 hover-3d"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-10 h-10 rounded-full bg-red-500 flex items-center justify-center text-white mr-4"> |
|
|
<i class="fas fa-times"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold font-display">Before: Paper Signs</h3> |
|
|
</div> |
|
|
<div class="relative h-64 mb-6 overflow-hidden rounded-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1556740738-b6a63e27c4df?ixlib=rb-4.0.3&auto=format&fit=crop&w=1170&q=80" alt="Before" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<ul class="space-y-3 text-gray-600"> |
|
|
<li class="flex items-start"><i class="fas fa-times text-red-500 mr-3 mt-1"></i> <span>Looks temporary and unprofessional</span></li> |
|
|
<li class="flex items-start"><i class="fas fa-times text-red-500 mr-3 mt-1"></i> <span>Fades and peels quickly</span></li> |
|
|
<li class="flex items-start"><i class="fas fa-times text-red-500 mr-3 mt-1"></i> <span>Damages brand perception</span></li> |
|
|
<li class="flex items-start"><i class="fas fa-times text-red-500 mr-3 mt-1"></i> <span>Hard to read from distance</span></li> |
|
|
</ul> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white p-8 rounded-xl shadow-lg border border-gray-100 hover-3d"> |
|
|
<div class="flex items-center mb-6"> |
|
|
<div class="w-10 h-10 rounded-full bg-accent flex items-center justify-center text-white mr-4"> |
|
|
<i class="fas fa-check"></i> |
|
|
</div> |
|
|
<h3 class="text-2xl font-bold font-display">After: Premium Signage</h3> |
|
|
</div> |
|
|
<div class="relative h-64 mb-6 overflow-hidden rounded-lg"> |
|
|
<img src="https://images.unsplash.com/photo-1588207416474-c5efb2f2d263?ixlib=rb-4.0.3&auto=format&fit=crop&w=987&q=80" alt="After" class="w-full h-full object-cover"> |
|
|
</div> |
|
|
<ul class="space-y-3 text-gray-600"> |
|
|
<li class="flex items-start"><i class="fas fa-check text-accent mr-3 mt-1"></i> <span>Professional, polished appearance</span></li> |
|
|
<li class="flex items-start"><i class="fas fa-check text-accent mr-3 mt-1"></i> <span>Lasts for years without fading</span></li> |
|
|
<li class="flex items-start"><i class="fas fa-check text-accent mr-3 mt-1"></i> <span>Enhances brand credibility</span></li> |
|
|
<li class="flex items-start"><i class="fas fa-check text-accent mr-3 mt-1"></i> <span>Visible from across the street</span></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section class="py-20 form-gradient text-white relative overflow-hidden"> |
|
|
|
|
|
<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 class="bubble w-60 h-60 bottom-1/4 right-1/4"></div> |
|
|
<div class="bubble w-80 h-80 top-1/3 right-1/3"></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"> |
|
|
<button type="submit" class="w-full bg-primary hover:bg-secondary text-white px-6 py-4 rounded-lg font-bold transition transform hover:scale-[1.01] shadow-lg group btn-hover-grow"> |
|
|
<span class="group-hover:underline">Request Free Quote</span> |
|
|
<i class="fas fa-arrow-right ml-2 transition-transform group-hover:translate-x-1"></i> |
|
|
</button> |
|
|
</div> |
|
|
</form> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<footer class="bg-dark text-white pt-20 pb-10"> |
|
|
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> |
|
|
<div class="grid md:grid-cols-4 gap-12 mb-16"> |
|
|
<div> |
|
|
<div class="text-3xl font-bold text-white font-craft tracking-tight mb-4 hover:scale-105 transition-transform inline-block">WINDOW CRAFTS</div> |
|
|
<p class="text-gray-400 mb-6">Transforming storefronts from amateurish to extraordinary since 2012.</p> |
|
|
<div class="flex space-x-4"> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition hover:scale-110"><i class="fab fa-facebook-f"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition hover:scale-110"><i class="fab fa-instagram"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition hover:scale-110"><i class="fab fa-linkedin-in"></i></a> |
|
|
<a href="#" class="text-gray-400 hover:text-white transition hover:scale-110"><i class="fab fa-pinterest-p"></i></a> |
|
|
</div> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Services</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group"><span class="group-hover:underline">Window Graphics</span> <i class="fas fa-arrow-right ml-2 text-xs opacity-0 group-hover:opacity-100 transition-all"></i></a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group"><span class="group-hover:underline">Dimensional Lettering</span> <i class="fas fa-arrow-right ml-2 text-xs opacity-0 group-hover:opacity-100 transition-all"></i></a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group"><span class="group-hover:underline">Vehicle Wraps</span> <i class="fas fa-arrow-right ml-2 text-xs opacity-0 group-hover:opacity-100 transition-all"></i></a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group"><span class="group-hover:underline">Lighted Signs</span> <i class="fas fa-arrow-right ml-2 text-xs opacity-0 group-hover:opacity-100 transition-all"></i></a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group"><span class="group-hover:underline">Trade Show Displays</span> <i class="fas fa-arrow-right ml-2 text-xs opacity-0 group-hover:opacity-100 transition-all"></i></a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Quick Links</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group"><span class="group-hover:underline">Portfolio</span> <i class="fas fa-arrow-right ml-2 text-xs opacity-0 group-hover:opacity-100 transition-all"></i></a></li> |
|
|
<li><a href="#process" class="text-gray-400 hover:text-white transition flex items-center group"><span class="group-hover:underline">Process</span> <i class="fas fa-arrow-right ml-2 text-xs opacity-0 group-hover:opacity-100 transition-all"></i></a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group"><span class="group-hover:underline">About Us</span> <i class="fas fa-arrow-right ml-2 text-xs opacity-0 group-hover:opacity-100 transition-all"></i></a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group"><span class="group-hover:underline">Testimonials</span> <i class="fas fa-arrow-right ml-2 text-xs opacity-0 group-hover:opacity-100 transition-all"></i></a></li> |
|
|
<li><a href="#" class="text-gray-400 hover:text-white transition flex items-center group"><span class="group-hover:underline">Careers</span> <i class="fas fa-arrow-right ml-2 text-xs opacity-0 group-hover:opacity-100 transition-all"></i></a></li> |
|
|
</ul> |
|
|
</div> |
|
|
<div> |
|
|
<h4 class="text-lg font-bold mb-4">Contact</h4> |
|
|
<ul class="space-y-2"> |
|
|
<li class="flex items-center"><i class="fas fa-map-marker-alt text-gray-400 mr-3"></i> <span class="text-gray-400">123 Signage Blvd, Suite 200<br>Chicago, IL 60601</span></li> |
|
|
<li class="flex items-center"><i class="fas fa-phone text-gray-400 mr-3"></i> <span class="text-gray-400">(312) 555-1212</span></li> |
|
|
<li class="flex items-center"><i class="fas fa-envelope text-gray-400 mr-3"></i> <span class="text-gray-400">hello@windowcrafts.com</span></li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
<div class="pt-8 border-t border-gray-800 flex flex-col md:flex-row justify-between items-center"> |
|
|
<p class="text-gray-500 mb-4 md:mb-0">© 2025 Window Crafts. All rights reserved.</p> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-500 hover:text-white transition hover:underline">Privacy Policy</a> |
|
|
<a href="#" class="text-gray-500 hover:text-white transition hover:underline">Terms of Service</a> |
|
|
<a href="#" class="text-gray-500 hover:text-white transition hover:underline">Accessibility</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
|
|
|
window.addEventListener('scroll', () => { |
|
|
const scrollTop = document.documentElement.scrollTop || document.body.scrollTop; |
|
|
const scrollHeight = document.documentElement.scrollHeight - document.documentElement.clientHeight; |
|
|
const scrollProgress = (scrollTop / scrollHeight) * 100; |
|
|
|
|
|
document.querySelector('.progress-bar').style.setProperty('--progress', `${scrollProgress}%`); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('a[href^="#"]').forEach(anchor => { |
|
|
anchor.addEventListener('click', function (e) { |
|
|
e.preventDefault(); |
|
|
|
|
|
document.querySelector(this.getAttribute('href')).scrollIntoView({ |
|
|
behavior: 'smooth' |
|
|
}); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
function createBubbles() { |
|
|
const heroSection = document.querySelector('.hero-gradient'); |
|
|
const ctaSection = document.querySelector('.bg-primary'); |
|
|
|
|
|
for (let i = 0; i < 8; i++) { |
|
|
const bubble = document.createElement('div'); |
|
|
bubble.classList.add('bubble'); |
|
|
|
|
|
|
|
|
const size = Math.random() * 80 + 40; |
|
|
bubble.style.width = `${size}px`; |
|
|
bubble.style.height = `${size}px`; |
|
|
|
|
|
|
|
|
bubble.style.left = `${Math.random() * 100}%`; |
|
|
bubble.style.top = `${Math.random() * 100}%`; |
|
|
|
|
|
heroSection.appendChild(bubble.cloneNode(true)); |
|
|
ctaSection.appendChild(bubble.cloneNode(true)); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
createBubbles(); |
|
|
</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=LimenAlex/signa-1" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
