ui-lab-registry 0.3.45 → 0.3.47

package/src/sections/CTA/variations/02-split/index.tsx

@@ -1,90 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Button } from 'ui-lab-components';
-import { CheckCircle2 } from 'lucide-react';
-
-export function SplitCTA() {
-  const features = [
-    'Instant setup and configuration',
-    'Real-time analytics and reporting',
-    'Dedicated customer support',
-    'Enterprise-grade security',
-  ];
-
-  return (
-    <section className="w-full py-16 px-4 md:py-24">
-      <div className="mx-auto max-w-6xl">
-        <div className="grid gap-8 md:gap-12 md:grid-cols-2 items-center">
-          {/* Left content */}
-          <div className="order-2 md:order-1">
-            <div className="mb-4 inline-block rounded-full bg-accent-500/10 px-4 py-1.5">
-              <span className="text-sm font-medium text-accent-600">Limited Time Offer</span>
-            </div>
-
-            <h2 className="mb-4 text-3xl font-bold text-foreground-400 md:text-4xl">
-              Get 50% off for the first 3 months
-            </h2>
-            <p className="mb-8 text-lg text-foreground-400">
-              Upgrade your workflow and unlock powerful features that will transform how your team collaborates.
-            </p>
-
-            <ul className="mb-8 space-y-3">
-              {features.map((feature, index) => (
-                <li key={index} className="flex items-center gap-3">
-                  <CheckCircle2 className="h-5 w-5 flex-shrink-0 text-accent-500" />
-                  <span className="text-foreground-400">{feature}</span>
-                </li>
-              ))}
-            </ul>
-
-            <div className="flex flex-col gap-3 sm:flex-row">
-              <Button size="lg" className="w-full sm:w-auto">
-                Claim Offer
-              </Button>
-              <Button variant="outline" size="lg" className="w-full sm:w-auto">
-                Learn More
-              </Button>
-            </div>
-
-            <p className="mt-6 text-sm text-foreground-400">
-              No credit card needed. Cancel anytime.
-            </p>
-          </div>
-
-          {/* Right visual */}
-          <div className="order-1 md:order-2">
-            <div className="relative">
-              {/* Decorative background */}
-              <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-background-800 to-background-900" />
-              <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-accent-500/20 to-accent-600/20" />
-
-              {/* Content */}
-              <div className="relative rounded-2xl border border-background-700 bg-background-900/50 p-8 backdrop-blur-sm">
-                <div className="space-y-4">
-                  <div className="h-3 w-24 rounded-full bg-background-700" />
-                  <div className="h-3 w-32 rounded-full bg-background-700" />
-                  <div className="mt-6 h-32 rounded-md bg-gradient-to-br from-accent-500/30 to-accent-600/30" />
-                  <div className="grid grid-cols-3 gap-4 pt-4">
-                    {[1, 2, 3].map((i) => (
-                      <div key={i} className="rounded bg-background-700 p-3 text-center">
-                        <div className="text-lg font-bold text-accent-500">42K</div>
-                        <div className="text-sm text-foreground-400">Active Users</div>
-                      </div>
-                    ))}
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Split CTA',
-  description: 'Two-column layout with promotional content on left and visual mockup on right',
-  demoPath: 'cta-split',
-};

package/src/sections/CTA/variations/index.ts

@@ -1,7 +0,0 @@
-export { BannerCTA } from './01-banner/index.js';
-export { SplitCTA } from './02-split/index.js';
-
-export const DEMO_MAP = {
-  'cta-banner': { key: '01-banner', export: 'BannerCTA' },
-  'cta-split': { key: '02-split', export: 'SplitCTA' },
-} as const;

package/src/sections/Features/variations/01-grid/index.tsx

@@ -1,91 +0,0 @@
-'use client';
-
-import React from 'react';
-import {
-  Zap,
-  Shield,
-  Gauge,
-  Users,
-  Clock,
-  TrendingUp
-} from 'lucide-react';
-
-const features = [
-  {
-    icon: Zap,
-    name: 'Lightning Fast',
-    description: 'Optimized performance with sub-100ms response times',
-  },
-  {
-    icon: Shield,
-    name: 'Secure by Default',
-    description: 'Enterprise-grade encryption and security protocols',
-  },
-  {
-    icon: Gauge,
-    name: 'Highly Scalable',
-    description: 'Handles millions of requests without breaking a sweat',
-  },
-  {
-    icon: Users,
-    name: 'Team Friendly',
-    description: 'Built for collaboration with real-time synchronization',
-  },
-  {
-    icon: Clock,
-    name: '24/7 Support',
-    description: 'Round-the-clock customer support and monitoring',
-  },
-  {
-    icon: TrendingUp,
-    name: 'Grow Your Business',
-    description: 'Built-in analytics to track growth and optimize performance',
-  },
-];
-
-export function GridFeatures() {
-  return (
-    <section className="w-full py-16 px-4 md:py-24">
-      <div className="mx-auto max-w-6xl">
-        {/* Header */}
-        <div className="mb-12 text-center md:mb-16">
-          <h2 className="mb-4 text-3xl font-bold text-foreground-400 md:text-4xl">
-            Powerful features for modern teams
-          </h2>
-          <p className="mx-auto max-w-2xl text-lg text-foreground-400">
-            Everything you need to build, deploy, and scale your applications with confidence
-          </p>
-        </div>
-
-        {/* Features Grid */}
-        <div className="grid gap-8 md:grid-cols-3">
-          {features.map((feature, index) => {
-            const Icon = feature.icon;
-            return (
-              <div
-                key={index}
-                className="group rounded-md border border-background-700 bg-background-900/50 p-6 backdrop-blur-sm transition-all hover:border-accent-500/50 hover:bg-background-900"
-              >
-                <div className="mb-4 inline-flex rounded-md bg-accent-500/10 p-3">
-                  <Icon className="h-6 w-6 text-accent-500" />
-                </div>
-                <h3 className="mb-2 text-lg font-semibold text-foreground-400">
-                  {feature.name}
-                </h3>
-                <p className="text-foreground-400">
-                  {feature.description}
-                </p>
-              </div>
-            );
-          })}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Grid Features',
-  description: '3-column grid layout showcasing key features with icons',
-  demoPath: 'features-grid',
-};

package/src/sections/Features/variations/02-list/index.tsx

@@ -1,124 +0,0 @@
-'use client';
-
-import React from 'react';
-import { CheckCircle2 } from 'lucide-react';
-
-const featureBlocks = [
-  {
-    id: 1,
-    title: 'Advanced Analytics',
-    description: 'Gain deep insights into your data with powerful visualization tools and custom reports',
-    benefits: [
-      'Real-time dashboards',
-      'Custom report builder',
-      'Data export in multiple formats',
-      'Predictive analytics',
-    ],
-    image: 'analytics',
-  },
-  {
-    id: 2,
-    title: 'Seamless Integration',
-    description: 'Connect with your favorite tools and services in minutes without any coding',
-    benefits: [
-      'Pre-built integrations',
-      'REST API access',
-      'Webhook support',
-      'Custom API clients',
-    ],
-    image: 'integration',
-  },
-  {
-    id: 3,
-    title: 'Smart Automation',
-    description: 'Automate repetitive tasks and workflows to save time and reduce human error',
-    benefits: [
-      'Visual workflow builder',
-      'Conditional logic',
-      'Scheduled execution',
-      'Error handling',
-    ],
-    image: 'automation',
-  },
-];
-
-export function FeatureList() {
-  return (
-    <section className="w-full py-16 px-4 md:py-24">
-      <div className="mx-auto max-w-6xl">
-        {/* Section Header */}
-        <div className="mb-16 text-center">
-          <h2 className="mb-4 text-3xl font-bold text-foreground-400 md:text-4xl">
-            Designed for your success
-          </h2>
-          <p className="mx-auto max-w-2xl text-lg text-foreground-400">
-            Comprehensive features to help you achieve your goals faster
-          </p>
-        </div>
-
-        {/* Feature Blocks */}
-        <div className="space-y-16 md:space-y-24">
-          {featureBlocks.map((block, index) => (
-            <div
-              key={block.id}
-              className="grid gap-8 md:gap-12 md:grid-cols-2 items-center"
-            >
-              {/* Content - alternate sides */}
-              <div className={index % 2 === 1 ? 'md:order-2' : ''}>
-                <h3 className="mb-4 text-2xl font-bold text-foreground-400 md:text-3xl">
-                  {block.title}
-                </h3>
-                <p className="mb-6 text-lg text-foreground-400">
-                  {block.description}
-                </p>
-
-                <ul className="space-y-3">
-                  {block.benefits.map((benefit, i) => (
-                    <li key={i} className="flex items-center gap-3">
-                      <CheckCircle2 className="h-5 w-5 flex-shrink-0 text-accent-500" />
-                      <span className="text-foreground-400">{benefit}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-
-              {/* Visual - alternate sides */}
-              <div className={index % 2 === 1 ? 'md:order-1' : ''}>
-                <div className="relative">
-                  {/* Decorative background */}
-                  <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-background-800 to-background-900" />
-                  <div className={`absolute inset-0 rounded-2xl bg-gradient-to-tr ${
-                    index === 0 ? 'from-accent-500/20 to-accent-600/20' :
-                    index === 1 ? 'from-blue-500/20 to-blue-600/20' :
-                    'from-purple-500/20 to-purple-600/20'
-                  }`} />
-
-                  {/* Content */}
-                  <div className="relative rounded-2xl border border-background-700 bg-background-900/50 p-8 backdrop-blur-sm overflow-hidden">
-                    {/* Placeholder visual */}
-                    <div className="space-y-4">
-                      <div className="h-4 w-16 rounded-full bg-background-700" />
-                      <div className="h-4 w-20 rounded-full bg-background-700" />
-                      <div className="mt-6 h-40 rounded-md bg-gradient-to-br from-foreground-200/20 to-foreground-100/10" />
-                      <div className="grid grid-cols-3 gap-2 pt-4">
-                        {[1, 2, 3].map((i) => (
-                          <div key={i} className="h-12 rounded bg-background-700" />
-                        ))}
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Feature List',
-  description: 'Alternating left-right layout showcasing detailed features with benefits',
-  demoPath: 'features-list',
-};

package/src/sections/Features/variations/index.ts

@@ -1,7 +0,0 @@
-export { GridFeatures } from './01-grid/index.js';
-export { FeatureList } from './02-list/index.js';
-
-export const DEMO_MAP = {
-  'features-grid': { key: '01-grid', export: 'GridFeatures' },
-  'features-list': { key: '02-list', export: 'FeatureList' },
-} as const;

package/src/sections/Hero/variations/01-simple/index.tsx

@@ -1,46 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Button } from 'ui-lab-components';
-
-export function SimpleHero() {
-  return (
-    <section className="w-full min-h-screen bg-gradient-to-br from-background-900 via-background-950 to-background-900 flex items-center justify-center px-4 py-20">
-      <div className="max-w-4xl mx-auto text-center space-y-8">
-        <div className="space-y-4">
-          <h1 className="text-5xl md:text-6xl font-bold text-foreground-50 leading-tight">
-            Beautiful Design Systems
-          </h1>
-          <p className="text-xl text-foreground-300 max-w-2xl mx-auto leading-relaxed">
-            Build modern interfaces with reusable components and consistent design patterns. Everything you need to create exceptional user experiences.
-          </p>
-        </div>
-
-        <div className="flex flex-wrap gap-4 justify-center pt-4">
-          <Button variant="default" size="lg">
-            Get Started
-          </Button>
-          <Button variant="outline" size="lg">
-            Learn More
-          </Button>
-        </div>
-
-        <div className="pt-12 border-t border-background-700">
-          <p className="text-sm text-foreground-400 mb-6">Trusted by leading companies</p>
-          <div className="flex justify-center items-center gap-8 flex-wrap">
-            <div className="h-8 w-24 bg-background-700 rounded opacity-40" />
-            <div className="h-8 w-24 bg-background-700 rounded opacity-40" />
-            <div className="h-8 w-24 bg-background-700 rounded opacity-40" />
-            <div className="h-8 w-24 bg-background-700 rounded opacity-40" />
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Simple Hero',
-  description: 'Clean hero section with headline, subheading, and dual CTA buttons',
-  demoPath: 'hero-simple',
-};

package/src/sections/Hero/variations/02-with-cta/index.tsx

@@ -1,74 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Button } from 'ui-lab-components';
-
-export function HeroWithCTA() {
-  return (
-    <section className="w-full min-h-screen bg-background-950 flex items-center justify-center px-4 py-20">
-      <div className="max-w-6xl mx-auto w-full">
-        <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-center">
-          <div className="space-y-8 order-2 lg:order-1">
-            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-background-700 bg-background-900">
-              <span className="w-2 h-2 rounded-full bg-accent-500" />
-              <span className="text-sm text-foreground-400">Now Available</span>
-            </div>
-
-            <div className="space-y-4">
-              <h1 className="text-5xl lg:text-6xl font-bold text-foreground-50 leading-tight">
-                Accelerate Your Development
-              </h1>
-              <p className="text-lg text-foreground-300 leading-relaxed">
-                Comprehensive component library with production-ready code, extensive documentation, and accessibility best practices built in.
-              </p>
-            </div>
-
-            <ul className="space-y-3">
-              {['50+ UI Components', 'TypeScript Support', 'Fully Customizable'].map(feature => (
-                <li key={feature} className="flex items-center gap-3">
-                  <div className="w-5 h-5 rounded-full bg-accent-500/20 flex items-center justify-center">
-                    <div className="w-2 h-2 rounded-full bg-accent-400" />
-                  </div>
-                  <span className="text-foreground-300">{feature}</span>
-                </li>
-              ))}
-            </ul>
-
-            <div className="flex flex-wrap gap-4 pt-4">
-              <Button variant="default" size="lg">
-                Start Building
-              </Button>
-              <Button variant="outline" size="lg">
-                View Docs
-              </Button>
-            </div>
-          </div>
-
-          <div className="order-1 lg:order-2">
-            <div className="relative">
-              <div className="absolute inset-0 bg-gradient-to-br from-accent-500/10 to-accent-600/10 rounded-xl blur-3xl" />
-              <div className="relative bg-gradient-to-br from-background-900 to-background-800 rounded-xl p-8 border border-background-700 shadow-xl">
-                <div className="space-y-3">
-                  <div className="h-12 bg-background-700/50 rounded" />
-                  <div className="h-8 bg-background-700/30 rounded w-3/4" />
-                  <div className="h-8 bg-background-700/30 rounded w-2/3" />
-                </div>
-                <div className="mt-8 space-y-2">
-                  {[...Array(5)].map((_, i) => (
-                    <div key={i} className="h-3 bg-background-700/20 rounded" />
-                  ))}
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Hero with CTA',
-  description: 'Alternating layout with feature highlights and visual mockup representation',
-  demoPath: 'hero-with-cta',
-};

package/src/sections/Hero/variations/03-with-stats/index.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Button } from 'ui-lab-components';
-
-export function HeroWithStats() {
-  const stats = [
-    { label: 'Projects Completed', value: '500+' },
-    { label: 'Happy Clients', value: '1000+' },
-    { label: 'Team Members', value: '50+' },
-    { label: 'Years in Business', value: '10+' },
-  ];
-
-  return (
-    <section className="w-full min-h-screen bg-background-950 flex items-center justify-center px-4 py-20">
-      <div className="max-w-6xl mx-auto w-full">
-        <div className="text-center space-y-12">
-          <div className="space-y-6">
-            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-background-700 bg-background-900">
-              <span className="w-2 h-2 rounded-full bg-accent-500" />
-              <span className="text-sm text-foreground-400">Proven Track Record</span>
-            </div>
-
-            <div className="space-y-4">
-              <h1 className="text-5xl lg:text-6xl font-bold text-foreground-50 leading-tight">
-                Trusted by Industry Leaders
-              </h1>
-              <p className="text-lg text-foreground-300 max-w-2xl mx-auto leading-relaxed">
-                Our proven expertise and track record speak for themselves. Join hundreds of satisfied clients who've transformed their businesses with our solutions.
-              </p>
-            </div>
-
-            <div className="flex flex-wrap gap-4 justify-center pt-4">
-              <Button variant="default" size="lg">
-                Get Started Today
-              </Button>
-              <Button variant="outline" size="lg">
-                View Case Studies
-              </Button>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-6 pt-12 border-t border-background-700">
-            {stats.map((stat) => (
-              <div key={stat.label} className="space-y-2">
-                <div className="text-3xl lg:text-4xl font-bold text-accent-500">
-                  {stat.value}
-                </div>
-                <p className="text-sm text-foreground-400">{stat.label}</p>
-              </div>
-            ))}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Hero with Stats',
-  description: 'Hero section with statistics and metrics showcasing company achievements and credibility',
-  demoPath: 'hero-with-stats',
-};

package/src/sections/Hero/variations/04-with-features/index.tsx

@@ -1,87 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Button } from 'ui-lab-components';
-import { Zap, Shield, Rocket, Layers } from 'lucide-react';
-
-export function HeroWithFeatures() {
-  const features = [
-    {
-      icon: Zap,
-      title: 'Lightning Fast',
-      description: 'Optimized performance for blazing fast load times and smooth interactions.',
-    },
-    {
-      icon: Shield,
-      title: 'Secure by Default',
-      description: 'Enterprise-grade security with built-in protection and compliance standards.',
-    },
-    {
-      icon: Rocket,
-      title: 'Production Ready',
-      description: 'Battle-tested code ready for immediate deployment to production.',
-    },
-    {
-      icon: Layers,
-      title: 'Fully Customizable',
-      description: 'Extensive configuration options to match your unique brand and requirements.',
-    },
-  ];
-
-  return (
-    <section className="w-full bg-background-950 px-4 py-20">
-      <div className="max-w-6xl mx-auto w-full">
-        <div className="space-y-12">
-          <div className="text-center space-y-6">
-            <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full border border-background-700 bg-background-900">
-              <span className="w-2 h-2 rounded-full bg-accent-500" />
-              <span className="text-sm text-foreground-400">Powerful Features</span>
-            </div>
-
-            <div className="space-y-4">
-              <h1 className="text-5xl lg:text-6xl font-bold text-foreground-50 leading-tight">
-                Everything You Need to Succeed
-              </h1>
-              <p className="text-lg text-foreground-300 max-w-2xl mx-auto leading-relaxed">
-                Comprehensive toolkit with all the features you need to build amazing applications quickly and efficiently.
-              </p>
-            </div>
-
-            <div className="flex flex-wrap gap-4 justify-center pt-4">
-              <Button variant="default" size="lg">
-                Start Building
-              </Button>
-              <Button variant="outline" size="lg">
-                View Documentation
-              </Button>
-            </div>
-          </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-12">
-            {features.map((feature) => {
-              const IconComponent = feature.icon;
-              return (
-                <div
-                  key={feature.title}
-                  className="p-6 rounded-xl border border-background-700 bg-gradient-to-br from-background-900/50 to-background-950 hover:border-accent-500/30 transition-colors group"
-                >
-                  <div className="mb-4 inline-flex p-3 rounded-md bg-accent-500/10 group-hover:bg-accent-500/20 transition-colors">
-                    <IconComponent className="w-6 h-6 text-accent-500" />
-                  </div>
-                  <h3 className="text-lg font-semibold text-foreground-50 mb-2">{feature.title}</h3>
-                  <p className="text-sm text-foreground-400">{feature.description}</p>
-                </div>
-              );
-            })}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Hero with Features',
-  description: 'Hero section with feature cards showcasing key benefits and capabilities',
-  demoPath: 'hero-with-features',
-};

package/src/sections/Hero/variations/index.ts

@@ -1,11 +0,0 @@
-export { SimpleHero } from './01-simple/index.js';
-export { HeroWithCTA } from './02-with-cta/index.js';
-export { HeroWithStats } from './03-with-stats/index.js';
-export { HeroWithFeatures } from './04-with-features/index.js';
-
-export const DEMO_MAP = {
-  'hero-simple': { key: '01-simple', export: 'SimpleHero' },
-  'hero-with-cta': { key: '02-with-cta', export: 'HeroWithCTA' },
-  'hero-with-stats': { key: '03-with-stats', export: 'HeroWithStats' },
-  'hero-with-features': { key: '04-with-features', export: 'HeroWithFeatures' },
-} as const;