- Add scroll-behavior: smooth and scroll-margin-top to globals.css - Create SiteNav with sticky navy bar, desktop links, mobile hamburger - Create HeroSection with split-panel layout and next/image - Create ListingsPlaceholder with brand navy background and gold CTA - Create SiteFooter with license number and TODO verify comment - Update page.tsx to compose all section components - Install lucide-react for icons [Rule 1 - Bug] Fixed event handlers in server components — used CSS hover classes instead
75 lines
1.9 KiB
TypeScript
75 lines
1.9 KiB
TypeScript
const navLinks = [
|
|
{ label: 'Home', href: '#hero' },
|
|
{ label: 'About', href: '#about' },
|
|
{ label: 'Listings', href: '#listings' },
|
|
{ label: 'Contact', href: '#contact' },
|
|
];
|
|
|
|
export default function SiteFooter() {
|
|
return (
|
|
<footer
|
|
style={{
|
|
backgroundColor: '#1B2B4B',
|
|
color: '#FAF9F7',
|
|
padding: '2rem 1.5rem',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
maxWidth: '1200px',
|
|
margin: '0 auto',
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
gap: '0.75rem',
|
|
alignItems: 'center',
|
|
textAlign: 'center',
|
|
}}
|
|
>
|
|
{/* Row 1: Name / Wordmark */}
|
|
<p style={{ fontWeight: 'bold', fontSize: '1rem', margin: 0 }}>
|
|
Teressa Copeland Homes
|
|
</p>
|
|
|
|
{/* Row 2: License number */}
|
|
<p style={{ fontSize: '0.875rem', opacity: 0.75, margin: 0 }}>
|
|
{/* TODO: Verify license number before launch — last two chars may be "00" (zeros) or "OO" (letters O) */}
|
|
Utah Real Estate License: 14196185-SA00
|
|
</p>
|
|
|
|
{/* Row 3: Copyright */}
|
|
<p style={{ fontSize: '0.8rem', opacity: 0.6, margin: 0 }}>
|
|
© {new Date().getFullYear()} Teressa Copeland Homes. All rights
|
|
reserved.
|
|
</p>
|
|
|
|
{/* Row 4: Nav links */}
|
|
<nav
|
|
style={{
|
|
display: 'flex',
|
|
gap: '1.5rem',
|
|
flexWrap: 'wrap',
|
|
justifyContent: 'center',
|
|
marginTop: '0.5rem',
|
|
}}
|
|
>
|
|
{navLinks.map((link) => (
|
|
<a
|
|
key={link.href}
|
|
href={link.href}
|
|
style={{
|
|
color: '#FAF9F7',
|
|
textDecoration: 'none',
|
|
fontSize: '0.875rem',
|
|
opacity: 0.75,
|
|
transition: 'opacity 0.2s',
|
|
}}
|
|
>
|
|
{link.label}
|
|
</a>
|
|
))}
|
|
</nav>
|
|
</div>
|
|
</footer>
|
|
);
|
|
}
|