diff --git a/src/app/page.tsx b/src/app/page.tsx index 7f6a015..e81dcfb 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -4,16 +4,17 @@ import ReactLenis from "lenis/react"; import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider"; import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay'; import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel'; -import ProductCardFour from '@/components/sections/product/ProductCardFour'; +import ProductCardThree from '@/components/sections/product/ProductCardThree'; import FeatureCardSix from '@/components/sections/feature/FeatureCardSix'; import FeatureCardOne from '@/components/sections/feature/FeatureCardOne'; import MetricCardEleven from '@/components/sections/metrics/MetricCardEleven'; -import BlogCardOne from '@/components/sections/blog/BlogCardOne'; +import BlogCardThree from '@/components/sections/blog/BlogCardThree'; import FaqSplitMedia from '@/components/sections/faq/FaqSplitMedia'; import ContactSplitForm from '@/components/sections/contact/ContactSplitForm'; import FooterLogoEmphasis from '@/components/sections/footer/FooterLogoEmphasis'; import SocialProofOne from '@/components/sections/socialProof/SocialProofOne'; -import { Sparkles, Award, Beaker, TrendingUp, Heart, HelpCircle, BookOpen } from 'lucide-react'; +import SplitAbout from '@/components/sections/about/SplitAbout'; +import { Sparkles, Award, Beaker, TrendingUp, Heart, HelpCircle, BookOpen, Fingerprint } from 'lucide-react'; export default function LandingPage() { return ( @@ -35,6 +36,7 @@ export default function LandingPage() { brandName="UMBRA" navItems={[ { name: "Collection", id: "products" }, + { name: "Brand Story", id: "about" }, { name: "Craft", id: "ingredients" }, { name: "Journal", id: "blog" }, { name: "Contact", id: "contact" } @@ -80,21 +82,32 @@ export default function LandingPage() { /> +
+ +
+
- @@ -108,9 +121,9 @@ export default function LandingPage() { tagIcon={Beaker} tagAnimation="slide-up" features={[ - { title: "Rare Ingredient Sourcing", description: "We source precious essences from sustainable fields worldwide — Grasse rose, Madagascan vanilla, and Italian bergamot at their peak.", imageSrc: "http://img.b2bpic.net/free-photo/organic-cosmetic-product-with-dreamy-aesthetic-fresh-background_23-2151382870.jpg?_wi=1", imageAlt: "Botanical extraction process" }, - { title: "Master Perfumers", description: "Every composition is crafted by world-renowned noses who balance top, heart, and base notes into unforgettable olfactory journeys.", imageSrc: "http://img.b2bpic.net/free-photo/preparing-utensils-microneedling-procedure_23-2149374097.jpg", imageAlt: "Laboratory research" }, - { title: "Lasting Sillage", description: "Our concentrated formulas are designed for exceptional longevity — a single application carries you beautifully from dawn to dusk.", imageSrc: "http://img.b2bpic.net/free-photo/coffee-machine-with-water-cup_23-2148892890.jpg", imageAlt: "Formulation development" } + { title: "Rare Ingredient Sourcing", description: "We source precious essences from sustainable fields worldwide — Grasse rose, Madagascan vanilla, and Italian bergamot at their peak.", imageSrc: "http://img.b2bpic.net/free-photo/organic-cosmetic-product-with-dreamy-aesthetic-fresh-background_23-2151382870.jpg?_wi=1" }, + { title: "Master Perfumers", description: "Every composition is crafted by world-renowned noses who balance top, heart, and base notes into unforgettable olfactory journeys.", imageSrc: "http://img.b2bpic.net/free-photo/preparing-utensils-microneedling-procedure_23-2149374097.jpg" }, + { title: "Lasting Sillage", description: "Our concentrated formulas are designed for exceptional longevity — a single application carries you beautifully from dawn to dusk.", imageSrc: "http://img.b2bpic.net/free-photo/coffee-machine-with-water-cup_23-2148892890.jpg" } ]} textboxLayout="default" useInvertedBackground={false} @@ -125,32 +138,27 @@ export default function LandingPage() { tagIcon={Heart} tagAnimation="slide-up" features={[ - { title: "Amara Osei", description: " ", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/influencer-amara.mp4", videoAriaLabel: "Amara Osei wearing UMBRA fragrance"}, - { title: "Chloe Marchand", description: " ", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/influencer-chloe.mp4", videoAriaLabel: "Chloe Marchand getting ready with UMBRA"}, - { title: "Elena Vasquez", description: " ", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/influencer-elena.mp4", videoAriaLabel: "Elena Vasquez wearing UMBRA fragrance"}, - { title: "Isla Montgomery", description: " ", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/influencer-isla.mp4", videoAriaLabel: "Isla Montgomery wearing UMBRA fragrance"}, - { title: "Zara Kimani", description: " ", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/influencer-zara.mp4", videoAriaLabel: "Zara Kimani getting ready with UMBRA fragrance"}, - { title: "Nadia Petrova", description: " ", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/influencer-nadia.mp4", videoAriaLabel: "Nadia Petrova wearing UMBRA fragrance"}, + { title: "Amara Osei", description: "", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/influencer-amara.mp4" }, + { title: "Chloe Marchand", description: "", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/influencer-chloe.mp4" }, + { title: "Elena Vasquez", description: "", videoSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/default/templates/skincare-luxury/influencer-elena.mp4" } ]} - gridVariant="uniform-all-items-equal" + gridVariant="three-columns-all-equal-width" animationType="slide-up" textboxLayout="default" useInvertedBackground={false} - cardDescriptionClassName="hidden" - cardTitleClassName="verified-name" />
-
@@ -225,34 +218,8 @@ export default function LandingPage() {
diff --git a/src/app/styles/base.css b/src/app/styles/base.css index a25430f..f3435b3 100644 --- a/src/app/styles/base.css +++ b/src/app/styles/base.css @@ -11,7 +11,7 @@ html { body { background-color: var(--background); color: var(--foreground); - font-family: var(--font-inter-tight), sans-serif; + font-family: var(--font-playfair), sans-serif; position: relative; min-height: 100vh; overscroll-behavior: none; @@ -24,5 +24,5 @@ h3, h4, h5, h6 { - font-family: var(--font-inter-tight), sans-serif; + font-family: var(--font-playfair), sans-serif; } diff --git a/src/app/styles/variables.css b/src/app/styles/variables.css index 12147bf..d72e886 100644 --- a/src/app/styles/variables.css +++ b/src/app/styles/variables.css @@ -10,15 +10,15 @@ --accent: #ffffff; --background-accent: #ffffff; */ - --background: #ffffff; - --card: #fdfaf6; + --background: #fbfbf8; + --card: #f0ede6; --foreground: #1a1a1a; --primary-cta: #c5a059; --primary-cta-text: #f7f6f7; - --secondary-cta: #fdfaf6; + --secondary-cta: #e8e5dc; --secondary-cta-text: #250c0d; --accent: #d4af37; - --background-accent: #fdfaf6; + --background-accent: #efece5; /* text sizing - set by ThemeProvider */ /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);