diff --git a/app/page.tsx b/app/page.tsx index 766b7db3..39665f5e 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'; import { AuthButtons } from '@/components/auth-buttons'; import { CrossBrowserButton } from '@/components/ui/cross-browser-button'; @@ -145,6 +148,9 @@ export default function Home() {
+ + + diff --git a/bun.lock b/bun.lock index 37de2b11..27a598dc 100644 --- a/bun.lock +++ b/bun.lock @@ -48,11 +48,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", @@ -319,6 +321,29 @@ "@opentelemetry/api": ["@opentelemetry/api@1.9.0", "", {}, "sha512-3giAOQvZiH5F9bMlMiv8+GSPMeqg0dbaeo58/0SlA9sxSqZhnUtxzX9/2FzyhS9sWQf5S0GJE0AKBrFqjpeYcg=="], +<<<<<<< HEAD + "@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=="], +======= "@opentelemetry/api-logs": ["@opentelemetry/api-logs@0.57.2", "", { "dependencies": { "@opentelemetry/api": "^1.3.0" } }, "sha512-uIX52NnTM0iBh84MShlpouI7UKqkZ7MrUszTmaypHBu4r7NofznSnQRfJ+uUeDtQDj6w8eFGg5KBLDAwAPz1+A=="], "@opentelemetry/context-async-hooks": ["@opentelemetry/context-async-hooks@1.30.1", "", { "peerDependencies": { "@opentelemetry/api": ">=1.0.0 <1.10.0" } }, "sha512-s5vvxXPVdjqS3kTLKMeBMvop9hbWkwzBpu+mUO2M7sZtlkyDJGwFe33wRKnbaYDo8ExRVBIIdwIGrqpxHuKttA=="], @@ -380,6 +405,7 @@ "@opentelemetry/semantic-conventions": ["@opentelemetry/semantic-conventions@1.34.0", "", {}, "sha512-aKcOkyrorBGlajjRdVoJWHTxfxO1vCNHLJVlSDaRHDIdjU+pX8IYQPvPDkYiujKLbRnWU+1TBwEt0QRgSm4SGA=="], "@opentelemetry/sql-common": ["@opentelemetry/sql-common@0.40.1", "", { "dependencies": { "@opentelemetry/core": "^1.1.0" }, "peerDependencies": { "@opentelemetry/api": "^1.1.0" } }, "sha512-nSDlnHSqzC3pXn/wZEZVLuAuJ1MYMXPBwtv2qAbCa3847SaHItdE7SzUq/Jtb0KZmh1zfAbNi3AAMjztTT4Ugg=="], +>>>>>>> f975414d0fc27fc5df0c6bfdee5d45995fa23c95 "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="], @@ -787,6 +813,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=="], @@ -795,7 +823,11 @@ "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=="], +<<<<<<< HEAD + "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=="], +======= "buffer-from": ["buffer-from@1.1.2", "", {}, "sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ=="], +>>>>>>> f975414d0fc27fc5df0c6bfdee5d45995fa23c95 "busboy": ["busboy@1.6.0", "", { "dependencies": { "streamsearch": "^1.1.0" } }, "sha512-8SFQbg/0hQ9xy3UNTB0YEnsNBbWfhf7RtnzpL7TkBiTBRfrQ9Fxcnz7VJsleJpyp6rVLvXiuORqjlHi5q+PYuA=="], @@ -907,6 +939,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=="], @@ -989,6 +1023,13 @@ "fdir": ["fdir@6.4.6", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-hiFoqpyZcfNm1yc4u8oWCf9A2c4D3QjCrks3zmoVKVxpQRzmPNar1hUJcBG2RQHvEVGDN+Jm81ZheVLAQMK6+w=="], +<<<<<<< HEAD + "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=="], + +======= +>>>>>>> f975414d0fc27fc5df0c6bfdee5d45995fa23c95 "fill-range": ["fill-range@7.1.1", "", { "dependencies": { "to-regex-range": "^5.0.1" } }, "sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg=="], "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="], @@ -1051,6 +1092,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=="], @@ -1161,6 +1204,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=="], "neo-async": ["neo-async@2.6.2", "", {}, "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw=="], 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 b2df20b6..8f589239 100644 --- a/components/hero.tsx +++ b/components/hero.tsx @@ -122,8 +122,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. +<<<<<<< HEAD + + +======= Explore Examples +>>>>>>> f975414d0fc27fc5df0c6bfdee5d45995fa23c95 {/* Subscribe Button */} @@ -179,7 +196,7 @@ export default function Hero() { whileTap: { scale: 0.98 } }} > - 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 */} + +
+ +