Merge version_27_1777236550761 into main #23
@@ -21,8 +21,8 @@ export default function App() {
|
||||
<Route path="/team-testimonials" element={<TeamTestimonialsPage />} />
|
||||
<Route path="/pricing" element={<PricingPage />} />
|
||||
</Routes>
|
||||
<div id="hero" data-section="hero">
|
||||
<ImageOrVideo src="https://source.unsplash.com/random/1600x900/?cityscape" alt="Cityscape" className="w-full h-auto object-cover" />
|
||||
<div id="hero" data-section="hero" className="w-full h-[60vh] overflow-hidden">
|
||||
<ImageOrVideo imageSrc="https://source.unsplash.com/random/1600x900/?cityscape" />
|
||||
</div>
|
||||
<div id="pricing" data-section="pricing">
|
||||
<PricingSimpleCards
|
||||
|
||||
@@ -50,7 +50,7 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
const [menuOpen, setMenuOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => setIsScrolled(window.scrollY > 50);
|
||||
const handleScroll = () => setIsScrolled(window.scrollY > 20);
|
||||
window.addEventListener("scroll", handleScroll, { passive: true });
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
@@ -59,37 +59,39 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
<>
|
||||
<nav
|
||||
className={cls(
|
||||
"fixed z-1000 top-0 left-0 w-full transition-all duration-500 ease-in-out",
|
||||
isScrolled ? "h-15 bg-background/80 backdrop-blur-sm" : "h-20 bg-background/0 backdrop-blur-0"
|
||||
"fixed top-4 left-1/2 -translate-x-1/2 z-50 rounded-full shadow-lg pl-6 pr-2 py-2 backdrop-blur-xl border transition-all duration-300 w-[min(92vw,56rem)]",
|
||||
isScrolled ? "bg-background/80 border-foreground/10" : "bg-background/40 border-foreground/5"
|
||||
)}
|
||||
>
|
||||
<div className="relative flex items-center justify-between h-full w-content-width mx-auto">
|
||||
<Link to="/" className="text-xl font-medium text-foreground">{logo}</Link>
|
||||
<div className="flex items-center gap-6">
|
||||
<Link to="/" className="text-lg font-bold text-foreground flex-shrink-0">
|
||||
{logo}
|
||||
</Link>
|
||||
|
||||
<div className="hidden md:flex absolute left-1/2 items-center gap-6 -translate-x-1/2">
|
||||
<div className="hidden md:flex items-center gap-6 flex-1 justify-center">
|
||||
{navItems.map((item) => (
|
||||
<NavLink
|
||||
key={item.name}
|
||||
href={item.href}
|
||||
className="text-base text-foreground hover:opacity-70 transition-opacity"
|
||||
className="text-sm font-medium text-foreground hover:text-foreground/70 transition-colors"
|
||||
>
|
||||
{item.name}
|
||||
</NavLink>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="hidden md:block">
|
||||
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" />
|
||||
<div className="hidden md:block flex-shrink-0">
|
||||
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="rounded-full px-6 h-10" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
className="flex md:hidden items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
|
||||
className="flex md:hidden items-center justify-center shrink-0 h-10 w-10 bg-foreground rounded-full cursor-pointer ml-auto"
|
||||
onClick={() => setMenuOpen(!menuOpen)}
|
||||
aria-label="Toggle menu"
|
||||
aria-expanded={menuOpen}
|
||||
>
|
||||
<Plus
|
||||
className={cls("w-1/2 h-1/2 text-background transition-transform duration-300", menuOpen ? "rotate-45" : "rotate-0")}
|
||||
className={cls("w-5 h-5 text-background transition-transform duration-300", menuOpen ? "rotate-45" : "rotate-0")}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
</button>
|
||||
@@ -103,16 +105,16 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
animate={{ y: 0 }}
|
||||
exit={{ y: "-135%" }}
|
||||
transition={{ type: "spring", damping: 26, stiffness: 170 }}
|
||||
className="md:hidden fixed z-1000 top-3 left-3 right-3 p-6 card rounded"
|
||||
className="md:hidden fixed z-50 top-4 left-4 right-4 p-6 card rounded-3xl shadow-xl border border-foreground/10"
|
||||
>
|
||||
<div className="flex items-center justify-between mb-6">
|
||||
<p className="text-xl text-foreground">Menu</p>
|
||||
<p className="text-xl font-bold text-foreground">Menu</p>
|
||||
<button
|
||||
className="flex items-center justify-center shrink-0 h-8 w-8 bg-foreground rounded cursor-pointer"
|
||||
className="flex items-center justify-center shrink-0 h-10 w-10 bg-foreground rounded-full cursor-pointer"
|
||||
onClick={() => setMenuOpen(false)}
|
||||
aria-label="Close menu"
|
||||
>
|
||||
<Plus className="w-1/2 h-1/2 text-background rotate-45" strokeWidth={1.5} />
|
||||
<Plus className="w-5 h-5 text-background rotate-45" strokeWidth={1.5} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
@@ -128,14 +130,14 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
<ArrowRight className="h-4 w-4 text-foreground" strokeWidth={1.5} />
|
||||
</NavLink>
|
||||
{index < navItems.length - 1 && (
|
||||
<div className="h-px bg-linear-to-r from-transparent via-foreground/20 to-transparent" />
|
||||
<div className="h-px bg-foreground/10" />
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-6">
|
||||
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="w-full" />
|
||||
<Button text={ctaButton.text} href={ctaButton.href} variant="primary" className="w-full rounded-full h-12" />
|
||||
</div>
|
||||
</motion.div>
|
||||
)}
|
||||
@@ -144,4 +146,4 @@ const NavbarCentered = ({ logo, navItems, ctaButton }: NavbarCenteredProps) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default NavbarCentered;
|
||||
export default NavbarCentered;
|
||||
Reference in New Issue
Block a user