admin/mylder-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update landing page - focus on professional SaaS portal

Browse Source 
- Remove AI agent messaging and focus
- Change hero to "Your vision, professionally built"
- Add "How It Works" 3-step process section
- Update features to emphasize direct communication, real-time visibility, full-stack expertise
- Replace tiered pricing with project-based consultation model
- Update CTAs to "Describe Your Project" flow
- Replace Bot icon with Layers icon for cleaner branding

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
christiankrag
2025-12-12 14:11:00 +01:00
parent 065f8029be
commit a7f7423d7f
1 changed files with 118 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

238
src/app/page.tsx
View File

@@ -1,6 +1,6 @@
import Link from 'next/link'
import { Button } from '@/components/ui/button'
import { ArrowRight, Bot, Code, Zap, GitBranch, MessageSquare, Rocket } from 'lucide-react'
import { ArrowRight, Layers, MessageSquare, Zap, Clock, Shield, Users } from 'lucide-react'
export default function LandingPage() {
return (
@@ -10,7 +10,7 @@ export default function LandingPage() {
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div className="flex justify-between h-16 items-center">
<div className="flex items-center gap-2">
<Bot className="h-8 w-8 text-primary" />
<Layers className="h-8 w-8 text-primary" />
<span className="text-xl font-bold">Mylder</span>
</div>
<div className="flex items-center gap-4">
@@ -18,7 +18,7 @@ export default function LandingPage() {
<Button variant="ghost">Log in</Button>
</Link>
<Link href="/signup">
<Button>Get Started</Button>
<Button>Start a Project</Button>
</Link>
</div>
</div>
@@ -30,23 +30,23 @@ export default function LandingPage() {
<div className="max-w-4xl mx-auto text-center">
<div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-primary/10 text-primary text-sm font-medium mb-8">
<Zap className="h-4 w-4" />
AI-Powered Development Platform
Professional Software Development
</div>
<h1 className="text-4xl sm:text-6xl font-bold tracking-tight text-zinc-900 dark:text-white mb-6">
Build software with
<span className="text-primary"> AI agents</span>
Your vision,
<span className="text-primary"> professionally built</span>
</h1>
<p className="text-xl text-zinc-600 dark:text-zinc-400 mb-8 max-w-2xl mx-auto">
Chat with AI to plan, build, and ship your projects. From idea to production
with intelligent automation and real-time collaboration.
A lean, professional process to bring your software ideas to life.
Chat with us, get real-time updates, and launch with confidence.
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<Link href="/signup">
<Button size="lg" className="gap-2">
Start Building Free <ArrowRight className="h-4 w-4" />
Describe Your Project <ArrowRight className="h-4 w-4" />
</Button>
</Link>
<Link href="#features">
<Link href="#how-it-works">
<Button size="lg" variant="outline">
See How It Works
</Button>
@@ -55,94 +55,129 @@ export default function LandingPage() {
</div>
</section>
{/* Features Section */}
<section id="features" className="py-20 px-4 sm:px-6 lg:px-8 bg-zinc-50 dark:bg-zinc-900/50">
{/* How It Works */}
<section id="how-it-works" className="py-20 px-4 sm:px-6 lg:px-8 bg-zinc-50 dark:bg-zinc-900/50">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-3xl font-bold text-zinc-900 dark:text-white mb-4">
Everything you need to ship faster
A streamlined process from idea to launch
</h2>
<p className="text-lg text-zinc-600 dark:text-zinc-400">
Powerful AI agents that understand your codebase and help you build.
No complexity. No surprises. Just professional software development.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
<StepCard
step="1"
title="Describe Your Vision"
description="Tell us what you want to build. We'll discuss scope, features, and timeline through our chat portal."
/>
<StepCard
step="2"
title="Track Progress Live"
description="Watch your project come together with real-time updates. Ask questions, provide feedback anytime."
/>
<StepCard
step="3"
title="Launch with Confidence"
description="Get a production-ready application with full documentation and support to ensure a smooth launch."
/>
</div>
</div>
</section>
{/* Features Section */}
<section id="features" className="py-20 px-4 sm:px-6 lg:px-8">
<div className="max-w-6xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-3xl font-bold text-zinc-900 dark:text-white mb-4">
Why clients choose Mylder
</h2>
<p className="text-lg text-zinc-600 dark:text-zinc-400">
A modern approach to software development that puts you in control.
</p>
</div>
<div className="grid md:grid-cols-3 gap-8">
<FeatureCard
icon={<MessageSquare className="h-6 w-6" />}
title="Chat-First Development"
description="Describe what you want to build. Our AI understands context and generates production-ready code."
title="Direct Communication"
description="Chat directly through our portal. No middlemen, no delays. Get answers and updates when you need them."
/>
<FeatureCard
icon={<GitBranch className="h-6 w-6" />}
title="Git Integration"
description="Automatic commits, branches, and PRs. Your code stays organized and version controlled."
icon={<Clock className="h-6 w-6" />}
title="Real-Time Visibility"
description="See exactly where your project stands at any moment. Full transparency from start to finish."
/>
<FeatureCard
icon={<Code className="h-6 w-6" />}
title="Full-Stack Support"
description="From React to databases, APIs to deployments. Build complete applications with AI assistance."
/>
<FeatureCard
icon={<Bot className="h-6 w-6" />}
title="Intelligent Agents"
description="Specialized agents for planning, coding, testing, and deployment work together seamlessly."
icon={<Layers className="h-6 w-6" />}
title="Full-Stack Expertise"
description="Web apps, mobile apps, APIs, databases. Complete solutions tailored to your business needs."
/>
<FeatureCard
icon={<Zap className="h-6 w-6" />}
title="Real-Time Updates"
description="Watch your project evolve in real-time. See exactly what the AI is building as it happens."
title="Fast Turnaround"
description="Efficient processes and modern tools mean your project gets done faster without sacrificing quality."
/>
<FeatureCard
icon={<Rocket className="h-6 w-6" />}
title="One-Click Deploy"
description="Deploy to production with a single command. We handle the infrastructure complexity."
icon={<Shield className="h-6 w-6" />}
title="Quality Guaranteed"
description="Clean code, thorough testing, and proper documentation. Built to last and easy to maintain."
/>
<FeatureCard
icon={<Users className="h-6 w-6" />}
title="Ongoing Support"
description="We don't disappear after launch. Get continued support to keep your application running smoothly."
/>
</div>
</div>
</section>
{/* Pricing Section */}
<section id="pricing" className="py-20 px-4 sm:px-6 lg:px-8">
<div className="max-w-5xl mx-auto">
<section id="pricing" className="py-20 px-4 sm:px-6 lg:px-8 bg-zinc-50 dark:bg-zinc-900/50">
<div className="max-w-4xl mx-auto">
<div className="text-center mb-16">
<h2 className="text-3xl font-bold text-zinc-900 dark:text-white mb-4">
Simple, transparent pricing
Transparent, project-based pricing
</h2>
<p className="text-lg text-zinc-600 dark:text-zinc-400">
Start free, upgrade when you need more power.
Every project is unique. Get a custom quote based on your specific needs.
</p>
</div>
<div className="grid md:grid-cols-2 gap-8 max-w-3xl mx-auto">
<PricingCard
name="Free"
price="$0"
description="Perfect for side projects and learning"
features={[
'3 active projects',
'100 AI messages/month',
'Basic agents',
'Community support',
]}
buttonText="Get Started"
buttonVariant="outline"
/>
<PricingCard
name="Pro"
price="$29"
period="/month"
description="For serious builders and teams"
features={[
'Unlimited projects',
'Unlimited AI messages',
'Advanced agents',
'Priority support',
'Team collaboration',
'Custom integrations',
]}
buttonText="Start Free Trial"
buttonVariant="default"
highlighted
/>
<div className="bg-white dark:bg-zinc-900 rounded-2xl border dark:border-zinc-800 p-8 md:p-12">
<div className="text-center">
<h3 className="text-2xl font-bold text-zinc-900 dark:text-white mb-4">
Start with a free consultation
</h3>
<p className="text-zinc-600 dark:text-zinc-400 mb-8 max-w-xl mx-auto">
Describe your project idea and we'll get back to you with a clear scope,
timeline, and quote. No obligations, no pressure.
</p>
<div className="grid sm:grid-cols-3 gap-6 mb-10 text-left">
<div className="flex items-start gap-3">
<svg className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-sm text-zinc-600 dark:text-zinc-400">Fixed-price projects with clear deliverables</span>
</div>
<div className="flex items-start gap-3">
<svg className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-sm text-zinc-600 dark:text-zinc-400">Milestone-based payments for larger projects</span>
</div>
<div className="flex items-start gap-3">
<svg className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
<span className="text-sm text-zinc-600 dark:text-zinc-400">Retainer options for ongoing development</span>
</div>
</div>
<Link href="/signup">
<Button size="lg" className="gap-2">
Describe Your Project <ArrowRight className="h-4 w-4" />
</Button>
</Link>
</div>
</div>
</div>
</section>
@@ -151,14 +186,14 @@ export default function LandingPage() {
<section className="py-20 px-4 sm:px-6 lg:px-8 bg-primary text-primary-foreground">
<div className="max-w-4xl mx-auto text-center">
<h2 className="text-3xl font-bold mb-4">
Ready to build something amazing?
Ready to bring your idea to life?
</h2>
<p className="text-lg opacity-90 mb-8">
Join developers who are shipping 10x faster with AI-powered development.
Tell us about your project. We'll handle the rest.
</p>
<Link href="/signup">
<Button size="lg" variant="secondary" className="gap-2">
Start Building Free <ArrowRight className="h-4 w-4" />
Get Started <ArrowRight className="h-4 w-4" />
</Button>
</Link>
</div>
@@ -168,7 +203,7 @@ export default function LandingPage() {
<footer className="py-12 px-4 sm:px-6 lg:px-8 border-t dark:border-zinc-800">
<div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between items-center gap-4">
<div className="flex items-center gap-2">
<Bot className="h-6 w-6 text-primary" />
<Layers className="h-6 w-6 text-primary" />
<span className="font-semibold">Mylder</span>
</div>
<p className="text-sm text-zinc-500">
@@ -180,6 +215,18 @@ export default function LandingPage() {
)
}
function StepCard({ step, title, description }: { step: string; title: string; description: string }) {
return (
<div className="text-center">
<div className="w-12 h-12 rounded-full bg-primary text-primary-foreground flex items-center justify-center text-xl font-bold mx-auto mb-4">
{step}
</div>
<h3 className="text-lg font-semibold text-zinc-900 dark:text-white mb-2">{title}</h3>
<p className="text-zinc-600 dark:text-zinc-400">{description}</p>
</div>
)
}
function FeatureCard({ icon, title, description }: { icon: React.ReactNode; title: string; description: string }) {
return (
<div className="p-6 rounded-xl border bg-white dark:bg-zinc-900 dark:border-zinc-800">
@@ -191,52 +238,3 @@ function FeatureCard({ icon, title, description }: { icon: React.ReactNode; titl
</div>
)
}
function PricingCard({
name,
price,
period,
description,
features,
buttonText,
buttonVariant,
highlighted,
}: {
name: string
price: string
period?: string
description: string
features: string[]
buttonText: string
buttonVariant: 'default' | 'outline'
highlighted?: boolean
}) {
return (
<div className={`p-8 rounded-xl border ${highlighted ? 'border-primary ring-2 ring-primary/20' : 'dark:border-zinc-800'} bg-white dark:bg-zinc-900`}>
{highlighted && (
<div className="inline-block px-3 py-1 rounded-full bg-primary text-primary-foreground text-xs font-medium mb-4">
Most Popular
</div>
)}
<h3 className="text-xl font-bold text-zinc-900 dark:text-white">{name}</h3>
<div className="mt-4 mb-2">
<span className="text-4xl font-bold text-zinc-900 dark:text-white">{price}</span>
{period && <span className="text-zinc-500">{period}</span>}
</div>
<p className="text-zinc-600 dark:text-zinc-400 mb-6">{description}</p>
<ul className="space-y-3 mb-8">
{features.map((feature, i) => (
<li key={i} className="flex items-center gap-2 text-sm">
<svg className="h-4 w-4 text-primary" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
</svg>
{feature}
</li>
))}
</ul>
<Link href="/signup" className="block">
<Button variant={buttonVariant} className="w-full">{buttonText}</Button>
</Link>
</div>
)
}