Founderflow Logo

Hero Section Customization

Complete guide to customizing the hero section in your Founderflow Boilerplate. Learn how to modify layouts, content, and visual elements to create compelling landing experiences.

Overview

🚀

Hero Section System

The hero section is the first impression visitors have of your application. It's fully customizable with multiple layout options, content variations, and interactive elements to engage your audience.

✓

Multiple Layouts

Centered, split-screen, and full-width layouts

✓

Content Customization

Headlines, subheadings, descriptions, and CTAs

✓

Visual Elements

Images, videos, animations, and graphics

✓

Interactive Elements

Buttons, forms, and interactive components

✓

Responsive Design

Adapts to all screen sizes and devices

✓

A/B Testing Ready

Easy to test different variations

Hero Layouts

Centered Layout

Classic centered hero with title, subtitle, and CTA buttons:

components/landing/hero/CenteredHero.tsx
export default function CenteredHero() {
return (
<section className="relative py-20 lg:py-32">
<div className="container mx-auto px-4 text-center">
<h1 className="text-4xl md:text-6xl font-bold mb-6">
Your Amazing Headline
</h1>
<p className="text-xl text-gray-600 mb-8 max-w-2xl mx-auto">
Compelling subtitle that explains your value proposition
</p>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<button className="btn-primary">Get Started</button>
<button className="btn-secondary">Learn More</button>
</div>
</div>
</section>
);
}

Split Screen Layout

Two-column layout with content on one side and visual on the other:

components/landing/hero/SplitHero.tsx
export default function SplitHero() {
return (
<section className="py-20 lg:py-32">
<div className="container mx-auto px-4">
<div className="grid lg:grid-cols-2 gap-12 items-center">
<div>
<h1 className="text-4xl lg:text-5xl font-bold mb-6">
Build Something Amazing
</h1>
<p className="text-lg text-gray-600 mb-8">
Create powerful applications with our comprehensive platform
</p>
</div>
<div className="relative">
<Image src="/hero-image.jpg" alt="Hero" width=600 height=400 />
</div>
</div>
</div>
</section>
);
}

Content Customization

Dynamic Content

Use dynamic content from your CMS or configuration:

components/landing/hero/DynamicHero.tsx
import { useTranslations } from 'next-intl';
import { SiteSettings } from '@/lib/config/settings';
export default function DynamicHero() {
const t = useTranslations('Hero');
return (
<section className="hero-section">
<h1 className="hero-title">
{t('Title')}
</h1>
<p className="hero-subtitle">
{t('Subtitle')}
</p>
</section>
);
}

CTA Button Customization

Customize call-to-action buttons and their behavior:

components/landing/hero/HeroButtons.tsx
interface HeroButtonsProps {
primaryText: string;
primaryHref: string;
secondaryText?: string;
secondaryHref?: string;
}
export default function HeroButtons({ primaryText, primaryHref, secondaryText, secondaryHref }: HeroButtonsProps) {
return (
<div className="flex flex-col sm:flex-row gap-4">
<Link href={primaryHref} className="btn-primary">
{primaryText}
</Link>
{secondaryText && secondaryHref && (
<Link href={secondaryHref} className="btn-secondary">
{secondaryText}
</Link>
)}
</div>
);
}

Next Steps

Now that you understand hero customization, explore these related areas:

Features Customization

Learn how to customize your features section.

Header Customization

Customize your header component and navigation.