This commit is contained in:
2025-08-28 14:32:49 +02:00
parent 3ca4017584
commit ce6c25a180
8 changed files with 33 additions and 46 deletions

View File

@@ -3,36 +3,27 @@ import * as React from "react";
const SvgIcon = (props) => ( const SvgIcon = (props) => (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="122" width="1803"
height="30" height="488"
fill="none" fill="none"
viewBox="0 0 122 30" viewBox="0 0 1803 488"
> >
<mask <g fill="#245527" clipPath="url(#a)">
id="a" <circle cx="200" cy="144" r="100" fillOpacity="0.7"></circle>
width="30" <circle cx="100" cy="244" r="100" fillOpacity="0.7"></circle>
height="30" <circle cx="300" cy="244" r="100" fillOpacity="0.7"></circle>
x="0" <circle cx="270.71" cy="314.71" r="100" fillOpacity="0.7"></circle>
y="0" <circle cx="129.29" cy="314.71" r="100" fillOpacity="0.7"></circle>
maskUnits="userSpaceOnUse" <circle cx="200" cy="344" r="100" fillOpacity="0.7"></circle>
style={{ maskType: "luminance" }} <circle cx="129.29" cy="173.29" r="100" fillOpacity="0.7"></circle>
> <circle cx="270.71" cy="173.29" r="100" fillOpacity="0.7"></circle>
<path fill="#fff" d="M29.926 0H0v30h29.926z"></path> <path d="M620.4 387 498 107h56.4l109.2 253.2h-32.4L741.6 107h52l-122 280zm291.138-163.6h139.202v42.8H911.538zm4 120h158.002V387H863.538V107h204.402v43.6H915.538zM1171.51 387V107h122.4c30.4 0 57.06 5.867 80 17.6 22.93 11.733 40.8 28 53.6 48.8q19.2 31.2 19.2 73.6 0 42-19.2 73.6c-12.8 20.8-30.67 37.067-53.6 48.8-22.94 11.733-49.6 17.6-80 17.6zm52-44h68c21.06 0 39.2-4 54.4-12 15.46-8 27.33-19.2 35.6-33.6 8.53-14.4 12.8-31.2 12.8-50.4 0-19.467-4.27-36.267-12.8-50.4-8.27-14.4-20.14-25.6-35.6-33.6-15.2-8-33.34-12-54.4-12h-68zm274.96 44 126-280h51.2l126.4 280h-54.4l-108.4-252.4h20.8l-108 252.4zm58-64.8 14-40.8h151.2l14 40.8z"></path>
</mask>
<g fill="#48774B" fillOpacity="0.6" mask="url(#a)">
<path d="M14.963 15c4.132 0 7.482-3.358 7.482-7.5S19.095 0 14.963 0 7.481 3.358 7.481 7.5s3.35 7.5 7.482 7.5"></path>
<path d="M7.482 22.5c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5S0 10.858 0 15s3.35 7.5 7.482 7.5"></path>
<path d="M22.444 22.5c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.481 3.358-7.481 7.5 3.35 7.5 7.481 7.5"></path>
<path d="M20.253 27.803c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
<path d="M9.673 27.803c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
<path d="M14.963 30c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
<path d="M9.673 17.197c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
<path d="M20.253 17.197c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
</g> </g>
<path <defs>
fill="#48774B" <clipPath id="a">
d="m47.525 24-7.65-17.5H43.4l6.825 15.825H48.2L55.1 6.5h3.25L50.725 24zm18.196-10.225h8.7v2.675h-8.7zm.25 7.5h9.875V24H62.721V6.5h12.775v2.725h-9.525zM81.97 24V6.5h7.65q2.85 0 5 1.1t3.35 3.05 1.2 4.6q0 2.625-1.2 4.6-1.2 1.95-3.35 3.05t-5 1.1zm3.25-2.75h4.25q1.975 0 3.4-.75 1.45-.75 2.225-2.1.8-1.35.8-3.15 0-1.826-.8-3.15-.774-1.35-2.225-2.1-1.425-.75-3.4-.75h-4.25zM102.404 24l7.875-17.5h3.2l7.9 17.5h-3.4l-6.775-15.775h1.3L105.754 24zm3.625-4.05.875-2.55h9.45l.875 2.55z" <path fill="#fff" d="M0 0h1803v488H0z"></path>
></path> </clipPath>
</defs>
</svg> </svg>
); );

View File

@@ -16,13 +16,12 @@ export default function OurStory() {
return ( return (
<> <>
<Header /> <Header />
<main className="bg-[#FEFFF6]"> <main>
<StorySticky> <StorySticky>
<Hero3 /> <Hero3 />
<Hero4 /> <Hero4 />
<Hero5 /> <Hero5 />
</StorySticky> </StorySticky>
<Team />
</main> </main>
<Footer /> <Footer />
</> </>

View File

@@ -27,7 +27,7 @@ const variantStyles = {
slate: slate:
'ring-white text-white hover:text-slate-300 hover:ring-slate-300 active:bg-slate-100 active:text-slate-200 focus-visible:outline-gold-600 focus-visible:ring-slate-300', 'ring-white text-white hover:text-slate-300 hover:ring-slate-300 active:bg-slate-100 active:text-slate-200 focus-visible:outline-gold-600 focus-visible:ring-slate-300',
white: white:
'ring-white text-white hover:ring-slate-300 active:ring-slate-200 active:text-slate-100 focus-visible:outline-white', 'ring-bg-darkbrown text-bg-darkbrown hover:ring-primary-olive hover:text-primary-olive active:ring-primary-olive active:text-primary-olive focus-visible:outline-bg-darkbrown',
}, },
link: { link: {
slate: slate:

View File

@@ -27,7 +27,7 @@ function MobileNavIcon({ open }) {
return ( return (
<svg <svg
aria-hidden="true" aria-hidden="true"
className="h-3.5 w-3.5 overflow-visible stroke-slate-700" className="h-3.5 w-3.5 overflow-visible stroke-bg-darkbrown"
fill="none" fill="none"
strokeWidth={2} strokeWidth={2}
strokeLinecap="round" strokeLinecap="round"
@@ -81,15 +81,11 @@ function MobileNavigation() {
export function Header() { export function Header() {
const pathname = usePathname() const pathname = usePathname()
const isHomepage = pathname === '/'
const isStoryPage = pathname === '/story' const isStoryPage = pathname === '/story'
const isExperiencesPage = pathname === '/experiences'
const headerClasses = clsx( const headerClasses = clsx(
'bg-bg-sand',
{ {
'bg-transparent': isHomepage || isExperiencesPage,
'bg-[#1e0f01]': !isHomepage && !isStoryPage && !isExperiencesPage,
'bg-transparent backdrop-blur-sm': isStoryPage,
'fixed top-0 left-0 right-0 z-50': isStoryPage, 'fixed top-0 left-0 right-0 z-50': isStoryPage,
} }
) )

View File

@@ -12,10 +12,10 @@ export function Hero2() {
}) })
} }
return ( return (
<div className="relative w-full overflow-hidden -mt-20"> <div className="relative w-full overflow-hidden mt-0">
{/* Background Video - Extended to cover header */} {/* Background Video - Extended to cover header */}
<video <video
className="w-full h-[90vh] object-cover block relative z-0" className="w-full h-auto object-cover block relative z-0"
autoPlay autoPlay
loop loop
muted muted

View File

@@ -1,7 +1,7 @@
import * as React from "react"; import * as React from "react";
const SvgIcon = (props) => ( const SvgIcon = (props) => (
<svg <svg
xmlns="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg"
width="122" width="122"
height="30" height="30"
@@ -17,9 +17,9 @@ const SvgIcon = (props) => (
maskUnits="userSpaceOnUse" maskUnits="userSpaceOnUse"
style={{ maskType: "luminance" }} style={{ maskType: "luminance" }}
> >
<path fill="#48774B" d="M29.926 0H0v30h29.926z"></path> <path fill="#fff" d="M29.926 0H0v30h29.926z"></path>
</mask> </mask>
<g fill="#48774B" fillOpacity="0.8" mask="url(#a)"> <g fill="#48774B" fillOpacity="0.7" mask="url(#a)">
<path d="M14.963 15c4.132 0 7.482-3.358 7.482-7.5S19.095 0 14.963 0 7.481 3.358 7.481 7.5s3.35 7.5 7.482 7.5"></path> <path d="M14.963 15c4.132 0 7.482-3.358 7.482-7.5S19.095 0 14.963 0 7.481 3.358 7.481 7.5s3.35 7.5 7.482 7.5"></path>
<path d="M7.482 22.5c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5S0 10.858 0 15s3.35 7.5 7.482 7.5"></path> <path d="M7.482 22.5c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5S0 10.858 0 15s3.35 7.5 7.482 7.5"></path>
<path d="M22.444 22.5c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.481 3.358-7.481 7.5 3.35 7.5 7.481 7.5"></path> <path d="M22.444 22.5c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.481 3.358-7.481 7.5 3.35 7.5 7.481 7.5"></path>
@@ -28,7 +28,8 @@ const SvgIcon = (props) => (
<path d="M14.963 30c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path> <path d="M14.963 30c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
<path d="M9.673 17.197c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path> <path d="M9.673 17.197c4.132 0 7.481-3.358 7.481-7.5s-3.35-7.5-7.481-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
<path d="M20.253 17.197c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path> <path d="M20.253 17.197c4.132 0 7.482-3.358 7.482-7.5s-3.35-7.5-7.482-7.5-7.482 3.358-7.482 7.5 3.35 7.5 7.482 7.5"></path>
</g> <path </g>
<path
fill="#48774B" fill="#48774B"
d="m47.525 24-7.65-17.5H43.4l6.825 15.825H48.2L55.1 6.5h3.25L50.725 24zm18.196-10.225h8.7v2.675h-8.7zm.25 7.5h9.875V24H62.721V6.5h12.775v2.725h-9.525zM81.97 24V6.5h7.65q2.85 0 5 1.1t3.35 3.05 1.2 4.6q0 2.625-1.2 4.6-1.2 1.95-3.35 3.05t-5 1.1zm3.25-2.75h4.25q1.975 0 3.4-.75 1.45-.75 2.225-2.1.8-1.35.8-3.15 0-1.826-.8-3.15-.774-1.35-2.225-2.1-1.425-.75-3.4-.75h-4.25zM102.404 24l7.875-17.5h3.2l7.9 17.5h-3.4l-6.775-15.775h1.3L105.754 24zm3.625-4.05.875-2.55h9.45l.875 2.55z" d="m47.525 24-7.65-17.5H43.4l6.825 15.825H48.2L55.1 6.5h3.25L50.725 24zm18.196-10.225h8.7v2.675h-8.7zm.25 7.5h9.875V24H62.721V6.5h12.775v2.725h-9.525zM81.97 24V6.5h7.65q2.85 0 5 1.1t3.35 3.05 1.2 4.6q0 2.625-1.2 4.6-1.2 1.95-3.35 3.05t-5 1.1zm3.25-2.75h4.25q1.975 0 3.4-.75 1.45-.75 2.225-2.1.8-1.35.8-3.15 0-1.826-.8-3.15-.774-1.35-2.225-2.1-1.425-.75-3.4-.75h-4.25zM102.404 24l7.875-17.5h3.2l7.9 17.5h-3.4l-6.775-15.775h1.3L105.754 24zm3.625-4.05.875-2.55h9.45l.875 2.55z"
></path> ></path>

View File

@@ -4,7 +4,7 @@ export function NavLink({ href, children }) {
return ( return (
<Link <Link
href={href} href={href}
className="inline-block px-2 py-1 text-sm tracking-wide text-white hover:text-primary-olive transition-colors duration-200" className="inline-block px-2 py-1 text-sm tracking-wide text-bg-darkbrown hover:text-primary-olive transition-colors duration-200"
> >
{children} {children}
</Link> </Link>

View File

@@ -50,15 +50,15 @@ export default function StorySticky({ children }) {
}, [children]); }, [children]);
return ( return (
<section className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-0 lg:py-12"> <section className="mx-auto max-w-7xl px-4 lg:px-0 py-0 lg:py-12">
{/* Mobile: render as-is */} {/* Mobile: render as-is */}
<div className="lg:hidden">{children}</div> <div className="lg:hidden">{children}</div>
{/* Desktop: 2-col layout with sticky media */} {/* Desktop: 2-col layout with sticky media */}
<div className="hidden lg:grid lg:grid-cols-12 lg:gap-8" ref={containerRef}> <div className="hidden lg:grid lg:grid-cols-12 lg:gap-12" ref={containerRef}>
{/* Sticky left media */} {/* Sticky left media */}
<div className="relative lg:col-span-6"> <div className="relative lg:col-span-6">
<div className="sticky top-28 h-[75vh] rounded-2xl overflow-hidden shadow-lg"> <div className="sticky top-0 h-screen overflow-hidden">
<div className="absolute inset-0"> <div className="absolute inset-0">
{sections.map((s, i) => ( {sections.map((s, i) => (
<div <div