STARTER ARCHITECTURES

Application Template Showcase

Explore pre-built modular codebases. Select a template to preview code files or launch directly in CodeCraft Studio IDE.

Available Templates (3)

SaaS7 Components

Nexus AI — SaaS Landing Page

High-converting SaaS landing page with dark mode, interactive pricing toggle, interactive feature tabs, and lead capture modal.

Next.jsTailwindPricingHero

Dashboard5 Components

Pulse Metrics — Realtime Analytics Dashboard

Modern developer analytics dashboard featuring interactive metrics, date range filters, revenue trends, and live system log stream.

RechartsAnalyticsMetricsLive Stream

AI & Tools3 Components

Aura AI — Conversational Assistant UI

Clean, responsive AI chat assistant with model switching, streaming response simulation, message history, and code block formatting.

AI AssistantChat UIStreamingLLM

Nexus AI — SaaS Landing PageREACT

Showing active source file structure

import React, { useState } from 'react';
import Navbar from './components/Navbar';
import Hero from './components/Hero';
import FeatureTabs from './components/FeatureTabs';
import Pricing from './components/Pricing';
import CTA from './components/CTA';
import Footer from './components/Footer';

export default function App() {
  const [leadOpen, setLeadOpen] = useState(false);

  return (
    <div className="min-h-screen bg-slate-950 text-slate-100 font-sans selection:bg-emerald-500 selection:text-slate-950">
      <Navbar onOpenCTA={() => setLeadOpen(true)} />
      <Hero onOpenCTA={() => setLeadOpen(true)} />
      <FeatureTabs />
      <Pricing />
      <CTA onOpenCTA={() => setLeadOpen(true)} />
      <Footer />

      {leadOpen && (
        <div className="fixed inset-0 z-50 bg-slate-950/80 backdrop-blur-md flex items-center justify-center p-4">
          <div className="bg-slate-900 border border-slate-800 rounded-2xl p-6 max-w-md w-full shadow-2xl relative">
            <button 
              onClick={() => setLeadOpen(false)}
              className="absolute top-4 right-4 text-slate-400 hover:text-white"
            >
              ✕
            </button>
            <h3 className="text-xl font-bold text-white mb-2">Start your 14-day free trial</h3>
            <p className="text-sm text-slate-400 mb-4">No credit card required. Full access to AI synthesis engine.</p>
            <form onSubmit={(e) => { e.preventDefault(); alert('Demo access granted!'); setLeadOpen(false); }} className="space-y-3">
              <input 
                type="email" 
                required 
                placeholder="enter work email..." 
                className="w-full bg-slate-950 border border-slate-800 rounded-lg px-4 py-2.5 text-sm text-white focus:outline-none focus:border-emerald-500"
              />
              <button 
                type="submit" 
                className="w-full bg-emerald-500 text-slate-950 font-semibold py-2.5 rounded-lg text-sm hover:bg-emerald-400 transition"
              >
                Claim Free Access
              </button>
            </form>
          </div>
        </div>
      )}
    </div>
  );
}

Active Path: App.tsxLanguage: TYPESCRIPT