Merge version_2 into main #4
340
src/app/page.tsx
340
src/app/page.tsx
@@ -12,7 +12,7 @@ import MetricCardThree from '@/components/sections/metrics/MetricCardThree';
|
||||
import NavbarStyleApple from '@/components/navbar/NavbarStyleApple/NavbarStyleApple';
|
||||
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
|
||||
import TestimonialCardFive from '@/components/sections/testimonial/TestimonialCardFive';
|
||||
import { BarChart2, CheckCircle, Clock, TrendingUp, Users, Zap } from "lucide-react";
|
||||
import { CheckCircle, Clock, TrendingUp, BrainCircuit, Bot, Sparkles, Cpu } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -29,241 +29,127 @@ export default function LandingPage() {
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<ReactLenis root>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{
|
||||
name: "Features", id: "features"},
|
||||
{
|
||||
name: "Pricing", id: "pricing"},
|
||||
{
|
||||
name: "Support", id: "faq"},
|
||||
]}
|
||||
brandName="Karmel POS"
|
||||
/>
|
||||
</div>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleApple
|
||||
navItems={[
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Support", id: "faq" },
|
||||
]}
|
||||
brandName="Karmel POS"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
useInvertedBackground={false}
|
||||
background={{
|
||||
variant: "sparkles-gradient"}}
|
||||
title="Revolutionize Your Retail with Karmel POS"
|
||||
description="The ultimate Point of Sale solution built for speed, reliability, and growth. Streamline your operations and delight your customers with every transaction."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex Rivers", handle: "@riverscafe", testimonial: "Karmel POS changed our daily operations entirely.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-customer-reviewing-clothes_482257-84194.jpg", imageAlt: "pos dashboard screen on tablet"},
|
||||
{
|
||||
name: "Jamie Lee", handle: "@lee.retail", testimonial: "Incredible software for multi-location inventory.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-hand-holding-device_23-2148896952.jpg", imageAlt: "pos dashboard screen on tablet"},
|
||||
{
|
||||
name: "Sam Thorne", handle: "@thorneboutique", testimonial: "Easy to set up and even easier to use.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coworkers-examining-reports-papers-looking-statistics-annual-data-analytics-increase-profit-workers-group-planning-research-strategy-with-documents-business-development_482257-64771.jpg", imageAlt: "pos dashboard screen on tablet"},
|
||||
{
|
||||
name: "Morgan West", handle: "@west.kitchen", testimonial: "The best POS system we have implemented so far.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/office-worker-looks-greenscreen_482257-76595.jpg", imageAlt: "pos dashboard screen on tablet"},
|
||||
{
|
||||
name: "Jordan P.", handle: "@jp_goods", testimonial: "Transformed our shop workflow overnight.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-customer-paying-with-nfc-device_23-2150690028.jpg", imageAlt: "pos dashboard screen on tablet"},
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/female-customer-reviewing-clothes_482257-84194.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
avatars={[
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/african-american-man-looks-clothes-online-touch-screen-monitor-fashion-boutique-mall-self-service-board-male-customer-looking-trendy-clothes-items-retail-kiosk-display_482257-63314.jpg", alt: "User avatar 1"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/shopper-using-online-store-mobile-app-phone-examining-modern-fashion-items-collection-buying-merchandise-boutique-client-looking-clothing-line-retail-shop-website_482257-67405.jpg", alt: "User avatar 2"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/black-girl-mask-buy-food_1157-37849.jpg", alt: "User avatar 3"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-person-doing-online-shopping_23-2149159968.jpg", alt: "User avatar 4"},
|
||||
{
|
||||
src: "http://img.b2bpic.net/free-photo/close-up-view-measuring-weight-fruit-supermarket_342744-1102.jpg", alt: "User avatar 5"},
|
||||
]}
|
||||
marqueeItems={[
|
||||
{
|
||||
type: "text", text: "Cloud-Native"},
|
||||
{
|
||||
type: "text", text: "99.9% Uptime"},
|
||||
{
|
||||
type: "text", text: "Multi-Location"},
|
||||
{
|
||||
type: "text", text: "Integrated CRM"},
|
||||
{
|
||||
type: "text", text: "Real-time Data"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroSplitTestimonial
|
||||
background={{ variant: "sparkles-gradient" }}
|
||||
title="Revolutionize Your Retail with Karmel POS"
|
||||
description="The ultimate Point of Sale solution built for speed, reliability, and growth. Streamline your operations and delight your customers with every transaction."
|
||||
testimonials={[
|
||||
{
|
||||
name: "Alex Rivers", handle: "@riverscafe", testimonial: "Karmel POS changed our daily operations entirely.", rating: 5,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/female-customer-reviewing-clothes_482257-84194.jpg", imageAlt: "pos dashboard screen on tablet"
|
||||
}
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Built for Modern Retailers"
|
||||
description="We understand the pulse of your business. Karmel POS is designed to reduce friction, eliminate human error, and provide real-time insights into your sales performance."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-hand-holding-device_23-2148896952.jpg"
|
||||
/>
|
||||
</div>
|
||||
<div id="about" data-section="about">
|
||||
<MediaAbout
|
||||
useInvertedBackground={true}
|
||||
title="Built for Modern Retailers"
|
||||
description="We understand the pulse of your business. Karmel POS is designed to reduce friction, eliminate human error, and provide real-time insights into your sales performance."
|
||||
imageSrc="http://img.b2bpic.net/free-photo/close-up-hand-holding-device_23-2148896952.jpg"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={[
|
||||
"RetailGlobal", "CityCafe", "TechStyle", "BoutiqueHub", "MarketFlow", "UrbanGrocer", "DailyDine"]}
|
||||
title="Trusted by Growing Businesses"
|
||||
description="We are proud to partner with industry leaders in retail."
|
||||
/>
|
||||
</div>
|
||||
<div id="socialProof" data-section="socialProof">
|
||||
<SocialProofOne
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
names={["RetailGlobal", "CityCafe", "TechStyle", "BoutiqueHub", "MarketFlow", "UrbanGrocer", "DailyDine"]}
|
||||
title="Trusted by Growing Businesses"
|
||||
description="We are proud to partner with industry leaders in retail."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{
|
||||
title: "Advanced Analytics", description: "Track performance in real-time with comprehensive reports.", icon: BarChart2,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/coworkers-examining-reports-papers-looking-statistics-annual-data-analytics-increase-profit-workers-group-planning-research-strategy-with-documents-business-development_482257-64771.jpg"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-digital-tablet-with-bar-graphs_1098-486.jpg"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Customer Management", description: "Build loyalty with powerful integrated CRM tools.", icon: Users,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/office-worker-looks-greenscreen_482257-76595.jpg"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041850.jpg"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Fast Processing", description: "High-performance payment gateway built for speed.", icon: Zap,
|
||||
mediaItems: [
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/side-view-customer-paying-with-nfc-device_23-2150690028.jpg"},
|
||||
{
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-lock-with-credit-card-top-laptop_23-2148578119.jpg"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
title="Powerful Features at Your Fingertips"
|
||||
description="Every tool you need to run, scale, and analyze your business operations in one intuitive platform."
|
||||
/>
|
||||
</div>
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardTwentyFive
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={true}
|
||||
features={[
|
||||
{ title: "Smart AI Forecasting", description: "Predict sales trends with our advanced AI model.", icon: BrainCircuit, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/office-worker-looks-greenscreen_482257-76595.jpg?_wi=1" }, { imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041850.jpg?_wi=1" }] },
|
||||
{ title: "Automated Inventory", description: "Intelligent stock replenishment handled by AI.", icon: Bot, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/office-worker-looks-greenscreen_482257-76595.jpg?_wi=2" }, { imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041850.jpg?_wi=2" }] },
|
||||
{ title: "Personalized Marketing", description: "AI-driven insights for targeted campaigns.", icon: Sparkles, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/office-worker-looks-greenscreen_482257-76595.jpg?_wi=3" }, { imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041850.jpg?_wi=3" }] },
|
||||
{ title: "Intelligent Fraud Prevention", description: "Secure transactions monitored by AI agents.", icon: Cpu, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/office-worker-looks-greenscreen_482257-76595.jpg?_wi=4" }, { imageSrc: "http://img.b2bpic.net/free-photo/standard-quality-control-concept-m_23-2150041850.jpg?_wi=4" }] },
|
||||
]}
|
||||
title="Powerful Features at Your Fingertips"
|
||||
description="Every tool you need to run, scale, and analyze your business operations in one intuitive platform."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{
|
||||
id: "m1", icon: CheckCircle,
|
||||
title: "Happy Users", value: "10,000+"},
|
||||
{
|
||||
id: "m2", icon: Clock,
|
||||
title: "Uptime", value: "99.9%"},
|
||||
{
|
||||
id: "m3", icon: TrendingUp,
|
||||
title: "Sales Growth", value: "45%"},
|
||||
]}
|
||||
title="Performance You Can Trust"
|
||||
description="Our platform is proven to drive efficiency across thousands of daily transactions."
|
||||
/>
|
||||
</div>
|
||||
<div id="metrics" data-section="metrics">
|
||||
<MetricCardThree
|
||||
animationType="slide-up"
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
metrics={[
|
||||
{ id: "m1", icon: CheckCircle, title: "Happy Users", value: "10,000+" },
|
||||
{ id: "m2", icon: Clock, title: "Uptime", value: "99.9%" },
|
||||
{ id: "m3", icon: TrendingUp, title: "Sales Growth", value: "45%" },
|
||||
]}
|
||||
title="Performance You Can Trust"
|
||||
description="Our platform is proven to drive efficiency across thousands of daily transactions."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{
|
||||
id: "1", name: "Sarah Miller", date: "Oct 2023", title: "Owner", quote: "Seamless transition. Best upgrade we ever made.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/person-paying-using-nfc-technology_23-2149893774.jpg"},
|
||||
{
|
||||
id: "2", name: "David Park", date: "Sep 2023", title: "Manager", quote: "Rock solid platform for high traffic stores.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/two-men-using-digital-tablet-laptop-coffee-shop_1170-2034.jpg"},
|
||||
{
|
||||
id: "3", name: "Elena Ross", date: "Aug 2023", title: "Founder", quote: "Love the analytics dashboard, saves me hours.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-car-dealer-holding-clipboard_23-2148332935.jpg"},
|
||||
{
|
||||
id: "4", name: "Marcus Webb", date: "Jul 2023", title: "CEO", quote: "Perfectly scalable for our growing retail chain.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-happy-confident-young-businessman-with-arm-crossed-holding-mobile-phone-hand_23-2148096508.jpg"},
|
||||
{
|
||||
id: "5", name: "Sofia Conti", date: "Jun 2023", title: "Director", quote: "Customer support is top tier. Always helpful.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-cheerful-man-suit-cloakroom_171337-19180.jpg"},
|
||||
]}
|
||||
title="What Our Partners Say"
|
||||
description="Retailers everywhere are upgrading their business experience with Karmel POS."
|
||||
/>
|
||||
</div>
|
||||
<div id="testimonials" data-section="testimonials">
|
||||
<TestimonialCardFive
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
testimonials={[
|
||||
{ id: "1", name: "Sarah Miller", date: "Oct 2023", title: "Owner", quote: "Seamless transition. Best upgrade we ever made.", tag: "Verified", avatarSrc: "http://img.b2bpic.net/free-photo/person-paying-using-nfc-technology_23-2149893774.jpg" }
|
||||
]}
|
||||
title="What Our Partners Say"
|
||||
description="Retailers everywhere are upgrading their business experience with Karmel POS."
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1", title: "Is Karmel POS cloud-based?", content: "Yes, Karmel POS operates securely in the cloud, ensuring your data is always backed up and accessible."},
|
||||
{
|
||||
id: "q2", title: "Does it support offline mode?", content: "Absolutely. Karmel POS continues to function offline and syncs your data automatically once a connection is reestablished."},
|
||||
{
|
||||
id: "q3", title: "How long does setup take?", content: "Most retailers are up and running within 24 hours of onboarding."},
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We have answers. Check out our most popular inquiries."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
<div id="faq" data-section="faq">
|
||||
<FaqBase
|
||||
textboxLayout="split"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{ id: "q1", title: "Is Karmel POS cloud-based?", content: "Yes, Karmel POS operates securely in the cloud, ensuring your data is always backed up and accessible." },
|
||||
]}
|
||||
title="Frequently Asked Questions"
|
||||
description="Have questions? We have answers. Check out our most popular inquiries."
|
||||
faqsAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{
|
||||
variant: "plain"}}
|
||||
tag="Ready to Start?"
|
||||
title="Get Your Karmel POS Today"
|
||||
description="Join thousands of successful retailers and scale your business with the best point of sale technology."
|
||||
buttons={[
|
||||
{
|
||||
text: "Contact Sales", href: "#"},
|
||||
{
|
||||
text: "Start Free Trial", href: "#"},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCTA
|
||||
useInvertedBackground={true}
|
||||
background={{ variant: "plain" }}
|
||||
tag="Ready to Start?"
|
||||
title="Get Your Karmel POS Today"
|
||||
description="Join thousands of successful retailers and scale your business with the best point of sale technology."
|
||||
buttons={[{ text: "Contact Sales", href: "#" }]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Karmel POS"
|
||||
columns={[
|
||||
{
|
||||
title: "Product", items: [
|
||||
{
|
||||
label: "Features", href: "#features"},
|
||||
{
|
||||
label: "Pricing", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company", items: [
|
||||
{
|
||||
label: "About Us", href: "#"},
|
||||
{
|
||||
label: "Contact", href: "#"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Legal", items: [
|
||||
{
|
||||
label: "Privacy Policy", href: "#"},
|
||||
{
|
||||
label: "Terms of Service", href: "#"},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
logoText="Karmel POS"
|
||||
columns={[
|
||||
{ title: "Product", items: [{ label: "Features", href: "#features" }] },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
</ReactLenis>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -13,12 +13,12 @@
|
||||
--background: #ffffff;
|
||||
--card: #f9f9f9;
|
||||
--foreground: #000612e6;
|
||||
--primary-cta: #106EFB;
|
||||
--primary-cta: #901bf7;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #f9f9f9;
|
||||
--secondary-cta-text: #000612e6;
|
||||
--accent: #e2e2e2;
|
||||
--background-accent: #106EFB;
|
||||
--accent: #901bf7;
|
||||
--background-accent: #f3e8ff;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user