Merge version_3 into main #7

Merged
bender merged 4 commits from version_3 into main 2026-04-21 19:45:21 +00:00
4 changed files with 120 additions and 207 deletions

View File

@@ -2,14 +2,12 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import TextSplitAbout from '@/components/sections/about/TextSplitAbout';
import MetricSplitMediaAbout from '@/components/sections/about/MetricSplitMediaAbout';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Twitter } from "lucide-react";
export default function AboutPage() {
export default function AboutUsPage() {
return (
<ThemeProvider
defaultButtonVariant="shift-hover"
@@ -24,65 +22,44 @@ export default function AboutPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/about" },
{ name: "Lookbook", id: "/lookbook" },
{ name: "Contact", id: "/contact" },
]}
brandName="OceanWave"
button={{ text: "Contact", href: "/contact" }}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/about" },
{ name: "Lookbook", id: "/lookbook" },
{ name: "Contact", id: "/contact" },
]}
brandName="OceanWave"
button={{ text: "Contact", href: "/contact" }}
/>
</div>
<div id="about-section" data-section="about-section">
<InlineImageSplitTextAbout
useInvertedBackground={false}
heading={[
{ type: "text", content: "Our Mission in Portugal" },
{ type: "image", src: "http://img.b2bpic.net/free-photo/close-up-seamstress-drawing-with-soap-pink-textile-modern-sewing-workshop_574295-3700.jpg", alt: "Portugal Coastline" }
]}
/>
</div>
<div id="about-section" data-section="about-section">
<MetricSplitMediaAbout
title="Crafted in Portugal, Designed for the Ocean"
description="Our commitment to sustainability starts at the source. By partnering with local Portuguese ateliers, we ensure ethical production standards and exceptional quality that lasts a lifetime. Every garment tells a story of craftsmanship and respect for our natural world."
metrics={[
{ value: "100%", title: "Ethically Produced" },
{ value: "100%", title: "Sustainable Materials" },
{ value: "0", title: "Waste Policy" }
]}
imageSrc="http://img.b2bpic.net/free-photo/close-up-seamstress-drawing-with-soap-pink-textile-modern-sewing-workshop_574295-3700.jpg"
imageAlt="Sewing workshop in Portugal"
/>
</div>
<div id="about" data-section="about">
<TextSplitAbout
useInvertedBackground={false}
title="Our Journey"
description={[
"Started in the heart of Portugal.", "Our goal is simple: to make waves while keeping the ocean clean."
]}
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="Our Promise"
description="A commitment to quality and earth."
features={[
{ title: "Fair Wages", description: "We treat our workers as family.", imageSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-woman-looking-phone_23-2149729284.jpg" },
{ title: "Transparency", description: "From farm to shop, no secrets.", imageSrc: "http://img.b2bpic.net/free-photo/close-up-hands-holding-ribbon_23-2149247502.jpg" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="OceanWave"
copyrightText="© 2025 OceanWave Apparel"
socialLinks={[
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="OceanWave"
copyrightText="© 2025 OceanWave Apparel"
socialLinks={[
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);

View File

@@ -2,11 +2,9 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FooterCard from '@/components/sections/footer/FooterCard';
import { Instagram, Twitter } from "lucide-react";
export default function ContactPage() {
@@ -24,68 +22,34 @@ export default function ContactPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/about" },
{ name: "Lookbook", id: "/lookbook" },
{ name: "Contact", id: "/contact" },
]}
brandName="OceanWave"
button={{ text: "Contact", href: "/contact" }}
/>
</div>
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/about" },
{ name: "Lookbook", id: "/lookbook" },
{ name: "Contact", id: "/contact" },
]}
brandName="OceanWave"
button={{ text: "Contact", href: "/contact" }}
/>
<ContactCenter
tag="Connect"
title="Let's Talk Waves"
description="Have questions about our sustainable journey or need help with an order? Drop us a line below."
background={{ variant: 'glowing-orb' }}
useInvertedBackground={true}
/>
<div id="contact-section" data-section="contact-section">
<ContactCenter
useInvertedBackground={false}
background={{ variant: "radial-gradient" }}
title="Catch the Wave of Style!"
description="Join our newsletter and be the first to know about new beachwear arrivals."
tag="Stay Updated"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplitForm
useInvertedBackground={false}
title="Get in touch"
description="Have questions about our sustainability practices or your order?"
imageSrc="http://img.b2bpic.net/free-photo/outdoor-shot-fashionable-young-male-model-wearing-black-shades-snapback-carrying-white-surfboard-his-arm_273609-1524.jpg"
inputs={[
{ name: "name", type: "text", placeholder: "Your name" },
{ name: "email", type: "email", placeholder: "Your email" }
]}
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="Help Center"
description="We are always here to help you catch the best wave."
features={[
{ title: "Shipping Info", description: "Eco-friendly shipping to your door.", imageSrc: "http://img.b2bpic.net/free-photo/young-couple-walking-park_273609-14254.jpg" },
{ title: "Returns", description: "Easy, no-questions-asked returns.", imageSrc: "http://img.b2bpic.net/free-photo/woman-posing-nature_23-2148503454.jpg" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="OceanWave"
copyrightText="© 2025 OceanWave Apparel"
socialLinks={[
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" }
]}
/>
</div>
<FooterCard
logoText="OceanWave"
copyrightText="© 2025 OceanWave Apparel"
socialLinks={[
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" }
]}
/>
</ReactLenis>
</ThemeProvider>
);

View File

@@ -2,11 +2,9 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import FooterCard from '@/components/sections/footer/FooterCard';
import FeatureCardOne from '@/components/sections/feature/FeatureCardOne';
import { Instagram, Twitter } from "lucide-react";
export default function LookbookPage() {
@@ -24,78 +22,52 @@ export default function LookbookPage() {
headingFontWeight="bold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/about" },
{ name: "Lookbook", id: "/lookbook" },
{ name: "Contact", id: "/contact" },
]}
brandName="OceanWave"
button={{ text: "Contact", href: "/contact" }}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{ name: "Home", id: "/" },
{ name: "Shop", id: "/shop" },
{ name: "About", id: "/about" },
{ name: "Lookbook", id: "/lookbook" },
{ name: "Contact", id: "/contact" },
]}
brandName="OceanWave"
button={{ text: "Contact", href: "/contact" }}
/>
</div>
<div id="lookbook-gallery" data-section="lookbook-gallery">
<TestimonialCardOne
textboxLayout="split"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
animationType="slide-up"
testimonials={[
{ id: "l1", name: "Look One", role: "Surf Session", company: "Summer 2024", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/woman-with-wet-long-hair-posing-camera-with-surf-board-near-ocean-sunlight_291650-1677.jpg" },
{ id: "l2", name: "Look Two", role: "Beach Walk", company: "Autumn 2024", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/middle-age-hispanic-woman-wearing-bikini-summer-hat-success-sign-doing-positive-gesture-with-hand-thumbs-up-smiling-happy-cheerful-expression-winner-gesture_839833-20739.jpg" },
{ id: "l3", name: "Look Three", role: "Ocean Breeze", company: "Style 2024", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-holding-her-her_23-2148631401.jpg" },
{ id: "l4", name: "Look Four", role: "Adventure Day", company: "Vibe 2024", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/portrait-young-surfer-beach-holding-up-his-surfboard-wearing-black-surfing-suit-sport-water-sport-concept_58466-11841.jpg" },
{ id: "l5", name: "Look Five", role: "Sunset Waves", company: "Collection", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/smiley-woman-ready-try-sweater_23-2148385701.jpg" }
]}
title="Lifestyle Lookbook"
description="A glimpse into our community living their best life at the shoreline."
/>
</div>
<div id="lookbook-hero" data-section="lookbook-hero" className="pt-32 pb-16 px-4 text-center">
<h1 className="text-5xl font-bold mb-4">Lookbook</h1>
<p className="text-xl max-w-2xl mx-auto">Explore our latest collections captured in the wild.</p>
</div>
<div id="product" data-section="product">
<ProductCardFour
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="Style Inspiration"
description="Find your perfect beach fit."
products={[
{ id: "l10", name: "Sunset Hoodie", price: "€79", variant: "Oversized", imageSrc: "http://img.b2bpic.net/free-photo/close-up-stylish-woman-holding-holiday-hat_23-2148588589.jpg" },
{ id: "l11", name: "Coastal Cap", price: "€25", variant: "Classic", imageSrc: "http://img.b2bpic.net/free-photo/smiling-woman-carrying-surfboard-sand-beach_1262-3314.jpg" }
]}
/>
</div>
<div id="instagram" data-section="instagram">
<FeatureCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={true}
title="Follow us on Instagram"
description="Join our community and tag #OceanWave to be featured."
features={[
{ title: "Adventure Awaits", description: "Lifestyle shots from the coast.", imageSrc: "http://img.b2bpic.net/free-photo/view-from-back-slim-tan-red-head-girl-stylish-tropical-outfit-posing-amazing-beach-near-ocean_273443-816.jpg?_wi=1" },
{ title: "Product Showcase", description: "Get a closer look at our latest apparel.", imageSrc: "http://img.b2bpic.net/free-photo/woman-nature-with-clothesline_23-2148170341.jpg?_wi=1" },
{ title: "Sustainable Living", description: "Behind the scenes of our production.", imageSrc: "http://img.b2bpic.net/free-photo/women-modifying-clothing-thrift-store_23-2150952392.jpg" },
{ title: "Community Love", description: "Featuring our favorite community members.", imageSrc: "http://img.b2bpic.net/free-photo/girl-wearing-straw-hat_1398-1889.jpg?_wi=1" }
]}
/>
</div>
<div id="feature" data-section="feature">
<FeatureCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="uniform-all-items-equal"
useInvertedBackground={false}
title="The Vibe"
description="Capture the ocean's essence."
features={[
{ title: "Coastal Living", description: "Designed for the surf, made for the city.", imageSrc: "http://img.b2bpic.net/free-photo/happy-pretty-woman-holding-surfboard-beach_1262-3227.jpg" },
{ title: "Ocean Ready", description: "Tested by real surfers in real conditions.", imageSrc: "http://img.b2bpic.net/free-photo/couple-shoreline-close-up-view_23-2147641357.jpg" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="OceanWave"
copyrightText="© 2025 OceanWave Apparel"
socialLinks={[
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" }
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="OceanWave"
copyrightText="© 2025 OceanWave Apparel"
socialLinks={[
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
{ icon: Twitter, href: "#", ariaLabel: "Twitter" }
]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);

View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #f5f4ef;
--card: #dad6cd;
--foreground: #2a2928;
--primary-cta: #2a2928;
--background: #f0f8ff;
--card: #e0f2f7;
--foreground: #001a33;
--primary-cta: #0077be;
--primary-cta-text: #f5f4ef;
--secondary-cta: #ecebea;
--secondary-cta: #b3e0ff;
--secondary-cta-text: #2a2928;
--accent: #ffffff;
--background-accent: #c6b180;
--accent: #00a8cc;
--background-accent: #005a8d;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);