create-githat-app 1.0.10 → 1.0.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-githat-app",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "description": "GitHat CLI — scaffold apps and manage the skills marketplace",
   "type": "module",
   "bin": {

package/templates/base/.env.local.example.hbs

@@ -0,0 +1,20 @@
+{{#ifEquals framework "nextjs"}}
+# GitHat — publishable key for this app.
+# Get yours at https://githat.io/dashboard/apps
+NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY=pk_live_your_key_here
+
+# GitHat API base URL (leave as-is unless using a self-hosted deployment)
+NEXT_PUBLIC_GITHAT_API_URL={{apiUrl}}
+{{else}}
+# GitHat — publishable key for this app.
+# Get yours at https://githat.io/dashboard/apps
+VITE_GITHAT_PUBLISHABLE_KEY=pk_live_your_key_here
+
+# GitHat API base URL (leave as-is unless using a self-hosted deployment)
+VITE_GITHAT_API_URL={{apiUrl}}
+{{/ifEquals}}
+{{#if useDatabase}}
+
+# Database
+DATABASE_URL="postgresql://user:password@localhost:5432/{{projectName}}"
+{{/if}}

package/templates/base/README.md.hbs

@@ -1,23 +1,21 @@
 # {{projectName}}
 
-Built with [GitHat](https://githat.io) — your backend is already set up. Auth, teams, orgs, API keys, MCP verification, and AI agent identity are handled by GitHat's hosted platform.
+Built with [GitHat](https://githat.io) — auth, teams, orgs, API keys, MCP verification, and AI agent identity are handled by GitHat's hosted platform.
 
 ## Getting Started
 
-1. Install dependencies:
+1. Copy the env file and fill in your GitHat key:
 
 ```bash
-{{#ifEquals packageManager "yarn"}}yarn{{else}}{{packageManager}} install{{/ifEquals}}
+cp .env.local.example .env.local
 ```
 
-2. Add your GitHat publishable key to `{{#ifEquals framework "nextjs"}}.env.local{{else}}.env{{/ifEquals}}`:
+2. Install dependencies:
 
-```env
-{{#ifEquals framework "nextjs"}}NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY{{else}}VITE_GITHAT_PUBLISHABLE_KEY{{/ifEquals}}=pk_live_your_key_here
+```bash
+{{#ifEquals packageManager "yarn"}}yarn{{else}}{{packageManager}} install{{/ifEquals}}
 ```
 
-Get your key at [githat.io/dashboard/apps](https://githat.io/dashboard/apps).
-
 3. Start the dev server:
 
 ```bash
@@ -26,36 +24,11 @@ Get your key at [githat.io/dashboard/apps](https://githat.io/dashboard/apps).
 
 4. Open [http://localhost:{{#ifEquals framework "nextjs"}}3000{{else}}5173{{/ifEquals}}](http://localhost:{{#ifEquals framework "nextjs"}}3000{{else}}5173{{/ifEquals}})
 
-## Your Backend
-
-All API calls go to `api.githat.io`. Your data is stored in GitHat's database. **No backend to deploy.**
-
-GitHat handles:
-
-- User auth (sign-up, sign-in, email verification, password reset)
-- Organizations (create, switch, branding)
-- Team management (invite members, assign roles)
-- API key management (publishable + secret keys)
-{{#if includeMcpModule}}- MCP server registration and domain verification
-{{/if}}{{#if includeAgentModule}}- AI agent registration and wallet verification
-{{/if}}- Email delivery (verification, invitations, password resets)
-
-The `githat/` folder in your project is a typed API client that talks to `api.githat.io`. You write frontend code, GitHat handles the rest.
-
-Manage everything at [githat.io/dashboard](https://githat.io/dashboard).
-
-## Pages
-
-- `/sign-in` — Sign in
-- `/sign-up` — Create account
-{{#if includeForgotPassword}}- `/forgot-password` — Password recovery
-{{/if}}{{#if includeDashboard}}- `/dashboard` — Protected dashboard
-{{/if}}{{#if includeOrgManagement}}- `/dashboard/members` — Invite members, manage roles
-{{/if}}
+Your `NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY` is required — get it at [githat.io/dashboard/apps](https://githat.io/dashboard/apps) or re-run `create-githat-app` after running `githat login` to have it auto-registered.
 
 ## GitHat SDK
 
-This project uses [`@githat/nextjs`](https://www.npmjs.com/package/@githat/nextjs) for connecting to the GitHat platform:
+This project uses [`@githat/nextjs`](https://www.npmjs.com/package/@githat/nextjs):
 
 ```{{#if typescript}}tsx{{else}}jsx{{/if}}
 import { useAuth, UserButton, OrgSwitcher } from '@githat/nextjs';
@@ -63,32 +36,38 @@ import { useAuth, UserButton, OrgSwitcher } from '@githat/nextjs';
 const { user, org, signIn, signUp, signOut } = useAuth();
 ```
 
-## Deploy
+## Deploy to EC2 via GitHub Actions
 
-{{#ifEquals framework "nextjs"}}### Vercel (recommended)
+The scaffolded `.github/workflows/deploy.yml` deploys the Next.js standalone bundle to an EC2 instance on every push to `main`.
 
-```bash
-npx vercel
-```
+**Required GitHub repo secrets:**
 
-Add `NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY` to your Vercel project environment variables.
-{{else}}### Vercel
+| Secret | Description |
+|--------|-------------|
+| `SSH_PRIVATE_KEY` | Private key whose public key is in the EC2 instance's `~/.ssh/authorized_keys` |
+| `EC2_HOST` | `ubuntu@<ec2-ip-or-hostname>` |
+| `PROD_ENV` | Full contents of your production `.env` file (set via `gh secret set PROD_ENV < .env.local`) |
+| `GITHAT_PUBLISHABLE_KEY` | Your GitHat publishable key (baked into the client bundle at build time) |
 
-```bash
-npx vercel
-```
+**One-time EC2 setup:**
 
-### Netlify
+1. Create a systemd service at `/etc/systemd/system/{{projectName}}.service` that runs `node /opt/{{projectName}}/server.js` with `PORT=3000`.
+2. Create `/opt/{{projectName}}/` owned by your deploy user.
+3. Enable the service: `sudo systemctl enable {{projectName}}`.
 
-```bash
-npx netlify deploy
-```
+After that, every `git push origin main` triggers a build + rsync + restart. The workflow smoke-tests `/api/health` before reporting success.
 
-Add `VITE_GITHAT_PUBLISHABLE_KEY` to your hosting provider's environment variables.
-{{/ifEquals}}
+## Pages
+
+- `/sign-in` — Sign in
+- `/sign-up` — Create account
+{{#if includeForgotPassword}}- `/forgot-password` — Password recovery
+{{/if}}{{#if includeDashboard}}- `/dashboard` — Protected dashboard
+{{/if}}{{#if includeOrgManagement}}- `/dashboard/members` — Invite members, manage roles
+{{/if}}
 
 ## Learn More
 
 - [GitHat Documentation](https://githat.io/docs)
 - [SDK Reference](https://www.npmjs.com/package/@githat/nextjs)
-- [API Reference (42+ endpoints)](https://githat.io/docs/api)
+- [API Reference](https://githat.io/docs/api)

package/templates/fullstack/apps-api-express/package.json.hbs

@@ -10,7 +10,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@githat/nextjs": "^0.2.2",
+    "@githat/nextjs": "^0.2.6",
     "cors": "^2.8.5",
     "express": "^5.0.0"
   },

package/templates/fullstack/apps-api-fastify/package.json.hbs

@@ -11,7 +11,7 @@
   },
   "dependencies": {
     "@fastify/cors": "^10.0.0",
-    "@githat/nextjs": "^0.2.2",
+    "@githat/nextjs": "^0.2.6",
     "fastify": "^5.2.0"
   },
   "devDependencies": {

package/templates/fullstack/apps-api-hono/package.json.hbs

@@ -10,7 +10,7 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@githat/nextjs": "^0.2.2",
+    "@githat/nextjs": "^0.2.6",
     "@hono/node-server": "^1.13.0",
     "hono": "^4.6.0"
   },

package/templates/fullstack/apps-web-nextjs/app/globals.css.hbs

@@ -1,3 +1,4 @@
+@import "@githat/ui/tokens.css";
 {{#if useTailwind}}
 @import "tailwindcss";
 {{/if}}
@@ -9,9 +10,9 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #09090b;
-  color: #fafafa;
+  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  background: var(--bg, #09090b);
+  color: var(--fg, #fafafa);
 }
 
 a {

package/templates/fullstack/apps-web-nextjs/app/layout.tsx.hbs

@@ -1,4 +1,5 @@
 import { GitHatProvider } from '@githat/nextjs';
+import { Wordmark } from '@githat/ui';
 import '@githat/nextjs/styles';
 import './globals.css';
 
@@ -18,7 +19,10 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
           afterSignInUrl: '/dashboard',
           afterSignOutUrl: '/',
         }}>
-          {children}
+          <header style=\{{ padding: 'var(--space-4, 1rem) var(--space-6, 1.5rem)', borderBottom: '1px solid var(--border, #e5e7eb)' }}>
+            <Wordmark name="{{businessName}}" size="md" href="/" />
+          </header>
+          <main>{children}</main>
         </GitHatProvider>
       </body>
     </html>

package/templates/fullstack/apps-web-nextjs/app/page.tsx.hbs

@@ -1,11 +1,10 @@
 import { SignInButton, SignUpButton } from '@githat/nextjs';
+import { Wordmark } from '@githat/ui';
 
 export default function Home() {
   return (
     <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-6 bg-[#09090b] text-[#fafafa]"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '1.5rem', background: '#09090b', color: '#fafafa' }}{{/if}}>
-      <h1 {{#if useTailwind}}className="text-4xl font-bold"{{else}}style=\{{ fontSize: '2.5rem', fontWeight: 700 }}{{/if}}>
-        Welcome to {{businessName}}
-      </h1>
+      <Wordmark name="{{businessName}}" size="xl" />
       <p {{#if useTailwind}}className="text-zinc-400 max-w-lg text-center"{{else}}style=\{{ color: '#a1a1aa', maxWidth: '32rem', textAlign: 'center' }}{{/if}}>
         {{description}}
       </p>

package/templates/fullstack/apps-web-nextjs/package.json.hbs

@@ -10,7 +10,8 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@githat/nextjs": "^0.2.2",
+    "@githat/nextjs": "^0.2.6",
+    "@githat/ui": "^1.0.0",
     "next": "^16.0.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"

package/templates/nextjs/.github/workflows/deploy.yml.hbs

@@ -0,0 +1,107 @@
+name: Deploy to EC2
+
+# Auto-deploy every push to main. Also supports manual runs from the
+# Actions tab (workflow_dispatch) so you can re-ship without a dummy commit.
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+
+# Only one deploy at a time. Queue rather than race if a second push
+# lands mid-deploy.
+concurrency:
+  group: deploy-ec2
+  cancel-in-progress: false
+
+jobs:
+  build-and-deploy:
+    runs-on: ubuntu-latest
+    # Skip if commit message starts with "docs:" unless it includes [deploy].
+    if: $\{{ !startsWith(github.event.head_commit.message, 'docs:') || contains(github.event.head_commit.message, '[deploy]') }}
+    timeout-minutes: 12
+
+    steps:
+      - uses: actions/checkout@v4
+
+      - name: Setup Node 20
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "npm"
+
+      - name: Install deps
+        run: npm ci
+
+      - name: Type-check
+        run: npx tsc --noEmit
+
+      - name: Compute BUILD_ID
+        id: build_id
+        run: |
+          BUILD_ID=$(git rev-parse --short HEAD || echo "${GITHUB_SHA:0:7}")
+          echo "BUILD_ID=$BUILD_ID" >> "$GITHUB_OUTPUT"
+          echo "Resolved BUILD_ID=$BUILD_ID"
+
+      - name: Build (Next.js standalone)
+        run: npm run build
+        env:
+          # NEXT_PUBLIC_* vars are baked into the client bundle at build time.
+          # The real value comes from the GITHAT_PUBLISHABLE_KEY repo secret.
+          NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY: $\{{ secrets.GITHAT_PUBLISHABLE_KEY }}
+          BUILD_ID: $\{{ steps.build_id.outputs.BUILD_ID }}
+
+      - name: Load SSH key
+        run: |
+          mkdir -p ~/.ssh
+          echo "$\{{ secrets.SSH_PRIVATE_KEY }}" > ~/.ssh/deploy_key
+          chmod 600 ~/.ssh/deploy_key
+          ssh-keyscan -H "${EC2_HOST#*@}" >> ~/.ssh/known_hosts
+        env:
+          EC2_HOST: $\{{ secrets.EC2_HOST }}
+
+      - name: Sync production .env
+        env:
+          PROD_ENV: $\{{ secrets.PROD_ENV }}
+          EC2_HOST: $\{{ secrets.EC2_HOST }}
+        run: |
+          if [ -z "$PROD_ENV" ]; then
+            echo "PROD_ENV secret is empty — skipping env sync."
+            exit 0
+          fi
+          SSH_OPTS="-i ~/.ssh/deploy_key -o StrictHostKeyChecking=yes"
+          printf '%s' "$PROD_ENV" > /tmp/prod.env
+          rsync -az -e "ssh $SSH_OPTS" /tmp/prod.env "$EC2_HOST:/opt/{{projectName}}/.env"
+          shred -u /tmp/prod.env 2>/dev/null || rm -f /tmp/prod.env
+          ssh $SSH_OPTS "$EC2_HOST" \
+            "sudo chgrp {{projectName}} /opt/{{projectName}}/.env && sudo chmod 640 /opt/{{projectName}}/.env"
+
+      - name: Deploy to EC2
+        env:
+          EC2_HOST: $\{{ secrets.EC2_HOST }}
+        run: |
+          SSH_OPTS="-i ~/.ssh/deploy_key -o StrictHostKeyChecking=yes"
+
+          rsync -az --delete -e "ssh $SSH_OPTS" \
+              --exclude .env \
+              .next/standalone/ "$EC2_HOST:/opt/{{projectName}}/"
+
+          rsync -az -e "ssh $SSH_OPTS" \
+              .next/static/ "$EC2_HOST:/opt/{{projectName}}/.next/static/"
+
+          rsync -az -e "ssh $SSH_OPTS" \
+              public/ "$EC2_HOST:/opt/{{projectName}}/public/"
+
+          ssh $SSH_OPTS "$EC2_HOST" "
+            sudo systemctl restart {{projectName}}
+            sleep 5
+            sudo systemctl is-active --quiet {{projectName}} || { sudo journalctl -u {{projectName}} -n 30 --no-pager; exit 1; }
+            echo \"deployed build \$(cat /opt/{{projectName}}/.next/BUILD_ID)\"
+          "
+
+      - name: Smoke-test the deploy
+        env:
+          EC2_HOST: $\{{ secrets.EC2_HOST }}
+        run: |
+          SSH_OPTS="-i ~/.ssh/deploy_key -o StrictHostKeyChecking=yes"
+          ssh $SSH_OPTS "$EC2_HOST" \
+            "curl --fail --silent --show-error --max-time 10 http://127.0.0.1:3000/api/health > /dev/null && echo OK"

package/templates/nextjs/app/globals.css.hbs

@@ -1,3 +1,4 @@
+@import "@githat/ui/tokens.css";
 {{#if useTailwind}}
 @import "tailwindcss";
 {{/if}}
@@ -9,9 +10,9 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #09090b;
-  color: #fafafa;
+  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  background: var(--bg, #09090b);
+  color: var(--fg, #fafafa);
 }
 
 a {

package/templates/nextjs/app/layout.tsx.hbs

@@ -1,4 +1,5 @@
 import { GitHatProvider } from '@githat/nextjs';
+import { Wordmark } from '@githat/ui';
 import '@githat/nextjs/styles';
 import './globals.css';
 {{#if includeGithatFolder}}
@@ -25,7 +26,10 @@ export default function RootLayout({ children }{{#if typescript}}: { children: R
           afterSignOutUrl: '/',
 {{/if}}
         }}>
-          {children}
+          <header style=\{{ padding: 'var(--space-4, 1rem) var(--space-6, 1.5rem)', borderBottom: '1px solid var(--border, #e5e7eb)' }}>
+            <Wordmark name="{{businessName}}" size="md" href="/" />
+          </header>
+          <main>{children}</main>
         </GitHatProvider>
       </body>
     </html>

package/templates/nextjs/app/page.tsx.hbs

@@ -1,4 +1,5 @@
 import { SignInButton, SignUpButton } from '@githat/nextjs';
+import { Wordmark } from '@githat/ui';
 
 const hasKey = !!process.env.NEXT_PUBLIC_GITHAT_PUBLISHABLE_KEY;
 
@@ -6,9 +7,7 @@ function SetupGuide() {
   return (
     <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-8 bg-[#09090b] text-[#fafafa] px-6"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '2rem', background: '#09090b', color: '#fafafa', padding: '0 1.5rem' }}{{/if}}>
       <div {{#if useTailwind}}className="text-center"{{else}}style=\{{ textAlign: 'center' }}{{/if}}>
-        <h1 {{#if useTailwind}}className="text-4xl font-bold mb-2"{{else}}style=\{{ fontSize: '2.5rem', fontWeight: 700, marginBottom: '0.5rem' }}{{/if}}>
-          {{businessName}}
-        </h1>
+        <Wordmark name="{{businessName}}" size="xl" />
         <p {{#if useTailwind}}className="text-zinc-400"{{else}}style=\{{ color: '#a1a1aa' }}{{/if}}>
           Get started in 3 steps
         </p>
@@ -58,9 +57,7 @@ export default function Home() {
 
   return (
     <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-6 bg-[#09090b] text-[#fafafa]"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '1.5rem', background: '#09090b', color: '#fafafa' }}{{/if}}>
-      <h1 {{#if useTailwind}}className="text-4xl font-bold"{{else}}style=\{{ fontSize: '2.5rem', fontWeight: 700 }}{{/if}}>
-        Welcome to {{businessName}}
-      </h1>
+      <Wordmark name="{{businessName}}" size="xl" />
       <p {{#if useTailwind}}className="text-zinc-400 max-w-lg text-center"{{else}}style=\{{ color: '#a1a1aa', maxWidth: '32rem', textAlign: 'center' }}{{/if}}>
         {{description}}
       </p>

package/templates/nextjs/next.config.ts.hbs

@@ -1,5 +1,7 @@
 import type { NextConfig } from 'next';
 
-const nextConfig: NextConfig = {};
+const nextConfig: NextConfig = {
+  output: 'standalone',
+};
 
 export default nextConfig;

package/templates/react-vite/src/App.tsx.hbs

@@ -27,20 +27,22 @@ function NotFound() {
 
 export default function App() {
   return (
-    <Routes>
-      <Route path="/" element={<Home />} />
-      <Route path="/sign-in" element={<SignIn />} />
-      <Route path="/sign-up" element={<SignUp />} />
+    <>
+      <Routes>
+        <Route path="/" element={<Home />} />
+        <Route path="/sign-in" element={<SignIn />} />
+        <Route path="/sign-up" element={<SignUp />} />
 {{#if includeForgotPassword}}
-      <Route path="/forgot-password" element={<ForgotPassword />} />
+        <Route path="/forgot-password" element={<ForgotPassword />} />
 {{/if}}
 {{#if includeEmailVerification}}
-      <Route path="/verify-email" element={<VerifyEmail />} />
+        <Route path="/verify-email" element={<VerifyEmail />} />
 {{/if}}
 {{#if includeDashboard}}
-      <Route path="/dashboard/*" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
+        <Route path="/dashboard/*" element={<ProtectedRoute><Dashboard /></ProtectedRoute>} />
 {{/if}}
-      <Route path="*" element={<NotFound />} />
-    </Routes>
+        <Route path="*" element={<NotFound />} />
+      </Routes>
+    </>
   );
 }

package/templates/react-vite/src/index.css.hbs

@@ -1,3 +1,4 @@
+@import "@githat/ui/tokens.css";
 {{#if useTailwind}}
 @import "tailwindcss";
 {{/if}}
@@ -9,9 +10,9 @@
 }
 
 body {
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
-  background: #09090b;
-  color: #fafafa;
+  font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
+  background: var(--bg, #09090b);
+  color: var(--fg, #fafafa);
 }
 
 a {

package/templates/react-vite/src/pages/Home.tsx.hbs

@@ -1,4 +1,5 @@
 import { SignInButton, SignUpButton } from '@githat/nextjs';
+import { Wordmark } from '@githat/ui';
 
 const hasKey = !!import.meta.env.VITE_GITHAT_PUBLISHABLE_KEY;
 
@@ -6,9 +7,7 @@ function SetupGuide() {
   return (
     <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-8 bg-[#09090b] text-[#fafafa] px-6"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '2rem', background: '#09090b', color: '#fafafa', padding: '0 1.5rem' }}{{/if}}>
       <div {{#if useTailwind}}className="text-center"{{else}}style=\{{ textAlign: 'center' }}{{/if}}>
-        <h1 {{#if useTailwind}}className="text-4xl font-bold mb-2"{{else}}style=\{{ fontSize: '2.5rem', fontWeight: 700, marginBottom: '0.5rem' }}{{/if}}>
-          {{businessName}}
-        </h1>
+        <Wordmark name="{{businessName}}" size="xl" />
         <p {{#if useTailwind}}className="text-zinc-400"{{else}}style=\{{ color: '#a1a1aa' }}{{/if}}>
           Get started in 3 steps
         </p>
@@ -58,9 +57,7 @@ export default function Home() {
 
   return (
     <main {{#if useTailwind}}className="flex flex-col items-center justify-center min-h-screen gap-6 bg-[#09090b] text-[#fafafa]"{{else}}style=\{{ display: 'flex', flexDirection: 'column', alignItems: 'center', justifyContent: 'center', minHeight: '100vh', gap: '1.5rem', background: '#09090b', color: '#fafafa' }}{{/if}}>
-      <h1 {{#if useTailwind}}className="text-4xl font-bold"{{else}}style=\{{ fontSize: '2.5rem', fontWeight: 700 }}{{/if}}>
-        Welcome to {{businessName}}
-      </h1>
+      <Wordmark name="{{businessName}}" size="xl" />
       <p {{#if useTailwind}}className="text-zinc-400 max-w-lg text-center"{{else}}style=\{{ color: '#a1a1aa', maxWidth: '32rem', textAlign: 'center' }}{{/if}}>
         {{description}}
       </p>