bender/03ece6ef-45a4-4453-aa1a-4774da580750
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2_1781465336455 into main #4

Merged
bender merged 3 commits from version_2_1781465336455 into main 2026-06-14 19:31:54 +00:00
Conversation 0 Commits 3 Files Changed 4 +50 -1
4 changed files with 50 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/App.tsx
View File

@@ -2,11 +2,13 @@ import { Routes, Route } from 'react-router-dom';
import Layout from './components/Layout';
import HomePage from './pages/HomePage';
import LandingPage from "@/pages/LandingPage";
export default function App() {
return (
<Routes>
<Route element={<Layout />}>
<Route path="/" element={<HomePage />} />
<Route path="/landing" element={<LandingPage />} />
</Route>
</Routes>
);

4
src/components/Layout.tsx
View File

@@ -35,7 +35,9 @@ export default function Layout() {
{
"name": "Reviews",
"href": "#reviews"
}
},
{ name: "Landing", href: "/landing" },
];
return (

44
src/pages/LandingPage.tsx Normal file
View File

@@ -0,0 +1,44 @@
import Button from "@/components/ui/Button";
import HeroBackgroundSlot from "@/components/ui/HeroBackgroundSlot";
import TextAnimation from "@/components/ui/TextAnimation";
import ImageOrVideo from "@/components/ui/ImageOrVideo";
import ScrollReveal from "@/components/ui/ScrollReveal";
import AvatarGroup from "@/components/ui/AvatarGroup";
import { cls } from "@/lib/utils";
import { Check } from "lucide-react";
import GridOrCarousel from "@/components/ui/GridOrCarousel";
import ContactSplitForm from "@/components/sections/contact/ContactSplitForm";
export default function LandingPage() {
return (
<>
<div data-webild-section="HeroBillboard"><section aria-label="Hero section" className="relative"><HeroBackgroundSlot /><div className="flex flex-col w-content-width mx-auto"><div className="flex flex-col items-center gap-3 text-center"><AvatarGroup avatarsSrc={["https://img.freepik.com/free-photo/portrait-white-man-isolated_53876-40306.jpg","https://img.freepik.com/free-photo/portrait-young-businesswoman-holding-eyeglasses-hand-against-gray-backdrop_23-2148029483.jpg","https://img.freepik.com/free-photo/close-up-young-successful-man-smiling-camera-standing-casual-outfit-against-blue-background_1258-66609.jpg"]} label="Trusted by top sellers like Elena Tech and Urban Wear" className="mb-1" /><TextAnimation text="Scale Your Premium Marketplace Business" variant="fade-blur" gradientText={true} tag="h1" className="md:max-w-8/10 text-7xl 2xl:text-8xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Join the elite tier of MarketHub sellers. StackFlow gives you the tools to curate, manage, and grow your premium storefront effortlessly." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Start Selling" href="/signup" variant="primary" /><Button text="View Features" href="#features" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="slide-up" delay={0.2} className="w-full p-2 xl:p-3 2xl:p-4 card rounded overflow-hidden"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/online-shopping-concept-with-shopping-cart-laptop_23-2149072975.jpg" className="aspect-4/5 md:aspect-video" /></ScrollReveal></div></section></div>
<div data-webild-section="FeaturesBentoGrid"><section aria-label="Features section" className=""><div className="flex flex-col gap-8"><div className="flex flex-col items-center gap-2 w-content-width mx-auto"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Why StackFlow</p></div><TextAnimation text="Supercharge Your Marketplace Operations" variant="slide-up" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Automate inventory, sync multi-channel sales, and scale your MarketHub business with our premium toolset." variant="slide-up" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Start Free Trial" href="#pricing" variant="primary" /><Button text="View Demo" href="#demo" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur" className="w-content-width mx-auto"><div className="grid grid-cols-1 md:grid-cols-12 gap-5"><div key="Unified Dashboard" className="md:col-span-5 flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 card rounded"><div className="h-60 xl:h-72 2xl:h-80 rounded overflow-hidden bg-foreground/5 shadow shadow-foreground/5"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/business-people-analyzing-statistics-financial-concept_53876-163822.jpg" /></div><div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4"><h3 className="text-2xl font-semibold leading-snug text-balance">Unified Dashboard</h3><p className="text-base leading-snug text-balance">Manage all your MarketHub listings from a single, intuitive interface.</p></div></div>
<div key="Automated Sync" className="md:col-span-7 flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 card rounded"><div className="h-60 xl:h-72 2xl:h-80 rounded overflow-hidden bg-foreground/5 shadow shadow-foreground/5"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/server-room-background-concept_53876-108501.jpg" /></div><div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4"><h3 className="text-2xl font-semibold leading-snug text-balance">Automated Sync</h3><p className="text-base leading-snug text-balance">Keep your inventory and pricing updated in real-time across all channels.</p></div></div>
<div key="Advanced Analytics" className="md:col-span-7 flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 card rounded"><div className="h-60 xl:h-72 2xl:h-80 rounded overflow-hidden bg-foreground/5 shadow shadow-foreground/5"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/business-data-analysis-graphs_53876-133744.jpg" /></div><div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4"><h3 className="text-2xl font-semibold leading-snug text-balance">Advanced Analytics</h3><p className="text-base leading-snug text-balance">Gain deep insights into buyer behavior and optimize your sales strategy.</p></div></div>
<div key="Seamless Fulfillment" className="md:col-span-5 flex flex-col gap-3 xl:gap-3.5 2xl:gap-4 p-3 xl:p-3.5 2xl:p-4 card rounded"><div className="h-60 xl:h-72 2xl:h-80 rounded overflow-hidden bg-foreground/5 shadow shadow-foreground/5"><ImageOrVideo imageSrc="https://img.freepik.com/free-photo/warehouse-worker-checking-inventory_53876-146382.jpg" /></div><div className="flex flex-col gap-1 p-3 xl:p-3.5 2xl:p-4"><h3 className="text-2xl font-semibold leading-snug text-balance">Seamless Fulfillment</h3><p className="text-base leading-snug text-balance">Connect directly with top logistics providers for faster shipping.</p></div></div></div></ScrollReveal></div></section></div>
<div data-webild-section="PricingCenteredCards"><section aria-label="Pricing section" className=""><div className="flex flex-col gap-8"><div className="flex flex-col items-center w-content-width mx-auto gap-2"><div className="px-3 py-1 mb-1 text-sm card rounded w-fit"><p>Pricing</p></div><TextAnimation text="Simple, transparent pricing" variant="fade-blur" gradientText={true} tag="h2" className="md:max-w-8/10 text-6xl 2xl:text-7xl leading-[1.15] font-semibold text-center text-balance" /><TextAnimation text="Choose the perfect plan to scale your marketplace business with StackFlow." variant="fade-blur" gradientText={false} tag="p" className="md:max-w-7/10 text-lg md:text-xl leading-snug text-center text-balance" /><div className="flex flex-wrap justify-center gap-3 mt-2 md:mt-3"><Button text="Compare Plans" href="/pricing" variant="primary" /><Button text="Learn More" href="#learn-more" variant="secondary" animationDelay={0.1} /></div></div><ScrollReveal variant="fade-blur"><GridOrCarousel><div key="Starter" className="flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded text-center"><div className="px-3 py-1 text-sm card rounded w-fit"><p>Starter</p></div><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">$29/mo</span><span className="text-base font-medium">Essential tools for new sellers to launch their storefront.</span></div><div className="flex flex-col gap-3 w-full"><Button text="Start Free Trial" href="/signup" variant="primary" className="w-full" /></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3 w-full"><div key="Up to 100 listings" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Up to 100 listings</span></div>
<div key="Basic analytics" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Basic analytics</span></div>
<div key="Standard support" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Standard support</span></div>
<div key="Custom domain" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Custom domain</span></div></div></div>
<div key="Pro" className="flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded text-center"><div className="px-3 py-1 text-sm card rounded w-fit"><p>Pro</p></div><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">$79/mo</span><span className="text-base font-medium">Advanced features for growing marketplace businesses.</span></div><div className="flex flex-col gap-3 w-full"><Button text="Get Started" href="/signup" variant="primary" className="w-full" /></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3 w-full"><div key="Unlimited listings" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Unlimited listings</span></div>
<div key="Advanced analytics" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Advanced analytics</span></div>
<div key="Priority support" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Priority support</span></div>
<div key="API access" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">API access</span></div>
<div key="Custom branding" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Custom branding</span></div></div></div>
<div key="Scale" className="flex flex-col items-center gap-4 xl:gap-5 2xl:gap-6 p-6 xl:p-7 2xl:p-8 h-full card rounded text-center"><div className="px-3 py-1 text-sm card rounded w-fit"><p>Scale</p></div><div className="flex flex-col gap-1"><span className="text-5xl md:text-6xl font-semibold">$199/mo</span><span className="text-base font-medium">Ultimate performance for high-volume top sellers.</span></div><div className="flex flex-col gap-3 w-full"><Button text="Contact Sales" href="/contact" variant="primary" className="w-full" /></div><div className="w-full h-px bg-foreground/20" /><div className="flex flex-col gap-3 w-full"><div key="Dedicated manager" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Dedicated manager</span></div>
<div key="Custom integrations" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Custom integrations</span></div>
<div key="24/7 phone support" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">24/7 phone support</span></div>
<div key="Volume discounts" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">Volume discounts</span></div>
<div key="White-glove setup" className="flex items-start gap-3"><div className="flex items-center justify-center shrink-0 size-6 primary-button rounded"><Check className="size-3 text-primary-cta-text" strokeWidth={2} /></div><span className="text-base text-left">White-glove setup</span></div></div></div></GridOrCarousel></ScrollReveal></div></section></div>
<div data-webild-section="ContactSplitForm"><ContactSplitForm
tag="Contact Us"
title="Ready to elevate your sales?"description="Connect with our marketplace experts to discover how StackFlow can scale your premium brand on MarketHub."
inputs={[{"name":"name","type":"text","placeholder":"Full Name","required":true},{"name":"email","type":"email","placeholder":"Work Email","required":true},{"name":"company","type":"text","placeholder":"Company Name","required":false}]}
textarea={{"name":"message","placeholder":"Tell us about your marketplace goals...","rows":4,"required":true}}
buttonText="Contact Sales"
imageSrc="https://img.freepik.com/free-photo/focused-businesswoman-working-laptop-modern-office_1262-20740.jpg"
/></div>
</>
);
}

1
src/routes.ts
View File

@@ -6,4 +6,5 @@ export interface Route {
export const routes: Route[] = [
{ path: '/', label: 'Home', pageFile: 'HomePage' },
{ path: '/landing', label: 'Landing', pageFile: 'LandingPage' },
];