bender/abb170ef-753e-4c34-ba28-ff2b7799cc0b
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_4_1782128066783 into main #3

Merged
bender merged 1 commits from version_4_1782128066783 into main 2026-06-22 11:36:27 +00:00
Conversation 0 Commits 1 Files Changed 1 +61 -9
1 changed files with 61 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

70
src/components/Layout.tsx
View File

@@ -1,11 +1,14 @@
import FooterSimpleCard from '@/components/sections/footer/FooterSimpleCard';
import NavbarFloatingLogo from '@/components/ui/NavbarFloatingLogo';
import SectionErrorBoundary from "@/components/ui/SectionErrorBoundary";
import SiteBackgroundSlot from "@/components/ui/SiteBackgroundSlot";
import { Outlet } from 'react-router-dom';
import { StyleProvider } from "@/components/ui/StyleProvider";
import { useState, useEffect } from 'react';
import { motion } from 'motion/react';
export default function Layout() {
const [activeTab, setActiveTab] = useState("hero");
const navItems = [
{
"name": "Home",
@@ -41,18 +44,67 @@ export default function Layout() {
}
];
useEffect(() => {
const handleScroll = () => {
const sections = navItems.map(item => item.href.slice(1));
let current = "hero";
for (const section of sections) {
const el = document.getElementById(section);
if (el && window.scrollY >= el.offsetTop - 200) {
current = section;
}
}
setActiveTab(current);
};
window.addEventListener("scroll", handleScroll);
return () => window.removeEventListener("scroll", handleScroll);
}, []);
return (
<StyleProvider buttonVariant="default" siteBackground="gridDots" heroBackground="gradientBars">
<SiteBackgroundSlot />
<SectionErrorBoundary name="navbar">
<NavbarFloatingLogo
logo="Fourieearthworks"
logoImageSrc="https://storage.googleapis.com/webild/users/user_3FUQa0ZWeM3nmyILoJWMMWG8CWg/uploaded-1782127565329-9f81y6uc.png"
ctaButton={{
text: "Get Quote",
href: "#contact",
}}
navItems={navItems} />
<div className="fixed top-6 left-1/2 -translate-x-1/2 z-50 hidden md:flex items-center gap-2 p-1.5 card rounded-full shadow-lg">
<img src="https://storage.googleapis.com/webild/users/user_3FUQa0ZWeM3nmyILoJWMMWG8CWg/uploaded-1782127565329-9f81y6uc.png" alt="Logo" className="h-8 w-8 rounded-full object-cover ml-2" />
<div className="flex items-center gap-1">
{navItems.map(item => (
<button
key={item.name}
onClick={() => {
setActiveTab(item.href.slice(1));
document.getElementById(item.href.slice(1))?.scrollIntoView({ behavior: 'smooth' });
}}
className={`relative px-4 py-2 text-sm font-medium rounded-full transition-colors ${activeTab === item.href.slice(1) ? 'text-primary-cta-text' : 'text-foreground hover:text-accent'}`}
>
{activeTab === item.href.slice(1) && (
<motion.div layoutId="nav-tab" className="absolute inset-0 bg-primary-cta rounded-full -z-10" />
)}
{item.name}
</button>
))}
</div>
</div>
<div className="fixed top-4 left-4 right-4 z-50 md:hidden flex items-center p-2 card rounded-2xl shadow-lg overflow-x-auto">
<img src="https://storage.googleapis.com/webild/users/user_3FUQa0ZWeM3nmyILoJWMMWG8CWg/uploaded-1782127565329-9f81y6uc.png" alt="Logo" className="h-8 w-8 rounded-full object-cover shrink-0 mr-4 ml-1" />
<div className="flex items-center gap-1 shrink-0">
{navItems.map(item => (
<button
key={item.name}
onClick={() => {
setActiveTab(item.href.slice(1));
document.getElementById(item.href.slice(1))?.scrollIntoView({ behavior: 'smooth' });
}}
className={`relative px-3 py-1.5 text-xs font-medium rounded-full transition-colors whitespace-nowrap ${activeTab === item.href.slice(1) ? 'text-primary-cta-text' : 'text-foreground'}`}
>
{activeTab === item.href.slice(1) && (
<motion.div layoutId="nav-tab-mobile" className="absolute inset-0 bg-primary-cta rounded-full -z-10" />
)}
{item.name}
</button>
))}
</div>
</div>
</SectionErrorBoundary>
<main className="flex-grow">
<Outlet />