Notio

git clone https://github.com/MUKE-coder/vibekit.git /tmp/vibekit-templates
cp -r /tmp/vibekit-templates/public-templates/blog-template ./notio
cd notio
pnpm install
pnpm dev

I want to customize the "Notio" template using the VibeKit customization guide.

Walk me through the 9 sections one at a time. For each section, ask the questions defined in the guide below, wait for my answers, then move on.

After all sections are answered, edit ONLY the files needed to apply my answers — config files, content, branding. Don't restructure the project.

CUSTOMIZATION GUIDE:
This is a single-page SaaS landing. Walk the user through Branding → Hero → Logo cloud → Features → Stats → Team → Testimonials → Pricing → Auth. Edit `src/components/<section>.tsx` for each — every section is its own component. For brand color, edit `src/app/globals.css` Tailwind v4 tokens. To connect real auth, install JB Better Auth UI (see jb-components.md) and replace `/auth/login`. Do NOT change file structure — only the content of each section component.

SECTIONS:
1. Branding — Logo, brand color, typography, light/dark default.
   Questions: 
     - What's the product name and one-line tagline?
     - What's your brand color? (hex — used for accents and CTAs)
     - Do you have a logo, or want me to keep the Notio placeholder for now?
     - Default theme: light, dark, or follow system?

2. Hero — Headline + sub + primary CTA + product mock.
   Questions: 
     - What's the hero headline? (one sentence, ideally with a verb)
     - What's the sub-headline? (1–2 sentences explaining the value)
     - Primary CTA label + URL? (e.g. 'Start for free' → /auth/login)
     - Want to keep the phone mockup or replace with a screenshot of your product?

3. Logo cloud — 'Trusted by' / 'Works with' brand strip.
   Questions: 
     - Which logos should appear? (4–8 brands — yours or integrations)
     - Is this 'Trusted by' or 'Integrates with'?

4. Features — Beam-framed feature grid with icon + headline + body.
   Questions: 
     - List 4–6 features: short title + 1-sentence description each.
     - Want icons (Lucide) or screenshots in each feature card?

5. Stats — Single-row metric band (e.g. 1M+ calls transcribed).
   Questions: 
     - What 3–4 stats best demonstrate traction or product power? (number + short label each)

6. Team — Team grid with avatars and roles.
   Questions: 
     - Do you want a team section, or remove it for v1?
     - If keeping it: list founders/team members with name, role, and avatar URL.

7. Testimonials — Customer quotes with avatar + role + company logo.
   Questions: 
     - Do you have 3–6 real customer quotes? (otherwise we'll keep placeholders)
     - For each: quote, author name, role, company logo or name.

8. Pricing — Free + paid tiers with feature lists.
   Questions: 
     - Free tier feature list (5–8 items)?
     - Paid tier monthly price + feature list (5–8 items)?
     - Where should the CTA link to? (Stripe checkout, /auth/signup, etc.)

9. Login page — /auth/login — connect to Better Auth or skip if marketing-only.
   Questions: 
     - Are we wiring up auth (recommend: JB Better Auth UI) or keeping /auth/login as a static placeholder?
     - If auth: Google? GitHub? Email-only?

Begin with section 1 now.