Update styles and structure in globals.css, enhance homepage layout in page.tsx, add mobile close button in site-header.tsx, and expand .gitignore for new files.
This commit is contained in:
parent
70b002bd3a
commit
0a33fd8530
12
.gitignore
vendored
12
.gitignore
vendored
@ -48,3 +48,15 @@ next-env.d.ts
|
||||
.claude/**
|
||||
CLAUDE.md
|
||||
|
||||
.cursorindexingignore
|
||||
.specstory
|
||||
.specstory/**
|
||||
.specstory/ai_rules_backups
|
||||
.specstory/history
|
||||
.specstory/project.json
|
||||
.specstory/what-is-this.md
|
||||
.specstory/ai_rules_backups
|
||||
.specstory/history
|
||||
.specstory/project.json
|
||||
.specstory/what-is-this.md
|
||||
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
@import "tailwindcss";
|
||||
@import "tw-animate-css";
|
||||
|
||||
@custom-variant dark (&:is(.dark *));
|
||||
|
||||
:root {
|
||||
/* HPS Brand Colors - Refined */
|
||||
--primary-blue: #0066bf;
|
||||
@ -63,50 +61,6 @@
|
||||
--header-height: 80px;
|
||||
}
|
||||
|
||||
.dark {
|
||||
--background: #0f172a;
|
||||
--foreground: #f8fafc;
|
||||
|
||||
--card: #1e293b;
|
||||
--card-foreground: #f8fafc;
|
||||
|
||||
--popover: #0f172a;
|
||||
--popover-foreground: #f8fafc;
|
||||
|
||||
--primary: #f8fafc;
|
||||
--primary-foreground: #0f172a;
|
||||
|
||||
--secondary: #1e293b;
|
||||
--secondary-foreground: #f8fafc;
|
||||
|
||||
--muted: #1e293b;
|
||||
--muted-foreground: #94a3b8;
|
||||
|
||||
--accent: #1e293b;
|
||||
--accent-foreground: #f8fafc;
|
||||
|
||||
--destructive: #7f1d1d;
|
||||
--destructive-foreground: #f8fafc;
|
||||
|
||||
--border: #1e293b;
|
||||
--input: #1e293b;
|
||||
--ring: #cbd5e1;
|
||||
|
||||
--chart-1: oklch(0.488 0.243 264.376);
|
||||
--chart-2: oklch(0.696 0.17 162.48);
|
||||
--chart-3: oklch(0.769 0.188 70.08);
|
||||
--chart-4: oklch(0.627 0.265 303.9);
|
||||
--chart-5: oklch(0.645 0.246 16.439);
|
||||
|
||||
--sidebar: #1e293b;
|
||||
--sidebar-foreground: #ffffff;
|
||||
--sidebar-primary: #8cc63f;
|
||||
--sidebar-primary-foreground: #0f172a;
|
||||
--sidebar-accent: #1e293b;
|
||||
--sidebar-accent-foreground: #ffffff;
|
||||
--sidebar-border: #334155;
|
||||
--sidebar-ring: #8cc63f;
|
||||
}
|
||||
|
||||
@theme inline {
|
||||
--font-sans: "Inter", "sans-serif";
|
||||
|
||||
14
app/page.tsx
14
app/page.tsx
@ -11,7 +11,7 @@ export default function HomePage() {
|
||||
|
||||
<main className="flex-1">
|
||||
{/* Hero Section */}
|
||||
<section className="relative h-[90vh] min-h-[600px] flex items-center justify-center overflow-hidden bg-deep-navy">
|
||||
<section className="relative h-[90vh] min-h-[500px] sm:min-h-[600px] flex items-center justify-center overflow-hidden overflow-x-hidden bg-deep-navy">
|
||||
{/* Background Image with Overlay */}
|
||||
<div className="absolute inset-0 z-0">
|
||||
<img
|
||||
@ -22,19 +22,19 @@ export default function HomePage() {
|
||||
<div className="absolute inset-0 bg-gradient-to-t from-deep-navy via-deep-navy/80 to-transparent" />
|
||||
</div>
|
||||
|
||||
<div className="relative z-10 container mx-auto px-4 text-center">
|
||||
<h1 className="text-5xl md:text-7xl font-bold text-white mb-6 tracking-tight animate-in fade-in slide-in-from-bottom-4 duration-1000">
|
||||
Building the <span className="text-accent">Future</span>
|
||||
<div className="relative z-10 container mx-auto px-4 text-center max-w-full">
|
||||
<h1 className="text-3xl sm:text-4xl md:text-7xl font-bold text-white mb-4 sm:mb-6 tracking-tight opacity-100 animate-in slide-in-from-bottom-4 duration-1000 break-words">
|
||||
Building the <span className="text-cyan-accent">Future</span>
|
||||
<br />
|
||||
with Concrete Precision
|
||||
</h1>
|
||||
<p className="text-xl md:text-2xl text-gray-300 max-w-3xl mx-auto mb-10 font-light animate-in fade-in slide-in-from-bottom-6 duration-1000 delay-200">
|
||||
<p className="text-base sm:text-lg md:text-2xl text-gray-300 max-w-3xl mx-auto mb-6 sm:mb-10 font-light animate-in fade-in slide-in-from-bottom-6 duration-1000 delay-200">
|
||||
Specializing in Insulating Concrete Form (ICF) installations, structural flooring, and radiant heating
|
||||
systems.
|
||||
</p>
|
||||
<div className="flex flex-col sm:flex-row gap-4 justify-center animate-in fade-in slide-in-from-bottom-8 duration-1000 delay-300">
|
||||
<Link href="/contact">
|
||||
<Button size="lg" className="bg-accent hover:bg-accent/90 text-deep-navy font-bold text-lg px-8 h-14">
|
||||
<Button size="lg" className="bg-accent hover:bg-accent/90 text-deep-navy font-bold text-base sm:text-lg px-6 sm:px-8 h-12 sm:h-14">
|
||||
Get a Quote
|
||||
</Button>
|
||||
</Link>
|
||||
@ -42,7 +42,7 @@ export default function HomePage() {
|
||||
<Button
|
||||
size="lg"
|
||||
variant="outline"
|
||||
className="border-white text-white hover:bg-white hover:text-deep-navy font-bold text-lg px-8 h-14 bg-transparent"
|
||||
className="border-white text-white hover:bg-white hover:text-deep-navy font-bold text-base sm:text-lg px-6 sm:px-8 h-12 sm:h-14 bg-transparent"
|
||||
>
|
||||
Our Services
|
||||
</Button>
|
||||
|
||||
@ -104,10 +104,22 @@ export function SiteHeader() {
|
||||
{/* Mobile Navigation Overlay */}
|
||||
<div
|
||||
className={cn(
|
||||
"fixed inset-0 bg-white z-40 transition-all duration-500 ease-in-out md:hidden flex flex-col justify-center",
|
||||
"fixed inset-0 bg-white z-[60] transition-all duration-500 ease-in-out md:hidden flex flex-col justify-center",
|
||||
mobileMenuOpen ? "opacity-100 translate-y-0" : "opacity-0 -translate-y-full pointer-events-none",
|
||||
)}
|
||||
>
|
||||
{/* Close Button in Mobile Menu */}
|
||||
<div className="absolute top-6 right-6 z-[70]">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setMobileMenuOpen(false)}
|
||||
className="rounded-full w-12 h-12 text-deep-navy hover:bg-gray-100"
|
||||
>
|
||||
<X className="h-6 w-6" />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="container mx-auto px-6 py-12 flex flex-col gap-8">
|
||||
<nav className="flex flex-col gap-6">
|
||||
{navigation.map((item, index) => (
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user