2 Commits

2 changed files with 50 additions and 17 deletions

View File

@@ -6,7 +6,7 @@ import { Facebook, Heart, Instagram, Twitter, Sparkles, Star } from "lucide-reac
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen'; import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel'; import HeroBillboardRotatedCarousel from '@/components/sections/hero/HeroBillboardRotatedCarousel';
import TextAbout from '@/components/sections/about/TextAbout'; import SplitAbout from '@/components/sections/about/SplitAbout';
import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven'; import FeatureCardSeven from '@/components/sections/feature/FeatureCardSeven';
import ProductCardFour from '@/components/sections/product/ProductCardFour'; import ProductCardFour from '@/components/sections/product/ProductCardFour';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen'; import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
@@ -72,17 +72,50 @@ export default function LandingPage() {
</div> </div>
<div id="about-section" data-section="about-section"> <div id="about-section" data-section="about-section">
<TextAbout <SplitAbout
tag="OUR STORY" tag="ABOUT KLARK"
tagIcon={Sparkles} tagIcon={Sparkles}
tagAnimation="slide-up" tagAnimation="slide-up"
title="Crafting Timeless Beauty Since 2010" title="Redefining Modern Design Excellence"
titleSegments={[
{ text: "Redefining", color: "text-green-500" },
{ text: "Modern Design Excellence" }
]}
description="At Klark, we believe exceptional design transforms spaces and elevates experiences. Since our founding, we've been committed to creating innovative solutions that blend aesthetics with functionality, delivering products that inspire and endure."
buttons={[ buttons={[
{ text: "Explore Our Collections", href: "#products-section" }, { label: "View Our Work", href: "#portfolio-section", dataWebildId: "btn_klark_portfolio" },
{ text: "Meet Our Artisans", href: "#testimonials-section" }, { label: "Get In Touch", href: "#contact-section", dataWebildId: "btn_klark_contact" }
]} ]}
buttonAnimation="slide-up" buttonAnimation="slide-up"
bulletPoints={[
{
title: "Innovative Design",
description: "Cutting-edge solutions that push creative boundaries",
icon: Sparkles
},
{
title: "Quality Craftsmanship",
description: "Meticulous attention to detail in every creation",
icon: Sparkles
},
{
title: "Sustainable Practices",
description: "Environmentally conscious production methods",
icon: Sparkles
},
{
title: "Client-Focused",
description: "Your vision drives our creative process",
icon: Sparkles
}
]}
imageSrc="https://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background_53876-120942.jpg"
imageAlt="Klark design showcase"
imagePosition="right"
mediaAnimation="slide-up"
textboxLayout="default"
useInvertedBackground={false} useInvertedBackground={false}
ariaLabel="About Klark design studio"
/> />
</div> </div>

View File

@@ -3,22 +3,22 @@
/* --vw is set by ThemeProvider */ /* --vw is set by ThemeProvider */
/* --background: #f7f6f7;; /* --background: #f7f6f7;;
--card: #1a1a1a;; --card: #1a2d1a;;
--foreground: #ffffff;; --foreground: #ffffff;;
--primary-cta: #cc0000;; --primary-cta: #00ff00;;
--secondary-cta: #ffffff;; --secondary-cta: #ffff00;;
--accent: #00ff00;; --accent: #ffff00;;
--background-accent: #006600;; */ --background-accent: #003300;; */
--background: #0d0d0d;; --background: #0d1a0d;;
--card: #1a1a1a;; --card: #1a2d1a;;
--foreground: #ffffff;; --foreground: #ffffff;;
--primary-cta: #cc0000;; --primary-cta: #00ff00;;
--primary-cta-text: #f7f6f7;; --primary-cta-text: #f7f6f7;;
--secondary-cta: #ffffff;; --secondary-cta: #ffff00;;
--secondary-cta-text: #250c0d;; --secondary-cta-text: #250c0d;;
--accent: #00ff00;; --accent: #ffff00;;
--background-accent: #006600;; --background-accent: #003300;;
/* text sizing - set by ThemeProvider */ /* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem); /* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);