Merge version_1 into main #2

Merged
bender merged 2 commits from version_1 into main 2026-06-10 15:53:30 +00:00
2 changed files with 297 additions and 403 deletions

View File

@@ -8,171 +8,145 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import { Clock, MessageSquare, Smile } from "lucide-react";
export default function LandingPage() {
export default function ContactPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="largeSmall"
background="grid"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="largeSmall"
background="grid"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Products",
id: "/products",
},
{
name: "About",
id: "/about",
},
{
name: "Contact",
id: "/contact",
},
{
name: "Shop",
id: "/shop",
},
]}
brandName="FLAXR"
button={{
text: "Shop Now",
href: "/shop",
}}
animateOnLoad={true}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home", id: "/"
},
{
name: "Products", id: "/products"
},
{
name: "About", id: "/about"
},
{
name: "Contact", id: "/contact"
},
{
name: "Shop", id: "/shop"
},
]}
brandName="FLAXR"
button={{
text: "Shop Now", href: "/shop"
}}
animateOnLoad={true}
/>
</div>
<div id="contact-form" data-section="contact-form">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain",
}}
tag="Get In Touch"
title="We're Here to Help"
description="Have questions about our products, need support, or interested in a partnership? Reach out to the FLAXR team."
inputPlaceholder="Your Email Address"
buttonText="Send Message"
termsText="We respect your privacy. See our privacy policy for more details."
/>
</div>
<div id="contact-form" data-section="contact-form">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "plain"
}}
tag="Get In Touch"
title="We're Here to Help"
description="Have questions about our products, need support, or interested in a partnership? Reach out to the FLAXR team."
inputPlaceholder="Your Email Address"
buttonText="Send Message"
termsText="We respect your privacy. See our privacy policy for more details."
/>
</div>
<div id="support-metrics" data-section="support-metrics">
<MetricCardThree
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "response-time",
icon: Clock,
title: "Average Response Time",
value: "24 Hours",
},
{
id: "satisfaction",
icon: Smile,
title: "Customer Satisfaction",
value: "98%",
},
{
id: "channels",
icon: MessageSquare,
title: "Support Channels",
value: "3+",
},
]}
title="Our Commitment to Support"
description="We are dedicated to providing exceptional support to ensure your FLAXR experience is always seamless and satisfying."
tag="Support"
/>
</div>
<div id="support-metrics" data-section="support-metrics">
<MetricCardThree
textboxLayout="default"
useInvertedBackground={true}
metrics={[
{
id: "response-time", icon: Clock,
title: "Average Response Time", value: "24 Hours"
},
{
id: "satisfaction", icon: Smile,
title: "Customer Satisfaction", value: "98%"
},
{
id: "channels", icon: MessageSquare,
title: "Support Channels", value: "3+"
},
]}
title="Our Commitment to Support"
description="We are dedicated to providing exceptional support to ensure your FLAXR experience is always seamless and satisfying."
tag="Support"
animationType="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Products",
items: [
{
label: "FLAXR ONE 60",
href: "/products#one-60",
},
{
label: "Accessories",
href: "/products#accessories",
},
{
label: "Shop All",
href: "/shop",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "/about",
},
{
label: "Blog",
href: "/blog",
},
{
label: "Careers",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "Contact Us",
href: "/contact",
},
{
label: "FAQ",
href: "/faq",
},
{
label: "Warranty",
href: "#",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
logoText="FLAXR"
copyrightText="© 2024 FLAXR. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Products", items: [
{
label: "FLAXR ONE 60", href: "/products#one-60"
},
{
label: "Accessories", href: "/products#accessories"
},
{
label: "Shop All", href: "/shop"
},
],
},
{
title: "Company", items: [
{
label: "About Us", href: "/about"
},
{
label: "Blog", href: "/blog"
},
{
label: "Careers", href: "#"
},
],
},
{
title: "Support", items: [
{
label: "Contact Us", href: "/contact"
},
{
label: "FAQ", href: "/faq"
},
{
label: "Warranty", href: "#"
},
],
},
{
title: "Legal", items: [
{
label: "Privacy Policy", href: "#"
},
{
label: "Terms of Service", href: "#"
},
],
},
]}
logoText="FLAXR"
copyrightText="© 2024 FLAXR. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);

View File

@@ -8,258 +8,178 @@ import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import ProductCardOne from '@/components/sections/product/ProductCardOne';
import { Crown, Sparkles, Star } from "lucide-react";
export default function LandingPage() {
export default function ProductsPage() {
return (
<ThemeProvider
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="largeSmall"
background="grid"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
defaultButtonVariant="icon-arrow"
defaultTextAnimation="entrance-slide"
borderRadius="pill"
contentWidth="medium"
sizing="largeSmall"
background="grid"
cardStyle="subtle-shadow"
primaryButtonStyle="double-inset"
secondaryButtonStyle="solid"
headingFontWeight="semibold"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home",
id: "/",
},
{
name: "Products",
id: "/products",
},
{
name: "About",
id: "/about",
},
{
name: "Contact",
id: "/contact",
},
{
name: "Shop",
id: "/shop",
},
]}
brandName="FLAXR"
button={{
text: "Shop Now",
href: "/shop",
}}
animateOnLoad={true}
/>
</div>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
navItems={[
{
name: "Home", id: "/"
},
{
name: "Products", id: "/products"
},
{
name: "About", id: "/about"
},
{
name: "Contact", id: "/contact"
},
{
name: "Shop", id: "/shop"
},
]}
brandName="FLAXR"
button={{
text: "Shop Now", href: "/shop"
}}
animateOnLoad={true}
/>
</div>
<div id="product-catalog" data-section="product-catalog">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
carouselMode="buttons"
products={[
{
id: "catalog-1",
name: "FLAXR CORE TKL",
price: "$249",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062907.jpg",
imageAlt: "FLAXR CORE TKL keyboard",
},
{
id: "catalog-2",
name: "FLAXR GHOST 75",
price: "$349",
imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-key-top-view_23-2149680277.jpg",
imageAlt: "FLAXR GHOST 75 translucent keyboard",
},
{
id: "catalog-3",
name: "FLAXR PULSE",
price: "$199",
imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133137.jpg",
imageAlt: "FLAXR PULSE keyboard with RGB lighting",
},
{
id: "catalog-4",
name: "FLAXR CONNECT Cable",
price: "$49",
imageSrc: "http://img.b2bpic.net/free-photo/white-keyboard-with-lights-high-angle_23-2149680240.jpg",
imageAlt: "FLAXR premium coiled cable",
},
{
id: "catalog-5",
name: "FLAXR ONE 60 Pro",
price: "$329",
imageSrc: "http://img.b2bpic.net/free-photo/man-using-gaming-keyboard-fly-spaceship-sf-videogame-close-up_482257-121693.jpg",
imageAlt: "Gamer's hands on FLAXR ONE 60 Pro keyboard",
},
{
id: "catalog-6",
name: "FLAXR ONE 60 Compact",
price: "$279",
imageSrc: "http://img.b2bpic.net/free-photo/workspace-with-office-supplies_140725-23274.jpg",
imageAlt: "Overhead view of FLAXR ONE 60 Compact keyboard",
},
]}
title="Explore Our Masterpieces"
description="Discover the full range of FLAXR keyboards and essential accessories, each designed to elevate your setup and performance."
tag="Our Collection"
/>
</div>
<div id="product-catalog" data-section="product-catalog">
<ProductCardOne
animationType="slide-up"
textboxLayout="default"
gridVariant="three-columns-all-equal-width"
useInvertedBackground={false}
carouselMode="buttons"
products={[
{
id: "catalog-1", name: "FLAXR CORE TKL", price: "$249", imageSrc: "http://img.b2bpic.net/free-photo/still-life-books-versus-technology_23-2150062907.jpg", imageAlt: "FLAXR CORE TKL keyboard"
},
{
id: "catalog-2", name: "FLAXR GHOST 75", price: "$349", imageSrc: "http://img.b2bpic.net/free-photo/hand-holding-key-top-view_23-2149680277.jpg", imageAlt: "FLAXR GHOST 75 translucent keyboard"
},
{
id: "catalog-3", name: "FLAXR PULSE", price: "$199", imageSrc: "http://img.b2bpic.net/free-photo/light-streak-lines-background_23-2148133137.jpg", imageAlt: "FLAXR PULSE keyboard with RGB lighting"
},
{
id: "catalog-4", name: "FLAXR CONNECT Cable", price: "$49", imageSrc: "http://img.b2bpic.net/free-photo/white-keyboard-with-lights-high-angle_23-2149680240.jpg", imageAlt: "FLAXR premium coiled cable"
},
{
id: "catalog-5", name: "FLAXR ONE 60 Pro", price: "$329", imageSrc: "http://img.b2bpic.net/free-photo/man-using-gaming-keyboard-fly-spaceship-sf-videogame-close-up_482257-121693.jpg", imageAlt: "Gamer's hands on FLAXR ONE 60 Pro keyboard"
},
{
id: "catalog-6", name: "FLAXR ONE 60 Compact", price: "$279", imageSrc: "http://img.b2bpic.net/free-photo/workspace-with-office-supplies_140725-23274.jpg", imageAlt: "Overhead view of FLAXR ONE 60 Compact keyboard"
},
]}
title="Explore Our Masterpieces"
description="Discover the full range of FLAXR keyboards and essential accessories, each designed to elevate your setup and performance."
tag="Our Collection"
/>
</div>
<div id="configure-keyboard" data-section="configure-keyboard">
<PricingCardThree
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
id: "standard",
badge: "Entry",
badgeIcon: Sparkles,
price: "$249",
name: "FLAXR Standard",
buttons: [
{
text: "Configure",
href: "/shop#standard",
},
],
features: [
"Aluminum body",
"Hot-swappable (3-pin)",
"Basic PBT keycaps",
"USB-C connectivity",
"Standard backlight",
],
},
{
id: "pro",
badge: "Pro Choice",
badgeIcon: Star,
price: "$329",
name: "FLAXR Pro",
buttons: [
{
text: "Configure",
href: "/shop#pro",
},
],
features: [
"Premium aluminum body",
"Hot-swappable (5-pin)",
"Double-shot PBT keycaps",
"USB-C & Bluetooth 5.0",
"Advanced RGB backlight",
"Custom switch lubing",
],
},
{
id: "elite",
badge: "Elite Tier",
badgeIcon: Crown,
price: "$499",
name: "FLAXR Elite",
buttons: [
{
text: "Configure",
href: "/shop#elite",
},
],
features: [
"CNC Machined aluminum",
"Hot-swappable (5-pin)",
"Artisan PBT keycaps",
"Wireless 2.4Ghz, USB-C, BT 5.0",
"Per-key RGB, sound dampening",
"Exclusive switch options",
"Premium travel case",
],
},
]}
title="Configure Your Ultimate Keyboard"
description="Tailor your FLAXR experience with various models and customization options. Find the perfect balance of performance and aesthetics for your setup."
tag="Customization"
/>
</div>
<div id="configure-keyboard" data-section="configure-keyboard">
<PricingCardThree
textboxLayout="default"
useInvertedBackground={true}
plans={[
{
id: "standard", badge: "Entry", badgeIcon: Sparkles,
price: "$249", name: "FLAXR Standard", buttons: [
{
text: "Configure", href: "/shop#standard"
},
],
features: ["Aluminum body", "Hot-swappable (3-pin)", "Basic PBT keycaps", "USB-C connectivity", "Standard backlight"],
},
{
id: "pro", badge: "Pro Choice", badgeIcon: Star,
price: "$329", name: "FLAXR Pro", buttons: [
{
text: "Configure", href: "/shop#pro"
},
],
features: ["Premium aluminum body", "Hot-swappable (5-pin)", "Double-shot PBT keycaps", "USB-C & Bluetooth 5.0", "Advanced RGB backlight", "Custom switch lubing"],
},
{
id: "elite", badge: "Elite Tier", badgeIcon: Crown,
price: "$499", name: "FLAXR Elite", buttons: [
{
text: "Configure", href: "/shop#elite"
},
],
features: ["CNC Machined aluminum", "Hot-swappable (5-pin)", "Artisan PBT keycaps", "Wireless 2.4Ghz, USB-C, BT 5.0", "Per-key RGB, sound dampening", "Exclusive switch options", "Premium travel case"],
},
]}
title="Configure Your Ultimate Keyboard"
description="Tailor your FLAXR experience with various models and customization options. Find the perfect balance of performance and aesthetics for your setup."
tag="Customization"
animationType="slide-up"
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Products",
items: [
{
label: "FLAXR ONE 60",
href: "/products#one-60",
},
{
label: "Accessories",
href: "/products#accessories",
},
{
label: "Shop All",
href: "/shop",
},
],
},
{
title: "Company",
items: [
{
label: "About Us",
href: "/about",
},
{
label: "Blog",
href: "/blog",
},
{
label: "Careers",
href: "#",
},
],
},
{
title: "Support",
items: [
{
label: "Contact Us",
href: "/contact",
},
{
label: "FAQ",
href: "/faq",
},
{
label: "Warranty",
href: "#",
},
],
},
{
title: "Legal",
items: [
{
label: "Privacy Policy",
href: "#",
},
{
label: "Terms of Service",
href: "#",
},
],
},
]}
logoText="FLAXR"
copyrightText="© 2024 FLAXR. All rights reserved."
/>
</div>
<div id="footer" data-section="footer">
<FooterBase
columns={[
{
title: "Products", items: [
{
label: "FLAXR ONE 60", href: "/products#one-60"
},
{
label: "Accessories", href: "/products#accessories"
},
{
label: "Shop All", href: "/shop"
},
],
},
{
title: "Company", items: [
{
label: "About Us", href: "/about"
},
{
label: "Blog", href: "/blog"
},
{
label: "Careers", href: "#"
},
],
},
{
title: "Support", items: [
{
label: "Contact Us", href: "/contact"
},
{
label: "FAQ", href: "/faq"
},
{
label: "Warranty", href: "#"
},
],
},
{
title: "Legal", items: [
{
label: "Privacy Policy", href: "#"
},
{
label: "Terms of Service", href: "#"
},
],
},
]}
logoText="FLAXR"
copyrightText="© 2024 FLAXR. All rights reserved."
/>
</div>
</ReactLenis>
</ThemeProvider>
);