98552163a8
Complete frontend implementation with: - Next.js 16 with App Router and TypeScript - Tailwind CSS v4 with custom violet theme - shadcn/ui components with Lucide React icons - Landing page with hero, services, pricing, testimonials, FAQ - Service selection page with toggle - Login/Register pages with social auth UI - Multi-step checkout flow - Client dashboard with stats, projects, support tickets - Billing page with subscription, payment methods, invoices - All mock data and TypeScript types 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
132 lines
4.3 KiB
TypeScript
132 lines
4.3 KiB
TypeScript
import Link from 'next/link'
|
|
import { Globe, Mail } from 'lucide-react'
|
|
|
|
export function SiteFooter() {
|
|
return (
|
|
<footer className="bg-background border-t border-border pt-16 pb-8 mt-auto">
|
|
<div className="w-full max-w-[1280px] mx-auto px-4 md:px-10">
|
|
<div className="grid grid-cols-2 md:grid-cols-4 gap-8 mb-12">
|
|
{/* Brand */}
|
|
<div className="col-span-2 md:col-span-1">
|
|
<div className="flex items-center gap-3 mb-4">
|
|
<div className="size-6 flex items-center justify-center rounded bg-primary text-white">
|
|
<Globe className="w-4 h-4" />
|
|
</div>
|
|
<span className="text-lg font-bold">ScaleSite</span>
|
|
</div>
|
|
<p className="text-muted-foreground text-sm leading-relaxed">
|
|
Making enterprise-grade web and AI technology accessible to everyone.
|
|
</p>
|
|
</div>
|
|
|
|
{/* Platform */}
|
|
<div>
|
|
<h4 className="font-bold mb-4">Platform</h4>
|
|
<ul className="flex flex-col gap-2">
|
|
<li>
|
|
<Link
|
|
href="/#services"
|
|
className="text-muted-foreground hover:text-primary text-sm transition-colors"
|
|
>
|
|
Services
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/services"
|
|
className="text-muted-foreground hover:text-primary text-sm transition-colors"
|
|
>
|
|
Pricing
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<Link
|
|
href="/login"
|
|
className="text-muted-foreground hover:text-primary text-sm transition-colors"
|
|
>
|
|
Dashboard Login
|
|
</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Company */}
|
|
<div>
|
|
<h4 className="font-bold mb-4">Company</h4>
|
|
<ul className="flex flex-col gap-2">
|
|
<li>
|
|
<Link
|
|
href="/#about"
|
|
className="text-muted-foreground hover:text-primary text-sm transition-colors"
|
|
>
|
|
About Us
|
|
</Link>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-muted-foreground hover:text-primary text-sm transition-colors"
|
|
>
|
|
Careers
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-muted-foreground hover:text-primary text-sm transition-colors"
|
|
>
|
|
Contact
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
{/* Legal */}
|
|
<div>
|
|
<h4 className="font-bold mb-4">Legal</h4>
|
|
<ul className="flex flex-col gap-2">
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-muted-foreground hover:text-primary text-sm transition-colors"
|
|
>
|
|
Privacy Policy
|
|
</a>
|
|
</li>
|
|
<li>
|
|
<a
|
|
href="#"
|
|
className="text-muted-foreground hover:text-primary text-sm transition-colors"
|
|
>
|
|
Terms of Service
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom bar */}
|
|
<div className="border-t border-border pt-8 flex flex-col md:flex-row justify-between items-center gap-4">
|
|
<p className="text-muted-foreground text-sm">© 2024 ScaleSite. All rights reserved.</p>
|
|
<div className="flex gap-4">
|
|
<a
|
|
href="#"
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
aria-label="Website"
|
|
>
|
|
<Globe className="w-5 h-5" />
|
|
</a>
|
|
<a
|
|
href="mailto:hello@scalesite.com"
|
|
className="text-muted-foreground hover:text-foreground transition-colors"
|
|
aria-label="Email"
|
|
>
|
|
<Mail className="w-5 h-5" />
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
)
|
|
}
|