feat: improve landing page layout by moving Getting Started above Industries

[abrichr]

Summary

Reorganizes the landing page to follow a more intuitive user journey: Awareness → Action → Exploration. This strategic reordering moves the "Getting Started" section above the "Industries" section, reducing friction and improving conversion potential.

Problem

The previous layout created unnecessary friction in the user journey:

Buried Call-to-Action

• Users who watched the demo video and wanted to try OpenAdapt had to scroll through 9 industry use case cards before reaching installation instructions
• This created a long scroll distance that could cause users to lose momentum

Hidden Social Proof

• PyPI download statistics (200K+ downloads)
• GitHub stars and community metrics
• All valuable social proof was hidden at the bottom of the page

Counterintuitive Flow

• "From demonstration to automation in minutes" heading suggested immediate action
• But it was followed by extensive exploration content rather than actionable steps
• Created a disconnect between expectation and experience

Solution

New Section Order

1. MastHead (Hero) - Hook users with demo video and value proposition
2. Developers (Getting Started) - Immediate action path
   • 30-second installation instructions
   • PyPI statistics (200K+ downloads, GitHub stars)
   • Quick start commands
3. IndustriesGrid - Detailed exploration for users needing more context
   • Industry-specific use cases
   • "Get Started" buttons loop back to installation
4. Footer

Updated Industries Section

• Changed heading from "From demonstration to automation in minutes" to "Transform Your Industry with OpenAdapt"
• Consolidated previous heading into paragraph text for better context
• More appropriate as a secondary exploration section

UX Rationale

This follows proven best practices for SaaS landing pages:

Awareness (MastHead)

• Video demo shows what OpenAdapt does
• Clear value proposition
• CTAs: "Learn How" (scroll) and "Get Started" (anchor link)

Action (Getting Started - NEW POSITION)

• Immediate conversion opportunity for convinced users
• Social proof builds credibility (200K+ downloads)
• Low-friction installation (30 seconds)
• Clear next steps after installation

Exploration (Industries)

• Detailed use cases for skeptical users
• Industry-specific applications
• Each card has "Get Started" CTA linking back to installation

Benefits

✅ Reduced Friction: Users can act immediately after watching demo
✅ Social Proof Prominence: Download stats visible without extensive scrolling
✅ Logical Flow: Action opportunity before detailed exploration
✅ Better Conversion: Convinced users don't lose momentum
✅ Still Accessible: Industry exploration available for those who need it
✅ Clear Hierarchy: Primary action (install) → Secondary exploration (use cases)

Changes

Modified Files

• pages/index.js - Reordered component rendering (2 lines changed)
• components/IndustriesGrid.js - Updated section heading (2 lines changed)

Code Diff

// pages/index.js
 return (
     <div>
         <MastHead />
+        <Developers />
         <IndustriesGrid
             feedbackData={feedbackData}
             setFeedbackData={setFeedbackData}
             sectionRef={sectionRef}
         />
-        <Developers />
         <Footer />
     </div>
 )

// components/IndustriesGrid.js
-<h1 className="text-center text-2xl text-white">
-    From demonstration to automation in minutes.
+<h1 className="text-center text-2xl text-white mb-4">
+    Transform Your Industry with OpenAdapt
 </h1>
 <p className={styles.p}>
-    Just do the task once and OpenAdapt learns from watching.
+    From demonstration to automation in minutes. Just do the task once and OpenAdapt learns from watching.

Testing

• ✅ Syntax verified for both modified files
• ✅ No breaking changes to component logic or props
• ✅ All existing functionality preserved
• ✅ Vercel preview deployment will show visual improvements

Expected Impact

Users who are convinced by the demo video can now:

1. Watch demo
2. Scroll one section down
3. See social proof (200K+ downloads)
4. Install in 30 seconds

Previous flow required scrolling through 9+ cards before reaching installation.

Related

This change was implemented following the merge of PR #117, which cleaned up redundant PyPI links and improved the visual hierarchy of the download statistics section.

---

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for cosmic-klepon-3c693c ready!

Name	Link
🔨 Latest commit	0a8cc1b
🔍 Latest deploy log	https://app.netlify.com/projects/cosmic-klepon-3c693c/deploys/696bb8f2f6d8ba0008e1715e
😎 Deploy Preview	https://deploy-preview-118--cosmic-klepon-3c693c.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.