Merge version_1 into main #2
463
src/app/page.tsx
463
src/app/page.tsx
@@ -17,326 +17,171 @@ import { Instagram, Linkedin, Shield } from "lucide-react";
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
<ThemeProvider
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
defaultButtonVariant="text-shift"
|
||||
defaultTextAnimation="reveal-blur"
|
||||
borderRadius="pill"
|
||||
contentWidth="medium"
|
||||
sizing="medium"
|
||||
background="circleGradient"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="normal"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Home",
|
||||
id: "#hero",
|
||||
},
|
||||
{
|
||||
name: "Services",
|
||||
id: "#services",
|
||||
},
|
||||
{
|
||||
name: "Process",
|
||||
id: "#process",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
]}
|
||||
brandName="AB Kontorsrutin"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{ name: "Home", id: "#hero" },
|
||||
{ name: "Services", id: "#services" },
|
||||
{ name: "Process", id: "#process" },
|
||||
{ name: "Contact", id: "#contact" },
|
||||
]}
|
||||
brandName="AB Kontorsrutin"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{
|
||||
variant: "rotated-rays-static",
|
||||
}}
|
||||
title="Print that represents your business — perfectly."
|
||||
description="High-quality printing, personal service, and complete solutions — from idea to finished product."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get a quote",
|
||||
href: "#contact",
|
||||
},
|
||||
{
|
||||
text: "See our work",
|
||||
href: "#products",
|
||||
},
|
||||
]}
|
||||
carouselItems={[
|
||||
{
|
||||
id: "1",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-blue-ti-cordyline-leaves-texture-pattern-macro-photography_53876-145014.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-multicolored-pens_23-2148204815.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/twig-book-stacked-with-black-spool-scissor-against-white-background_23-2147924504.jpg?_wi=1",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/billboard-with-fake-news-message_23-2148876043.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/closeup-with-group-colored-pencils-selected-focus-red_1150-19817.jpg",
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/fake-news-concept_23-2148836995.jpg",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroBillboardRotatedCarousel
|
||||
background={{ variant: "rotated-rays-static" }}
|
||||
title="Print that represents your business — perfectly."
|
||||
description="High-quality printing, personal service, and complete solutions — from idea to finished product."
|
||||
buttons={[
|
||||
{ text: "Get a quote", href: "#contact" },
|
||||
{ text: "See our work", href: "#products" },
|
||||
]}
|
||||
carouselItems={[
|
||||
{ id: "1", imageSrc: "http://img.b2bpic.net/free-photo/abstract-blue-ti-cordyline-leaves-texture-pattern-macro-photography_53876-145014.jpg" },
|
||||
{ id: "2", imageSrc: "http://img.b2bpic.net/free-photo/set-multicolored-pens_23-2148204815.jpg" },
|
||||
{ id: "3", imageSrc: "http://img.b2bpic.net/free-photo/twig-book-stacked-with-black-spool-scissor-against-white-background_23-2147924504.jpg" },
|
||||
{ id: "4", imageSrc: "http://img.b2bpic.net/free-photo/billboard-with-fake-news-message_23-2148876043.jpg" },
|
||||
{ id: "5", imageSrc: "http://img.b2bpic.net/free-photo/closeup-with-group-colored-pencils-selected-focus-red_1150-19817.jpg" },
|
||||
{ id: "6", imageSrc: "http://img.b2bpic.net/free-photo/fake-news-concept_23-2148836995.jpg" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Trusted by our community"
|
||||
tag="Proven excellence"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "4.8",
|
||||
description: "Customer rating",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "30+",
|
||||
description: "Years of experience",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "100%",
|
||||
description: "Eco-certified",
|
||||
},
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardFourteen
|
||||
useInvertedBackground={false}
|
||||
title="Trusted by our community"
|
||||
tag="Proven excellence"
|
||||
metrics={[
|
||||
{ id: "m1", value: "4.8", description: "Customer rating" },
|
||||
{ id: "m2", value: "30+", description: "Years of experience" },
|
||||
{ id: "m3", value: "100%", description: "Eco-certified" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Our Commitment"
|
||||
title="Why businesses choose AB Kontorsrutin"
|
||||
description="We don’t just print; we build partnerships. Your success is our mission, delivered with personal care."
|
||||
subdescription="Our in-house team handles every stage of your project to ensure the highest standards."
|
||||
icon={Shield}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/couple-relaxing-home_23-2149129084.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<TestimonialAboutCard
|
||||
useInvertedBackground={true}
|
||||
tag="Our Commitment"
|
||||
title="Why businesses choose AB Kontorsrutin"
|
||||
description="We don’t just print; we build partnerships. Your success is our mission, delivered with personal care."
|
||||
subdescription="Our in-house team handles every stage of your project to ensure the highest standards."
|
||||
icon={Shield}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/couple-relaxing-home_23-2149129084.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Business Printing",
|
||||
description: "High-end business cards, stationery, and corporate identity sets.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-desk-concept-with-mockup-devices_23-2148226849.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-woman-s-hand-painting-white-paint-mold_23-2147846086.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-blue-ti-cordyline-leaves-texture-pattern-macro-photography_53876-145014.jpg?_wi=2",
|
||||
imageAlt: "marketing materials focus",
|
||||
},
|
||||
{
|
||||
title: "Marketing Materials",
|
||||
description: "Brochures, flyers, and promotional print to boost your visibility.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-military-background-with-inscription_23-2149341297.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/top-view-collection-blank-business-cards_23-2148498317.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/set-multicolored-pens_23-2148204815.jpg?_wi=2",
|
||||
imageAlt: "marketing materials focus",
|
||||
},
|
||||
{
|
||||
title: "Large Format",
|
||||
description: "Posters and signage for maximum impact and visibility.",
|
||||
phoneOne: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/background-with-colorful-blocks_1048-2435.jpg",
|
||||
},
|
||||
phoneTwo: {
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/male-barista-with-tattoos-adding-milk-coffee_23-2149052859.jpg",
|
||||
},
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/twig-book-stacked-with-black-spool-scissor-against-white-background_23-2147924504.jpg?_wi=2",
|
||||
imageAlt: "marketing materials focus",
|
||||
},
|
||||
]}
|
||||
showStepNumbers={false}
|
||||
title="Professional solutions for your brand"
|
||||
description="Comprehensive printing services designed for clarity and impact."
|
||||
/>
|
||||
</div>
|
||||
<div id="services" data-section="services">
|
||||
<FeatureCardNine
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
showStepNumbers={false}
|
||||
title="Professional solutions for your brand"
|
||||
description="Comprehensive printing services designed for clarity and impact."
|
||||
features={[
|
||||
{
|
||||
title: "Business Printing", description: "High-end business cards, stationery, and corporate identity sets.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/flat-lay-desk-concept-with-mockup-devices_23-2148226849.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/elevated-view-woman-s-hand-painting-white-paint-mold_23-2147846086.jpg" }
|
||||
},
|
||||
{
|
||||
title: "Marketing Materials", description: "Brochures, flyers, and promotional print to boost your visibility.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/close-up-military-background-with-inscription_23-2149341297.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/top-view-collection-blank-business-cards_23-2148498317.jpg" }
|
||||
},
|
||||
{
|
||||
title: "Large Format", description: "Posters and signage for maximum impact and visibility.", phoneOne: { imageSrc: "http://img.b2bpic.net/free-photo/background-with-colorful-blocks_1048-2435.jpg" },
|
||||
phoneTwo: { imageSrc: "http://img.b2bpic.net/free-photo/male-barista-with-tattoos-adding-milk-coffee_23-2149052859.jpg" }
|
||||
}
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{
|
||||
id: "p1",
|
||||
name: "Business Card Sets",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/letter-eyeglasses-smartphone-earphone-coffee-cup-white-desk_23-2148061610.jpg",
|
||||
},
|
||||
{
|
||||
id: "p2",
|
||||
name: "Corporate Stationery",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-back-school-concept_23-2148586720.jpg",
|
||||
},
|
||||
{
|
||||
id: "p3",
|
||||
name: "Bound Catalogs",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/black-notebook_1203-7034.jpg",
|
||||
},
|
||||
{
|
||||
id: "p4",
|
||||
name: "Large Format Posters",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/lighting-niches-with-2700k-4000k-6500k-color-temperatures-3d-render_363450-7877.jpg",
|
||||
},
|
||||
{
|
||||
id: "p5",
|
||||
name: "Branded Packaging",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/3d-glasses-camera-arrangement_23-2149558789.jpg",
|
||||
},
|
||||
{
|
||||
id: "p6",
|
||||
name: "Specialty Print Solutions",
|
||||
price: "Custom",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/tech-elegant-visiting-card-template_23-2148453885.jpg",
|
||||
},
|
||||
]}
|
||||
title="Our premium catalog"
|
||||
description="Explore our high-quality printing products designed for business success."
|
||||
/>
|
||||
</div>
|
||||
<div id="products" data-section="products">
|
||||
<ProductCardThree
|
||||
textboxLayout="default"
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
useInvertedBackground={true}
|
||||
products={[
|
||||
{ id: "p1", name: "Business Card Sets", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/letter-eyeglasses-smartphone-earphone-coffee-cup-white-desk_23-2148061610.jpg" },
|
||||
{ id: "p2", name: "Corporate Stationery", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/close-up-view-back-school-concept_23-2148586720.jpg" },
|
||||
{ id: "p3", name: "Bound Catalogs", price: "Custom", imageSrc: "http://img.b2bpic.net/free-photo/black-notebook_1203-7034.jpg" }
|
||||
]}
|
||||
title="Our premium catalog"
|
||||
description="Explore our high-quality printing products designed for business success."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Mikael Eckard",
|
||||
role: "CEO",
|
||||
testimonial: "Örebros bästa tryckeri! Fantastic quality.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-grey-haired-female-ceo-smiling-content-experienced-beautiful-businesswoman-posing-office-room-business-company-appearance-expression-concept_74855-11905.jpg",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "Sara Lind",
|
||||
role: "Designer",
|
||||
testimonial: "Super friendly and knowledgeable. Always helpful.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-work_23-2149546183.jpg",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "Erik Berg",
|
||||
role: "Founder",
|
||||
testimonial: "Reliable delivery and perfect finish every time.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coffee-business-owner-concept-portrait-happy-young-bearded-caucasian-barista-apron-with-confident-looking-smiling-camera-coffee-shop-counter_1258-103925.jpg",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "Linda Holm",
|
||||
role: "Manager",
|
||||
testimonial: "My first choice for all corporate printing needs.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/woman-giving-handshake-her-colleague-work_23-2149330990.jpg",
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "David Ek",
|
||||
role: "Owner",
|
||||
testimonial: "High-end quality with a personal, local touch.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg",
|
||||
},
|
||||
]}
|
||||
title="What our clients say"
|
||||
description="Trusted by local businesses in Örebro and beyond."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardTwo
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Mikael Eckard", role: "CEO", testimonial: "Örebros bästa tryckeri! Fantastic quality.", imageSrc: "http://img.b2bpic.net/free-photo/portrait-successful-grey-haired-female-ceo-smiling-content-experienced-beautiful-businesswoman-posing-office-room-business-company-appearance-expression-concept_74855-11905.jpg" },
|
||||
{ id: "2", name: "Sara Lind", role: "Designer", testimonial: "Super friendly and knowledgeable. Always helpful.", imageSrc: "http://img.b2bpic.net/free-photo/side-view-smiley-woman-work_23-2149546183.jpg" },
|
||||
{ id: "3", name: "Erik Berg", role: "Founder", testimonial: "Reliable delivery and perfect finish every time.", imageSrc: "http://img.b2bpic.net/free-photo/coffee-business-owner-concept-portrait-happy-young-bearded-caucasian-barista-apron-with-confident-looking-smiling-camera-coffee-shop-counter_1258-103925.jpg" },
|
||||
{ id: "4", name: "Linda Holm", role: "Manager", testimonial: "My first choice for all corporate printing needs.", imageSrc: "http://img.b2bpic.net/free-photo/woman-giving-handshake-her-colleague-work_23-2149330990.jpg" },
|
||||
{ id: "5", name: "David Ek", role: "Owner", testimonial: "High-end quality with a personal, local touch.", imageSrc: "http://img.b2bpic.net/free-photo/confident-middle-aged-businesswoman-looking-camera_74855-4120.jpg" },
|
||||
]}
|
||||
title="What our clients say"
|
||||
description="Trusted by local businesses in Örebro and beyond."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="process" data-section="process">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqs={[
|
||||
{
|
||||
id: "s1",
|
||||
title: "1. Contact us",
|
||||
content: "Reach out via phone, email, or our quote form to discuss your needs.",
|
||||
},
|
||||
{
|
||||
id: "s2",
|
||||
title: "2. Planning",
|
||||
content: "We review your requirements and provide an expert consultation.",
|
||||
},
|
||||
{
|
||||
id: "s3",
|
||||
title: "3. Production",
|
||||
content: "Our in-house team ensures precise execution and quality control.",
|
||||
},
|
||||
{
|
||||
id: "s4",
|
||||
title: "4. Delivery",
|
||||
content: "Your finished print products delivered on time, every time.",
|
||||
},
|
||||
]}
|
||||
title="Simple. Smooth. Professional."
|
||||
description="Our step-by-step process ensures a seamless journey from idea to finished product."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="process" data-section="process">
|
||||
<FaqDouble
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
faqsAnimation="slide-up"
|
||||
faqs={[
|
||||
{ id: "s1", title: "1. Contact us", content: "Reach out via phone, email, or our quote form to discuss your needs." },
|
||||
{ id: "s2", title: "2. Planning", content: "We review your requirements and provide an expert consultation." },
|
||||
{ id: "s3", title: "3. Production", content: "Our in-house team ensures precise execution and quality control." },
|
||||
{ id: "s4", title: "4. Delivery", content: "Your finished print products delivered on time, every time." },
|
||||
]}
|
||||
title="Simple. Smooth. Professional."
|
||||
description="Our step-by-step process ensures a seamless journey from idea to finished product."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "plain",
|
||||
}}
|
||||
tag="Get in Touch"
|
||||
title="Let’s create something great together"
|
||||
description="Ready to elevate your business print? Request a custom quote today."
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
useInvertedBackground={false}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Get in Touch"
|
||||
title="Let’s create something great together"
|
||||
description="Ready to elevate your business print? Request a custom quote today."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="AB Kontorsrutin"
|
||||
copyrightText="© 2025 AB Kontorsrutin. All rights reserved."
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{
|
||||
icon: Linkedin,
|
||||
href: "#",
|
||||
ariaLabel: "LinkedIn",
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterCard
|
||||
logoText="AB Kontorsrutin"
|
||||
copyrightText="© 2025 AB Kontorsrutin. All rights reserved."
|
||||
socialLinks={[
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
{ icon: Linkedin, href: "#", ariaLabel: "LinkedIn" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user