Update landing page - focus on professional SaaS portal

- 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>

src/app/page.tsx

@@ -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
+            Your vision,
-            <span className="text-primary"> AI agents</span>
+            <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
+            A lean, professional process to bring your software ideas to life.
-            with intelligent automation and real-time collaboration.
+            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 */}
+      {/* How It Works */}
-      <section id="features" className="py-20 px-4 sm:px-6 lg:px-8 bg-zinc-50 dark:bg-zinc-900/50">
+      <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"
+              title="Direct Communication"
-              description="Describe what you want to build. Our AI understands context and generates production-ready code."
+              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" />}
+              icon={<Clock className="h-6 w-6" />}
-              title="Git Integration"
+              title="Real-Time Visibility"
-              description="Automatic commits, branches, and PRs. Your code stays organized and version controlled."
+              description="See exactly where your project stands at any moment. Full transparency from start to finish."
             />
             <FeatureCard
-              icon={<Code className="h-6 w-6" />}
+              icon={<Layers className="h-6 w-6" />}
-              title="Full-Stack Support"
+              title="Full-Stack Expertise"
-              description="From React to databases, APIs to deployments. Build complete applications with AI assistance."
+              description="Web apps, mobile apps, APIs, databases. Complete solutions tailored to your business needs."
-            />
-            <FeatureCard
-              icon={<Bot className="h-6 w-6" />}
-              title="Intelligent Agents"
-              description="Specialized agents for planning, coding, testing, and deployment work together seamlessly."
             />
             <FeatureCard
               icon={<Zap className="h-6 w-6" />}
-              title="Real-Time Updates"
+              title="Fast Turnaround"
-              description="Watch your project evolve in real-time. See exactly what the AI is building as it happens."
+              description="Efficient processes and modern tools mean your project gets done faster without sacrificing quality."
             />
             <FeatureCard
-              icon={<Rocket className="h-6 w-6" />}
+              icon={<Shield className="h-6 w-6" />}
-              title="One-Click Deploy"
+              title="Quality Guaranteed"
-              description="Deploy to production with a single command. We handle the infrastructure complexity."
+              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">
+      <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-5xl mx-auto">
+        <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">
+          <div className="bg-white dark:bg-zinc-900 rounded-2xl border dark:border-zinc-800 p-8 md:p-12">
-            <PricingCard
+            <div className="text-center">
-              name="Free"
+              <h3 className="text-2xl font-bold text-zinc-900 dark:text-white mb-4">
-              price="$0"
+                Start with a free consultation
-              description="Perfect for side projects and learning"
+              </h3>
-              features={[
+              <p className="text-zinc-600 dark:text-zinc-400 mb-8 max-w-xl mx-auto">
-                '3 active projects',
+                Describe your project idea and we'll get back to you with a clear scope,
-                '100 AI messages/month',
+                timeline, and quote. No obligations, no pressure.
-                'Basic agents',
+              </p>
-                'Community support',
+              <div className="grid sm:grid-cols-3 gap-6 mb-10 text-left">
-              ]}
+                <div className="flex items-start gap-3">
-              buttonText="Get Started"
+                  <svg className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              buttonVariant="outline"
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-            />
+                  </svg>
-            <PricingCard
+                  <span className="text-sm text-zinc-600 dark:text-zinc-400">Fixed-price projects with clear deliverables</span>
-              name="Pro"
+                </div>
-              price="$29"
+                <div className="flex items-start gap-3">
-              period="/month"
+                  <svg className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-              description="For serious builders and teams"
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-              features={[
+                  </svg>
-                'Unlimited projects',
+                  <span className="text-sm text-zinc-600 dark:text-zinc-400">Milestone-based payments for larger projects</span>
-                'Unlimited AI messages',
+                </div>
-                'Advanced agents',
+                <div className="flex items-start gap-3">
-                'Priority support',
+                  <svg className="h-5 w-5 text-primary mt-0.5 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
-                'Team collaboration',
+                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
-                'Custom integrations',
+                  </svg>
-              ]}
+                  <span className="text-sm text-zinc-600 dark:text-zinc-400">Retainer options for ongoing development</span>
-              buttonText="Start Free Trial"
+                </div>
-              buttonVariant="default"
+              </div>
-              highlighted
+              <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>
-  )
-}