bender/859c4e96-32be-4a35-ab93-f47dd94d9d3a
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_1 into main #2

Merged
bender merged 1 commits from version_1 into main 2026-04-17 15:09:38 +00:00
Conversation 0 Commits 1 Files Changed 1 +124 -365
1 changed files with 124 additions and 365 deletions
Download Patch File Download Diff File Expand all files Collapse all files

489
src/app/page.tsx
View File

@@ -28,379 +28,138 @@ export default function LandingPage() {
headingFontWeight="normal"
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{
name: "Features",
id: "#features",
},
{
name: "Gallery",
id: "#product",
},
{
name: "Testimonials",
id: "#testimonial",
},
{
name: "Support",
id: "#faq",
},
]}
brandName="CanvasSaaS"
/>
</div>
<div id="nav" data-section="nav">
<NavbarStyleApple
navItems={[
{ name: "Features", id: "features" },
{ name: "Gallery", id: "product" },
{ name: "Testimonials", id: "testimonial" },
{ name: "Support", id: "faq" }
]}
brandName="CanvasSaaS"
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{
variant: "plain",
}}
title="Design Without Limits"
description="Create professional-grade graphics, layouts, and digital art with our high-performance React-based design platform."
testimonials={[
{
name: "Sarah Chen",
handle: "@sarahdesign",
testimonial: "The performance is unmatched. It feels like native desktop software in the browser.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/graphic-designer-making-logo-notebook_23-2149142118.jpg",
},
{
name: "Marcus Thorne",
handle: "@mthorne",
testimonial: "Finally, a browser tool that handles complex layers without breaking a sweat.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-business-man-standing-outside_1262-3492.jpg",
},
{
name: "Elena Rossi",
handle: "@erossi",
testimonial: "The contextual toolbar saves me hours every single week. Pure brilliance.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-garland_23-2149004902.jpg",
},
{
name: "David Wu",
handle: "@davidw",
testimonial: "The layer management is so intuitive. It's exactly what I needed for my agency.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-3693.jpg",
},
{
name: "Jessica Lee",
handle: "@jlee",
testimonial: "Exporting to high-quality PDF has never been easier. My go-to design platform.",
rating: 5,
imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-bearded-male-wearing-stylish-sui_613910-12116.jpg",
},
]}
buttons={[
{
text: "Start Creating",
href: "#product",
},
]}
imageSrc="http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320710.jpg?_wi=1"
mediaAnimation="slide-up"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/young-fashion-designer-working-her-workshop-alone_23-2148877353.jpg",
alt: "Portrait of creative studio designer",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-with-eyeglasses_23-2148452693.jpg",
alt: "Portrait of ux designer",
},
{
src: "http://img.b2bpic.net/free-photo/handsome-confident-man_1098-18449.jpg",
alt: "Portrait of digital artist",
},
{
src: "http://img.b2bpic.net/free-photo/smiling-young-businessman-holding-takeaway-coffee-cup-hand_23-2148176167.jpg",
alt: "Portrait of startup founder",
},
{
src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5103.jpg",
alt: "Portrait of design lead",
},
]}
marqueeItems={[
{
type: "text",
text: "High Performance",
},
{
type: "text",
text: "Native Speed",
},
{
type: "text",
text: "Infinite Zoom",
},
{
type: "text",
text: "Secure Sync",
},
{
type: "text",
text: "Cloud Export",
},
]}
/>
</div>
<div id="hero" data-section="hero">
<HeroSplitTestimonial
background={{ variant: "plain" }}
title="Design Without Limits"
description="Create professional-grade graphics, layouts, and digital art with our high-performance React-based design platform."
testimonials={[
{ name: "Sarah Chen", handle: "@sarahdesign", testimonial: "The performance is unmatched. It feels like native desktop software in the browser.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/graphic-designer-making-logo-notebook_23-2149142118.jpg" },
{ name: "Marcus Thorne", handle: "@mthorne", testimonial: "Finally, a browser tool that handles complex layers without breaking a sweat.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-business-man-standing-outside_1262-3492.jpg" },
{ name: "Elena Rossi", handle: "@erossi", testimonial: "The contextual toolbar saves me hours every single week. Pure brilliance.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/medium-shot-man-with-garland_23-2149004902.jpg" },
{ name: "David Wu", handle: "@davidw", testimonial: "The layer management is so intuitive. It's exactly what I needed for my agency.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/attractive-blond-business-woman-white-shirt-eyeglasses-crossed-arms-grey-background_613910-3693.jpg" },
{ name: "Jessica Lee", handle: "@jlee", testimonial: "Exporting to high-quality PDF has never been easier. My go-to design platform.", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/close-up-portrait-handsome-bearded-male-wearing-stylish-sui_613910-12116.jpg" }
]}
buttons={[{ text: "Start Creating", href: "#product" }]}
imageSrc="http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320710.jpg"
mediaAnimation="slide-up"
avatars={[
{ src: "http://img.b2bpic.net/free-photo/young-fashion-designer-working-her-workshop-alone_23-2148877353.jpg", alt: "Portrait of creative studio designer" },
{ src: "http://img.b2bpic.net/free-photo/portrait-confident-young-woman-with-eyeglasses_23-2148452693.jpg", alt: "Portrait of ux designer" },
{ src: "http://img.b2bpic.net/free-photo/handsome-confident-man_1098-18449.jpg", alt: "Portrait of digital artist" },
{ src: "http://img.b2bpic.net/free-photo/smiling-young-businessman-holding-takeaway-coffee-cup-hand_23-2148176167.jpg", alt: "Portrait of startup founder" },
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-attractive-male-model-color-flash-light_158595-5103.jpg", alt: "Portrait of design lead" }
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={true}
features={[
{
title: "Drag-and-Drop",
description: "Seamlessly move elements from sidebar to canvas with our high-performance engine.",
icon: MousePointer,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-psd/3d-square-intersection-prohibition_84443-57114.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/sound-volume-up-front-side-white-background_187299-40214.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/still-life-graphic-design-studio_23-2151320710.jpg?_wi=2",
imageAlt: "drag and drop icon design",
},
{
title: "Layer Management",
description: "Powerful layering controls: reorder, group, lock, and manage complex elements easily.",
icon: Layers,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/business-analysis-report-folder-icon_53876-14638.jpg",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/close-up-computers-data-center-running-server-rigs-diagnostic-tests_482257-123527.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-vector/mobile-screen-templates-design_1057-551.jpg",
imageAlt: "drag and drop icon design",
},
{
title: "Smart Toolbars",
description: "Context-sensitive floating menus that adapt automatically to your selected element.",
icon: Settings,
mediaItems: [
{
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-designing-websites_23-2149930944.jpg?_wi=1",
},
{
imageSrc: "http://img.b2bpic.net/free-photo/career-skills-progress-graphic-icon-symbol_53876-124007.jpg",
},
],
imageSrc: "http://img.b2bpic.net/free-photo/blue-desk-accessories-pink-plate_23-2148748620.jpg?_wi=1",
imageAlt: "drag and drop icon design",
},
]}
title="Advanced Design Toolkit"
description="Built for creators, by creators. Everything you need to craft stunning visuals is right at your fingertips."
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyFive
animationType="depth-3d"
textboxLayout="split"
useInvertedBackground={true}
title="Advanced Design Toolkit"
description="Built for creators, by creators. Everything you need to craft stunning visuals is right at your fingertips."
features={[
{ title: "Drag-and-Drop", description: "Seamlessly move elements from sidebar to canvas with our high-performance engine.", icon: MousePointer, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-psd/3d-square-intersection-prohibition_84443-57114.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/sound-volume-up-front-side-white-background_187299-40214.jpg" }] },
{ title: "Layer Management", description: "Powerful layering controls: reorder, group, lock, and manage complex elements easily.", icon: Layers, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/business-analysis-report-folder-icon_53876-14638.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/close-up-computers-data-center-running-server-rigs-diagnostic-tests_482257-123527.jpg" }] },
{ title: "Smart Toolbars", description: "Context-sensitive floating menus that adapt automatically to your selected element.", icon: Settings, mediaItems: [{ imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-designing-websites_23-2149930944.jpg" }, { imageSrc: "http://img.b2bpic.net/free-photo/career-skills-progress-graphic-icon-symbol_53876-124007.jpg" }] }
]}
/>
</div>
<div id="product" data-section="product">
<ProductCardFour
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
products={[
{
id: "p1",
name: "Multi-Format Export",
price: "PDF/PNG/SVG",
variant: "Efficiency",
imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-designing-websites_23-2149930944.jpg?_wi=2",
},
{
id: "p2",
name: "Pro Photo Filters",
price: "Advance",
variant: "Filters",
imageSrc: "http://img.b2bpic.net/free-photo/blue-desk-accessories-pink-plate_23-2148748620.jpg?_wi=2",
},
{
id: "p3",
name: "Typography Library",
price: "Unlimited",
variant: "Fonts",
imageSrc: "http://img.b2bpic.net/free-photo/restaurant-menu-street_1101-101.jpg",
},
{
id: "p4",
name: "Precise Manipulation",
price: "Rotate/Crop",
variant: "Tools",
imageSrc: "http://img.b2bpic.net/free-photo/still-life-stacked-aesthetic-objects_23-2150185379.jpg",
},
{
id: "p5",
name: "Precision Picker",
price: "Color Palette",
variant: "Color",
imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-turned-digital-midi-controller_400718-29.jpg",
},
{
id: "p6",
name: "Canvas Workspace",
price: "Zoomable",
variant: "Performance",
imageSrc: "http://img.b2bpic.net/free-photo/long-yellow-cold-colors-exposure-neon-lights-texture_23-2148328025.jpg",
},
]}
title="Professional Features"
description="Everything in one place for high-performance creative workflows."
/>
</div>
<div id="product" data-section="product">
<ProductCardFour
textboxLayout="default"
gridVariant="four-items-2x2-equal-grid"
useInvertedBackground={false}
animationType="slide-up"
products={[
{ id: "p1", name: "Multi-Format Export", price: "PDF/PNG/SVG", variant: "Efficiency", imageSrc: "http://img.b2bpic.net/free-photo/high-angle-man-designing-websites_23-2149930944.jpg" },
{ id: "p2", name: "Pro Photo Filters", price: "Advance", variant: "Filters", imageSrc: "http://img.b2bpic.net/free-photo/blue-desk-accessories-pink-plate_23-2148748620.jpg" },
{ id: "p3", name: "Typography Library", price: "Unlimited", variant: "Fonts", imageSrc: "http://img.b2bpic.net/free-photo/restaurant-menu-street_1101-101.jpg" },
{ id: "p4", name: "Precise Manipulation", price: "Rotate/Crop", variant: "Tools", imageSrc: "http://img.b2bpic.net/free-photo/still-life-stacked-aesthetic-objects_23-2150185379.jpg" },
{ id: "p5", name: "Precision Picker", price: "Color Palette", variant: "Color", imageSrc: "http://img.b2bpic.net/free-photo/closeup-photo-turned-digital-midi-controller_400718-29.jpg" },
{ id: "p6", name: "Canvas Workspace", price: "Zoomable", variant: "Performance", imageSrc: "http://img.b2bpic.net/free-photo/long-yellow-cold-colors-exposure-neon-lights-texture_23-2148328025.jpg" }
]}
title="Professional Features"
description="Everything in one place for high-performance creative workflows."
/>
</div>
<div id="social" data-section="social">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={[
"DesignHub",
"Creatix",
"VividStudio",
"PixelForge",
"ArtisanLab",
"IconicWorks",
"ZenStudio",
]}
title="Trusted by Top Studios"
description="Design teams globally rely on our software to deliver top-tier visuals."
/>
</div>
<div id="social" data-section="social">
<SocialProofOne
textboxLayout="default"
useInvertedBackground={true}
names={["DesignHub", "Creatix", "VividStudio", "PixelForge", "ArtisanLab", "IconicWorks", "ZenStudio"]}
title="Trusted by Top Studios"
description="Design teams globally rely on our software to deliver top-tier visuals."
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{
id: "1",
title: "Is the canvas really zoomable?",
content: "Yes, we support buttery-smooth infinite zooming for maximum pixel-perfect precision.",
},
{
id: "2",
title: "Does it support custom fonts?",
content: "Absolutely. You can import any web font directly into your creative workspace.",
},
{
id: "3",
title: "How does it perform?",
content: "Built with WebGL-accelerated React components, ensuring high-frame-rate performance even with thousands of elements.",
},
]}
title="Design Platform FAQ"
description="Answers to common questions about performance and features."
faqsAnimation="blur-reveal"
/>
</div>
<div id="faq" data-section="faq">
<FaqBase
textboxLayout="split"
useInvertedBackground={false}
faqs={[
{ id: "1", title: "Is the canvas really zoomable?", content: "Yes, we support buttery-smooth infinite zooming for maximum pixel-perfect precision." },
{ id: "2", title: "Does it support custom fonts?", content: "Absolutely. You can import any web font directly into your creative workspace." },
{ id: "3", title: "How does it perform?", content: "Built with WebGL-accelerated React components, ensuring high-frame-rate performance even with thousands of elements." }
]}
title="Design Platform FAQ"
description="Answers to common questions about performance and features."
faqsAnimation="blur-reveal"
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{
id: "1",
name: "Sarah Chen",
date: "Jan 2025",
title: "CEO",
quote: "The speed and reliability change everything.",
tag: "Pro",
avatarSrc: "http://img.b2bpic.net/free-photo/woman-designer-with-musical-earphones-standing-office-holding-folder_1303-32105.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-glasses-is-posing-photographer-studio_613910-2638.jpg",
},
{
id: "2",
name: "Marcus Thorne",
date: "Feb 2025",
title: "CTO",
quote: "Incredible React performance in-browser.",
tag: "Expert",
avatarSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-15972.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-with-arms-folded-isolated-white_231208-13007.jpg",
},
{
id: "3",
name: "Elena Rossi",
date: "March 2025",
title: "Designer",
quote: "The context toolbar is pure gold.",
tag: "Creative",
avatarSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-blending-different-colors-his-painting_23-2148422201.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-listens-music-via-headphones-is-drawing-painting-with-oils_8353-10780.jpg",
},
{
id: "4",
name: "David Wu",
date: "April 2025",
title: "Lead",
quote: "My agency workflows just got a huge upgrade.",
tag: "Agency",
avatarSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-14657.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man_158595-231.jpg",
},
{
id: "5",
name: "Jessica Lee",
date: "May 2025",
title: "Lead",
quote: "Exporting to PDF is finally seamless.",
tag: "Pro",
avatarSrc: "http://img.b2bpic.net/free-photo/crazy-hippie-angry-expression_1194-3931.jpg",
imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman-studio_23-2148565552.jpg",
},
]}
title="Creator Testimonials"
description="Hear from the professionals who switched to our high-performance design platform."
/>
</div>
<div id="testimonial" data-section="testimonial">
<TestimonialCardFive
textboxLayout="default"
useInvertedBackground={true}
testimonials={[
{ id: "1", name: "Sarah Chen", date: "Jan 2025", title: "CEO", quote: "The speed and reliability change everything.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/woman-designer-with-musical-earphones-standing-office-holding-folder_1303-32105.jpg", imageSrc: "http://img.b2bpic.net/free-photo/young-attractive-man-glasses-is-posing-photographer-studio_613910-2638.jpg" },
{ id: "2", name: "Marcus Thorne", date: "Feb 2025", title: "CTO", quote: "Incredible React performance in-browser.", tag: "Expert", avatarSrc: "http://img.b2bpic.net/free-photo/portrait-bearded-black-man-wool-suit_613910-15972.jpg", imageSrc: "http://img.b2bpic.net/free-photo/smiling-businessman-standing-with-arms-folded-isolated-white_231208-13007.jpg" },
{ id: "3", name: "Elena Rossi", date: "March 2025", title: "Designer", quote: "The context toolbar is pure gold.", tag: "Creative", avatarSrc: "http://img.b2bpic.net/free-photo/front-view-smiley-man-blending-different-colors-his-painting_23-2148422201.jpg", imageSrc: "http://img.b2bpic.net/free-photo/beautiful-girl-listens-music-via-headphones-is-drawing-painting-with-oils_8353-10780.jpg" },
{ id: "4", name: "David Wu", date: "April 2025", title: "Lead", quote: "My agency workflows just got a huge upgrade.", tag: "Agency", avatarSrc: "http://img.b2bpic.net/free-photo/studio-portrait-blond-female-dressed-white-shirt-red-eyeglasses_613910-14657.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-handsome-young-man_158595-231.jpg" },
{ id: "5", name: "Jessica Lee", date: "May 2025", title: "Lead", quote: "Exporting to PDF is finally seamless.", tag: "Pro", avatarSrc: "http://img.b2bpic.net/free-photo/crazy-hippie-angry-expression_1194-3931.jpg", imageSrc: "http://img.b2bpic.net/free-photo/portrait-smiley-woman-studio_23-2148565552.jpg" }
]}
title="Creator Testimonials"
description="Hear from the professionals who switched to our high-performance design platform."
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{
variant: "radial-gradient",
}}
tag="Join Now"
title="Start Creating Today"
description="Sign up for early access to our high-performance design workspace."
imageSrc="http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99785.jpg"
mediaAnimation="opacity"
/>
</div>
<div id="contact" data-section="contact">
<ContactSplit
useInvertedBackground={false}
background={{ variant: "radial-gradient" }}
tag="Join Now"
title="Start Creating Today"
description="Sign up for early access to our high-performance design workspace."
imageSrc="http://img.b2bpic.net/free-photo/liquid-marbling-paint-texture-background-fluid-painting-abstract-texture-intensive-color-mix-wallpaper_1258-99785.jpg"
mediaAnimation="opacity"
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="CanvasSaaS"
copyrightText="© 2025 CanvasSaaS. All rights reserved."
socialLinks={[
{
icon: Twitter,
href: "#",
ariaLabel: "Twitter",
},
{
icon: Github,
href: "#",
ariaLabel: "Github",
},
]}
/>
</div>
<div id="footer" data-section="footer">
<FooterCard
logoText="CanvasSaaS"
copyrightText="© 2025 CanvasSaaS. All rights reserved."
socialLinks={[{ icon: Twitter, href: "#", ariaLabel: "Twitter" }, { icon: Github, href: "#", ariaLabel: "Github" }]}
/>
</div>
</ReactLenis>
</ThemeProvider>
);
}
}