Landing page adalah halaman pertama yang dilihat pengunjung. Harus menarik, cepat, dan memiliki call-to-action yang jelas. Kombinasi Astro + Tailwind adalah pilihan ideal.
Mengapa Astro + Tailwind?
- Astro: Zero JS by default, super fast
- Tailwind: Utility-first CSS, rapid development
- Kombinasi = Landing page cepat dengan DX yang excellent
Setup Project
Mari mulai dari project baru.
Buat Project Astro
npm create astro@latest landing-page
cd landing-page
Pilih template Empty agar kita mulai dari nol.
Install Tailwind CSS
Install Tailwind
npx astro add tailwind
Astro akan otomatis:
- Install dependencies
- Membuat
tailwind.config.mjs - Mengupdate
astro.config.mjs
Struktur Landing Page
Kita akan membuat landing page dengan sections berikut:
- Navbar - Navigation
- Hero - Headline + CTA
- Features - Keunggulan produk
- Testimonials - Social proof
- Pricing - Pilihan harga
- CTA - Final call-to-action
- Footer - Links + Copyright
1. Layout Base
Buat layout wrapper:
src/layouts/Layout.astro
astro
---
interface Props {
title: string;
}
const { title } = Astro.props;
---
<!doctype html>
<html lang="id">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Landing page description" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<title>{title}</title>
</head>
<body class="bg-gray-50 text-gray-900 antialiased">
<slot />
</body>
</html>
2. Navbar Component
src/components/Navbar.astro
astro
---
const navLinks = [
{ href: '#features', label: 'Features' },
{ href: '#pricing', label: 'Pricing' },
{ href: '#testimonials', label: 'Testimonials' },
];
---
<nav class="fixed top-0 left-0 right-0 z-50 bg-white/80 backdrop-blur-md border-b border-gray-100">
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between items-center h-16">
<!-- Logo -->
<a href="/" class="text-xl font-bold text-indigo-600">
BrandName
</a>
<!-- Nav Links -->
<div class="hidden md:flex items-center gap-8">
{navLinks.map(link => (
<a
href={link.href}
class="text-gray-600 hover:text-indigo-600 transition-colors"
>
{link.label}
</a>
))}
</div>
<!-- CTA Button -->
<a
href="#pricing"
class="bg-indigo-600 text-white px-4 py-2 rounded-lg hover:bg-indigo-700 transition-colors"
>
Get Started
</a>
</div>
</div>
</nav>
3. Hero Section
src/components/Hero.astro
astro
<section class="pt-32 pb-20 px-4">
<div class="max-w-4xl mx-auto text-center">
<!-- Badge -->
<span class="inline-block bg-indigo-100 text-indigo-700 px-4 py-1 rounded-full text-sm font-medium mb-6">
✨ New: Version 2.0 is here
</span>
<!-- Headline -->
<h1 class="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 mb-6 leading-tight">
Build amazing products
<span class="text-indigo-600">faster than ever</span>
</h1>
<!-- Subheadline -->
<p class="text-xl text-gray-600 mb-10 max-w-2xl mx-auto">
The all-in-one platform for modern teams.
Ship products 10x faster with our powerful toolkit.
</p>
<!-- CTA Buttons -->
<div class="flex flex-col sm:flex-row gap-4 justify-center">
<a
href="#pricing"
class="bg-indigo-600 text-white px-8 py-4 rounded-xl text-lg font-semibold hover:bg-indigo-700 transition-all hover:scale-105"
>
Start Free Trial
</a>
<a
href="#demo"
class="bg-white text-gray-700 px-8 py-4 rounded-xl text-lg font-semibold border border-gray-200 hover:border-gray-300 transition-all"
>
Watch Demo →
</a>
</div>
<!-- Social Proof -->
<p class="mt-10 text-gray-500 text-sm">
Trusted by 10,000+ teams worldwide
</p>
</div>
</section>
4. Features Section
src/components/Features.astro
astro
---
const features = [
{
icon: '🚀',
title: 'Lightning Fast',
description: 'Optimized for speed. Your users will love the instant response.'
},
{
icon: '🔒',
title: 'Secure by Default',
description: 'Enterprise-grade security built-in. SOC 2 Type II certified.'
},
{
icon: '📱',
title: 'Mobile First',
description: 'Beautiful on every device. Responsive design out of the box.'
},
{
icon: '🎨',
title: 'Customizable',
description: 'Make it yours. Extensive theming and branding options.'
},
{
icon: '📊',
title: 'Analytics',
description: 'Know your users. Built-in analytics and insights dashboard.'
},
{
icon: '🤝',
title: 'Team Friendly',
description: 'Collaborate seamlessly. Real-time sync and permissions.'
},
];
---
<section id="features" class="py-20 bg-white">
<div class="max-w-6xl mx-auto px-4">
<!-- Section Header -->
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
Everything you need
</h2>
<p class="text-xl text-gray-600 max-w-2xl mx-auto">
Powerful features to help your team ship faster and smarter.
</p>
</div>
<!-- Features Grid -->
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
{features.map(feature => (
<div class="p-6 rounded-2xl bg-gray-50 hover:bg-indigo-50 transition-colors group">
<div class="text-4xl mb-4">{feature.icon}</div>
<h3 class="text-xl font-semibold text-gray-900 mb-2 group-hover:text-indigo-600 transition-colors">
{feature.title}
</h3>
<p class="text-gray-600">
{feature.description}
</p>
</div>
))}
</div>
</div>
</section>
5. Pricing Section
src/components/Pricing.astro
astro
---
const plans = [
{
name: 'Starter',
price: 'Free',
description: 'Perfect for side projects',
features: ['Up to 3 projects', '1 team member', 'Basic analytics', 'Email support'],
cta: 'Get Started',
popular: false
},
{
name: 'Pro',
price: '$29',
period: '/month',
description: 'For growing teams',
features: ['Unlimited projects', 'Up to 10 members', 'Advanced analytics', 'Priority support', 'Custom domain'],
cta: 'Start Free Trial',
popular: true
},
{
name: 'Enterprise',
price: 'Custom',
description: 'For large organizations',
features: ['Everything in Pro', 'Unlimited members', 'SSO & SAML', 'Dedicated support', 'SLA guarantee'],
cta: 'Contact Sales',
popular: false
}
];
---
<section id="pricing" class="py-20 bg-gray-50">
<div class="max-w-6xl mx-auto px-4">
<div class="text-center mb-16">
<h2 class="text-3xl sm:text-4xl font-bold text-gray-900 mb-4">
Simple, transparent pricing
</h2>
<p class="text-xl text-gray-600">
No hidden fees. Cancel anytime.
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
{plans.map(plan => (
<div class={`p-8 rounded-2xl bg-white border-2 ${plan.popular ? 'border-indigo-600 relative' : 'border-gray-100'}`}>
{plan.popular && (
<span class="absolute -top-4 left-1/2 -translate-x-1/2 bg-indigo-600 text-white px-4 py-1 rounded-full text-sm font-medium">
Most Popular
</span>
)}
<h3 class="text-xl font-semibold text-gray-900 mb-2">{plan.name}</h3>
<p class="text-gray-600 mb-4">{plan.description}</p>
<div class="mb-6">
<span class="text-4xl font-bold text-gray-900">{plan.price}</span>
{plan.period && <span class="text-gray-600">{plan.period}</span>}
</div>
<ul class="space-y-3 mb-8">
{plan.features.map(feature => (
<li class="flex items-center gap-2 text-gray-600">
<span class="text-green-500">✓</span>
{feature}
</li>
))}
</ul>
<a
href="#"
class={`block text-center py-3 rounded-xl font-semibold transition-colors ${
plan.popular
? 'bg-indigo-600 text-white hover:bg-indigo-700'
: 'bg-gray-100 text-gray-900 hover:bg-gray-200'
}`}
>
{plan.cta}
</a>
</div>
))}
</div>
</div>
</section>
6. Footer
src/components/Footer.astro
astro
<footer class="bg-gray-900 text-gray-400 py-12">
<div class="max-w-6xl mx-auto px-4">
<div class="grid md:grid-cols-4 gap-8 mb-8">
<div>
<h4 class="text-white font-semibold mb-4">BrandName</h4>
<p class="text-sm">Building the future of productivity.</p>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Product</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Features</a></li>
<li><a href="#" class="hover:text-white transition-colors">Pricing</a></li>
<li><a href="#" class="hover:text-white transition-colors">Changelog</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Company</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">About</a></li>
<li><a href="#" class="hover:text-white transition-colors">Blog</a></li>
<li><a href="#" class="hover:text-white transition-colors">Careers</a></li>
</ul>
</div>
<div>
<h4 class="text-white font-semibold mb-4">Legal</h4>
<ul class="space-y-2 text-sm">
<li><a href="#" class="hover:text-white transition-colors">Privacy</a></li>
<li><a href="#" class="hover:text-white transition-colors">Terms</a></li>
</ul>
</div>
</div>
<div class="border-t border-gray-800 pt-8 text-center text-sm">
© 2026 BrandName. All rights reserved.
</div>
</div>
</footer>
Final: Landing Page
src/pages/index.astro
astro
---
import Layout from '../layouts/Layout.astro';
import Navbar from '../components/Navbar.astro';
import Hero from '../components/Hero.astro';
import Features from '../components/Features.astro';
import Pricing from '../components/Pricing.astro';
import Footer from '../components/Footer.astro';
<InfoBox type="tip" title="Informasi">
Tutorial landing page profesional dengan Tailwind dan Astro.
</InfoBox>
<AuthorSignature
name="Dimas Julianto, S.Kom."
role="Developer & Founder"
avatar={imgAuthor}
profileHandle="dimasjulianto"
bio="Landing page developer tanpa CSS dari nol."
github="https://github.com/dimasjulianto"
facebook="https://facebook.com/dimasjulianto.id"
instagram="https://instagram.com/masehdim"
youtube="https://youtube.com/@sitemas"
whatsapp="https://whatsapp.com/channel/0029VbCMRM42UPBA1zpC7q0f"
telegram="https://t.me/+tGWF064xejJhNzc1"
/>
---
<Layout title="BrandName - Ship Products Faster">
<Navbar />
<main>
<Hero />
<Features />
<Pricing />
</main>
<Footer />
</Layout>
Run dan Lihat Hasilnya
Run Development Server
npm run dev
Buka http://localhost:4321 dan lihat landing page kamu!
Tips Tambahan
Best Practices
- Responsiveness: Test di berbagai screen size
- Performance: Lazy load gambar yang tidak critical
- Accessibility: Pastikan kontras warna cukup, dan ada focus states
- Animation: Tambahkan subtle animations dengan
transitionatauanimate-
Kesimpulan
Dengan Astro + Tailwind, kamu bisa membuat landing page profesional dalam hitungan jam. Code-nya clean, performanya excellent, dan mudah di-maintain.
Lihat Kode Lengkap
Clone repository untuk melihat source code lengkap.
Komentar