shipd 0.1.3 → 0.2.0

package/features/marketing-landing/README.md

@@ -0,0 +1,333 @@
+# Marketing Landing Module - Integration Guide
+
+**Module Version:** 1.0.0  
+**Last Updated:** 2025-12-22  
+**Standalone:** ✅ Yes (includes all dependencies)
+
+---
+
+## Overview
+
+This module adds a complete, production-ready marketing landing page to your Next.js application. It includes a beautiful hero section, features showcase, CLI workflow demonstration, integrations display, testimonials, news section, pricing table, and footer.
+
+**Key Features:**
+- Modern hero section with animated gradients
+- Features table showcasing all available options
+- Interactive CLI workflow demonstration
+- Technology integrations showcase
+- Testimonials section
+- News/blog section
+- Static pricing table (no payment integration required)
+- Responsive navigation with mobile menu
+- Professional footer with links
+
+---
+
+## Files Added
+
+### Pages/Routes
+- `app/page.tsx` - Main landing page that assembles all marketing sections
+
+### Components
+- `components/homepage/navigation.tsx` - Fixed header navigation with mobile menu
+- `components/homepage/hero-section.tsx` - Hero section with CTA buttons
+- `components/homepage/cli-workflow-section.tsx` - Interactive CLI demonstration
+- `components/homepage/features-section.tsx` - Features table with implementation status
+- `components/homepage/testimonials-section.tsx` - Testimonials display
+- `components/homepage/news-section.tsx` - News/blog section
+- `components/homepage/integrations.tsx` - Technology stack showcase
+- `components/homepage/pricing-section.tsx` - Static pricing table
+- `components/homepage/footer.tsx` - Footer with links and copyright
+
+### Logo Components
+- `components/logos/BetterAuth.tsx` - Better Auth logo component
+- `components/logos/NeonPostgres.tsx` - Neon Postgres logo component
+- `components/logos/Nextjs.tsx` - Next.js logo component
+- `components/logos/Polar.tsx` - Polar.sh logo component
+- `components/logos/TailwindCSS.tsx` - Tailwind CSS logo component
+- `components/logos/shadcnui.tsx` - shadcn/ui logo component
+- `components/logos/index.ts` - Logo components export
+
+---
+
+## Dependencies
+
+### Package Dependencies
+This module uses dependencies already included in the base package:
+- `next` - Next.js framework
+- `react` & `react-dom` - React library
+- `lucide-react` - Icons (already in base)
+- UI components from base package (`components/ui/*`)
+
+**No additional dependencies required!** This module is designed to work with the base package.
+
+### Included Components
+This module uses UI components from the base package:
+- ✅ `components/ui/button.tsx` - For CTA buttons
+- ✅ `components/ui/card.tsx` - For feature cards
+- ✅ `components/ui/badge.tsx` - For status badges
+
+---
+
+## Environment Variables
+
+No environment variables required for this module.
+
+---
+
+## Manual Integration Steps
+
+If you're appending this module to an existing project, follow these steps:
+
+### Step 1: Verify Files Were Added
+
+Check that the following directories exist:
+- `app/page.tsx` - Should be the new landing page (or check if it already existed)
+- `components/homepage/` - Should contain all marketing components
+- `components/logos/` - Should contain logo components
+
+**Note:** If `app/page.tsx` already exists, the append command will skip it. You'll need to manually merge the landing page content.
+
+### Step 2: Access the Landing Page
+
+1. Start your dev server: `npm run dev`
+2. Visit `http://localhost:3000` in your browser
+3. You should see the complete marketing landing page
+
+### Step 3: Customize Content
+
+#### Update Navigation Links
+Edit `components/homepage/navigation.tsx`:
+```typescript
+const navLinks = [
+  { name: "Features", href: "#features" },
+  { name: "Pricing", href: "#pricing" },
+  // Add your own links
+];
+```
+
+#### Update Hero Section
+Edit `components/homepage/hero-section.tsx`:
+- Change heading text
+- Update CTA button links
+- Modify feature pills
+
+#### Update Features Table
+Edit `components/homepage/features-section.tsx`:
+- Modify the `features` array to reflect your actual features
+- Update implementation status
+- Add/remove categories
+
+#### Update Pricing
+Edit `components/homepage/pricing-section.tsx`:
+- Modify the `plans` array
+- Update pricing tiers
+- Change feature highlights
+
+#### Update Footer
+Edit `components/homepage/footer.tsx`:
+- Update links array
+- Change copyright text
+- Modify social links
+
+### Step 4: Customize Styling
+
+The landing page uses a dark theme with orange accent colors (`#ff5722`). To customize:
+- Edit component files in `components/homepage/`
+- Modify Tailwind classes directly
+- Change color scheme by replacing `#ff5722` with your brand color
+
+---
+
+## Usage Examples
+
+### Basic Landing Page
+
+The landing page is automatically assembled in `app/page.tsx`:
+
+```typescript
+import Navigation from "@/components/homepage/navigation";
+import HeroSection from "@/components/homepage/hero-section";
+// ... other imports
+
+export default function Home() {
+  return (
+    <>
+      <Navigation />
+      <HeroSection />
+      {/* ... other sections */}
+      <FooterSection />
+    </>
+  );
+}
+```
+
+### Custom Section Order
+
+You can reorder or remove sections:
+
+```typescript
+export default function Home() {
+  return (
+    <>
+      <Navigation />
+      <HeroSection />
+      <FeaturesSection />
+      {/* Skip CLI workflow section */}
+      <Integrations />
+      <PricingSection />
+      <FooterSection />
+    </>
+  );
+}
+```
+
+---
+
+## Customization
+
+### Styling
+- All components use Tailwind CSS
+- Dark theme with orange accent (`#ff5722`)
+- Responsive design (mobile-first)
+- Customize by editing component files directly
+
+### Content
+- Edit component files to change text content
+- Update logo components in `components/logos/`
+- Modify navigation structure in `navigation.tsx`
+
+### Branding
+- Replace logo in navigation component
+- Update color scheme (search for `#ff5722` and replace)
+- Customize footer links and copyright
+
+---
+
+## Troubleshooting
+
+### Common Issues
+
+**Issue:** Landing page shows blank or errors
+**Solution:** 
+- Verify `app/page.tsx` exists and imports all components correctly
+- Check that all component files were copied
+- Ensure base UI components exist (`components/ui/*`)
+- Restart dev server
+
+**Issue:** Navigation links don't work
+**Solution:**
+- Verify anchor links match section IDs (e.g., `#features`, `#pricing`)
+- Check that sections have correct IDs in their components
+- Ensure Next.js Link component is used correctly
+
+**Issue:** Components not found
+**Solution:**
+- Verify `components/homepage/` directory exists
+- Check import paths use `@/` alias (configured in `tsconfig.json`)
+- Ensure all logo components are in `components/logos/`
+
+**Issue:** Styling looks broken
+**Solution:**
+- Verify Tailwind CSS is configured in `tailwind.config.ts`
+- Check that `app/globals.css` includes Tailwind directives
+- Ensure base package UI components are present
+
+---
+
+## Next Steps
+
+After installing this module:
+
+1. ✅ Visit `/` to see your landing page
+2. ✅ Customize hero section with your brand messaging
+3. ✅ Update features table to reflect your actual features
+4. ✅ Modify pricing section (or integrate with payments module)
+5. ✅ Update footer with your links and copyright
+6. ✅ Customize color scheme to match your brand
+
+---
+
+## Related Modules
+
+This module works well with:
+- **Authentication Module** - Add sign-in/sign-up links to navigation
+- **Payments Module** - Replace static pricing with dynamic subscription pricing
+- **Docs Module** - Add documentation link to navigation
+
+---
+
+## Module Status
+
+✅ **Standalone Package** - All components included  
+✅ **No Missing Dependencies** - Uses base package dependencies  
+✅ **Ready to Use** - Works immediately after append  
+✅ **Well Documented** - Comprehensive integration guide  
+✅ **Smart Deduplication** - Won't overwrite existing `app/page.tsx`
+
+---
+
+## AI Integration Prompt
+
+**For AI Assistants:** Use this prompt to understand and integrate the Marketing Landing Page module into an existing Next.js application.
+
+```
+The Marketing Landing Page module has been appended to this Next.js project. Your task is to ensure it's properly integrated and functional.
+
+**Installed Packages:**
+- No additional packages (uses base package dependencies: @radix-ui components, lucide-react, tailwindcss)
+
+**Files Added:**
+- app/page.tsx - Full marketing landing page (replaces base page.tsx)
+- components/homepage/hero-section.tsx - Hero section with CTA buttons
+- components/homepage/navigation.tsx - Site navigation header
+- components/homepage/features-section.tsx - Features table/grid
+- components/homepage/cli-workflow-section.tsx - CLI workflow demonstration
+- components/homepage/testimonials-section.tsx - Stats/testimonials section
+- components/homepage/integrations.tsx - Technology logos/integrations
+- components/homepage/news-section.tsx - Blog/news preview section
+- components/homepage/pricing-section.tsx - Pricing section (if not using payments module)
+- components/homepage/footer.tsx - Site footer
+- components/logos/*.tsx - Technology logo components (BetterAuth, Next.js, Polar, etc.)
+
+**Environment Variables Required:**
+- None (module is self-contained)
+
+**Integration Steps:**
+1. Verify app/page.tsx exists and imports all homepage components
+2. Check that components/homepage/ directory exists with all section components
+3. Verify components/logos/ directory exists with logo components
+4. Check that navigation links point to correct routes (/sign-up, /sign-in, /docs, etc.)
+5. Test landing page: Visit / (root route)
+6. If auth module installed: Verify sign-in/sign-up links work
+7. If payments module installed: Replace static pricing with dynamic pricing component
+
+**Key Integration Points:**
+- Homepage: app/page.tsx is the main landing page (replaces base minimal page)
+- Navigation: components/homepage/navigation.tsx should link to /sign-up, /sign-in, /docs, etc.
+- CTA buttons: Hero section links to /sign-up and #cli-workflow
+- Smart deduplication: If app/page.tsx already exists, it won't be overwritten (manual merge needed)
+- Logo components: Technology logos are in components/logos/ directory
+- Styling: Uses Tailwind CSS with sunset orange (#ff5722) color scheme
+
+**Dependencies:**
+- OPTIONAL: Auth module (for sign-in/sign-up links in navigation)
+- OPTIONAL: Payments module (for dynamic pricing section)
+- OPTIONAL: Docs module (for documentation link in navigation)
+- No hard dependencies - works standalone
+
+**Common Issues to Check:**
+- If homepage not showing: Check app/page.tsx exists and imports components correctly
+- If components not found: Verify components/homepage/ directory structure
+- If navigation links broken: Update href attributes in navigation.tsx
+- If styling broken: Ensure Tailwind CSS is configured and base package components exist
+
+**Next Steps After Integration:**
+- Customize hero text and CTA buttons in hero-section.tsx
+- Update navigation links in navigation.tsx
+- Customize features list in features-section.tsx
+- Update testimonials/stats in testimonials-section.tsx
+- Replace logo components with your own if needed
+- Add links to auth pages if auth module installed
+- Integrate dynamic pricing if payments module installed
+```

package/features/marketing-landing/app/page.tsx

@@ -0,0 +1,25 @@
+import Navigation from "@/components/homepage/navigation";
+import HeroSection from "@/components/homepage/hero-section";
+import CliWorkflowSection from "@/components/homepage/cli-workflow-section";
+import FeaturesSection from "@/components/homepage/features-section";
+import TestimonialsSection from "@/components/homepage/testimonials-section";
+import NewsSection from "@/components/homepage/news-section";
+import Integrations from "@/components/homepage/integrations";
+import PricingSection from "@/components/homepage/pricing-section";
+import FooterSection from "@/components/homepage/footer";
+
+export default function Home() {
+  return (
+    <>
+      <Navigation />
+      <HeroSection />
+      <CliWorkflowSection />
+      <FeaturesSection />
+      <TestimonialsSection />
+      <Integrations />
+      <NewsSection />
+      <PricingSection />
+      <FooterSection />
+    </>
+  );
+}

package/features/marketing-landing/components/homepage/cli-workflow-section.tsx

@@ -0,0 +1,231 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function CliWorkflowSection() {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return (
+    <section className="relative min-h-[60vh] bg-black overflow-visible py-16">
+      {/* Background gradient continuation */}
+      <div className="absolute inset-0 bg-gradient-to-b from-black via-[#ff5722]/5 to-black" />
+
+      <div className="relative z-10 mx-auto max-w-6xl px-6 lg:px-8">
+        {/* Section Header */}
+        <div className="text-center mb-12">
+          <h2 className="text-3xl md:text-4xl font-bold mb-4 bg-gradient-to-r from-white to-gray-400 bg-clip-text text-transparent">
+            Works for New & Existing Projects
+          </h2>
+          <p className="text-gray-400 text-lg max-w-2xl mx-auto">
+            Start from scratch or add features to your existing Next.js app. Both workflows are seamless.
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 gap-6">
+          {/* Terminal 1: New Project */}
+          <div
+            className={`transition-all duration-700 ${
+              mounted ? "opacity-100 scale-100" : "opacity-0 scale-95"
+            }`}
+          >
+            <div className="relative group">
+              <div className="absolute -inset-1 bg-gradient-to-r from-[#ff5722] to-[#d84315] rounded-lg blur opacity-30 group-hover:opacity-60 transition duration-1000" />
+              <div className="relative w-full bg-black/90 backdrop-blur-xl rounded-lg border border-[#ff5722]/20 overflow-hidden">
+                <div className="flex items-center gap-2 px-6 py-4 border-b border-[#ff5722]/10">
+                  <div className="flex gap-1.5">
+                    <div className="w-3 h-3 rounded-full bg-red-500/80" />
+                    <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
+                    <div className="w-3 h-3 rounded-full bg-green-500/80" />
+                  </div>
+                  <span className="text-xs text-gray-400 ml-2">New Project</span>
+                </div>
+                <div className="p-6 font-mono text-sm space-y-3">
+                  {/* Step 1: Run CLI */}
+                  <div>
+                    <div className="flex items-center">
+                      <span className="text-green-400">$</span>
+                      <span className="text-[#ff7043] ml-2">npx</span>
+                      <span className="text-[#ff5722] ml-2">shipd</span>
+                      <span className="text-white ml-2">init</span>
+                      <span className="text-gray-400 ml-2">my-saas-app</span>
+                    </div>
+                  </div>
+
+                  {/* Step 2: Cargo Ship + Choose name */}
+                  <div className="pt-4 space-y-2">
+                    <pre className="text-[#ff7043] text-[9px] leading-tight overflow-x-auto">
+{`                                                    # #  ( )
+                                                 ___#_#___|__
+                                             _  |____________|  _
+                                      _=====| | |            | | |==== _
+                                =====| |.---------------------------. | |====
+   <---------------------------'                                        '----------------/
+     \\    .d8888. db   db d888888b d8888b. d8888b.                                     /
+      \\   88'  YP 88   88   \\\`88'   88  \\\`8D 88  \\\`8D                                    /
+       \\  \\\`8bo.   88ooo88    88    88oodD' 88   88                                   /
+        \\   \\\`Y8b. 88~~~88    88    88~~~   88   88                                  /
+         \\ db   8D 88   88   .88.   88      88  .8D                                 /
+          \\\`8888Y' YP   YP Y888888P 88      Y8888D'                                /
+           \\_____________________________________________________________________ /
+  wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
+wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww
+   wwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwwww`}
+                    </pre>
+                    <div className="text-gray-400 pt-2">
+                      ? What is your project name?{" "}
+                      <span className="text-white">my-saas-app</span>
+                    </div>
+                  </div>
+
+                  {/* Step 3: Choose functionality */}
+                  <div className="pt-4 space-y-2">
+                    <div className="text-gray-400">
+                      ? Select features for your app:
+                    </div>
+                    <div className="pl-4 space-y-1">
+                      <div className="text-gray-400">
+                        <span className="text-green-400">◉</span> Authentication
+                      </div>
+                      <div className="text-gray-400">
+                        <span className="text-green-400">◉</span> Billing &
+                        Subscriptions
+                      </div>
+                      <div className="text-gray-400">
+                        <span className="text-green-400">◉</span> Dashboard
+                      </div>
+                      <div className="text-gray-400">
+                        <span className="text-green-400">◉</span> Email
+                        Integration
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Step 4: Build */}
+                  <div className="pt-4 space-y-2">
+                    <div className="text-gray-400">
+                      <span className="text-green-400">✓</span> Creating project
+                      structure...
+                    </div>
+                    <div className="text-gray-400">
+                      <span className="text-green-400">✓</span> Installing
+                      dependencies...
+                    </div>
+                    <div className="text-gray-400">
+                      <span className="text-green-400">✓</span> Configuring
+                      features...
+                    </div>
+                    <div className="text-gray-400">
+                      <span className="text-green-400">✓</span> Building
+                      application...
+                    </div>
+                    <div className="text-green-400 pt-2">
+                      🎉 Done! Your SaaS app is ready.
+                    </div>
+                  </div>
+
+                  {/* Final command */}
+                  <div className="pt-4 border-t border-[#ff5722]/10">
+                    <div className="flex items-center">
+                      <span className="text-green-400">$</span>
+                      <span className="text-white ml-2">cd my-saas-app</span>
+                    </div>
+                    <div className="flex items-center mt-2">
+                      <span className="text-green-400">$</span>
+                      <span className="text-white ml-2">npm run dev</span>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          {/* Terminal 2: Existing Project */}
+          <div
+            className={`transition-all duration-700 delay-200 ${
+              mounted ? "opacity-100 scale-100" : "opacity-0 scale-95"
+            }`}
+          >
+            <div className="relative group">
+              <div className="absolute -inset-1 bg-gradient-to-r from-[#ff5722] to-[#d84315] rounded-lg blur opacity-30 group-hover:opacity-60 transition duration-1000" />
+              <div className="relative w-full bg-black/90 backdrop-blur-xl rounded-lg border border-[#ff5722]/20 overflow-hidden">
+                <div className="flex items-center gap-2 px-6 py-4 border-b border-[#ff5722]/10">
+                  <div className="flex gap-1.5">
+                    <div className="w-3 h-3 rounded-full bg-red-500/80" />
+                    <div className="w-3 h-3 rounded-full bg-yellow-500/80" />
+                    <div className="w-3 h-3 rounded-full bg-green-500/80" />
+                  </div>
+                  <span className="text-xs text-gray-400 ml-2">Existing Project</span>
+                </div>
+                <div className="p-6 font-mono text-sm space-y-3">
+                  {/* Step 1: Navigate to project */}
+                  <div>
+                    <div className="flex items-center">
+                      <span className="text-green-400">$</span>
+                      <span className="text-white ml-2">cd</span>
+                      <span className="text-gray-400 ml-2">my-existing-app</span>
+                    </div>
+                  </div>
+
+                  {/* Step 2: Run append */}
+                  <div className="pt-4 space-y-2">
+                    <div className="flex items-center">
+                      <span className="text-green-400">$</span>
+                      <span className="text-[#ff7043] ml-2">npx</span>
+                      <span className="text-[#ff5722] ml-2">shipd</span>
+                      <span className="text-white ml-2">append</span>
+                    </div>
+                    <div className="text-gray-400 pt-2">
+                      ? Select features to add:
+                    </div>
+                    <div className="pl-4 space-y-1">
+                      <div className="text-gray-400">
+                        <span className="text-green-400">◉</span> Authentication
+                      </div>
+                      <div className="text-gray-400">
+                        <span className="text-green-400">◉</span> Payments
+                      </div>
+                      <div className="text-gray-400">
+                        <span className="text-green-400">◉</span> Email
+                      </div>
+                    </div>
+                  </div>
+
+                  {/* Step 3: Features added */}
+                  <div className="pt-4 space-y-2">
+                    <div className="text-gray-400">
+                      <span className="text-green-400">✓</span> Adding features...
+                    </div>
+                    <div className="text-gray-400">
+                      <span className="text-green-400">✓</span> Installing dependencies...
+                    </div>
+                    <div className="text-gray-400">
+                      <span className="text-green-400">✓</span> Configuring modules...
+                    </div>
+                    <div className="text-green-400 pt-2">
+                      ✨ Features added successfully!
+                    </div>
+                  </div>
+
+                  {/* Final command */}
+                  <div className="pt-4 border-t border-[#ff5722]/10">
+                    <div className="flex items-center">
+                      <span className="text-green-400">$</span>
+                      <span className="text-white ml-2">npm run dev</span>
+                    </div>
+                    <div className="text-gray-500 text-xs mt-2">
+                      → Your existing app now has new features!
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}