From 9d0b6ca0e549dc215a4d6fb217869f9563e54de6 Mon Sep 17 00:00:00 2001 From: otdoges Date: Mon, 7 Jul 2025 17:39:20 -0500 Subject: [PATCH 1/4] Update dependencies and enhance UI components: Add 'bun' and 'dev' packages to package.json and bun.lock, and introduce new components (PublicPlayground, ExampleGallery, CompetitiveEdge) to the main page. Revise Hero component text for clarity and improve button actions for better user engagement. --- app/page.tsx | 6 + bun.lock | 36 +++ components/competitive-edge.tsx | 299 +++++++++++++++++++++ components/example-gallery.tsx | 436 +++++++++++++++++++++++++++++++ components/hero.tsx | 16 +- components/public-playground.tsx | 261 ++++++++++++++++++ package.json | 2 + 7 files changed, 1048 insertions(+), 8 deletions(-) create mode 100644 components/competitive-edge.tsx create mode 100644 components/example-gallery.tsx create mode 100644 components/public-playground.tsx diff --git a/app/page.tsx b/app/page.tsx index b380348b..8011b936 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -7,6 +7,9 @@ import { useEffect, useState } from 'react'; import Hero from '@/components/hero'; import FinalCTA from '@/components/final-cta'; import Pricing from '@/components/pricing'; +import PublicPlayground from '@/components/public-playground'; +import ExampleGallery from '@/components/example-gallery'; +import CompetitiveEdge from '@/components/competitive-edge'; import { useSupabase } from '@/components/SupabaseProvider'; const FeaturesShowcase = dynamic(() => import('@/components/features-showcase'), { @@ -251,6 +254,9 @@ export default function Home() { {/* Main content */}
+ + + diff --git a/bun.lock b/bun.lock index a7f1d6f3..99f3c371 100644 --- a/bun.lock +++ b/bun.lock @@ -45,11 +45,13 @@ "@vercel/analytics": "^1.5.0", "@webcontainer/api": "^1.6.1", "ai": "^4.3.16", + "bun": "^1.2.18", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "1.0.4", "convex": "^1.25.0", "date-fns": "3.6.0", + "dev": "^0.1.3", "dotenv": "^16.6.0", "embla-carousel-react": "8.5.1", "framer-motion": "latest", @@ -316,6 +318,28 @@ "@opentelemetry/api": ["@opentelemetry/api@1.9.0", "", {}, "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="], + "@oven/bun-darwin-aarch64": ["@oven/bun-darwin-aarch64@1.2.18", "", { "os": "darwin", "cpu": "arm64" }, "sha512-GNxVh9VUOQ6S0aDp4Qe80MGadGbh8BS6p3jEHXIboRoTrb/80oR0csMjGUpdwGa2hX1zTvpPBwOFXvVP9UaB0Q=="], + + "@oven/bun-darwin-x64": ["@oven/bun-darwin-x64@1.2.18", "", { "os": "darwin", "cpu": "x64" }, "sha512-/oxsG7eIkvw3rxt3V9gqY23i0ajk8m1cG/FedRj8b15GW2TgA+F9F6FQNLqxc/59SBkcrbTLoqk5EtAQwuwi/w=="], + + "@oven/bun-darwin-x64-baseline": ["@oven/bun-darwin-x64-baseline@1.2.18", "", { "os": "darwin", "cpu": "x64" }, "sha512-LT/MF4DySLjskZf4mUgVXhpDBCuGXI7+uHJTiAjinddglh7ENbrSRuM01cjlJ/dxivvekq5+w6k9gdYpHUibuw=="], + + "@oven/bun-linux-aarch64": ["@oven/bun-linux-aarch64@1.2.18", "", { "os": "linux", "cpu": "arm64" }, "sha512-0uTiUZJFS69LbYPCw963BAdP4wvUXEozbNf7vrB/3rT82x+fPZKF3C+4nfFScm+6UYusjH468vG7/g9x38jBIg=="], + + "@oven/bun-linux-aarch64-musl": ["@oven/bun-linux-aarch64-musl@1.2.18", "", { "os": "linux", "cpu": "none" }, "sha512-hk58uY6LSvDn2WDB8o/WAVCOZERYZPShUujI8rCwcDXkQRI4pbm5B5RJP5wEF0fClRI+WXxyyoBFsTKb7lbgyQ=="], + + "@oven/bun-linux-x64": ["@oven/bun-linux-x64@1.2.18", "", { "os": "linux", "cpu": "x64" }, "sha512-okHdy9+Yov5BvI19FynnvsmQUP477SNJRv33TIHxs9cpj/ClgaYXMihS+yH0LCzYDFIeojfABiIHdBVUFmxqtQ=="], + + "@oven/bun-linux-x64-baseline": ["@oven/bun-linux-x64-baseline@1.2.18", "", { "os": "linux", "cpu": "x64" }, "sha512-ERnR7gZz/YYpo/ZhRKXvY9qtsJNQnTrp5HayExfvD1achoHcYEvf3TarajRLVC7gDi7BxlaOPZyJjgdo5g0tUg=="], + + "@oven/bun-linux-x64-musl": ["@oven/bun-linux-x64-musl@1.2.18", "", { "os": "linux", "cpu": "x64" }, "sha512-Oqj8yDkObDWMlxzbhOefb+B75tgKEP4uGEFcBHXjVxSEL0lB7B7LYTvTpeDm8QPldhLs1xAN4FtzZlPUn6qI+Q=="], + + "@oven/bun-linux-x64-musl-baseline": ["@oven/bun-linux-x64-musl-baseline@1.2.18", "", { "os": "linux", "cpu": "x64" }, "sha512-u4sqExX5gdcMRdwzL16qP/xJlnxVR+fF43GGQJNopOTXDrsK33BXw3aUObHRtVkqRiK3cyubJUgTtz2ykQ4Dng=="], + + "@oven/bun-windows-x64": ["@oven/bun-windows-x64@1.2.18", "", { "os": "win32", "cpu": "x64" }, "sha512-jklsKWT9zfh8wXewKPfO7Uq8vo72esaQoGzCTTt0NKY+juXvyKaiMHEfT7v4o7cmrql3QPeVtsbp9uNAiuotgw=="], + + "@oven/bun-windows-x64-baseline": ["@oven/bun-windows-x64-baseline@1.2.18", "", { "os": "win32", "cpu": "x64" }, "sha512-n5XF3N0Kr53z4NnVWfTqS72U2rSHJlFafO70SOSzgiu26ylKTGOC9BBsvEQhKld4nKAsbp8YjpOViomrtC6bCQ=="], + "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="], "@polar-sh/adapter-utils": ["@polar-sh/adapter-utils@0.2.1", "", { "dependencies": { "@polar-sh/sdk": "^0.34.2" } }, "sha512-qcfTi6es9j4DRodYoPN1w5OHlVIjmPuTwV8CF1B09ghwI3gkI0s2wyCK0anTafcOSK5/astCTCbvUbgtRdw6yg=="], @@ -608,6 +632,8 @@ "binary-extensions": ["binary-extensions@2.3.0", "", {}, "sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw=="], + "bindings": ["bindings@1.5.0", "", { "dependencies": { "file-uri-to-path": "1.0.0" } }, "sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ=="], + "boolbase": ["boolbase@1.0.0", "", {}, "sha512-JZOSA7Mo9sNGB8+UjSgzdLtokWAky1zbztM3WRLCbZ70/3cTANmQmOdR7y2g+J0e2WXywy1yS468tY+IruqEww=="], "brace-expansion": ["brace-expansion@2.0.1", "", { "dependencies": { "balanced-match": "^1.0.0" } }, "sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA=="], @@ -616,6 +642,8 @@ "browserslist": ["browserslist@4.25.1", "", { "dependencies": { "caniuse-lite": "^1.0.30001726", "electron-to-chromium": "^1.5.173", "node-releases": "^2.0.19", "update-browserslist-db": "^1.1.3" }, "bin": { "browserslist": "cli.js" } }, "sha512-KGj0KoOMXLpSNkkEI6Z6mShmQy0bc1I+T7K9N81k4WWMrfz+6fQ6es80B/YLAeRoKvjYE1YSHHOW1qe9xIVzHw=="], + "bun": ["bun@1.2.18", "", { "optionalDependencies": { "@oven/bun-darwin-aarch64": "1.2.18", "@oven/bun-darwin-x64": "1.2.18", "@oven/bun-darwin-x64-baseline": "1.2.18", "@oven/bun-linux-aarch64": "1.2.18", "@oven/bun-linux-aarch64-musl": "1.2.18", "@oven/bun-linux-x64": "1.2.18", "@oven/bun-linux-x64-baseline": "1.2.18", "@oven/bun-linux-x64-musl": "1.2.18", "@oven/bun-linux-x64-musl-baseline": "1.2.18", "@oven/bun-windows-x64": "1.2.18", "@oven/bun-windows-x64-baseline": "1.2.18" }, "os": [ "linux", "win32", "darwin", ], "cpu": [ "x64", "arm64", ], "bin": { "bun": "bin/bun.exe", "bunx": "bin/bunx.exe" } }, "sha512-OR+EpNckoJN4tHMVZPaTPxDj2RgpJgJwLruTIFYbO3bQMguLd0YrmkWKYqsiihcLgm2ehIjF/H1RLfZiRa7+qQ=="], + "busboy": ["busboy@1.6.0", "", { "dependencies": { "streamsearch": "^1.1.0" } }, "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA=="], "cac": ["cac@6.7.14", "", {}, "sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ=="], @@ -726,6 +754,8 @@ "detect-node-es": ["detect-node-es@1.1.0", "", {}, "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ=="], + "dev": ["dev@0.1.3", "", { "dependencies": { "inotify": ">= 0.1.6" }, "bin": { "node-dev": "./node-dev.sh" } }, "sha512-flCHQwAkXk3+1up/wo93Ms9E5Wf9K28ZGA7Oz55nBZ8OTdPPhyvZrwsT+twtySTFHIwv0w9CUNtagZgu1MgzXQ=="], + "didyoumean": ["didyoumean@1.2.2", "", {}, "sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw=="], "diff-match-patch": ["diff-match-patch@1.0.5", "", {}, "sha512-IayShXAgj/QMXgB0IWmKx+rOPuGMhqm5w6jvFxmVenXKIzRqTAAsbBPT3kWQeGANj3jGgvcvv4yK6SxqYmikgw=="], @@ -798,6 +828,8 @@ "fflate": ["fflate@0.4.8", "", {}, "sha512-FJqqoDBR00Mdj9ppamLa/Y7vxm+PRmNWA67N846RvsoYVMKB4q3y/de5PA7gUmRMYK/8CMz2GDZQmCRN1wBcWA=="], + "file-uri-to-path": ["file-uri-to-path@1.0.0", "", {}, "sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw=="], + "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="], "follow-redirects": ["follow-redirects@1.15.9", "", {}, "sha512-gew4GsXizNgdoRyqmyfMHyAmXsZDk6mHkSxZFCzW9gwlbtOW44CDtYavM+y+72qD/Vq2l550kMF52DT8fOLJqQ=="], @@ -852,6 +884,8 @@ "indent-string": ["indent-string@4.0.0", "", {}, "sha512-EdDDZu4A2OyIK7Lr/2zG+w5jmbuk1DVBnEwREQvBzspBJkCEbRa8GxU1lghYcaGJCnRWibjDXlq779X1/y5xwg=="], + "inotify": ["inotify@1.4.6", "", { "dependencies": { "bindings": "^1.3.1", "nan": "^2.12.1" }, "os": "linux" }, "sha512-WW8/uqIA04O3AePQVe/Ms3ZLR0yGamaz8YOEpaXc4WBAGOPZfzu58wWErEPSUYaPyDrJRIeCn6PEIQgC1ZyQ5w=="], + "input-otp": ["input-otp@1.4.1", "", { "peerDependencies": { "react": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-+yvpmKYKHi9jIGngxagY9oWiiblPB7+nEO75F2l2o4vs+6vpPZZmUl4tBNYuTCvQjhvEIbdNeJu70bhfYP2nbw=="], "internmap": ["internmap@2.0.3", "", {}, "sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg=="], @@ -946,6 +980,8 @@ "mz": ["mz@2.7.0", "", { "dependencies": { "any-promise": "^1.0.0", "object-assign": "^4.0.1", "thenify-all": "^1.0.0" } }, "sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q=="], + "nan": ["nan@2.22.2", "", {}, "sha512-DANghxFkS1plDdRsX0X9pm0Z6SJNN6gBdtXfanwoZ8hooC5gosGFSBGRYHUVPz1asKA/kMRqDRdHrluZ61SpBQ=="], + "nanoid": ["nanoid@3.3.11", "", { "bin": { "nanoid": "bin/nanoid.cjs" } }, "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w=="], "next": ["next@15.3.4", "", { "dependencies": { "@next/env": "15.3.4", "@swc/counter": "0.1.3", "@swc/helpers": "0.5.15", "busboy": "1.6.0", "caniuse-lite": "^1.0.30001579", "postcss": "8.4.31", "styled-jsx": "5.1.6" }, "optionalDependencies": { "@next/swc-darwin-arm64": "15.3.4", "@next/swc-darwin-x64": "15.3.4", "@next/swc-linux-arm64-gnu": "15.3.4", "@next/swc-linux-arm64-musl": "15.3.4", "@next/swc-linux-x64-gnu": "15.3.4", "@next/swc-linux-x64-musl": "15.3.4", "@next/swc-win32-arm64-msvc": "15.3.4", "@next/swc-win32-x64-msvc": "15.3.4", "sharp": "^0.34.1" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0", "@playwright/test": "^1.41.2", "babel-plugin-react-compiler": "*", "react": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "react-dom": "^18.2.0 || 19.0.0-rc-de68d2f4-20241204 || ^19.0.0", "sass": "^1.3.0" }, "optionalPeers": ["@opentelemetry/api", "@playwright/test", "babel-plugin-react-compiler", "sass"], "bin": { "next": "dist/bin/next" } }, "sha512-mHKd50C+mCjam/gcnwqL1T1vPx/XQNFlXqFIVdgQdVAFY9iIQtY0IfaVflEYzKiqjeA7B0cYYMaCrmAYFjs4rA=="], diff --git a/components/competitive-edge.tsx b/components/competitive-edge.tsx new file mode 100644 index 00000000..bad74641 --- /dev/null +++ b/components/competitive-edge.tsx @@ -0,0 +1,299 @@ +'use client'; + +import { motion } from 'framer-motion'; +import { useRouter } from 'next/navigation'; +import { Button } from './ui/button'; + +interface ComparisonFeature { + feature: string; + zapdev: string; + others: string; + zapdevIcon: string; + othersIcon: string; +} + +const comparisonFeatures: ComparisonFeature[] = [ + { + feature: "Design System Freedom", + zapdev: "Pure Tailwind/React - your code, your style", + others: "Locked into proprietary design systems", + zapdevIcon: "🎨", + othersIcon: "πŸ”’" + }, + { + feature: "Code Ownership", + zapdev: "Export clean, readable code you actually own", + others: "Vendor lock-in with platform dependencies", + zapdevIcon: "πŸ’Ž", + othersIcon: "⛓️" + }, + { + feature: "Development Environment", + zapdev: "Full WebContainer with live preview & terminal", + others: "Limited preview environments", + zapdevIcon: "πŸš€", + othersIcon: "πŸ‘€" + }, + { + feature: "AI Team Approach", + zapdev: "Specialized AI agents (Architect, Frontend, DevOps)", + others: "Single AI model for everything", + zapdevIcon: "πŸ‘₯", + othersIcon: "πŸ€–" + }, + { + feature: "Production Ready", + zapdev: "Production-grade code with best practices", + others: "Prototype-quality code needing refactoring", + zapdevIcon: "⚑", + othersIcon: "πŸ› οΈ" + } +]; + +const differentiators = [ + { + icon: "🎯", + title: "No Vendor Lock-in", + description: "Unlike v0 or Lovable, your code is completely portable. Pure React + Tailwind that works anywhere." + }, + { + icon: "πŸš€", + title: "Full Development Stack", + description: "Not just UI generation - complete development environment with WebContainers, terminals, and live preview." + }, + { + icon: "πŸ‘¨β€πŸ’»", + title: "AI Development Team", + description: "Multiple specialized AI agents working together, not just a single model trying to do everything." + }, + { + icon: "πŸ’Ž", + title: "Production Quality", + description: "Code you'd actually ship to production, with proper architecture, error handling, and best practices." + } +]; + +export default function CompetitiveEdge() { + const router = useRouter(); + + return ( +
+
+ {/* Header */} + +

+ Why Choose ZapDev? +

+

+ We're not just another AI UI builder. Here's what makes ZapDev fundamentally different + from tools like v0, Lovable, and other platforms. +

+ + + {/* Key Differentiators */} + + {differentiators.map((item, index) => ( + +
{item.icon}
+

{item.title}

+

{item.description}

+ + ))} + + + {/* Detailed Comparison */} + +
+

ZapDev vs. The Competition

+

See how we stack up against other AI UI builders

+
+ +
+ + + + + + + + + + {comparisonFeatures.map((feature, index) => ( + + + + + + ))} + +
FeatureZapDevOthers (v0, Lovable, etc.)
+
{feature.feature}
+ 		+
+ {feature.zapdevIcon} + {feature.zapdev} +
+ 		+
+ {feature.othersIcon} + {feature.others} +
+
+
+ + + {/* Code Freedom Section */} + +
+

+ Your Code, Your Freedom +

+
+
+ βœ“ +
+

Pure React + Tailwind CSS

+

No proprietary components or design systems

+
+
+
+ βœ“ +
+

Export & Deploy Anywhere

+

Vercel, Netlify, your own servers - it just works

+
+
+
+ βœ“ +
+

Readable, Maintainable Code

+

Code your team can actually understand and modify

+
+
+
+ βœ“ +
+

No Monthly Hosting Fees

+

Build once, host anywhere, own forever

+
+
+
+ +
+ + +
+
+ +
+
+
+
+
+ components/Button.tsx +
+ 
+              {`// Clean, readable React + Tailwind
+export const Button = ({ 
+  children, 
+  variant = 'primary',
+  ...props 
+}) => {
+  const baseClasses = 'px-4 py-2 rounded-lg font-medium transition-all';
+  const variants = {
+    primary: 'bg-blue-600 hover:bg-blue-700 text-white',
+    secondary: 'bg-gray-200 hover:bg-gray-300 text-gray-900'
+  };
+
+  return (
+    
+  );
+};`}
+
+
+ + ↑ This is what ZapDev generates - clean, portable code + +
+
+ + + {/* Final CTA */} + +
+

+ Experience the ZapDev Difference +

+

+ Don't get locked into another platform. Build with freedom, deploy anywhere, + and own your code completely. +

+ +
+ +
+
+ ); +} \ No newline at end of file diff --git a/components/example-gallery.tsx b/components/example-gallery.tsx new file mode 100644 index 00000000..87283756 --- /dev/null +++ b/components/example-gallery.tsx @@ -0,0 +1,436 @@ +'use client'; + +import { useState } from 'react'; +import { motion, AnimatePresence } from 'framer-motion'; +import { Button } from './ui/button'; +import { useRouter } from 'next/navigation'; + +interface Example { + id: string; + category: string; + prompt: string; + description: string; + features: string[]; + preview: string; + code: string; + tags: string[]; +} + +const examples: Example[] = [ + { + id: 'saas-pricing', + category: 'SaaS', + prompt: 'A SaaS pricing page with testimonials', + description: 'Modern pricing page with three tiers, feature comparison, testimonials carousel, and FAQ section', + features: [ + 'Responsive 3-tier pricing layout', + 'Testimonials with star ratings', + 'Feature comparison table', + 'FAQ accordion section', + 'Gradient buttons with hover effects' + ], + preview: '🎯', + code: `// Complete pricing page with testimonials +const PricingPage = () => { + const plans = [ + { name: 'Starter', price: '$9', features: ['10 Projects', 'Basic Support'] }, + { name: 'Pro', price: '$29', features: ['100 Projects', 'Priority Support', 'Analytics'] }, + { name: 'Enterprise', price: '$99', features: ['Unlimited', '24/7 Support', 'Custom Integration'] } + ]; + + return ( +
+ + + + +
+ ); +};`, + tags: ['Pricing', 'SaaS', 'Testimonials', 'FAQ'] + }, + { + id: 'dashboard', + category: 'Dashboard', + prompt: 'A sleek analytics dashboard with charts', + description: 'Data-rich dashboard with interactive charts, KPI cards, sidebar navigation, and real-time metrics', + features: [ + 'Interactive chart components', + 'KPI metric cards with trends', + 'Responsive sidebar navigation', + 'Data table with sorting', + 'Real-time update indicators' + ], + preview: 'πŸ“Š', + code: `// Analytics dashboard with charts +const Dashboard = () => { + return ( +
+ +
+ +
+ + + + +
+ + +
+
+ ); +};`, + tags: ['Dashboard', 'Analytics', 'Charts', 'Admin'] + }, + { + id: 'ecommerce', + category: 'E-commerce', + prompt: 'An e-commerce product page with reviews', + description: 'Complete product page with image gallery, variant selection, reviews, and related products', + features: [ + 'Product image gallery with zoom', + 'Variant selection (size, color)', + 'Customer reviews with ratings', + 'Related products carousel', + 'Add to cart functionality' + ], + preview: 'πŸ›οΈ', + code: `// E-commerce product page +const ProductPage = ({ product }) => { + return ( +
+
+ +
+ + + +
+
+ + +
+ ); +};`, + tags: ['E-commerce', 'Product', 'Reviews', 'Shopping'] + }, + { + id: 'landing', + category: 'Landing Page', + prompt: 'A tech startup landing page with hero video', + description: 'Modern landing page with video hero, feature highlights, team section, and contact form', + features: [ + 'Hero section with video background', + 'Feature cards with icons', + 'Team member profiles', + 'Contact form with validation', + 'Newsletter signup' + ], + preview: 'πŸš€', + code: `// Tech startup landing page +const LandingPage = () => { + return ( +
+
+ + + + + +
+
+ ); +};`, + tags: ['Landing', 'Startup', 'Video', 'Contact'] + }, + { + id: 'blog', + category: 'Content', + prompt: 'A modern blog layout with categories', + description: 'Clean blog layout with article cards, category filters, search, and pagination', + features: [ + 'Article cards with featured images', + 'Category filtering system', + 'Search functionality', + 'Pagination controls', + 'Author profiles' + ], + preview: 'πŸ“', + code: `// Modern blog layout +const BlogPage = () => { + return ( +
+ +
+ +
+ + +
+
+
+ ); +};`, + tags: ['Blog', 'Content', 'Search', 'Categories'] + }, + { + id: 'portfolio', + category: 'Portfolio', + prompt: 'A creative portfolio with project showcases', + description: 'Designer portfolio with project gallery, skill showcase, contact form, and testimonials', + features: [ + 'Project gallery with filters', + 'Skill progress indicators', + 'Testimonials slider', + 'Contact form integration', + 'Smooth scroll animations' + ], + preview: '🎨', + code: `// Creative portfolio site +const Portfolio = () => { + return ( +
+ + + + + + + +
+ ); +};`, + tags: ['Portfolio', 'Creative', 'Gallery', 'Design'] + } +]; + +const categories = ['All', ...Array.from(new Set(examples.map(ex => ex.category)))]; + +export default function ExampleGallery() { + const [selectedCategory, setSelectedCategory] = useState('All'); + const [selectedExample, setSelectedExample] = useState(null); + const router = useRouter(); + + const filteredExamples = selectedCategory === 'All' + ? examples + : examples.filter(ex => ex.category === selectedCategory); + + return ( +
+
+ +

+ See What You Can Build +

+

+ Real examples of production-ready components generated from simple prompts. + Each example shows the prompt, generated UI, and clean React/Tailwind code. +

+ + {/* Category Filter */} +
+ {categories.map((category) => ( + + ))} +
+ + + {/* Examples Grid */} + + + {filteredExamples.map((example, index) => ( + setSelectedExample(example)} + > + {/* Preview */} +
+ {example.preview} +
+ + {/* Content */} +
+
+ + {example.category} + +
+ {example.tags.slice(0, 2).map((tag) => ( + + {tag} + + ))} +
+
+ +

+ "{example.prompt}" +

+ +

+ {example.description} +

+ +
+ + {example.features.length} features + + +
+
+ + ))} + + + + {/* Example Modal */} + + {selectedExample && ( + setSelectedExample(null)} + > + e.stopPropagation()} + > +
+
+

"{selectedExample.prompt}"

+ {selectedExample.category} +
+ +
+ +
+
+

Description

+

{selectedExample.description}

+
+ +
+

Key Features

+
    + {selectedExample.features.map((feature, index) => ( +
  • + βœ“ + {feature} +
    • + ))} +
+
+ +
+

Generated Code Preview

+
+ 
+                        {selectedExample.code}
+
+
+
+ +
+ + +
+
+ + + )} + + + {/* Bottom CTA */} + +
+

+ Ready to Build Your Own? +

+

+ Join thousands of developers who are building faster with ZapDev. + Turn your ideas into production-ready code in seconds. +

+
+ + +
+
+ +
+
+ ); +} \ No newline at end of file diff --git a/components/hero.tsx b/components/hero.tsx index 7d107ee4..2e6ef397 100644 --- a/components/hero.tsx +++ b/components/hero.tsx @@ -121,8 +121,8 @@ export default function Hero() { animate={{ opacity: 1 }} transition={{ duration: 1, delay: 0.3 }} > - ZapDev: Design with Feeling. -
Build with Speed. + ZapDev: Turn UI Prompts into +
Production-Grade Code - Describe your desired vibe, and let ZapDev's AI instantly craft stunning, responsive - websites in Svelte, Astro, and more. No-code simplicity, pro-dev power. + The fastest way to turn UI prompts into production-grade Tailwind/React codeβ€”without locking you into a design system. + Your code, your style, your freedom. @@ -167,7 +167,7 @@ export default function Hero() { className="group relative flex items-center gap-2 overflow-hidden rounded-full bg-gradient-to-r from-[#A0527C] to-[#6C52A0] px-10 py-6 text-lg font-medium text-white shadow-lg shadow-[#6C52A0]/20 hover:from-[#B0627C] hover:to-[#7C62B0]" onClick={() => router.push('/auth')} > - Sign Up Free + Get Full Access +
+

Choose Your Plan

+

Start free, scale as you grow

+
+
+ {plans.map((plan) => ( + + ))} +
+` + }, + { + prompt: "A sleek dashboard with charts and analytics", + preview: "/api/placeholder/600/400", + description: "Data dashboard with interactive charts, metrics cards, and sidebar navigation", + code: `
+ +
+
+ {metrics.map((metric) => ( + + ))} +
+ +
+
` + }, + { + prompt: "A beautiful landing page for a coffee shop", + preview: "/api/placeholder/600/400", + description: "Warm landing page with hero image, menu preview, and location details", + code: `
+ + + + +
+
` + } +]; + +export default function PublicPlayground() { + const [currentPrompt, setCurrentPrompt] = useState(''); + const [isGenerating, setIsGenerating] = useState(false); + const [currentResult, setCurrentResult] = useState(null); + const [showResult, setShowResult] = useState(false); + const router = useRouter(); + + const handleGenerate = async () => { + if (!currentPrompt.trim()) return; + + setIsGenerating(true); + setShowResult(false); + + // Simulate AI processing time + await new Promise(resolve => setTimeout(resolve, 2000)); + + // Find the best matching demo result or use the first one + const matchingResult = demoResults.find(result => + currentPrompt.toLowerCase().includes('pricing') && result.prompt.includes('pricing') || + currentPrompt.toLowerCase().includes('dashboard') && result.prompt.includes('dashboard') || + currentPrompt.toLowerCase().includes('coffee') && result.prompt.includes('coffee') + ) || demoResults[0]; + + setCurrentResult(matchingResult); + setIsGenerating(false); + setShowResult(true); + }; + + const tryExamplePrompt = (prompt: string) => { + setCurrentPrompt(prompt); + }; + + return ( +
+
+ +

+ Try ZapDev Right Now +

+

+ Type any UI prompt below and see how ZapDev would generate production-ready code. + No signup required for this demo! +

+ + +
+ {/* Input Section */} + +
+ +