generated from Nicholai/astro-template
feat: Revamp hero, services, and footer sections with new designs, improved layout, and updated icon usage; enhance visual consistency and responsiveness.
This commit is contained in:
parent
cdf0b9f567
commit
9dfb293567
@ -21,6 +21,37 @@ Development log for tracking changes, decisions, and next steps.
|
||||
|
||||
---
|
||||
|
||||
## 2025-12-27 - Hero, Services, and Footer Design Revamp
|
||||
|
||||
### Changes
|
||||
- **Hero Section Redesign**:
|
||||
- Replaced mountain background with a dark green (`#3A4D39`) color and a custom tileable pattern texture (`tileablepattern.png`).
|
||||
- Added a new hero visual on the right featuring a paintbrush and color swatches image (`brushandswatchestransparent.png`).
|
||||
- Implemented floating decorative service cards ("Deck Restoration" and "Ext. Paint") overlaid on the hero image with hover animations.
|
||||
- Updated typography to match the "Craftsmanship For Your Home" editorial style.
|
||||
- **Services Section Redesign**:
|
||||
- Renamed and restructured the section to "Our Expertise".
|
||||
- Replaced the vertical list with a horizontal grid of three cards: "Interior & Exterior Painting", "Wood Restoration", and "Skilled Handyman".
|
||||
- Each card features a distinct background color (Sage or Forest green), unique service images, and "Learn More" call-to-action buttons.
|
||||
- **Footer Redesign**:
|
||||
- Restructured the footer into two main sections.
|
||||
- Added a branding top section with a large logo, company mission statement, and a dark green background.
|
||||
- Updated the bottom section with a black background, maintaining the "Ready to Transform Your Home?" CTA and navigation links.
|
||||
- **Lucide Icon Fixes**:
|
||||
- Updated all Lucide icon components in `src/pages/index.astro` to use `className` instead of `class` to resolve React linter errors.
|
||||
|
||||
### Decisions
|
||||
- **Visual Consistency**: Chose to layer the tileable pattern at low opacity (20%) to add texture without distracting from the main hero content.
|
||||
- **Card Styling**: Used varying shades of green (`#3A4D39` and `#739072`) for the services cards to create visual interest while staying within the brand's palette.
|
||||
- **Layout Adjustments**: Shifted the hero content to a split-screen layout to accommodate the large paintbrush image while maintaining readability on all devices.
|
||||
|
||||
### Next Steps
|
||||
- [ ] Verify responsive behavior across various mobile screen sizes.
|
||||
- [ ] Replace placeholder "Map" component with a real interactive map or high-quality image.
|
||||
- [ ] Connect the "Learn More" buttons and "Get a Quote" CTAs to their respective destinations.
|
||||
|
||||
---
|
||||
|
||||
## 2025-12-27 - Logo Integration & Favicon Generation
|
||||
|
||||
### Changes
|
||||
|
||||
@ -15,6 +15,7 @@ import {
|
||||
ArrowDown,
|
||||
LayoutGrid,
|
||||
Box,
|
||||
PaintRoller,
|
||||
} from "lucide-react";
|
||||
|
||||
// Branding Colors (Refined for Eden Style):
|
||||
@ -27,6 +28,8 @@ import cardsImg from "../assets/cards.png";
|
||||
import puttyKnifeImg from "../assets/puttyknife2.png";
|
||||
import closeUpBrushImg from "../assets/closeupbrush4.png";
|
||||
import mountainsImg from "../assets/mountains.png";
|
||||
import tileablePattern from "../assets/tileablepattern.png";
|
||||
import brushImg from "../assets/brushandswatchestransparent.png";
|
||||
---
|
||||
|
||||
<Layout title="Summit Painting & Handyman Services | Colorado Springs">
|
||||
@ -94,26 +97,21 @@ import mountainsImg from "../assets/mountains.png";
|
||||
<!-- Hero Section -->
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 mt-6">
|
||||
<div
|
||||
class="relative bg-[#3A4D39] rounded-[3rem] p-8 md:p-16 overflow-hidden min-h-[600px] flex flex-col items-center justify-center text-center"
|
||||
class="relative bg-[#3A4D39] rounded-[3rem] p-8 md:p-16 overflow-hidden min-h-[700px] flex flex-col md:flex-row items-center justify-between gap-12"
|
||||
>
|
||||
<Image
|
||||
src={mountainsImg}
|
||||
alt="Colorado mountains background"
|
||||
class="absolute inset-0 w-full h-full object-cover opacity-40 mix-blend-overlay"
|
||||
/>
|
||||
<!-- Tileable Pattern Overlay -->
|
||||
<div
|
||||
class="absolute inset-0 opacity-20 mix-blend-overlay pointer-events-none"
|
||||
style={`background-image: url(${tileablePattern.src}); background-repeat: repeat; background-size: 400px;`}
|
||||
></div>
|
||||
|
||||
<!-- Dark Gradient Overlay for Readability -->
|
||||
<div
|
||||
class="absolute inset-0 bg-gradient-to-b from-[#3A4D39]/80 via-[#3A4D39]/50 to-[#3A4D39]/90"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="relative z-10 max-w-3xl mx-auto mt-8">
|
||||
<!-- Hero Content (Left) -->
|
||||
<div class="relative z-10 max-w-xl text-center md:text-left mt-8 md:mt-0">
|
||||
<div
|
||||
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white/90 text-sm font-medium mb-6"
|
||||
class="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-white/10 backdrop-blur-sm border border-white/20 text-white/90 text-sm font-medium mb-8"
|
||||
>
|
||||
<Star size={14} class="text-[#ECE3CE]" fill="#ECE3CE" />
|
||||
<span>Colorado Springs' Trusted Painter</span>
|
||||
<Star size={14} className="text-[#ECE3CE]" fill="#ECE3CE" />
|
||||
<span>Colorado Springs' Trusted Partner</span>
|
||||
</div>
|
||||
|
||||
<h1
|
||||
@ -123,90 +121,73 @@ import mountainsImg from "../assets/mountains.png";
|
||||
</h1>
|
||||
|
||||
<p
|
||||
class="text-xl text-stone-200 mb-10 max-w-lg mx-auto leading-relaxed font-light"
|
||||
class="text-xl text-stone-200 mb-10 max-w-md mx-auto md:mx-0 leading-relaxed font-light"
|
||||
>
|
||||
Elevate your living space with professional painting,
|
||||
wood restoration, and handyman services.
|
||||
wood restoration, and handyman services in Colorado Springs.
|
||||
</p>
|
||||
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-center justify-center gap-4"
|
||||
class="flex flex-col sm:flex-row items-center justify-center md:justify-start gap-4"
|
||||
>
|
||||
<a
|
||||
href="#contact"
|
||||
class="min-w-[160px] bg-[#ECE3CE] text-[#3A4D39] text-base font-medium px-8 py-4 rounded-full hover:bg-white transition-colors"
|
||||
class="min-w-[160px] bg-[#ECE3CE] text-[#3A4D39] text-base font-medium px-8 py-4 rounded-full hover:bg-white transition-colors text-center"
|
||||
>
|
||||
Get a Quote
|
||||
</a>
|
||||
<a
|
||||
href="#services"
|
||||
class="min-w-[160px] text-white border border-white/30 hover:bg-white/10 text-base font-medium px-8 py-4 rounded-full transition-colors backdrop-blur-sm"
|
||||
class="min-w-[160px] text-white border border-white/30 hover:bg-white/10 text-base font-medium px-8 py-4 rounded-full transition-colors backdrop-blur-sm text-center"
|
||||
>
|
||||
View Services
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Floating Cards (Decorative) -->
|
||||
<div
|
||||
class="hidden lg:block absolute left-12 bottom-12 rotate-[-6deg] hover:rotate-0 transition-transform duration-500"
|
||||
>
|
||||
<div class="bg-[#FAF9F6] p-4 rounded-2xl shadow-xl w-48">
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div
|
||||
class="w-10 h-10 rounded-full bg-[#E5E5E5] flex items-center justify-center"
|
||||
>
|
||||
<Paintbrush size={20} class="text-stone-600" />
|
||||
</div>
|
||||
<div>
|
||||
<p class="text-xs font-bold text-stone-900">
|
||||
Ext. Paint
|
||||
</p>
|
||||
<p class="text-[10px] text-stone-500">
|
||||
In Progress
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="h-1.5 w-full bg-stone-200 rounded-full overflow-hidden"
|
||||
>
|
||||
<div class="h-full w-[80%] bg-[#739072]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Hero Visual (Right) -->
|
||||
<div class="relative z-10 flex-1 flex justify-center items-center w-full">
|
||||
<div class="relative w-full max-w-[500px]">
|
||||
<!-- Main Brush & Swatches Image -->
|
||||
<Image
|
||||
src={brushImg}
|
||||
alt="Paint brush and color swatches"
|
||||
class="w-full h-auto drop-shadow-2xl"
|
||||
/>
|
||||
|
||||
<div
|
||||
class="hidden lg:block absolute right-12 top-24 rotate-[6deg] hover:rotate-0 transition-transform duration-500"
|
||||
>
|
||||
<div class="bg-[#FAF9F6] p-4 rounded-2xl shadow-xl w-52">
|
||||
<div class="flex justify-between items-start mb-2">
|
||||
<div
|
||||
class="w-8 h-8 rounded-full bg-[#3A4D39] flex items-center justify-center"
|
||||
>
|
||||
<Check size={16} class="text-white" />
|
||||
</div>
|
||||
<span
|
||||
class="text-[10px] font-bold bg-[#739072]/20 text-[#3A4D39] px-2 py-0.5 rounded"
|
||||
>Verified</span
|
||||
>
|
||||
</div>
|
||||
<p
|
||||
class="text-sm font-serif font-medium text-stone-900"
|
||||
<!-- Floating Card 1: Deck Restoration -->
|
||||
<div
|
||||
class="absolute -right-4 top-[10%] bg-white p-4 rounded-2xl shadow-2xl w-56 hidden lg:block transform rotate-[6deg] hover:rotate-0 transition-transform duration-500"
|
||||
>
|
||||
Deck Restoration
|
||||
</p>
|
||||
<div class="flex -space-x-2 mt-3">
|
||||
<div
|
||||
class="w-6 h-6 rounded-full bg-stone-300 border-2 border-white"
|
||||
>
|
||||
<div class="flex justify-between items-start mb-3">
|
||||
<div class="w-10 h-10 rounded-full bg-[#3A4D39] flex items-center justify-center">
|
||||
<Trees size={20} className="text-white" />
|
||||
</div>
|
||||
<span class="text-[10px] font-bold bg-stone-100 text-stone-600 px-2 py-1 rounded">Exterior</span>
|
||||
</div>
|
||||
<div
|
||||
class="w-6 h-6 rounded-full bg-stone-400 border-2 border-white"
|
||||
>
|
||||
<p class="text-sm font-serif font-bold text-stone-900 mb-2">Deck Restoration</p>
|
||||
<div class="flex gap-2">
|
||||
<div class="w-4 h-4 rounded-full bg-[#3A4D39]"></div>
|
||||
<div class="w-4 h-4 rounded-full bg-[#739072]"></div>
|
||||
<div class="w-4 h-4 rounded-full bg-[#ECE3CE]"></div>
|
||||
</div>
|
||||
<div
|
||||
class="w-6 h-6 rounded-full bg-stone-500 border-2 border-white"
|
||||
>
|
||||
</div>
|
||||
|
||||
<!-- Floating Card 2: Ext. Paint -->
|
||||
<div
|
||||
class="absolute -left-8 bottom-[20%] bg-white p-4 rounded-2xl shadow-2xl w-48 hidden lg:block transform -rotate-[6deg] hover:rotate-0 transition-transform duration-500"
|
||||
>
|
||||
<div class="flex items-center gap-3 mb-3">
|
||||
<div class="w-10 h-10 rounded-full bg-stone-100 flex items-center justify-center">
|
||||
<PaintRoller size={20} className="text-stone-600" />
|
||||
</div>
|
||||
<div class="text-left">
|
||||
<p class="text-xs font-bold text-stone-900">Ext. Paint</p>
|
||||
<p class="text-[10px] text-stone-500">In Progress</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-1.5 w-full bg-stone-100 rounded-full overflow-hidden">
|
||||
<div class="h-full w-[75%] bg-[#739072]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -216,130 +197,51 @@ import mountainsImg from "../assets/mountains.png";
|
||||
|
||||
<!-- Core Services Section -->
|
||||
<section id="services" class="max-w-7xl mx-auto px-6 py-24">
|
||||
<div
|
||||
class="flex flex-col md:flex-row md:items-end justify-between mb-16 gap-6"
|
||||
>
|
||||
<div class="max-w-xl">
|
||||
<h2
|
||||
class="text-4xl md:text-5xl font-serif font-medium text-[#1c1917] mb-6"
|
||||
>
|
||||
Services That <br /> Transform Your Home
|
||||
</h2>
|
||||
<p class="text-lg text-stone-500 leading-relaxed">
|
||||
We don't just paint; we care for your home. From
|
||||
restoration to detailed repairs.
|
||||
<h2 class="text-4xl md:text-5xl font-serif font-medium text-[#1c1917] mb-16 text-center">
|
||||
Our Expertise
|
||||
</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
|
||||
<!-- Card 1: Interior & Exterior Painting -->
|
||||
<div class="bg-[#739072]/80 rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
|
||||
<div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
|
||||
<Image src={closeUpBrushImg} alt="Interior & Exterior Painting" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
|
||||
</div>
|
||||
<h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Interior & Exterior Painting</h3>
|
||||
<p class="text-stone-100 mb-8 leading-relaxed text-sm">
|
||||
Flawless finishes for your home's interior and exterior, using premium materials and meticulous techniques.
|
||||
</p>
|
||||
</div>
|
||||
<a
|
||||
href="#all-services"
|
||||
class="hidden md:flex items-center gap-2 text-[#3A4D39] font-medium border-b border-[#3A4D39] pb-0.5 hover:opacity-80 transition-opacity"
|
||||
>
|
||||
See full service list <ArrowRight size={16} />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<!-- Service 1 -->
|
||||
<div
|
||||
class="bg-white rounded-[2.5rem] p-10 relative overflow-hidden group border border-stone-100/50 hover:shadow-xl transition-all duration-500 hover:-translate-y-1"
|
||||
>
|
||||
<div class="relative z-10">
|
||||
<div
|
||||
class="w-14 h-14 rounded-2xl bg-[#ECE3CE]/50 flex items-center justify-center mb-8 group-hover:scale-110 transition-transform"
|
||||
>
|
||||
<Paintbrush size={28} class="text-[#3A4D39]" />
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-serif font-medium mb-4 text-[#1c1917]"
|
||||
>
|
||||
Residential Painting
|
||||
</h3>
|
||||
<p class="text-stone-500 mb-8 leading-relaxed max-w-sm">
|
||||
Interior and exterior transformation. We use premium
|
||||
paints and focus heavily on prep work to ensure
|
||||
longevity.
|
||||
</p>
|
||||
<ul class="space-y-3 mb-8">
|
||||
<li
|
||||
class="flex items-center gap-3 text-sm font-medium text-stone-700"
|
||||
>
|
||||
<Check size={16} class="text-[#739072]" /> Exterior
|
||||
Body & Trim
|
||||
</li>
|
||||
<li
|
||||
class="flex items-center gap-3 text-sm font-medium text-stone-700"
|
||||
>
|
||||
<Check size={16} class="text-[#739072]" /> Cabinet
|
||||
Refinishing
|
||||
</li>
|
||||
<li
|
||||
class="flex items-center gap-3 text-sm font-medium text-stone-700"
|
||||
>
|
||||
<Check size={16} class="text-[#739072]" /> Color Consultations
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div
|
||||
class="absolute -right-20 -bottom-20 w-64 h-64 bg-[#739072]/10 rounded-full blur-3xl group-hover:bg-[#739072]/20 transition-colors"
|
||||
>
|
||||
</div>
|
||||
<!-- Decorative Image (Prop Style) -->
|
||||
<Image
|
||||
src={closeUpBrushImg}
|
||||
alt="Paint brush close up"
|
||||
class="absolute -right-8 -bottom-16 w-80 h-auto object-contain opacity-100 group-hover:scale-105 transition-transform duration-500 rotate-6"
|
||||
/>
|
||||
<a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Service 2 -->
|
||||
<div
|
||||
class="bg-white rounded-[2.5rem] p-10 relative overflow-hidden group border border-stone-100/50 hover:shadow-xl transition-all duration-500 hover:-translate-y-1"
|
||||
>
|
||||
<div class="relative z-10">
|
||||
<div
|
||||
class="w-14 h-14 rounded-2xl bg-[#739072]/20 flex items-center justify-center mb-8 group-hover:scale-110 transition-transform"
|
||||
>
|
||||
<Trees size={28} class="text-[#3A4D39]" />
|
||||
</div>
|
||||
<h3
|
||||
class="text-2xl font-serif font-medium mb-4 text-[#1c1917]"
|
||||
>
|
||||
Wood & Deck Restoration
|
||||
</h3>
|
||||
<p class="text-stone-500 mb-8 leading-relaxed max-w-sm">
|
||||
Don't replace it if you don't have to. We restore
|
||||
decks, fences, and siding repairs to like-new
|
||||
condition.
|
||||
</p>
|
||||
<ul class="space-y-3 mb-8">
|
||||
<li
|
||||
class="flex items-center gap-3 text-sm font-medium text-stone-700"
|
||||
>
|
||||
<Check size={16} class="text-[#739072]" /> Power Washing
|
||||
</li>
|
||||
<li
|
||||
class="flex items-center gap-3 text-sm font-medium text-stone-700"
|
||||
>
|
||||
<Check size={16} class="text-[#739072]" /> Staining
|
||||
& Sealing
|
||||
</li>
|
||||
<li
|
||||
class="flex items-center gap-3 text-sm font-medium text-stone-700"
|
||||
>
|
||||
<Check size={16} class="text-[#739072]" /> Rot Repair
|
||||
</li>
|
||||
</ul>
|
||||
<!-- Card 2: Wood Restoration -->
|
||||
<div class="bg-[#3A4D39] rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
|
||||
<div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
|
||||
<Image src={cardsImg} alt="Wood Restoration" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
|
||||
</div>
|
||||
<div
|
||||
class="absolute -right-20 -bottom-20 w-64 h-64 bg-[#ECE3CE]/30 rounded-full blur-3xl group-hover:bg-[#ECE3CE]/50 transition-colors"
|
||||
>
|
||||
<h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Wood Restoration</h3>
|
||||
<p class="text-stone-100 mb-8 leading-relaxed text-sm">
|
||||
Revitalizing your decks, fences, and woodwork, restoring their natural beauty and protecting them for years.
|
||||
</p>
|
||||
<a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Card 3: Skilled Handyman -->
|
||||
<div class="bg-[#739072]/80 rounded-[2.5rem] p-8 flex flex-col items-center text-center text-white group hover:shadow-2xl transition-all duration-500 overflow-hidden">
|
||||
<div class="w-full h-48 mb-8 overflow-hidden rounded-2xl relative shadow-inner">
|
||||
<Image src={puttyKnifeImg} alt="Skilled Handyman" class="w-full h-full object-cover group-hover:scale-110 transition-transform duration-500" />
|
||||
</div>
|
||||
<!-- Decorative Image (Prop Style) -->
|
||||
<Image
|
||||
src={puttyKnifeImg}
|
||||
alt="Putty knife tools"
|
||||
class="absolute -right-8 -bottom-8 w-64 h-auto object-contain opacity-100 group-hover:scale-105 transition-transform duration-500 -rotate-3"
|
||||
/>
|
||||
<h3 class="text-2xl font-serif font-medium mb-4 text-[#ECE3CE]">Skilled Handyman</h3>
|
||||
<p class="text-stone-100 mb-8 leading-relaxed text-sm">
|
||||
Reliable solutions for a wide range of home repairs and improvements, delivered with precision and care.
|
||||
</p>
|
||||
<a href="#contact" class="mt-auto bg-[#ECE3CE] text-[#3A4D39] px-8 py-3 rounded-full text-sm font-bold uppercase tracking-wider hover:bg-white transition-colors">
|
||||
Learn More
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
@ -369,7 +271,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
>
|
||||
<Check
|
||||
size={14}
|
||||
class="text-stone-400 group-hover:text-white"
|
||||
className="text-stone-400 group-hover:text-white"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-stone-700 font-medium"
|
||||
@ -382,7 +284,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
>
|
||||
<Check
|
||||
size={14}
|
||||
class="text-stone-400 group-hover:text-white"
|
||||
className="text-stone-400 group-hover:text-white"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-stone-700 font-medium"
|
||||
@ -395,7 +297,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
>
|
||||
<Check
|
||||
size={14}
|
||||
class="text-stone-400 group-hover:text-white"
|
||||
className="text-stone-400 group-hover:text-white"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-stone-700 font-medium"
|
||||
@ -408,7 +310,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
>
|
||||
<Check
|
||||
size={14}
|
||||
class="text-stone-400 group-hover:text-white"
|
||||
className="text-stone-400 group-hover:text-white"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-stone-700 font-medium"
|
||||
@ -424,7 +326,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
>
|
||||
<Check
|
||||
size={14}
|
||||
class="text-stone-400 group-hover:text-white"
|
||||
className="text-stone-400 group-hover:text-white"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-stone-700 font-medium"
|
||||
@ -437,7 +339,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
>
|
||||
<Check
|
||||
size={14}
|
||||
class="text-stone-400 group-hover:text-white"
|
||||
className="text-stone-400 group-hover:text-white"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-stone-700 font-medium"
|
||||
@ -450,7 +352,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
>
|
||||
<Check
|
||||
size={14}
|
||||
class="text-stone-400 group-hover:text-white"
|
||||
className="text-stone-400 group-hover:text-white"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-stone-700 font-medium"
|
||||
@ -463,7 +365,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
>
|
||||
<Check
|
||||
size={14}
|
||||
class="text-stone-400 group-hover:text-white"
|
||||
className="text-stone-400 group-hover:text-white"
|
||||
/>
|
||||
</div>
|
||||
<span class="text-stone-700 font-medium"
|
||||
@ -509,7 +411,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
<div
|
||||
class="w-12 h-12 rounded-full bg-[#3A4D39] flex items-center justify-center mb-6"
|
||||
>
|
||||
<Ruler size={20} class="text-white" />
|
||||
<Ruler size={20} className="text-white" />
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-serif font-medium mb-3 text-[#1c1917]"
|
||||
@ -530,7 +432,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
<div
|
||||
class="w-12 h-12 rounded-full bg-[#3A4D39] flex items-center justify-center mb-6"
|
||||
>
|
||||
<Coins size={20} class="text-white" />
|
||||
<Coins size={20} className="text-white" />
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-serif font-medium mb-3 text-[#1c1917]"
|
||||
@ -550,7 +452,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
<div
|
||||
class="w-12 h-12 rounded-full bg-[#3A4D39] flex items-center justify-center mb-6"
|
||||
>
|
||||
<Headset size={20} class="text-white" />
|
||||
<Headset size={20} className="text-white" />
|
||||
</div>
|
||||
<h3
|
||||
class="text-xl font-serif font-medium mb-3 text-[#1c1917]"
|
||||
@ -622,7 +524,7 @@ import mountainsImg from "../assets/mountains.png";
|
||||
>
|
||||
<MapPin
|
||||
size={32}
|
||||
class="text-[#739072] drop-shadow-md"
|
||||
className="text-[#739072] drop-shadow-md"
|
||||
/>
|
||||
<p
|
||||
class="text-stone-400 text-sm font-medium tracking-wide"
|
||||
@ -643,123 +545,150 @@ import mountainsImg from "../assets/mountains.png";
|
||||
</main>
|
||||
|
||||
<!-- Hybrid Footer / Rounded CTA -->
|
||||
<footer class="bg-[#1c1917] text-white pt-24 pb-12 rounded-t-[3rem] mt-24">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<!-- Large CTA Section -->
|
||||
<div class="text-center mb-24 border-b border-stone-800 pb-20">
|
||||
<h2
|
||||
class="text-4xl md:text-6xl font-serif font-medium tracking-tight mb-8 text-white max-w-2xl mx-auto leading-tight"
|
||||
>
|
||||
Ready to Transform <br /> Your Home?
|
||||
</h2>
|
||||
<p class="text-xl text-stone-400 mb-10 max-w-lg mx-auto">
|
||||
Get a free, detailed estimate for your painting or handyman
|
||||
project today.
|
||||
</p>
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-center justify-center gap-4"
|
||||
>
|
||||
<a
|
||||
href="tel:7195550123"
|
||||
class="min-w-[200px] bg-white text-[#1c1917] text-lg font-medium px-8 py-4 rounded-full hover:bg-stone-200 transition-colors shadow-lg flex items-center justify-center gap-2"
|
||||
>
|
||||
<Phone size={20} />
|
||||
Call Now
|
||||
</a>
|
||||
<a
|
||||
href="mailto:contact@summitpainting.com"
|
||||
class="min-w-[200px] bg-transparent text-white border border-stone-600 text-lg font-medium px-8 py-4 rounded-full hover:border-white hover:bg-white/5 transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
Send Email
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Links -->
|
||||
<div class="flex flex-col md:flex-row justify-between gap-12 mb-16">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<footer class="mt-24">
|
||||
<!-- Footer Top: Branding Section -->
|
||||
<div class="bg-[#3A4D39] text-[#ECE3CE] py-16 px-6 rounded-t-[3rem]">
|
||||
<div class="max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-12">
|
||||
<div class="flex flex-col items-center md:items-start gap-4">
|
||||
<div class="flex items-center gap-4">
|
||||
<picture>
|
||||
<source
|
||||
srcset="/media/logo-white.webp"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
src="/media/logo-white.png"
|
||||
alt="Summit Painting Logo"
|
||||
class="w-12 h-12"
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
<source srcset="/media/logo-white.webp" type="image/webp" />
|
||||
<img src="/media/logo-white.png" alt="Summit Painting Logo" class="w-20 h-20" width="80" height="80" />
|
||||
</picture>
|
||||
<span
|
||||
class="text-xl font-serif font-medium tracking-tight"
|
||||
>Summit Painting</span
|
||||
>
|
||||
<span class="text-4xl md:text-5xl font-serif font-bold tracking-tighter uppercase">Summit</span>
|
||||
</div>
|
||||
<p class="text-stone-400 max-w-xs leading-relaxed">
|
||||
Quality craftsmanship and honest service for Colorado
|
||||
Springs and beyond.
|
||||
</div>
|
||||
|
||||
<div class="max-w-xl text-center md:text-left">
|
||||
<h2 class="text-3xl md:text-5xl font-serif font-medium mb-6 leading-tight">
|
||||
Rooted in Colorado Springs, <br /> Driven by Quality.
|
||||
</h2>
|
||||
<p class="text-stone-200 leading-relaxed font-light">
|
||||
We are a local team dedicated to bringing premium craftsmanship and a personal touch to every project. Our commitment is to trustworthy service, attention to detail, and enhancing the beauty of your home.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-12 md:gap-24 text-sm">
|
||||
<div class="flex flex-col gap-4">
|
||||
<span class="font-bold text-white tracking-wide"
|
||||
>Services</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer Bottom: CTA & Links -->
|
||||
<div class="bg-[#1c1917] text-white pt-24 pb-12">
|
||||
<div class="max-w-7xl mx-auto px-6">
|
||||
<!-- Large CTA Section -->
|
||||
<div class="text-center mb-24 border-b border-stone-800 pb-20">
|
||||
<h2
|
||||
class="text-4xl md:text-6xl font-serif font-medium tracking-tight mb-8 text-white max-w-2xl mx-auto leading-tight"
|
||||
>
|
||||
Ready to Transform <br /> Your Home?
|
||||
</h2>
|
||||
<p class="text-xl text-stone-400 mb-10 max-w-lg mx-auto">
|
||||
Get a free, detailed estimate for your painting or handyman
|
||||
project today.
|
||||
</p>
|
||||
<div
|
||||
class="flex flex-col sm:flex-row items-center justify-center gap-4"
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>Painting</a
|
||||
href="tel:7195550123"
|
||||
class="min-w-[200px] bg-white text-[#1c1917] text-lg font-medium px-8 py-4 rounded-full hover:bg-stone-200 transition-colors shadow-lg flex items-center justify-center gap-2"
|
||||
>
|
||||
<Phone size={20} />
|
||||
Call Now
|
||||
</a>
|
||||
<a
|
||||
href="#"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>Deck Restoration</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>Handyman</a
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<span class="font-bold text-white tracking-wide"
|
||||
>Company</span
|
||||
>
|
||||
<a
|
||||
href="#why-us"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>About Us</a
|
||||
>
|
||||
<a
|
||||
href="#areas"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>Service Areas</a
|
||||
>
|
||||
<a
|
||||
href="#contact"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>Contact</a
|
||||
href="mailto:contact@summitpainting.com"
|
||||
class="min-w-[200px] bg-transparent text-white border border-stone-600 text-lg font-medium px-8 py-4 rounded-full hover:border-white hover:bg-white/5 transition-colors flex items-center justify-center gap-2"
|
||||
>
|
||||
Send Email
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Bar -->
|
||||
<div
|
||||
class="pt-8 border-t border-stone-800 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-stone-500"
|
||||
>
|
||||
<p>
|
||||
© {new Date().getFullYear()} Summit Painting & Handyman Services.
|
||||
</p>
|
||||
<div class="flex gap-6">
|
||||
<a href="#" class="hover:text-white transition-colors"
|
||||
>Privacy</a
|
||||
>
|
||||
<a href="#" class="hover:text-white transition-colors"
|
||||
>Terms</a
|
||||
>
|
||||
<!-- Footer Links -->
|
||||
<div class="flex flex-col md:flex-row justify-between gap-12 mb-16">
|
||||
<div>
|
||||
<div class="flex items-center gap-2 mb-6">
|
||||
<picture>
|
||||
<source
|
||||
srcset="/media/logo-white.webp"
|
||||
type="image/webp"
|
||||
/>
|
||||
<img
|
||||
src="/media/logo-white.png"
|
||||
alt="Summit Painting Logo"
|
||||
class="w-12 h-12"
|
||||
width="48"
|
||||
height="48"
|
||||
/>
|
||||
</picture>
|
||||
<span
|
||||
class="text-xl font-serif font-medium tracking-tight"
|
||||
>Summit Painting</span
|
||||
>
|
||||
</div>
|
||||
<p class="text-stone-400 max-w-xs leading-relaxed">
|
||||
Quality craftsmanship and honest service for Colorado
|
||||
Springs and beyond.
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-wrap gap-12 md:gap-24 text-sm">
|
||||
<div class="flex flex-col gap-4">
|
||||
<span class="font-bold text-white tracking-wide"
|
||||
>Services</span
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>Painting</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>Deck Restoration</a
|
||||
>
|
||||
<a
|
||||
href="#"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>Handyman</a
|
||||
>
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<span class="font-bold text-white tracking-wide"
|
||||
>Company</span
|
||||
>
|
||||
<a
|
||||
href="#why-us"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>About Us</a
|
||||
>
|
||||
<a
|
||||
href="#areas"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>Service Areas</a
|
||||
>
|
||||
<a
|
||||
href="#contact"
|
||||
class="text-stone-400 hover:text-white transition-colors"
|
||||
>Contact</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Bottom Bar -->
|
||||
<div
|
||||
class="pt-8 border-t border-stone-800 flex flex-col md:flex-row justify-between items-center gap-4 text-xs text-stone-500"
|
||||
>
|
||||
<p>
|
||||
© {new Date().getFullYear()} Summit Painting & Handyman Services.
|
||||
</p>
|
||||
<div class="flex gap-6">
|
||||
<a href="#" class="hover:text-white transition-colors"
|
||||
>Privacy</a
|
||||
>
|
||||
<a href="#" class="hover:text-white transition-colors"
|
||||
>Terms</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user