Merge version_1 into main #2
214
src/app/page.tsx
214
src/app/page.tsx
@@ -11,7 +11,7 @@ import MetricCardFourteen from '@/components/sections/metrics/MetricCardFourteen
|
||||
import NavbarStyleFullscreen from '@/components/navbar/NavbarStyleFullscreen/NavbarStyleFullscreen';
|
||||
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
|
||||
import TestimonialAboutCard from '@/components/sections/about/TestimonialAboutCard';
|
||||
import { Database, Instagram, Layout, Monitor, Sparkles, Star, Twitter } from "lucide-react";
|
||||
import { Database, Figma, Instagram, Layout, Monitor, Sparkles, Star, Twitter } from "lucide-react";
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -31,22 +31,10 @@ export default function LandingPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleFullscreen
|
||||
navItems={[
|
||||
{
|
||||
name: "Features",
|
||||
id: "#features",
|
||||
},
|
||||
{
|
||||
name: "AI Editor",
|
||||
id: "#ai-editor",
|
||||
},
|
||||
{
|
||||
name: "Pricing",
|
||||
id: "#pricing",
|
||||
},
|
||||
{
|
||||
name: "Contact",
|
||||
id: "#contact",
|
||||
},
|
||||
{ name: "Features", id: "features" },
|
||||
{ name: "AI Editor", id: "ai-editor" },
|
||||
{ name: "Pricing", id: "pricing" },
|
||||
{ name: "Contact", id: "contact" },
|
||||
]}
|
||||
brandName="mz.gen"
|
||||
/>
|
||||
@@ -55,21 +43,14 @@ export default function LandingPage() {
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogoBillboard
|
||||
background={{
|
||||
variant: "sparkles-gradient",
|
||||
}}
|
||||
variant: "sparkles-gradient"}}
|
||||
logoText="mz.gen"
|
||||
description="The AI-powered platform for creators, analysts, and developers. Build professional decks, websites, and documents in minutes with a card-based interface."
|
||||
buttons={[
|
||||
{
|
||||
text: "Get Started",
|
||||
href: "#pricing",
|
||||
},
|
||||
{
|
||||
text: "Learn More",
|
||||
href: "#features",
|
||||
},
|
||||
{ text: "Get Started", href: "#pricing" },
|
||||
{ text: "Learn More", href: "#features" },
|
||||
]}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cyber-security-experts-working-with-tech-devices-neon-lights_23-2151645631.jpg?_wi=1"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/cyber-security-experts-working-with-tech-devices-neon-lights_23-2151645631.jpg"
|
||||
imageAlt="mz.gen Dashboard AI"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
@@ -82,51 +63,20 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
features={[
|
||||
{
|
||||
title: "Multi-Model Generation",
|
||||
description: "Access Flux, DALL-E 3, Imagen, and more within one editor.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Sparkles,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-experts-working-with-tech-devices-neon-lights_23-2151645631.jpg?_wi=2",
|
||||
imageAlt: "saas dashboard interface tech",
|
||||
title: "Multi-Model Generation", description: "Access Flux, DALL-E 3, Imagen, and more within one editor.", bentoComponent: "reveal-icon", icon: Sparkles
|
||||
},
|
||||
{
|
||||
title: "Real-time Analytics",
|
||||
description: "Track view performance and audience engagement directly on your docs.",
|
||||
bentoComponent: "line-chart",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/devices-water-cooler-empty-office_482257-119279.jpg?_wi=1",
|
||||
imageAlt: "professional person using ai dashboard",
|
||||
title: "Real-time Analytics", description: "Track view performance and audience engagement directly on your docs.", bentoComponent: "line-chart"
|
||||
},
|
||||
{
|
||||
title: "Studio Mode",
|
||||
description: "Professional 4K visual output for any presentation style.",
|
||||
bentoComponent: "reveal-icon",
|
||||
icon: Monitor,
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-108757.jpg?_wi=1",
|
||||
imageAlt: "abstract blue gradient tech background",
|
||||
title: "Studio Mode", description: "Professional 4K visual output for any presentation style.", bentoComponent: "reveal-icon", icon: Monitor
|
||||
},
|
||||
{
|
||||
title: "Seamless Integrations",
|
||||
description: "Works with Figma, Airtable, Notion, and PowerBI.",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
{
|
||||
icon: Figma,
|
||||
label: "Design",
|
||||
value: "Figma",
|
||||
},
|
||||
{
|
||||
icon: Database,
|
||||
label: "Data",
|
||||
value: "Airtable",
|
||||
},
|
||||
{
|
||||
icon: Layout,
|
||||
label: "Docs",
|
||||
value: "Notion",
|
||||
},
|
||||
],
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/cyber-security-experts-working-with-tech-devices-neon-lights_23-2151645631.jpg?_wi=3",
|
||||
imageAlt: "saas dashboard interface tech",
|
||||
title: "Seamless Integrations", description: "Works with Figma, Airtable, Notion, and PowerBI.", bentoComponent: "icon-info-cards", items: [
|
||||
{ icon: Figma, label: "Design", value: "Figma" },
|
||||
{ icon: Database, label: "Data", value: "Airtable" },
|
||||
{ icon: Layout, label: "Docs", value: "Notion" },
|
||||
]
|
||||
},
|
||||
]}
|
||||
title="Unrivaled AI Capabilities"
|
||||
@@ -142,7 +92,7 @@ export default function LandingPage() {
|
||||
description="Meet your personal Gamma Agent. Analyze decks, re-stylize content, and find live data instantly without ever leaving your project."
|
||||
subdescription="With syntax highlighting for over 30 languages and slash-command support, it's built for power users and teams alike."
|
||||
icon={Star}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/devices-water-cooler-empty-office_482257-119279.jpg?_wi=2"
|
||||
imageSrc="http://img.b2bpic.net/free-photo/devices-water-cooler-empty-office_482257-119279.jpg"
|
||||
mediaAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
@@ -153,31 +103,11 @@ export default function LandingPage() {
|
||||
title="Platform Excellence"
|
||||
tag="Performance"
|
||||
metrics={[
|
||||
{
|
||||
id: "m1",
|
||||
value: "400+",
|
||||
description: "Free Credits for starters",
|
||||
},
|
||||
{
|
||||
id: "m2",
|
||||
value: "34",
|
||||
description: "Smart Chart Templates",
|
||||
},
|
||||
{
|
||||
id: "m3",
|
||||
value: "8k",
|
||||
description: "High-res Image Assets",
|
||||
},
|
||||
{
|
||||
id: "m4",
|
||||
value: "1-Click",
|
||||
description: "Background Removal",
|
||||
},
|
||||
{
|
||||
id: "m5",
|
||||
value: "99.9%",
|
||||
description: "Uptime Guarantee",
|
||||
},
|
||||
{ id: "m1", value: "400+", description: "Free Credits for starters" },
|
||||
{ id: "m2", value: "34", description: "Smart Chart Templates" },
|
||||
{ id: "m3", value: "8k", description: "High-res Image Assets" },
|
||||
{ id: "m4", value: "1-Click", description: "Background Removal" },
|
||||
{ id: "m5", value: "99.9%", description: "Uptime Guarantee" },
|
||||
]}
|
||||
metricsAnimation="slide-up"
|
||||
/>
|
||||
@@ -190,37 +120,12 @@ export default function LandingPage() {
|
||||
useInvertedBackground={false}
|
||||
plans={[
|
||||
{
|
||||
id: "free",
|
||||
badge: "Entry",
|
||||
price: "$0",
|
||||
subtitle: "Perfect for exploration",
|
||||
features: [
|
||||
"400 AI Credits",
|
||||
"20 Card Limit",
|
||||
"8k Image access",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Get Started",
|
||||
},
|
||||
],
|
||||
id: "free", badge: "Entry", price: "$0", subtitle: "Perfect for exploration", features: ["400 AI Credits", "20 Card Limit", "8k Image access"],
|
||||
buttons: [{ text: "Get Started" }]
|
||||
},
|
||||
{
|
||||
id: "ultra",
|
||||
badge: "Pro",
|
||||
price: "$29",
|
||||
subtitle: "For advanced creators",
|
||||
features: [
|
||||
"2000 AI Credits",
|
||||
"Studio Mode (4K)",
|
||||
"AI Animations",
|
||||
"No Watermark",
|
||||
],
|
||||
buttons: [
|
||||
{
|
||||
text: "Upgrade",
|
||||
},
|
||||
],
|
||||
id: "ultra", badge: "Pro", price: "$29", subtitle: "For advanced creators", features: ["2000 AI Credits", "Studio Mode (4K)", "AI Animations", "No Watermark"],
|
||||
buttons: [{ text: "Upgrade" }]
|
||||
},
|
||||
]}
|
||||
title="Simple Pricing"
|
||||
@@ -233,31 +138,11 @@ export default function LandingPage() {
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={false}
|
||||
faqs={[
|
||||
{
|
||||
id: "q1",
|
||||
title: "Does mz.gen replace PowerPoint?",
|
||||
content: "Yes, mz.gen is a modern card-based alternative offering faster workflows and AI integration.",
|
||||
},
|
||||
{
|
||||
id: "q2",
|
||||
title: "Can I export my presentations?",
|
||||
content: "You can export your work as PDF, PPTX (PowerPoint), and to Google Slides.",
|
||||
},
|
||||
{
|
||||
id: "q3",
|
||||
title: "Is complex animation supported?",
|
||||
content: "mz.gen focuses on fast, sleek content. It does not support complex keyframe animation, prioritizing efficiency instead.",
|
||||
},
|
||||
{
|
||||
id: "q4",
|
||||
title: "What integrations are available?",
|
||||
content: "We support Figma, Airtable, Notion, Amplitude, Make.com, and many more.",
|
||||
},
|
||||
{
|
||||
id: "q5",
|
||||
title: "Is there a team plan?",
|
||||
content: "Yes, we offer enterprise tiers for teams needing collaboration, shared workspaces, and custom SSO.",
|
||||
},
|
||||
{ id: "q1", title: "Does mz.gen replace PowerPoint?", content: "Yes, mz.gen is a modern card-based alternative offering faster workflows and AI integration." },
|
||||
{ id: "q2", title: "Can I export my presentations?", content: "You can export your work as PDF, PPTX (PowerPoint), and to Google Slides." },
|
||||
{ id: "q3", title: "Is complex animation supported?", content: "mz.gen focuses on fast, sleek content. It does not support complex keyframe animation, prioritizing efficiency instead." },
|
||||
{ id: "q4", title: "What integrations are available?", content: "We support Figma, Airtable, Notion, Amplitude, Make.com, and many more." },
|
||||
{ id: "q5", title: "Is there a team plan?", content: "Yes, we offer enterprise tiers for teams needing collaboration, shared workspaces, and custom SSO." },
|
||||
]}
|
||||
title="Questions?"
|
||||
description="Everything you need to know about mz.gen."
|
||||
@@ -271,26 +156,11 @@ export default function LandingPage() {
|
||||
title="Let's Build Something"
|
||||
description="Ready to transform how you work? Send us a message."
|
||||
inputs={[
|
||||
{
|
||||
name: "name",
|
||||
type: "text",
|
||||
placeholder: "Your Name",
|
||||
required: true,
|
||||
},
|
||||
{
|
||||
name: "email",
|
||||
type: "email",
|
||||
placeholder: "Your Email",
|
||||
required: true,
|
||||
},
|
||||
{ name: "name", type: "text", placeholder: "Your Name", required: true },
|
||||
{ name: "email", type: "email", placeholder: "Your Email", required: true },
|
||||
]}
|
||||
textarea={{
|
||||
name: "message",
|
||||
placeholder: "Tell us about your project...",
|
||||
rows: 4,
|
||||
required: true,
|
||||
}}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-108757.jpg?_wi=2"
|
||||
textarea={{ name: "message", placeholder: "Tell us about your project...", rows: 4, required: true }}
|
||||
imageSrc="http://img.b2bpic.net/free-photo/abstract-luxury-gradient-blue-background-smooth-dark-blue-with-black-vignette-studio-banner_1258-108757.jpg"
|
||||
mediaPosition="right"
|
||||
/>
|
||||
</div>
|
||||
@@ -300,16 +170,8 @@ export default function LandingPage() {
|
||||
logoText="mz.gen"
|
||||
copyrightText="© 2026 mz.gen | Built by AI"
|
||||
socialLinks={[
|
||||
{
|
||||
icon: Twitter,
|
||||
href: "#",
|
||||
ariaLabel: "Twitter",
|
||||
},
|
||||
{
|
||||
icon: Instagram,
|
||||
href: "#",
|
||||
ariaLabel: "Instagram",
|
||||
},
|
||||
{ icon: Twitter, href: "#", ariaLabel: "Twitter" },
|
||||
{ icon: Instagram, href: "#", ariaLabel: "Instagram" },
|
||||
]}
|
||||
/>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user