Skip to content

Refine landing page single-screen messaging #148

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Che-Zhu merged 1 commit into from
Mar 12, 2026
Merged

Refine landing page single-screen messaging #148

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
39 changes: 19 additions & 20 deletions app/(landing)/_components/hero-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import { MdCheckCircle,MdDns, MdRocketLaunch } from 'react-icons/md';
import { MdCheckCircle, MdOpenInNew, MdRocketLaunch } from 'react-icons/md';

import { Button } from '@/components/ui/button';

Expand Down Expand Up @@ -31,25 +31,21 @@ export function HeroSection({
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary opacity-75" />
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary" />
</span>
v2.0 is now live
New in Fulling v2
</div>

{/* Main Heading */}
<h1 className="text-5xl lg:text-7xl font-[family-name:var(--font-heading)] font-bold text-foreground tracking-tight mb-6 leading-[1.1]">
Ship at the <br />
Describe the app. <br />
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary to-primary/60">
Speed of Thought
Fulling handles the rest.
</span>
</h1>

{/* Subtitle */}
<h2 className="text-xl font-[family-name:var(--font-heading)] font-medium text-muted-foreground mb-8">
Agentic Full-Stack Development Platform
</h2>

{/* Description */}
<p className="text-lg text-muted-foreground/80 leading-relaxed mb-10 max-w-lg">
Powered by Agents in isolated sandbox environments
<p className="text-xl font-[family-name:var(--font-heading)] font-medium text-muted-foreground leading-relaxed mb-10 max-w-xl">
Import an existing repo or start from scratch. Agents set up the workspace, runtime,
database, and deployment in the background.
</p>

{/* Error message */}
Expand Down Expand Up @@ -83,12 +79,12 @@ export function HeroSection({
asChild
>
<a
href="https://github.com/FullAgent/fulling#self-hosting"
href="https://github.com/FullAgent/fulling"
target="_blank"
rel="noopener"
>
<MdDns className="text-[20px] -ml-1" />
<span>Self-host</span>
<MdOpenInNew className="text-[20px] -ml-1" />
<span>See on GitHub</span>
</a>
</Button>
</div>
Expand All @@ -102,15 +98,18 @@ export function HeroSection({

// Static JSX hoisted outside component to avoid recreation on every render
const FEATURES_JSX = (
<div className="mt-12 flex items-center gap-4 text-sm text-muted-foreground opacity-60">
<div className="flex items-center gap-1">
<div className="mt-12 grid gap-3 text-sm text-muted-foreground max-w-xl">
<div className="flex items-center gap-2">
<MdCheckCircle className="text-[16px]" />
<span>Start from a prompt or import from GitHub</span>
</div>
<div className="flex items-center gap-2">
<MdCheckCircle className="text-[16px]" />
<span>No config required</span>
<span>Add PostgreSQL only when you need it</span>
</div>
<div className="w-1 h-1 rounded-full bg-border" aria-hidden="true" />
<div className="flex items-center gap-1">
<div className="flex items-center gap-2">
<MdCheckCircle className="text-[16px]" />
<span>Production ready</span>
<span>Agents handle deploy, runtime, and infra automatically</span>
</div>
</div>
);
14 changes: 1 addition & 13 deletions app/(landing)/_components/landing-header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,18 +42,7 @@ export function LandingHeader({ isAuthenticated, isSealos, onSignIn, starCount,
</Link>

{/* Navigation */}
<nav className="flex items-center gap-6" aria-label="Main navigation">
<Link
href="https://github.com/FullAgent/fulling#readme"
target="_blank"
rel="noopener"
className="text-sm font-medium text-muted-foreground hover:text-foreground transition-colors"
>
Documentation
</Link>

<div className="h-4 w-px bg-border" aria-hidden="true" />

<nav className="flex items-center gap-5" aria-label="Main navigation">
{/* GitHub Star Count */}
<Link
href="https://github.com/FullAgent/fulling"
Expand Down Expand Up @@ -84,4 +73,3 @@ export function LandingHeader({ isAuthenticated, isSealos, onSignIn, starCount,
</header>
);
}

40 changes: 19 additions & 21 deletions app/(landing)/_components/terminal-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,49 +32,48 @@ export function TerminalDemo() {
</div>
<div className="text-foreground">
<span className="text-muted-foreground text-xs block mb-1">~/projects</span>
<span className="text-brand-claude font-bold">claude</span> &quot;Build a personal blog
with Next.js 16 and Payload CMS&quot;
<span className="text-brand-claude font-bold">fulling</span> &quot;Import this repo and add
a PostgreSQL database&quot;
</div>
</div>

{/* Progress Steps */}
<div className="pl-8 mb-6 relative border-l border-border/50 ml-2.5">
<div className="text-muted-foreground/60 text-xs ml-5 mb-4 space-y-1 font-mono">
<div className="flex items-center gap-2 text-foreground/40">
<span className="text-primary">→</span> Initializing project structure...
<span className="text-primary">→</span> Cloning repository into sandbox...
</div>
<div className="flex items-center gap-2 text-foreground/40">
<span className="text-primary">→</span> Creating payload.config.ts...
<span className="text-primary">→</span> Provisioning PostgreSQL cluster...
</div>
<div className="flex items-center gap-2 text-foreground/40">
<span className="text-primary">→</span> Setting up Next.js 16 App Router...
<span className="text-primary">→</span> Wiring runtime and deployment...
</div>
</div>
</div>

{/* File Tree */}
<div className="pl-8 mb-6">
<div className="bg-card rounded-md border border-border/50 p-4 text-[11px] font-mono leading-tight mb-4 shadow-inner">
<div className="text-muted-foreground/30 mb-2"># Generated file tree</div>
<div className="text-muted-foreground/30 mb-2"># Workspace updates</div>
<div className="grid grid-cols-2 gap-x-8 gap-y-1">
<FileEntry name="payload.config.ts" />
<FileEntry name="src/app/page.tsx" />
<FileEntry name="src/payload/blocks/*" />
<FileEntry name="src/components/Post.tsx" />
<FileEntry name="src/app/(payload)/admin" />
<FileEntry name="src/collections/Users.ts" />
<FileEntry name="repo cloned" />
<FileEntry name=".env linked" />
<FileEntry name="database created" />
<FileEntry name="service exposed" />
<FileEntry name="deploy started" />
<FileEntry name="logs streaming" />
</div>
<div className="mt-3 pt-3 border-t border-border/50 text-xs text-muted-foreground/50">
... and 14 other files created.
Reconciliation continues in the background.
</div>
</div>

{/* Check Items */}
<div className="space-y-1.5 mb-6">
<CheckItem text="Next.js 16 environment configured" />
<CheckItem text="Payload CMS admin panel ready" />
<CheckItem text="Database connection established (PostgreSQL)" />
<CheckItem text="Deployment pipeline triggered" />
<CheckItem text="Workspace ready" />
<CheckItem text="Database provisioned" />
<CheckItem text="Deployment live" />
</div>

{/* Success Card */}
Expand All @@ -83,10 +82,10 @@ export function TerminalDemo() {
<div className="mt-1.5 w-2 h-2 rounded-full bg-green-400 shadow-[0_0_12px_rgba(74,222,128,1)] animate-pulse" />
<div className="flex-1">
<div className="text-green-400 font-bold text-sm mb-1 drop-shadow-[0_0_8px_rgba(74,222,128,0.5)] tracking-wide">
Success! Your Blog is live
Success! Project is running
</div>
<span className="text-green-400 text-xs flex items-center gap-1 font-medium">
Live at your-blog-on.sealos.app
Live at repo-preview-on.sealos.app
<MdArrowOutward className="text-[14px]" />
</span>
</div>
Expand All @@ -100,7 +99,7 @@ export function TerminalDemo() {
<MdAutoAwesome className="text-brand-claude text-[18px]" />
</div>
<div className="text-foreground flex items-center">
<span className="mr-2">Add a dark mode toggle to the navbar</span>
<span className="mr-2">Now add an admin dashboard and seed the database</span>
<span className="w-2.5 h-5 bg-brand-claude cursor-blink" />
</div>
</div>
Expand All @@ -127,4 +126,3 @@ function CheckItem({ text }: { text: string }) {
</div>
);
}

Loading