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) => (
<svg
xmlns="http://www.w3.org/2000/svg"
width="122"
height="30"
width="1803"
height="488"
fill="none"
viewBox="0 0 122 30"
viewBox="0 0 1803 488"
>
<mask
id="a"
width="30"
height="30"
x="0"
y="0"
maskUnits="userSpaceOnUse"
style={{ maskType: "luminance" }}
>
<path fill="#fff" d="M29.926 0H0v30h29.926z"></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 fill="#245527" clipPath="url(#a)">
<circle cx="200" cy="144" r="100" fillOpacity="0.7"></circle>
<circle cx="100" cy="244" r="100" fillOpacity="0.7"></circle>
<circle cx="300" cy="244" r="100" fillOpacity="0.7"></circle>
<circle cx="270.71" cy="314.71" r="100" fillOpacity="0.7"></circle>
<circle cx="129.29" cy="314.71" r="100" fillOpacity="0.7"></circle>
<circle cx="200" cy="344" r="100" fillOpacity="0.7"></circle>
<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 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>
</g>
<path
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"
></path>
<defs>
<clipPath id="a">
<path fill="#fff" d="M0 0h1803v488H0z"></path>
</clipPath>
</defs>
</svg>
);

View File

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

View File

@@ -27,7 +27,7 @@ const variantStyles = {
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',
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: {
slate:

View File

@@ -27,7 +27,7 @@ function MobileNavIcon({ open }) {
return (
<svg
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"
strokeWidth={2}
strokeLinecap="round"
@@ -81,15 +81,11 @@ function MobileNavigation() {
export function Header() {
const pathname = usePathname()
const isHomepage = pathname === '/'
const isStoryPage = pathname === '/story'
const isExperiencesPage = pathname === '/experiences'
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,
}
)

View File

@@ -12,10 +12,10 @@ export function Hero2() {
})
}
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 */}
<video
className="w-full h-[90vh] object-cover block relative z-0"
className="w-full h-auto object-cover block relative z-0"
autoPlay
loop
muted

View File

@@ -1,7 +1,7 @@
import * as React from "react";
const SvgIcon = (props) => (
<svg
<svg
xmlns="http://www.w3.org/2000/svg"
width="122"
height="30"
@@ -17,9 +17,9 @@ const SvgIcon = (props) => (
maskUnits="userSpaceOnUse"
style={{ maskType: "luminance" }}
>
<path fill="#48774B" d="M29.926 0H0v30h29.926z"></path>
<path fill="#fff" d="M29.926 0H0v30h29.926z"></path>
</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="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>
@@ -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="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> <path
</g>
<path
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"
></path>

View File

@@ -4,7 +4,7 @@ export function NavLink({ href, children }) {
return (
<Link
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}
</Link>

View File

@@ -50,15 +50,15 @@ export default function StorySticky({ children }) {
}, [children]);
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 */}
<div className="lg:hidden">{children}</div>
{/* 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 */}
<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">
{sections.map((s, i) => (
<div