awel 0.1.2 → 0.2.1

package/dist/cli/templates/templates/landing/src/components/CTA.tsx

@@ -0,0 +1,23 @@
+export function CTA() {
+  return (
+    <section id="cta" className="px-6 py-24">
+      <div className="mx-auto max-w-3xl rounded-2xl bg-gray-900 px-8 py-16 text-center dark:bg-gray-800">
+        <h2 className="text-3xl font-bold tracking-tight text-white">
+          Ready to get started?
+        </h2>
+        <p className="mt-4 text-gray-300">
+          Start building your project with AI-assisted development.
+        </p>
+        <a
+          href="#"
+          className="mt-8 inline-block rounded-lg bg-white px-6 py-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100"
+        >
+          Start building
+        </a>
+      </div>
+      <footer className="mt-16 text-center text-sm text-gray-500">
+        Built with Awel and Next.js
+      </footer>
+    </section>
+  );
+}

package/dist/cli/templates/templates/landing/src/components/Features.tsx

@@ -0,0 +1,46 @@
+const features = [
+  {
+    title: 'Lightning Fast',
+    description: 'Built on Next.js with optimized rendering and automatic code splitting for peak performance.',
+    icon: '⚡',
+  },
+  {
+    title: 'AI-Powered',
+    description: 'Develop faster with Awel — your AI coding assistant that understands your entire project.',
+    icon: '🤖',
+  },
+  {
+    title: 'Beautiful Design',
+    description: 'Tailwind CSS utility-first styling makes it easy to create responsive, polished interfaces.',
+    icon: '🎨',
+  },
+];
+
+export function Features() {
+  return (
+    <section id="features" className="px-6 py-24">
+      <div className="mx-auto max-w-5xl">
+        <h2 className="text-center text-3xl font-bold tracking-tight">
+          Everything you need
+        </h2>
+        <p className="mt-4 text-center text-gray-600 dark:text-gray-400">
+          Start with a solid foundation and build from there.
+        </p>
+        <div className="mt-16 grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+          {features.map((feature) => (
+            <div
+              key={feature.title}
+              className="rounded-xl border border-gray-200 p-6 dark:border-gray-800"
+            >
+              <div className="text-3xl">{feature.icon}</div>
+              <h3 className="mt-4 text-lg font-semibold">{feature.title}</h3>
+              <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                {feature.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}

package/dist/cli/templates/templates/landing/src/components/Hero.tsx

@@ -0,0 +1,26 @@
+export function Hero() {
+  return (
+    <section className="flex flex-col items-center justify-center px-6 py-24 text-center">
+      <h1 className="max-w-3xl text-5xl font-bold tracking-tight sm:text-6xl">
+        Build something amazing
+      </h1>
+      <p className="mt-6 max-w-xl text-lg text-gray-600 dark:text-gray-400">
+        A modern landing page template powered by Next.js, Tailwind CSS, and AI-assisted development with Awel.
+      </p>
+      <div className="mt-10 flex gap-4">
+        <a
+          href="#features"
+          className="rounded-lg bg-gray-900 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-gray-800 dark:bg-white dark:text-gray-900 dark:hover:bg-gray-100"
+        >
+          Get started
+        </a>
+        <a
+          href="#cta"
+          className="rounded-lg border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800"
+        >
+          Learn more
+        </a>
+      </div>
+    </section>
+  );
+}

package/dist/cli/templates/templates/portfolio/AGENT.md

@@ -0,0 +1,24 @@
+# Project Guide
+
+## Overview
+
+A portfolio website built with Next.js, TypeScript, and Tailwind CSS. Showcases projects with a card-based layout.
+
+## Structure
+
+- `src/app/page.tsx` — Portfolio main page with intro and project grid
+- `src/components/ProjectCard.tsx` — Reusable project card component
+
+## Conventions
+
+- Use server components by default; add `'use client'` only when needed
+- Style with Tailwind CSS utility classes
+- Keep components in `src/components/`
+- Use TypeScript for all files
+
+## Example Prompts
+
+- "Add a contact form section at the bottom of the page"
+- "Add a skills section showing technologies I know"
+- "Create a project detail page at /projects/[slug]"
+- "Add animation to the project cards on hover"

package/dist/cli/templates/templates/portfolio/src/app/page.tsx

@@ -0,0 +1,50 @@
+import { ProjectCard } from '@/components/ProjectCard';
+
+const projects = [
+  {
+    title: 'Project Alpha',
+    description: 'A full-stack web application built with Next.js and PostgreSQL.',
+    tags: ['Next.js', 'TypeScript', 'PostgreSQL'],
+    href: '#',
+  },
+  {
+    title: 'Project Beta',
+    description: 'A mobile-first e-commerce platform with real-time inventory.',
+    tags: ['React Native', 'Node.js', 'Redis'],
+    href: '#',
+  },
+  {
+    title: 'Project Gamma',
+    description: 'An open-source CLI tool for automating deployment workflows.',
+    tags: ['Go', 'Docker', 'CI/CD'],
+    href: '#',
+  },
+  {
+    title: 'Project Delta',
+    description: 'A real-time collaborative document editor with conflict resolution.',
+    tags: ['WebSocket', 'CRDT', 'React'],
+    href: '#',
+  },
+];
+
+export default function Portfolio() {
+  return (
+    <main className="mx-auto max-w-4xl px-6 py-16">
+      <section className="mb-16">
+        <h1 className="text-4xl font-bold tracking-tight">Hi, I&apos;m a developer</h1>
+        <p className="mt-4 max-w-2xl text-lg text-gray-600 dark:text-gray-400">
+          I build web applications and open-source tools. This portfolio was
+          scaffolded with Awel — ask the AI to customize it for you.
+        </p>
+      </section>
+      <section>
+        <h2 className="text-2xl font-bold">Projects</h2>
+        <div className="mt-8 grid gap-6 sm:grid-cols-2">
+          {projects.map((project) => (
+            <ProjectCard key={project.title} {...project} />
+          ))}
+        </div>
+      </section>
+    </main>
+  );
+}

package/dist/cli/templates/templates/portfolio/src/components/ProjectCard.tsx

@@ -0,0 +1,30 @@
+interface ProjectCardProps {
+  title: string;
+  description: string;
+  tags: string[];
+  href: string;
+}
+
+export function ProjectCard({ title, description, tags, href }: ProjectCardProps) {
+  return (
+    <a
+      href={href}
+      className="group block rounded-xl border border-gray-200 p-6 transition-colors hover:border-gray-400 dark:border-gray-800 dark:hover:border-gray-600"
+    >
+      <h3 className="text-lg font-semibold group-hover:underline">{title}</h3>
+      <p className="mt-2 text-sm text-gray-600 dark:text-gray-400">
+        {description}
+      </p>
+      <div className="mt-4 flex flex-wrap gap-2">
+        {tags.map((tag) => (
+          <span
+            key={tag}
+            className="rounded-full bg-gray-100 px-3 py-1 text-xs font-medium text-gray-700 dark:bg-gray-800 dark:text-gray-300"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    </a>
+  );
+}

package/dist/cli/templates/templates/saas/AGENT.md

@@ -0,0 +1,28 @@
+# Project Guide
+
+## Overview
+
+A SaaS application template built with Next.js, TypeScript, and Tailwind CSS. Includes a marketing landing page, pricing page, and dashboard shell.
+
+## Structure
+
+- `src/app/page.tsx` — SaaS marketing landing page
+- `src/app/pricing/page.tsx` — Pricing page with plan comparison
+- `src/app/dashboard/page.tsx` — Authenticated dashboard shell
+- `src/components/Navbar.tsx` — Top navigation bar
+- `src/components/PricingCard.tsx` — Reusable pricing card component
+
+## Conventions
+
+- Use server components by default; add `'use client'` only when needed
+- Style with Tailwind CSS utility classes
+- Keep components in `src/components/`
+- Use TypeScript for all files
+- The Navbar is shared across marketing pages
+
+## Example Prompts
+
+- "Add a features comparison table to the pricing page"
+- "Create a sign-up form with email and password fields"
+- "Add a testimonials carousel to the landing page"
+- "Build a billing settings page at /dashboard/billing"

package/dist/cli/templates/templates/saas/src/app/dashboard/page.tsx

@@ -0,0 +1,10 @@
+export default function Dashboard() {
+  return (
+    <div className="flex min-h-screen flex-col items-center justify-center p-8">
+      <h1 className="text-3xl font-bold">Dashboard</h1>
+      <p className="mt-4 text-gray-600 dark:text-gray-400">
+        Welcome to your dashboard. Ask Awel to build out the features you need.
+      </p>
+    </div>
+  );
+}

package/dist/cli/templates/templates/saas/src/app/page.tsx

@@ -0,0 +1,37 @@
+import { Navbar } from '@/components/Navbar';
+
+export default function Home() {
+  return (
+    <>
+      <Navbar />
+      <main>
+        <section className="flex flex-col items-center px-6 py-24 text-center">
+          <span className="rounded-full bg-blue-100 px-4 py-1 text-sm font-medium text-blue-700 dark:bg-blue-900 dark:text-blue-300">
+            Now in beta
+          </span>
+          <h1 className="mt-6 max-w-3xl text-5xl font-bold tracking-tight sm:text-6xl">
+            The platform for modern teams
+          </h1>
+          <p className="mt-6 max-w-xl text-lg text-gray-600 dark:text-gray-400">
+            Streamline your workflow with our all-in-one SaaS platform. Built for
+            teams that move fast.
+          </p>
+          <div className="mt-10 flex gap-4">
+            <a
+              href="/dashboard"
+              className="rounded-lg bg-blue-600 px-6 py-3 text-sm font-semibold text-white shadow-sm hover:bg-blue-500"
+            >
+              Get started free
+            </a>
+            <a
+              href="/pricing"
+              className="rounded-lg border border-gray-300 px-6 py-3 text-sm font-semibold text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800"
+            >
+              View pricing
+            </a>
+          </div>
+        </section>
+      </main>
+    </>
+  );
+}

package/dist/cli/templates/templates/saas/src/app/pricing/page.tsx

@@ -0,0 +1,53 @@
+import { Navbar } from '@/components/Navbar';
+import { PricingCard } from '@/components/PricingCard';
+
+const plans = [
+  {
+    name: 'Free',
+    price: '$0',
+    period: 'forever',
+    description: 'For individuals getting started.',
+    features: ['1 project', '100 API calls/day', 'Community support'],
+    cta: 'Get started',
+    highlighted: false,
+  },
+  {
+    name: 'Pro',
+    price: '$29',
+    period: '/month',
+    description: 'For growing teams.',
+    features: ['Unlimited projects', '10,000 API calls/day', 'Priority support', 'Advanced analytics'],
+    cta: 'Start free trial',
+    highlighted: true,
+  },
+  {
+    name: 'Enterprise',
+    price: 'Custom',
+    period: '',
+    description: 'For large organizations.',
+    features: ['Unlimited everything', 'Dedicated support', 'Custom integrations', 'SLA guarantee'],
+    cta: 'Contact sales',
+    highlighted: false,
+  },
+];
+
+export default function Pricing() {
+  return (
+    <>
+      <Navbar />
+      <main className="px-6 py-24">
+        <div className="mx-auto max-w-5xl text-center">
+          <h1 className="text-4xl font-bold tracking-tight">Simple, transparent pricing</h1>
+          <p className="mt-4 text-gray-600 dark:text-gray-400">
+            Choose the plan that works for your team.
+          </p>
+        </div>
+        <div className="mx-auto mt-16 grid max-w-5xl gap-8 lg:grid-cols-3">
+          {plans.map((plan) => (
+            <PricingCard key={plan.name} {...plan} />
+          ))}
+        </div>
+      </main>
+    </>
+  );
+}

package/dist/cli/templates/templates/saas/src/components/Navbar.tsx

@@ -0,0 +1,25 @@
+import Link from 'next/link';
+
+export function Navbar() {
+  return (
+    <nav className="flex items-center justify-between px-6 py-4">
+      <Link href="/" className="text-lg font-bold">
+        SaaSApp
+      </Link>
+      <div className="flex items-center gap-6">
+        <Link
+          href="/pricing"
+          className="text-sm text-gray-600 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white"
+        >
+          Pricing
+        </Link>
+        <Link
+          href="/dashboard"
+          className="rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-500"
+        >
+          Dashboard
+        </Link>
+      </div>
+    </nav>
+  );
+}

package/dist/cli/templates/templates/saas/src/components/PricingCard.tsx

@@ -0,0 +1,46 @@
+interface PricingCardProps {
+  name: string;
+  price: string;
+  period: string;
+  description: string;
+  features: string[];
+  cta: string;
+  highlighted: boolean;
+}
+
+export function PricingCard({ name, price, period, description, features, cta, highlighted }: PricingCardProps) {
+  return (
+    <div
+      className={`rounded-xl border p-8 ${
+        highlighted
+          ? 'border-blue-600 ring-2 ring-blue-600 dark:border-blue-400 dark:ring-blue-400'
+          : 'border-gray-200 dark:border-gray-800'
+      }`}
+    >
+      <h3 className="text-lg font-semibold">{name}</h3>
+      <p className="mt-1 text-sm text-gray-600 dark:text-gray-400">{description}</p>
+      <p className="mt-6">
+        <span className="text-4xl font-bold">{price}</span>
+        {period && <span className="text-sm text-gray-500">{period}</span>}
+      </p>
+      <ul className="mt-8 space-y-3">
+        {features.map((feature) => (
+          <li key={feature} className="flex items-center gap-2 text-sm">
+            <span className="text-green-600 dark:text-green-400">&#10003;</span>
+            {feature}
+          </li>
+        ))}
+      </ul>
+      <a
+        href="/dashboard"
+        className={`mt-8 block rounded-lg py-2.5 text-center text-sm font-semibold ${
+          highlighted
+            ? 'bg-blue-600 text-white hover:bg-blue-500'
+            : 'border border-gray-300 text-gray-900 hover:bg-gray-50 dark:border-gray-700 dark:text-white dark:hover:bg-gray-800'
+        }`}
+      >
+        {cta}
+      </a>
+    </div>
+  );
+}