Spaces:
Running
Running
File size: 6,135 Bytes
21a686e |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 |
"use client";
import { cn } from "@/lib/utils";
import Link from "next/link";
import React from "react";
import { Facebook, Twitter, Instagram, Linkedin, Phone, Mail, MapPin } from "lucide-react";
export function FooterWithGrid() {
return (
<div className="bg-gray-900 text-white">
<div className="mx-auto max-w-7xl px-4 py-16 md:px-8">
<div className="border-b border-gray-700 pb-8">
<div className="mb-10 max-w-2xl">
<Logo className="justify-start" />
<p className="mb-4 text-lg text-gray-300">
Ceramic Shield provides superior window film solutions with advanced ceramic technology for UV protection, heat rejection, and lasting durability.
</p>
<div className="flex flex-col gap-2 text-sm text-gray-400">
<div className="flex items-center gap-2">
<Phone className="h-4 w-4" />
<span>(555) 123-FILM</span>
</div>
<div className="flex items-center gap-2">
<Mail className="h-4 w-4" />
<span>info@ceramicshield.com</span>
</div>
<div className="flex items-center gap-2">
<MapPin className="h-4 w-4" />
<span>123 Protection Blvd, Shield City, SC 29401</span>
</div>
</div>
</div>
</div>
<div className="grid grid-cols-1 gap-8 border-b border-gray-700 py-12 md:grid-cols-4">
<ul className="text-base">
<li className="mb-6 text-lg font-bold text-white">
Products
</li>
{PRODUCTS.map((item, idx) => (
<li key={"products" + idx} className="mb-3">
<Link
href={item.href}
className="text-gray-300 hover:text-red-600 transition-colors"
>
{item.title}
</Link>
</li>
))}
</ul>
<ul className="text-base">
<li className="mb-6 text-lg font-bold text-white">
Services
</li>
{SERVICES.map((item, idx) => (
<li key={"services" + idx} className="mb-3">
<Link
href={item.href}
className="text-gray-300 hover:text-red-600 transition-colors"
>
{item.title}
</Link>
</li>
))}
</ul>
<ul className="text-base">
<li className="mb-6 text-lg font-bold text-white">
About
</li>
{ABOUT.map((item, idx) => (
<li key={"about" + idx} className="mb-3">
<Link
href={item.href}
className="text-gray-300 hover:text-red-600 transition-colors"
>
{item.title}
</Link>
</li>
))}
</ul>
<ul className="text-base">
<li className="mb-6 text-lg font-bold text-white">
Connect
</li>
<li className="mb-3">
<Link
href="/contact"
className="text-gray-300 hover:text-red-600 transition-colors"
>
Contact Us
</Link>
</li>
<li className="mb-6">
<Link
href="/quote"
className="text-gray-300 hover:text-red-600 transition-colors"
>
Get a Quote
</Link>
</li>
<li>
<div className="flex space-x-4">
<Link
href="#"
className="text-gray-400 hover:text-red-600 transition-colors"
>
<Facebook className="h-5 w-5" />
</Link>
<Link
href="#"
className="text-gray-400 hover:text-red-600 transition-colors"
>
<Twitter className="h-5 w-5" />
</Link>
<Link
href="#"
className="text-gray-400 hover:text-red-600 transition-colors"
>
<Instagram className="h-5 w-5" />
</Link>
<Link
href="#"
className="text-gray-400 hover:text-red-600 transition-colors"
>
<Linkedin className="h-5 w-5" />
</Link>
</div>
</li>
</ul>
</div>
<div className="pt-8 text-center">
<p className="text-sm text-gray-400">
© {new Date().getFullYear()} Ceramic Shield. All Rights Reserved.
</p>
</div>
</div>
</div>
);
}
const PRODUCTS = [
{ title: "Residential", href: "/products/residential" },
{ title: "Commercial", href: "/products/commercial" },
{ title: "Automotive", href: "/products/automotive" },
];
const SERVICES = [
{ title: "Installation", href: "/services/installation" },
{ title: "Maintenance", href: "/services/maintenance" },
{ title: "Consultation", href: "/services/consultation" },
];
const ABOUT = [
{ title: "Company", href: "/about/company" },
{ title: "Certifications", href: "/about/certifications" },
{ title: "Warranty", href: "/about/warranty" },
];
const Logo = ({ className }: { className?: string }) => {
return (
<Link
href="/"
className={cn(
"flex flex-shrink-0 items-center space-x-3 py-6 text-center",
className
)}
>
<div className="relative flex h-10 w-10 items-center justify-center rounded-lg bg-red-600">
<div className="text-white font-bold text-lg">CS</div>
</div>
<div className="flex flex-col">
<div className="text-2xl font-bold text-white">
Ceramic Shield
</div>
<div className="text-sm text-gray-300">
Premium Window Film Protection
</div>
</div>
</Link>
);
}; |