Component Organization

Learn how to organize and customize the landing page components in your buildfast template.

With Buildfast, components are already organized and structured according to best practices.

Project Structure

Your buildfast starter template follows a clean, organized structure:

app/

components/

├── header.tsx - Header component

├── hero.tsx - Hero component

├── why-section.tsx - Why section component

├── how-it-works.tsx - How it works component

├── perks.tsx - Perks component

├── key-dates.tsx - Key dates component

├── pricing.tsx - Pricing component

├── social-proof.tsx - Social proof component

├── faq.tsx - FAQ component

├── cta.tsx - Call to action component

├── footer.tsx - Footer component

└── ui/ (shadcn components)

lib/

├── db/

│ ├── migrate.ts - Database migrations component

│ ├── queries.ts - Database queries component

└──── schema.ts - Database schema component

drizzle.config.ts - Drizzle configuration component

Core Components

Header Component

Navigation bar with responsive mobile menu

Customization: Update logo, navigation links, and CTA buttons in app/components/header.tsx

Hero Component

Main landing section with headline and call-to-action

Customization: Update headline, description, and CTA buttons in app/components/hero.tsx

Features Component

Grid layout showcasing your product features

Customization: Add/remove features, update icons and descriptions in app/components/perks.tsx

Pricing Component

Pricing tiers with Stripe integration ready

Customization: Update pricing plans, features, and Stripe price IDs in app/components/pricing.tsx

Customization Guide

1. Update Your Branding

Logo: Replace the code icon in header.tsx with your logo image

Colors: Update the color scheme for each tailwind color in app/globals.css

Fonts: Add Google Fonts in app/layout.tsx and update <html lang="en" suppressHydrationWarning className=${geist.className}> to your desired font

2. Customize Content

Headlines: Update main headlines in hero.tsx

Features: Modify the features array in perks.tsx

Pricing: Update pricing plans and features in pricing.tsx

Testimonials: Add real customer testimonials in social-proof.tsx

3. Add New Sections

To add a new section to your landing page:

Create a new component in app/components/
Import it in app/page.tsx

Best Practices

Keep components focused and reusable. Use TypeScript for better development experience. Follow the existing naming conventions and file structure for consistency.

Other opimizations: SEO

Add meta tags to your page to improve SEO.
Update your sitemap.ts (file in the root of your app) to improve SEO.
Update your robots.txt (file in the public folder of your app) to improve SEO.
Connect and verify your domain with Google Search Console to improve SEO.

Next Steps

Once you've customized your components, you're ready to integrate backend services:

Documentation