189 lines
8.7 KiB
TypeScript
189 lines
8.7 KiB
TypeScript
"use client"
|
|
|
|
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
|
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
|
import HeroLogoBillboard from '@/components/sections/hero/HeroLogoBillboard';
|
|
import FeatureCardSixteen from '@/components/sections/feature/FeatureCardSixteen';
|
|
import ProductCardTwo from '@/components/sections/product/ProductCardTwo';
|
|
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
|
import ContactFaq from '@/components/sections/contact/ContactFaq';
|
|
import FooterSimple from '@/components/sections/footer/FooterSimple';
|
|
import { Paintbrush, Palette, Sparkles } from 'lucide-react';
|
|
|
|
export default function LandingPage() {
|
|
return (
|
|
<ThemeProvider
|
|
defaultButtonVariant="directional-hover"
|
|
defaultTextAnimation="reveal-blur"
|
|
borderRadius="soft"
|
|
contentWidth="medium"
|
|
sizing="largeSmallSizeMediumTitles"
|
|
background="grid"
|
|
cardStyle="gradient-radial"
|
|
primaryButtonStyle="radial-glow"
|
|
secondaryButtonStyle="glass"
|
|
headingFontWeight="light"
|
|
>
|
|
<div id="nav" data-section="nav">
|
|
<NavbarStyleApple
|
|
brandName="Doms"
|
|
navItems={[
|
|
{ name: "Home", id: "hero" },
|
|
{ name: "Features", id: "features" },
|
|
{ name: "Colors", id: "colors" },
|
|
{ name: "Shop", id: "https://www.domsofficial.com" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="hero" data-section="hero">
|
|
<HeroLogoBillboard
|
|
logoText="Doms Art Markers"
|
|
description="Create bold, vibrant artwork with premium colour markers designed for artists, students, and creatives. Express your vision with 120+ stunning colors."
|
|
buttons={[
|
|
{ text: "Watch Demo", href: "#features" },
|
|
{ text: "Explore Colors", href: "#colors" }
|
|
]}
|
|
buttonAnimation="blur-reveal"
|
|
background={{ variant: "sparkles-gradient" }}
|
|
videoSrc="http://img.b2bpic.net/free-photo/brushes-watercolor-near-paper_23-2147895461.jpg"
|
|
videoAriaLabel="30-second Doms markers creative demonstration video"
|
|
mediaAnimation="slide-up"
|
|
frameStyle="card"
|
|
/>
|
|
</div>
|
|
|
|
<div id="features" data-section="features">
|
|
<FeatureCardSixteen
|
|
title="Professional Grade Quality"
|
|
description="Experience the difference that premium marker quality brings to your creative work. Doms markers deliver vibrant, long-lasting color with smooth application."
|
|
tag="Why Choose Doms"
|
|
tagIcon={Sparkles}
|
|
negativeCard={{
|
|
items: [
|
|
"Cheap markers fade quickly", "Inconsistent color output", "Limited color range", "Poor blending capability"
|
|
]
|
|
}}
|
|
positiveCard={{
|
|
items: [
|
|
"Superior pigmentation and vibrancy", "Consistent, reliable performance", "120+ premium color options", "Excellent blending and layering"
|
|
]
|
|
}}
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
buttons={[
|
|
{ text: "Shop Now", href: "https://www.domsofficial.com" }
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div id="colors" data-section="colors">
|
|
<ProductCardTwo
|
|
title="Explore Our Color Range"
|
|
description="Choose from our extensive palette of premium art colours. Each marker is crafted for vibrant, lasting color that inspires creativity."
|
|
tag="Featured"
|
|
tagIcon={Palette}
|
|
products={[
|
|
{
|
|
id: "1", brand: "Doms", name: "Premium 60 Color Set", price: "₹599", rating: 5,
|
|
reviewCount: "2.3k", imageSrc: "http://img.b2bpic.net/free-photo/lgbt-tubes-with-multicolored-paints_23-2148141260.jpg", imageAlt: "Doms 60 color marker set"
|
|
},
|
|
{
|
|
id: "2", brand: "Doms", name: "Professional 120 Color Set", price: "₹1,299", rating: 5,
|
|
reviewCount: "1.8k", imageSrc: "http://img.b2bpic.net/free-photo/couple-making-plans-together-redecorate-home_23-2148814615.jpg", imageAlt: "Doms 120 color professional set"
|
|
},
|
|
{
|
|
id: "3", brand: "Doms", name: "Artist's Ultimate Collection", price: "₹2,499", rating: 5,
|
|
reviewCount: "945", imageSrc: "http://img.b2bpic.net/free-vector/minimal-makeup-artist-landing-page-template_23-2149349836.jpg", imageAlt: "Doms ultimate artist collection"
|
|
}
|
|
]}
|
|
gridVariant="three-columns-all-equal-width"
|
|
animationType="slide-up"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
/>
|
|
</div>
|
|
|
|
<div id="socialproof" data-section="socialproof">
|
|
<SocialProofOne
|
|
title="Trusted by Creative Professionals"
|
|
description="Artists, illustrators, and students worldwide choose Doms for their creative projects."
|
|
tag="Social Proof"
|
|
textboxLayout="default"
|
|
useInvertedBackground={false}
|
|
names={[
|
|
"Professional Artists", "Illustration Studios", "Art Educators", "Design Schools", "Creative Agencies", "Student Communities", "Online Creators"
|
|
]}
|
|
speed={40}
|
|
showCard={true}
|
|
/>
|
|
</div>
|
|
|
|
<div id="cta" data-section="cta">
|
|
<ContactFaq
|
|
ctaTitle="Ready to Create?"
|
|
ctaDescription="Start your artistic journey with Doms premium colour markers today. Get premium quality colors that inspire unlimited creativity."
|
|
ctaButton={{
|
|
text: "Shop Now", href: "https://www.domsofficial.com"
|
|
}}
|
|
ctaIcon={Paintbrush}
|
|
faqs={[
|
|
{
|
|
id: "1", title: "What makes Doms markers different?", content: "Doms markers are crafted with premium pigments that deliver vibrant, long-lasting color. Our 120+ color range and superior blending capability make them ideal for professional artists and students alike."
|
|
},
|
|
{
|
|
id: "2", title: "Are the markers refillable?", content: "Yes, many of our premium marker sets feature refillable cartridges, making them an economical and environmentally friendly choice for regular users."
|
|
},
|
|
{
|
|
id: "3", title: "What paper works best?", content: "Doms markers perform beautifully on most paper types. For best results, use quality marker paper, sketch pads, or mixed media paper that can handle wet media."
|
|
},
|
|
{
|
|
id: "4", title: "Do the markers blend well?", content: "Absolutely! Our markers are specially formulated for excellent blending and layering, allowing you to create smooth color transitions and professional gradients."
|
|
}
|
|
]}
|
|
useInvertedBackground={false}
|
|
animationType="slide-up"
|
|
accordionAnimationType="smooth"
|
|
/>
|
|
</div>
|
|
|
|
<div id="footer" data-section="footer">
|
|
<FooterSimple
|
|
columns={[
|
|
{
|
|
title: "Products", items: [
|
|
{ label: "All Markers", href: "https://www.domsofficial.com" },
|
|
{ label: "Color Sets", href: "https://www.domsofficial.com" },
|
|
{ label: "Art Supplies", href: "https://www.domsofficial.com" }
|
|
]
|
|
},
|
|
{
|
|
title: "Company", items: [
|
|
{ label: "About Us", href: "#" },
|
|
{ label: "Blog", href: "#" },
|
|
{ label: "Careers", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Support", items: [
|
|
{ label: "Contact Us", href: "#" },
|
|
{ label: "FAQ", href: "#cta" },
|
|
{ label: "Returns", href: "#" }
|
|
]
|
|
},
|
|
{
|
|
title: "Legal", items: [
|
|
{ label: "Privacy Policy", href: "#" },
|
|
{ label: "Terms of Service", href: "#" },
|
|
{ label: "Cookie Policy", href: "#" }
|
|
]
|
|
}
|
|
]}
|
|
bottomLeftText="© 2025 Doms Art Markers. All rights reserved."
|
|
bottomRightText="Made for Creative Minds"
|
|
/>
|
|
</div>
|
|
</ThemeProvider>
|
|
);
|
|
} |