ok
This commit is contained in:
@@ -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>
|
||||
);
|
||||
|
||||
|
@@ -16,13 +16,12 @@ export default function OurStory() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<main className="bg-[#FEFFF6]">
|
||||
<main>
|
||||
<StorySticky>
|
||||
<Hero3 />
|
||||
<Hero4 />
|
||||
<Hero5 />
|
||||
</StorySticky>
|
||||
<Team />
|
||||
</main>
|
||||
<Footer />
|
||||
</>
|
||||
|
@@ -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:
|
||||
|
@@ -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,
|
||||
}
|
||||
)
|
||||
|
@@ -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
|
||||
|
@@ -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>
|
||||
|
@@ -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>
|
||||
|
@@ -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
|
||||
|
Reference in New Issue
Block a user