@wakastellar/ui 2.3.4 → 2.4.0

package/src/blocks/landing/WakaLanding.stories.tsx

@@ -0,0 +1,449 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import {
+  WakaLanding,
+  defaultLandingNavItems,
+  defaultLandingFeatures,
+  defaultLandingTestimonials,
+  defaultLandingHero,
+  defaultLandingCTA,
+} from './index'
+import type { LandingNavItem, LandingFeature, LandingTestimonial, LandingHeroProps, LandingCTA } from './index'
+import * as React from 'react'
+import { Zap, Shield, Users, Globe, Rocket, Heart, Star, Code, Cloud, Lock } from 'lucide-react'
+
+const MockLink = ({ href, children, ...props }: any) => (
+  <a href={href} {...props} onClick={(e) => e.preventDefault()}>
+    {children}
+  </a>
+)
+
+const meta: Meta<typeof WakaLanding> = {
+  title: 'Blocks/Landing',
+  component: WakaLanding,
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'A complete landing page component with navbar, hero section, features, testimonials, CTA, and customizable sections.',
+      },
+    },
+  },
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof WakaLanding>
+
+export const Default: Story = {
+  render: () => (
+    <WakaLanding
+      brandName="Wakastart"
+      navItems={defaultLandingNavItems}
+      hero={defaultLandingHero}
+      features={defaultLandingFeatures}
+      testimonials={defaultLandingTestimonials}
+      cta={defaultLandingCTA}
+      onLogin={() => console.log('Login clicked')}
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const HeroOnly: Story = {
+  render: () => (
+    <WakaLanding
+      brandName="Simple"
+      navItems={defaultLandingNavItems.slice(0, 2)}
+      hero={{
+        title: 'Build faster,',
+        highlightedTitle: 'ship sooner',
+        description: 'The ultimate toolkit for modern developers.',
+        primaryButtonText: 'Get Started',
+        primaryButtonHref: '/signup',
+      }}
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const WithImage: Story = {
+  render: () => (
+    <WakaLanding
+      brandName="ProductX"
+      navItems={defaultLandingNavItems}
+      hero={{
+        badge: 'Now in Beta',
+        title: 'Transform your workflow with',
+        highlightedTitle: 'AI-powered tools',
+        description: 'Automate repetitive tasks and focus on what matters most.',
+        primaryButtonText: 'Try for Free',
+        secondaryButtonText: 'Watch Demo',
+        image: (
+          <div className="w-full aspect-video bg-gradient-to-br from-primary/20 to-primary/5 rounded-xl flex items-center justify-center border">
+            <div className="text-center">
+              <div className="text-6xl mb-2">🚀</div>
+              <p className="text-muted-foreground">Product Screenshot</p>
+            </div>
+          </div>
+        ),
+        stats: [
+          { value: '50K+', label: 'Users' },
+          { value: '99.9%', label: 'Uptime' },
+        ],
+      }}
+      features={defaultLandingFeatures}
+      cta={{
+        title: 'Ready to get started?',
+        description: 'Join thousands of teams already using our platform.',
+        buttonText: 'Start Free Trial',
+        variant: 'gradient',
+      }}
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const CustomFeatures: Story = {
+  render: () => {
+    const customFeatures: LandingFeature[] = [
+      {
+        id: '1',
+        icon: <Code className="h-6 w-6" />,
+        title: 'Developer First',
+        description: 'Built by developers, for developers. Clean APIs and excellent documentation.',
+      },
+      {
+        id: '2',
+        icon: <Cloud className="h-6 w-6" />,
+        title: 'Cloud Native',
+        description: 'Deploy anywhere with our cloud-native architecture and auto-scaling.',
+      },
+      {
+        id: '3',
+        icon: <Lock className="h-6 w-6" />,
+        title: 'Enterprise Security',
+        description: 'SOC 2 compliant with end-to-end encryption and SSO support.',
+      },
+      {
+        id: '4',
+        icon: <Rocket className="h-6 w-6" />,
+        title: 'Lightning Fast',
+        description: 'Optimized for speed with global CDN and edge computing.',
+      },
+      {
+        id: '5',
+        icon: <Heart className="h-6 w-6" />,
+        title: 'Great Support',
+        description: '24/7 support from our team of experts. Average response time under 1 hour.',
+      },
+      {
+        id: '6',
+        icon: <Star className="h-6 w-6" />,
+        title: 'Loved by Teams',
+        description: 'Rated 4.9/5 by over 10,000 users worldwide.',
+      },
+    ]
+
+    return (
+      <WakaLanding
+        brandName="DevTools"
+        navItems={defaultLandingNavItems}
+        hero={{
+          title: 'The toolkit that',
+          highlightedTitle: 'developers love',
+          description: 'Everything you need to build, deploy, and scale your applications.',
+          primaryButtonText: 'Start Building',
+        }}
+        features={customFeatures}
+        featuresTitle="Why choose us?"
+        featuresDescription="We provide everything you need to succeed."
+        LinkComponent={MockLink}
+      />
+    )
+  },
+}
+
+export const WithTestimonials: Story = {
+  render: () => {
+    const testimonials: LandingTestimonial[] = [
+      {
+        id: '1',
+        content: "This product has completely transformed how our team works. We've saved countless hours.",
+        author: 'Sarah Chen',
+        role: 'Engineering Manager',
+        company: 'TechCorp',
+        rating: 5,
+      },
+      {
+        id: '2',
+        content: 'The best investment we made this year. The ROI was visible within the first month.',
+        author: 'Michael Johnson',
+        role: 'CTO',
+        company: 'StartupXYZ',
+        rating: 5,
+      },
+      {
+        id: '3',
+        content: "Incredible support team and an amazing product. Couldn't ask for more.",
+        author: 'Emma Williams',
+        role: 'Product Lead',
+        company: 'DesignCo',
+        rating: 5,
+      },
+    ]
+
+    return (
+      <WakaLanding
+        brandName="TestimonialDemo"
+        navItems={defaultLandingNavItems.slice(0, 3)}
+        hero={{
+          title: 'Trusted by',
+          highlightedTitle: 'thousands',
+          description: "Don't just take our word for it - see what our customers say.",
+          primaryButtonText: 'Join Them',
+        }}
+        testimonials={testimonials}
+        testimonialsTitle="What our customers say"
+        cta={{
+          title: 'Join our community',
+          buttonText: 'Get Started',
+          variant: 'dark',
+        }}
+        LinkComponent={MockLink}
+      />
+    )
+  },
+}
+
+export const CTAVariants: Story = {
+  render: () => (
+    <div className="space-y-0">
+      <WakaLanding
+        brandName="CTADemo"
+        hero={{
+          title: 'CTA Variants',
+          highlightedTitle: 'Demo',
+          description: 'Scroll down to see different CTA section variants.',
+          primaryButtonText: 'Scroll Down',
+        }}
+        cta={{
+          title: 'Default Variant',
+          description: 'This is the default CTA style.',
+          buttonText: 'Get Started',
+          secondaryButtonText: 'Learn More',
+          variant: 'default',
+        }}
+        LinkComponent={MockLink}
+      />
+      <div className="border-t">
+        <section className="bg-gradient-to-r from-primary/10 via-primary/5 to-background py-24">
+          <div className="container text-center max-w-2xl mx-auto">
+            <h2 className="text-3xl font-bold mb-4">Gradient Variant</h2>
+            <p className="text-muted-foreground mb-8">This CTA uses a gradient background.</p>
+            <button className="px-6 py-3 bg-primary text-primary-foreground rounded-md">
+              Get Started →
+            </button>
+          </div>
+        </section>
+      </div>
+      <div className="border-t">
+        <section className="bg-foreground text-background py-24">
+          <div className="container text-center max-w-2xl mx-auto">
+            <h2 className="text-3xl font-bold mb-4">Dark Variant</h2>
+            <p className="text-background/80 mb-8">This CTA uses a dark background.</p>
+            <button className="px-6 py-3 bg-background text-foreground rounded-md">
+              Get Started →
+            </button>
+          </div>
+        </section>
+      </div>
+    </div>
+  ),
+}
+
+export const WithCustomLogo: Story = {
+  render: () => (
+    <WakaLanding
+      logo={
+        <div className="h-8 w-8 rounded-lg bg-primary flex items-center justify-center text-primary-foreground font-bold">
+          W
+        </div>
+      }
+      brandName="Wakastart"
+      navItems={defaultLandingNavItems}
+      hero={defaultLandingHero}
+      features={defaultLandingFeatures.slice(0, 3)}
+      cta={defaultLandingCTA}
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const MinimalLanding: Story = {
+  render: () => (
+    <WakaLanding
+      brandName="Minimal"
+      showLoginButton={false}
+      hero={{
+        title: 'Simple.',
+        highlightedTitle: 'Powerful.',
+        description: 'One product. Endless possibilities.',
+        primaryButtonText: 'Learn More',
+      }}
+      LinkComponent={MockLink}
+    />
+  ),
+}
+
+export const SaaSLanding: Story = {
+  render: () => {
+    const saasFeatures: LandingFeature[] = [
+      {
+        id: '1',
+        icon: <Zap className="h-6 w-6" />,
+        title: 'Instant Setup',
+        description: 'Get started in minutes with our simple onboarding process.',
+      },
+      {
+        id: '2',
+        icon: <Shield className="h-6 w-6" />,
+        title: 'Bank-Level Security',
+        description: 'Your data is protected with enterprise-grade encryption.',
+      },
+      {
+        id: '3',
+        icon: <Users className="h-6 w-6" />,
+        title: 'Team Collaboration',
+        description: 'Work together seamlessly with real-time sync and sharing.',
+      },
+      {
+        id: '4',
+        icon: <Globe className="h-6 w-6" />,
+        title: 'Global Scale',
+        description: 'Deploy worldwide with our distributed infrastructure.',
+      },
+    ]
+
+    return (
+      <WakaLanding
+        logo={
+          <div className="flex items-center gap-2">
+            <div className="h-8 w-8 rounded bg-gradient-to-br from-blue-500 to-purple-600 flex items-center justify-center text-white font-bold">
+              S
+            </div>
+          </div>
+        }
+        brandName="SaaSPro"
+        navItems={[
+          { label: 'Product', href: '#product' },
+          { label: 'Pricing', href: '#pricing' },
+          { label: 'Docs', href: '#docs' },
+          { label: 'Blog', href: '#blog' },
+        ]}
+        loginButtonText="Sign In"
+        loginHref="/login"
+        hero={{
+          badge: '✨ New: AI-Powered Analytics',
+          title: 'The modern platform for',
+          highlightedTitle: 'growing businesses',
+          description: 'Streamline your operations, automate workflows, and scale with confidence. Join 10,000+ companies already using SaaSPro.',
+          primaryButtonText: 'Start Free Trial',
+          primaryButtonHref: '/signup',
+          secondaryButtonText: 'Book a Demo',
+          secondaryButtonHref: '/demo',
+          stats: [
+            { value: '10K+', label: 'Companies' },
+            { value: '99.9%', label: 'Uptime' },
+            { value: '24/7', label: 'Support' },
+            { value: '150+', label: 'Integrations' },
+          ],
+        }}
+        features={saasFeatures}
+        featuresTitle="Everything you need"
+        featuresDescription="Powerful features to help you manage, grow, and scale your business."
+        testimonials={[
+          {
+            id: '1',
+            content: "SaaSPro helped us reduce our operational costs by 40% in just 3 months.",
+            author: 'David Park',
+            role: 'COO',
+            company: 'ScaleUp Inc.',
+            rating: 5,
+          },
+          {
+            id: '2',
+            content: 'The automation features alone saved our team 20 hours per week.',
+            author: 'Lisa Chen',
+            role: 'Operations Manager',
+            company: 'GrowthCo',
+            rating: 5,
+          },
+          {
+            id: '3',
+            content: "Best customer support I've ever experienced. They really care.",
+            author: 'James Wilson',
+            role: 'Founder',
+            company: 'TechStartup',
+            rating: 5,
+          },
+        ]}
+        cta={{
+          title: 'Start your free trial today',
+          description: 'No credit card required. Get started in under 5 minutes.',
+          buttonText: 'Start Free Trial',
+          buttonHref: '/signup',
+          secondaryButtonText: 'Talk to Sales',
+          variant: 'gradient',
+        }}
+        footer={
+          <footer className="border-t py-12 bg-muted/30">
+            <div className="container">
+              <div className="grid md:grid-cols-4 gap-8">
+                <div>
+                  <h4 className="font-semibold mb-3">Product</h4>
+                  <ul className="space-y-2 text-sm text-muted-foreground">
+                    <li><a href="#">Features</a></li>
+                    <li><a href="#">Pricing</a></li>
+                    <li><a href="#">Integrations</a></li>
+                    <li><a href="#">Changelog</a></li>
+                  </ul>
+                </div>
+                <div>
+                  <h4 className="font-semibold mb-3">Company</h4>
+                  <ul className="space-y-2 text-sm text-muted-foreground">
+                    <li><a href="#">About</a></li>
+                    <li><a href="#">Blog</a></li>
+                    <li><a href="#">Careers</a></li>
+                    <li><a href="#">Contact</a></li>
+                  </ul>
+                </div>
+                <div>
+                  <h4 className="font-semibold mb-3">Resources</h4>
+                  <ul className="space-y-2 text-sm text-muted-foreground">
+                    <li><a href="#">Documentation</a></li>
+                    <li><a href="#">API Reference</a></li>
+                    <li><a href="#">Community</a></li>
+                    <li><a href="#">Support</a></li>
+                  </ul>
+                </div>
+                <div>
+                  <h4 className="font-semibold mb-3">Legal</h4>
+                  <ul className="space-y-2 text-sm text-muted-foreground">
+                    <li><a href="#">Privacy</a></li>
+                    <li><a href="#">Terms</a></li>
+                    <li><a href="#">Security</a></li>
+                  </ul>
+                </div>
+              </div>
+              <div className="mt-8 pt-8 border-t text-center text-sm text-muted-foreground">
+                © 2024 SaaSPro Inc. All rights reserved.
+              </div>
+            </div>
+          </footer>
+        }
+        LinkComponent={MockLink}
+      />
+    )
+  },
+}