ASSET_SPEC // PRODUCT_ONBOARDING_FAQ

Product Onboarding FAQFAQ template

A card-based FAQ layout designed to guide new users through their first steps and common setup hurdles.

Live_Preview_Environment

Getting Started

New here? Here are the most common questions from our new community members.

How do I start my first project?

Click the "New Project" button in your dashboard and choose a template to begin immediately.

How do integrations work?

Open the integrations directory to review supported tools and setup instructions.

Can I customize the experience?

Tailor every aspect to match your brand's identity through the settings panel.

When_to_Use

Use the product onboarding FAQ for new-user setup flows. The card-based grid with icons walks users through account setup, team invites, and their first project.

Source_Manifest

Source_Inspector // TAILWIND

<section class="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8">
  <div class="max-w-3xl">
    <h2 class="text-3xl font-bold tracking-tight text-gray-900">Step-by-Step Guide</h2>
    <p class="mt-4 text-lg text-gray-600">New here? Here are the most common questions from our new community members.</p>
  </div>
  <div class="mt-12 grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
    <div class="relative flex flex-col rounded-2xl border border-gray-200 p-8 hover:shadow-lg transition-shadow">
      <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100 text-blue-600 mb-6">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
      </div>
      <h3 class="text-xl font-bold text-gray-900">Step 1: Account Setup</h3>
      <p class="mt-4 text-gray-600">Complete the required profile fields before creating your first project.</p>
    </div>
    <div class="relative flex flex-col rounded-2xl border border-gray-200 p-8 hover:shadow-lg transition-shadow">
      <div class="flex h-12 w-12 items-center justify-center rounded-xl bg-blue-100 text-blue-600 mb-6">
        <svg class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
        </svg>
      </div>
      <h3 class="text-xl font-bold text-gray-900">Step 2: Team Invite</h3>
      <p class="mt-4 text-gray-600">Add your teammates from the dashboard to start collaborating immediately.</p>
    </div>
  </div>
</section>

READ_ONLY

import React from 'react';
import { Rocket, Users, Settings, type LucideIcon } from 'lucide-react';

interface StepCardProps {
  icon: LucideIcon;
  title: string;
  description: string;
}

const StepCard = ({ icon: Icon, title, description }: StepCardProps) => (
  <div className="flex flex-col p-8 bg-white rounded-3xl border border-gray-100 shadow-sm hover:shadow-xl hover:-translate-y-1 transition-all duration-300">
    <div className="flex items-center justify-center w-14 h-14 mb-6 rounded-2xl bg-indigo-50 text-indigo-600">
      <Icon aria-hidden="true" size={28} />
    </div>
    <h3 className="text-xl font-bold text-gray-900 mb-4">{title}</h3>
    <p className="text-gray-600 leading-relaxed">{description}</p>
  </div>
);

export function ProductOnboardingFaq() {
  return (
    <div className="py-24 bg-gray-50">
      <div className="max-w-7xl mx-auto px-6">
        <div className="text-center mb-16">
          <h2 className="text-4xl font-black text-gray-900 mb-4">Master the Basics</h2>
          <p className="text-xl text-gray-600 max-w-2xl mx-auto">We've compiled everything you need to know to hit the ground running.</p>
        </div>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          <StepCard 
            icon={Rocket} 
            title="Step 1: Account Setup"
            description="Complete the required profile fields before creating your first project."
          />
          <StepCard 
            icon={Users}
            title="Step 2: Team Invite"
            description="Add your teammates from the dashboard to start collaborating immediately."
          />
          <StepCard 
            icon={Settings} 
            title="Step 3: Customization"
            description="Tailor every aspect of the experience to match your brand's unique identity."
          />
        </div>
      </div>
    </div>
  );
}

READ_ONLY