bender/b30ca76b-ec5d-45f9-a287-738da1b7ad92
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Merge version_2 into main

Browse Source 
Merge version_2 into main
This commit was merged in pull request #1.
This commit is contained in:
bender
2026-05-23 23:29:54 +00:00
parent 70d30e2406 6ff8b058fd
commit a032016db9
3 changed files with 74 additions and 243 deletions
Download Patch File Download Diff File Expand all files Collapse all files

301
src/app/page.tsx
View File

@@ -2,15 +2,15 @@
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
import ReactLenis from "lenis/react";
import ContactCenter from '@/components/sections/contact/ContactCenter';
import FeatureCardTwentyOne from '@/components/sections/feature/FeatureCardTwentyOne';
import FooterLogoReveal from '@/components/sections/footer/FooterLogoReveal';
import ContactSplitForm from '@/components/sections/contact/ContactSplitForm';
import FeatureCardTwentySeven from '@/components/sections/feature/FeatureCardTwentySeven';
import FooterSimple from '@/components/sections/footer/FooterSimple';
import HeroCentered from '@/components/sections/hero/HeroCentered';
import NavbarLayoutFloatingInline from '@/components/navbar/NavbarLayoutFloatingInline';
import PricingCardEight from '@/components/sections/pricing/PricingCardEight';
import NavbarLayoutFloatingOverlay from '@/components/navbar/NavbarLayoutFloatingOverlay/NavbarLayoutFloatingOverlay';
import PricingCardThree from '@/components/sections/pricing/PricingCardThree';
import SocialProofOne from '@/components/sections/socialProof/SocialProofOne';
import TestimonialCardFifteen from '@/components/sections/testimonial/TestimonialCardFifteen';
import TextAbout from '@/components/sections/about/TextAbout';
import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCardOne';
import InlineImageSplitTextAbout from '@/components/sections/about/InlineImageSplitTextAbout';
export default function LandingPage() {
return (
@@ -28,161 +28,67 @@ export default function LandingPage() {
>
<ReactLenis root>
<div id="nav" data-section="nav">
<NavbarLayoutFloatingInline
<NavbarLayoutFloatingOverlay
navItems={[
{
name: "Features",
id: "features",
},
{
name: "Pricing",
id: "pricing",
},
{
name: "Integration",
id: "integrations",
},
{
name: "About",
id: "about",
},
{ name: "Features", id: "features" },
{ name: "Pricing", id: "pricing" },
{ name: "Integration", id: "integrations" },
{ name: "About", id: "about" },
]}
brandName="Name"
button={{
text: "Get Started",
href: "/auth",
}}
button={{ text: "Get Started", href: "/auth" }}
/>
</div>
<div id="hero" data-section="hero">
<HeroCentered
background={{
variant: "sparkles-gradient",
}}
background={{ variant: "sparkles-gradient" }}
title="Build Smarter Forms in Seconds"
description="The ultimate platform for hosted and headless forms. Powered by AI, built for scale, loved by developers and teams alike."
avatars={[
{
src: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg",
alt: "User 1",
},
{
src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg",
alt: "User 2",
},
{
src: "http://img.b2bpic.net/free-photo/handsome-man-standing-street-holding-laptop_1303-31617.jpg",
alt: "User 3",
},
{
src: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-12487.jpg",
alt: "User 4",
},
{
src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg",
alt: "User 5",
},
]}
buttons={[
{
text: "Start Free Trial",
href: "/signup",
},
{
text: "View Docs",
href: "/docs",
},
]}
marqueeItems={[
{
type: "text",
text: "High Performance",
},
{
type: "text",
text: "Headless API Ready",
},
{
type: "text",
text: "AI Form Builder",
},
{
type: "text",
text: "Developer Friendly",
},
{
type: "text",
text: "Unlimited Scale",
},
{ src: "http://img.b2bpic.net/free-photo/positive-confident-businessman-posing-outside_74855-1183.jpg", alt: "User 1" },
{ src: "http://img.b2bpic.net/free-photo/closeup-smiling-beautiful-adult-businesswoman_1262-1760.jpg", alt: "User 2" },
{ src: "http://img.b2bpic.net/free-photo/handsome-man-standing-street-holding-laptop_1303-31617.jpg", alt: "User 3" },
{ src: "http://img.b2bpic.net/free-photo/stylish-bearded-hipster-male-dressed-suit-sunglasses-dark-grey-background_613910-12487.jpg", alt: "User 4" },
{ src: "http://img.b2bpic.net/free-photo/close-up-portrait-young-handsome-successful-man_1163-5475.jpg", alt: "User 5" },
]}
buttons={[{ text: "Start Free Trial", href: "/signup" }, { text: "View Docs", href: "/docs" }]}
/>
</div>
<div id="about" data-section="about">
<TextAbout
<InlineImageSplitTextAbout
heading={[{ type: "text", content: "A Platform Built for Modern Requirements" }]}
buttons={[{ text: "Learn More", href: "/about" }]}
useInvertedBackground={false}
title="A Platform Built for Modern Requirements"
buttons={[
{
text: "Learn More",
href: "/about",
},
]}
/>
</div>
<div id="features" data-section="features">
<FeatureCardTwentyOne
useInvertedBackground={true}
<FeatureCardTwentySeven
animationType="blur-reveal"
title="Powerful Features at Every Level"
description="From simple contact forms to complex multi-step workflows, our platform scales with your business needs."
accordionItems={[
{
id: "1",
title: "Drag-and-Drop Builder",
content: "Visually design beautiful forms without writing a single line of code.",
},
{
id: "2",
title: "Headless API Integration",
content: "Seamless backend endpoints for your custom frontends.",
},
{
id: "3",
title: "AI Form Generator",
content: "Describe your needs and let AI create the perfect form for you.",
},
textboxLayout="split"
features={[
{ id: "1", title: "Drag-and-Drop Builder", descriptions: ["Visually design beautiful forms."], imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-cyber-particles-design_1048-13025.jpg" },
{ id: "2", title: "Headless API", descriptions: ["Seamless backend endpoints."], imageSrc: "http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-cyber-particles-design_1048-13025.jpg" }
]}
imageSrc="http://img.b2bpic.net/free-photo/3d-render-abstract-background-with-digital-cyber-particles-design_1048-13025.jpg"
mediaAnimation="slide-up"
useInvertedBackground={true}
/>
</div>
<div id="ai-assistant" data-section="ai-assistant">
<FeatureCardTwentyOne
useInvertedBackground={false}
<FeatureCardTwentySeven
animationType="blur-reveal"
title="Your AI-Powered Form Assistant"
description="Need help debugging an API call or optimizing your form fields? Our integrated AI assistant is available 24/7."
accordionItems={[
{
id: "ai-1",
title: "Field Suggestions",
content: "Get context-aware suggestions for your form inputs.",
},
{
id: "ai-2",
title: "Workflow Automation",
content: "Automate data processing without complex manual setups.",
},
{
id: "ai-3",
title: "Debugging Support",
content: "Get real-time insights and fixes for your API integrations.",
},
textboxLayout="split"
features={[
{ id: "ai-1", title: "Field Suggestions", descriptions: ["Context-aware suggestions."], imageSrc: "http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-man-typing-prompts-into-ai-powered-chat_482257-123072.jpg" },
{ id: "ai-2", title: "Workflow Automation", descriptions: ["Automate data processing."], imageSrc: "http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-man-typing-prompts-into-ai-powered-chat_482257-123072.jpg" }
]}
imageSrc="http://img.b2bpic.net/free-photo/bucharest-romania-july-30th-2024-man-typing-prompts-into-ai-powered-chat_482257-123072.jpg"
mediaAnimation="blur-reveal"
useInvertedBackground={false}
/>
</div>
@@ -190,136 +96,61 @@ export default function LandingPage() {
<SocialProofOne
textboxLayout="split"
useInvertedBackground={true}
names={[
"Slack",
"Zapier",
"HubSpot",
"Mailchimp",
"Notion",
"Discord",
"Google Sheets",
]}
names={["Slack", "Zapier", "HubSpot", "Mailchimp", "Notion", "Discord", "Google Sheets"]}
title="Integrates With Everything You Use"
description="Native integrations for webhooks, email providers, and marketing tools."
/>
</div>
<div id="testimonials" data-section="testimonials">
<TestimonialCardFifteen
<TestimonialCardOne
animationType="blur-reveal"
gridVariant="three-columns-all-equal-width"
title="Trusted by Teams"
description="Hear from our users."
textboxLayout="split"
useInvertedBackground={false}
testimonial="This platform transformed how we handle our lead collection. The API docs are world-class."
rating={5}
author="Sarah Miller, CTO at Techflow"
avatars={[
{
src: "http://img.b2bpic.net/free-photo/closeup-smiling-middle-aged-business-leader_1262-4845.jpg",
alt: "Sarah",
},
{
src: "http://img.b2bpic.net/free-photo/positive-middle-aged-business-leader-window_1262-5388.jpg",
alt: "Manager",
},
{
src: "http://img.b2bpic.net/free-photo/portrait-grey-haired-businessman-standing_74855-10324.jpg",
alt: "Lead",
},
{
src: "http://img.b2bpic.net/free-photo/closeup-confident-asian-man-with-arms-crossed_1262-884.jpg",
alt: "Engineer",
},
{
src: "http://img.b2bpic.net/free-photo/confident-young-businesswoman-with-folded-arms_1262-1775.jpg",
alt: "Designer",
},
testimonials={[
{ id: "1", name: "Sarah Miller", role: "CTO", company: "Techflow", rating: 5, imageSrc: "http://img.b2bpic.net/free-photo/closeup-smiling-middle-aged-business-leader_1262-4845.jpg" }
]}
ratingAnimation="slide-up"
avatarsAnimation="opacity"
/>
</div>
<div id="pricing" data-section="pricing">
<PricingCardEight
animationType="slide-up"
<PricingCardThree
animationType="blur-reveal"
textboxLayout="split"
useInvertedBackground={true}
plans={[
{
id: "free",
badge: "Free",
price: "$0",
subtitle: "Perfect for side projects.",
buttons: [
{
text: "Get Started",
},
],
features: [
"1 Form",
"100 Submissions",
"Basic Analytics",
],
},
{
id: "pro",
badge: "Pro",
price: "$29",
subtitle: "For professional teams.",
buttons: [
{
text: "Buy Pro",
},
],
features: [
"10 Forms",
"5000 Submissions",
"Full API Access",
],
},
{
id: "business",
badge: "Business",
price: "$99",
subtitle: "For scaling businesses.",
buttons: [
{
text: "Talk to Sales",
},
],
features: [
"Unlimited Forms",
"Enterprise Security",
"Priority Support",
],
},
]}
title="Simple Pricing for Every Scale"
description="Choose a plan that fits your business needs."
plans={[
{ id: "free", price: "$0", name: "Free", buttons: [{ text: "Get Started" }], features: ["1 Form", "100 Submissions"] },
{ id: "pro", price: "$29", name: "Pro", buttons: [{ text: "Buy Pro" }], features: ["10 Forms", "5000 Submissions"] },
{ id: "business", price: "$99", name: "Business", buttons: [{ text: "Talk to Sales" }], features: ["Unlimited Forms", "Enterprise Security"] }
]}
/>
</div>
<div id="contact" data-section="contact">
<ContactCenter
useInvertedBackground={false}
background={{
variant: "downward-rays-animated",
}}
tag="Get in touch"
<ContactSplitForm
title="Ready to get started?"
description="Join thousands of developers and product teams worldwide."
inputs={[
{ name: "email", type: "email", placeholder: "Enter your email", required: true },
{ name: "name", type: "text", placeholder: "Full Name", required: true }
]}
useInvertedBackground={false}
/>
</div>
<div id="footer" data-section="footer">
<FooterLogoReveal
logoText="Name Platform"
leftLink={{
text: "Privacy Policy",
href: "/privacy",
}}
rightLink={{
text: "Terms of Service",
href: "/terms",
}}
<FooterSimple
columns={[
{ title: "Product", items: [{ label: "Features" }, { label: "Pricing" }] },
{ title: "Company", items: [{ label: "About" }, { label: "Contact" }] }
]}
bottomLeftText="© 2024 Name Platform"
bottomRightText="All rights reserved."
/>
</div>
</ReactLenis>

2
src/app/styles/base.css
View File

@@ -24,5 +24,5 @@ h3,
h4,
h5,
h6 {
font-family: var(--font-montserrat), sans-serif;
font-family: var(--font-inter), sans-serif;
}

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #ffffff;
--card: #f9f9f9;
--foreground: #000612e6;
--primary-cta: #106EFB;
--background: #fbfbfb;
--card: #ffffff;
--foreground: #0a0a0a;
--primary-cta: #111827;
--primary-cta-text: #ffffff;
--secondary-cta: #f9f9f9;
--secondary-cta: #f3f4f6;
--secondary-cta-text: #000612e6;
--accent: #e2e2e2;
--background-accent: #106EFB;
--accent: #e5e7eb;
--background-accent: #f9fafb;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);