A great homepage is your digital storefront. It can inspire trust, highlight features, and motivate visitors to act. Using Next.js and @heroui/react, you can design a page that loads quickly, looks professional, and converts clicks into customers. Today, I’ll walk you through building a homepage with Cards, Images, Typography, Grid, and Button components to showcase a product or service — complete with testimonials, features, and strong CTAs.
Setting Up Your Project
We start with a clean foundation. Open your terminal and create a new Next.js project with TypeScript:
Designing the Section
Your hero section is where first impressions happen. Use Grid for layout and Typography for headings.
// components/HomeProduct.tsx
import { Button, Image } from '@heroui/react';
export default function HomeHero() {
return (
<div className="grid grid-cols-1 md:grid-cols-2 gap-8 items-center">
<div className="col-span-1">
<h1 className="text-4xl md:text-5xl font-bold leading-tight mb-4">
Transform Your Workflow
</h1>
<p className="text-lg md:text-xl text-gray-700 mb-8">
Discover tools that boost productivity and collaboration for teams of any size.
</p>
<Button size="lg" color="primary">
Get Started
</Button>
</div>
<div className="col-span-1 flex justify-center md:justify-end">
<Image
src="https://heroui.com/images/hero-card-complete.jpeg"
alt="Product in action"
/>
</div>
</div>
);
}Key points:
- Typography provides a clear hierarchy.
- Button drives immediate action.
- Image adds visual appeal without slowing down load times.
Highlighting Features
Break down your product’s core features into Cards. This section convinces visitors that your product solves their problem.
// components/Features.tsx
import { Card, CardBody } from '@heroui/react';
const features = [
{ title: "Fast Performance", desc: "Optimized code ensures lightning-fast loading times." },
{ title: "Secure Data", desc: "Industry-leading encryption protects your information." },
{ title: "Easy Integration", desc: "Connect with your favorite tools in minutes." },
];
export default function Features() {
return (
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
{features.map((feature, i) => (
<div key={i} className="col-span-1">
<Card style={{ height: '150px' }}>
<CardBody>
<h4 className="text-xl font-semibold mb-2">{feature.title}</h4>
<p className="text-gray-600">{feature.desc}</p>
</CardBody>
</Card>
</div>
))}
</div>
);
}Cards give each feature its own space, making them easy to scan. This also improves mobile readability.
Adding Testimonials
Testimonials build trust. Use Card and Typography to display them attractively.
// components/Testimonials.tsx
import { Card, CardBody } from '@heroui/react'; // Assuming Card is still desired from @heroui/react or will be replaced
const testimonials = [
{ name: "Alex P.", text: "This product changed how my team works. Highly recommended!" },
{ name: "Jamie L.", text: "Easy to use and delivers great results every time." },
{ name: "Morgan R.", text: "Support is fantastic. They truly care about their users." },
];
export default function Testimonials() {
return (
<div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
{testimonials.map((t, i) => (
<div key={i} className="col-span-1">
<Card>
<CardBody>
<p className="text-lg text-gray-800 mb-4">"{t.text}"</p>
<p className="text-sm text-gray-600 font-semibold">- {t.name}</p>
</CardBody>
</Card>
</div>
))}
</div>
);
}Keep testimonial text short and authentic. Real names and specific praise increase credibility.
Closing with a Strong CTA
The final section should push visitors to act. Combine persuasive copy with a high-contrast button.
// components/FinalCTA.tsx
import { Button } from '@heroui/react';
export default function FinalCTA() {
return (
<div className="text-center p-8 bg-white rounded-lg shadow-md">
<h3 className="text-3xl md:text-4xl font-bold mb-4">
Ready to get started?
</h3>
<p className="text-lg text-gray-700 mb-8">
Join thousands of teams who trust us to power their workflow.
</p>
<Button size="lg" color="secondary">
Start Your Free Trial
</Button>
</div>
);
}Place this above the footer so it’s visible before people exit the page.
FAQ Section with Accordion
An FAQ section helps visitors find quick answers to common questions without contacting support. Using @heroui/react, you can implement an accordion layout that’s mobile-friendly and easy to scan.
// components/FAQ.tsx
import { Accordion, AccordionItem, Card } from "@heroui/react";
const faqs = [
{
question: "How does the free trial work?",
answer:
"You get full access to all features for 14 days. No credit card is required.",
},
{
question: "Can I cancel anytime?",
answer:
"Yes, you can cancel your subscription from your account settings at any time.",
},
{
question: "Do you offer customer support?",
answer:
"Absolutely! Our support team is available 24/7 via chat and email.",
},
];
export default function FAQ() {
return (
<Card>
<section className="max-w-4xl mx-auto py-8 px-4 sm:px-6 lg:px-8">
<h3 className="text-3xl font-bold text-center mb-6">
Frequently Asked Questions
</h3>
<Accordion>
{faqs.map((faq, index) => (
<AccordionItem key={index} title={faq.question}>
<p className="text-base text-gray-700">{faq.answer}</p>
</AccordionItem>
))}
</Accordion>
</section>
</Card>
);
}How it Works:
- Accordion wraps multiple AccordionItem components.
- Each AccordionItem contains a
titlefor the question and body content for the answer. - FAQ data is stored in an array, making it easy to add or update questions.
- Styling ensures the section is centered and readable.
Putting It All Together
In your app/marketing/page.tsx:
"use client";
import HomeProduct from "../../components/HomeProduct";
import Features from "../../components/Features";
import Testimonials from "../../components/Testimonials";
import FinalCTA from "../../components/FinalCTA";
import FAQ from "../../components/FAQ";
export default function Home() {
return (
<div className="min-h-screen bg-gray-50">
<section className="py-4 md:py-6 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<HomeProduct />
</section>
<section className="py-4 md:py-6 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<Features />
</section>
<section className="py-4 md:py-6 px-4 sm:px-6 lg:px-8 max-w-7xl mx-auto">
<Testimonials />
</section>
<section className="py-4 md:py-6 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto">
<FinalCTA />
</section>
<section className="py-4 md:py-6 px-4 sm:px-6 lg:px-8 max-w-5xl mx-auto">
<FAQ />
</section>
</div>
);
}The result is a polished homepage that loads quickly, looks professional, and drives conversions. With Next.js handling routing and performance, and @heroui/react ensuring design consistency, your marketing site will impress visitors from the first click.
Test Application
npm run dev
http://localhost:3000/marketing
Finally
Building a marketing homepage with Next.js and @heroui/react is both efficient and enjoyable. With just a few well-structured components — Hero, Features, Testimonials, and CTAs — you can create a page that looks modern, loads fast, and persuades visitors to take action. By leveraging Cards for clarity, Typography for hierarchy, Grid for layout, Images for visual storytelling, and Buttons for engagement, you provide a smooth, mobile-friendly experience.
This article was originally published on Medium.
