generated from Nicholai/astro-template
Nicholai
0cda5c0497
- Add new media assets for hero, mosaic, service area, etc. - Create Astro components: Nav, Footer, Button, Container, Section, SectionHeading, Hero, ExpertiseMosaic, ServiceList, WhyUs, ServiceArea. - Refactor src/pages/index.astro into reusable components. - Add src/pages/contact.astro with contact form and info. - Fix dead navigation links and service links. - Implement mobile navigation using details/summary. - Apply strict 12‑column grid and 1140px container. - Add scroll‑triggered reveal animations and sticky hero background.
159 lines
9.1 KiB
Plaintext
159 lines
9.1 KiB
Plaintext
---
|
|
import { Image } from "astro:assets";
|
|
import { Phone, Mail, MapPin, ArrowRight, Instagram, Facebook, Share2 } from "lucide-react";
|
|
|
|
const currentYear = new Date().getFullYear();
|
|
|
|
const services = [
|
|
{ label: "Interior Painting", href: "/contact" },
|
|
{ label: "Exterior Painting", href: "/contact" },
|
|
{ label: "Deck Restoration", href: "/contact" },
|
|
{ label: "Handyman Services", href: "/contact" },
|
|
];
|
|
|
|
const company = [
|
|
{ label: "Our Expertise", href: "#services" },
|
|
{ label: "Service Areas", href: "#areas" },
|
|
{ label: "Contact Us", href: "/contact" },
|
|
{ label: "About Our Craft", href: "#why-us" },
|
|
];
|
|
---
|
|
|
|
<footer class="footer relative pb-20 overflow-hidden">
|
|
<div class="max-w-brand mx-auto px-6 relative z-10">
|
|
<!-- Footer Top: Social Bar -->
|
|
<div class="flex flex-col md:flex-row items-center justify-between py-12 border-b border-brand-green/10 mb-20">
|
|
<h3 class="text-3xl md:text-4xl font-serif font-medium text-brand-dark mb-8 md:mb-0">Like us wherever you like</h3>
|
|
<div class="flex items-center gap-6">
|
|
<a href="#" class="w-14 h-14 rounded-full bg-brand-green/5 flex items-center justify-center hover:bg-brand-green hover:text-white transition-all duration-500 group shadow-lg">
|
|
<Instagram size={24} />
|
|
</a>
|
|
<a href="#" class="w-14 h-14 rounded-full bg-brand-green/5 flex items-center justify-center hover:bg-brand-green hover:text-white transition-all duration-500 group shadow-lg">
|
|
<Facebook size={24} />
|
|
</a>
|
|
<a href="#" class="w-14 h-14 rounded-full bg-brand-green/5 flex items-center justify-center hover:bg-brand-green hover:text-white transition-all duration-500 group shadow-lg">
|
|
<Share2 size={24} />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Middle: Pill CTA + Hybrid Layout -->
|
|
<div class="relative mb-32">
|
|
<!-- Unified Footer CTA - The "Pill" -->
|
|
<div class="relative rounded-[4rem] bg-brand-green p-12 md:p-20 mb-24 overflow-hidden group shadow-2xl">
|
|
<!-- Brush Texture -->
|
|
<div class="absolute inset-0 opacity-[0.2] pointer-events-none mix-blend-overlay bg-[url('/media/brush1.png')] bg-cover bg-center" />
|
|
|
|
<div class="relative z-10 flex flex-col lg:flex-row items-center justify-between gap-12">
|
|
<div class="max-w-2xl text-center lg:text-left">
|
|
<span class="inline-block text-[11px] font-bold uppercase tracking-[0.4em] text-brand-cream/60 mb-8">Start Your Transformation</span>
|
|
<h2 class="text-5xl md:text-7xl font-serif font-medium text-white mb-8 tracking-tight leading-[0.9]">
|
|
Quality That <br /> <span class="italic text-brand-cream font-light">Speaks For Itself</span>
|
|
</h2>
|
|
<p class="text-white/60 text-lg md:text-xl font-light max-w-xl">
|
|
Experience the difference of meticulous attention to detail and premium materials.
|
|
</p>
|
|
</div>
|
|
<div class="flex flex-col sm:flex-row items-center gap-6">
|
|
<a
|
|
href="/contact"
|
|
class="px-12 py-6 bg-brand-cream text-brand-green rounded-full font-bold uppercase tracking-[0.3em] text-xs hover:bg-white transition-all shadow-2xl hover:-translate-y-1"
|
|
>
|
|
Get Free Quote
|
|
</a>
|
|
<a
|
|
href="tel:3124567890"
|
|
class="px-10 py-6 bg-white/5 text-white border border-white/20 backdrop-blur-md rounded-full font-bold uppercase tracking-[0.3em] text-xs hover:bg-white/10 transition-all flex items-center justify-center gap-3"
|
|
>
|
|
<Phone size={18} />
|
|
(312) 456-7890
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- The Hybrid Link Grid -->
|
|
<div class="grid grid-cols-1 md:grid-cols-12 gap-16 lg:gap-24 items-start">
|
|
<!-- Brand Centerpiece (Mobile: Top, Desktop: Left) -->
|
|
<div class="md:col-span-4 flex flex-col items-center md:items-start text-center md:text-left">
|
|
<picture>
|
|
<source srcset="/media/logo-col.webp" type="image/webp" />
|
|
<img
|
|
src="/media/logo-col.png"
|
|
alt="Summit Painting Logo"
|
|
class="w-24 h-24 mb-10 opacity-90 transition-transform group-hover:scale-110"
|
|
/>
|
|
</picture>
|
|
<span class="text-3xl font-serif font-bold text-brand-dark tracking-tight mb-2">Summit Painting</span>
|
|
<span class="text-[11px] text-brand-green font-bold uppercase tracking-[0.5em]">& Handyman Services</span>
|
|
<p class="mt-10 text-brand-dark/40 text-base font-light italic max-w-[280px] leading-relaxed">
|
|
"Craftsmanship is the root of our work, and your home is our canvas."
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Links Column 1: Services -->
|
|
<div class="md:col-span-2 flex flex-col items-center md:items-start">
|
|
<h3 class="text-brand-dark text-[11px] font-bold uppercase tracking-[0.5em] mb-10 opacity-40">Products</h3>
|
|
<ul class="space-y-5">
|
|
{services.map((link) => (
|
|
<li>
|
|
<a href={link.href} class="text-sm font-bold uppercase tracking-widest text-brand-dark/60 hover:text-brand-green transition-colors">
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Links Column 2: Company -->
|
|
<div class="md:col-span-2 flex flex-col items-center md:items-start">
|
|
<h3 class="text-brand-dark text-[11px] font-bold uppercase tracking-[0.5em] mb-10 opacity-40">Company</h3>
|
|
<ul class="space-y-5">
|
|
{company.map((link) => (
|
|
<li>
|
|
<a href={link.href} class="text-sm font-bold uppercase tracking-widest text-brand-dark/60 hover:text-brand-green transition-colors">
|
|
{link.label}
|
|
</a>
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Links Column 3: Contact Details -->
|
|
<div class="md:col-span-4 flex flex-col items-center md:items-end text-center md:text-right">
|
|
<h3 class="text-brand-dark text-[11px] font-bold uppercase tracking-[0.5em] mb-10 opacity-40">Contact</h3>
|
|
<div class="space-y-8">
|
|
<div>
|
|
<p class="text-[10px] font-bold uppercase tracking-widest text-brand-green/40 mb-2">Phone</p>
|
|
<a href="tel:3124567890" class="text-2xl font-serif font-medium text-brand-dark hover:text-brand-green transition-colors">(312) 456-7890</a>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] font-bold uppercase tracking-widest text-brand-green/40 mb-2">Email</p>
|
|
<a href="mailto:summit@gmail.com" class="text-xl font-serif font-medium text-brand-dark hover:text-brand-green transition-colors">summit@gmail.com</a>
|
|
</div>
|
|
<div>
|
|
<p class="text-[10px] font-bold uppercase tracking-widest text-brand-green/40 mb-2">Location</p>
|
|
<span class="text-lg font-serif font-medium text-brand-dark/60">Colorado Springs, CO</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer Bottom: Legal & Copyright -->
|
|
<div class="pt-12 border-t border-brand-green/5 flex flex-col md:flex-row items-center justify-between gap-8">
|
|
<p class="text-[10px] font-bold uppercase tracking-[0.5em] text-brand-dark/30">
|
|
Copyright © {currentYear}, Summit Painting & Handyman Brands
|
|
</p>
|
|
<ul class="flex items-center gap-10">
|
|
<li>
|
|
<a href="/terms" class="text-[10px] font-bold uppercase tracking-[0.5em] text-brand-dark/40 hover:text-brand-green transition-colors">Terms & Conditions</a>
|
|
</li>
|
|
<li>
|
|
<a href="/privacy" class="text-[10px] font-bold uppercase tracking-[0.5em] text-brand-dark/40 hover:text-brand-green transition-colors">Privacy Policy</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</footer>
|