DLBForTech logo
← Back to Home

Public Components

Visual documentation dan preview dari semua komponen UI yang tersedia untuk area public/front-end website.

Artikel

Tempat untuk publikasi insight, update perusahaan, dan konten edukasi.

Medium

Tanpa label

Dengan label

RTL

Small

Tanpa label

Dengan label

RTL

Typography & Fonts

Project ini menggunakan 2 font utama: Montserrat untuk heading dan Manrope untuk body text.

Montserrat

Heading & Display Font

font-heading | font-display
The quick brown fox
The quick brown fox
The quick brown fox
The quick brown fox

Usage:

<h1 className="font-heading text-4xl font-bold">
  Judul Utama
</h1>

Manrope

Body & Sans-Serif Font (Default)

font-body | font-sans
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

Usage:

<p className="font-body text-base">
  Body text menggunakan Manrope
</p>

📚 Best Practices

✅ Gunakan Montserrat untuk:

  • Heading (h1, h2, h3, etc.)
  • Hero text / Display text
  • Navigation menu items
  • Button labels (emphasis)
  • Section titles

✅ Gunakan Manrope untuk:

  • Body text / Paragraph
  • Descriptions
  • Form inputs
  • Default text content
  • Small text / captions

Shadcn UI Buttons

Standard button component dari Shadcn UI dengan berbagai variant.

Variants

Sizes

States

Animated Button

Custom button dengan animasi hover yang smooth. Text slide dari bawah ke atas dengan background fill effect.

import { AnimatedButton } from

Color Variants

Sizes

States

Usage Example

<AnimatedButton variant="primary">
  Click Me
</AnimatedButton>

<AnimatedButton variant="secondary" size="lg">
  Large Button
</AnimatedButton>

<AnimatedButton asChild variant="success">
  <Link href="/about">About Us</Link>
</AnimatedButton>

Real-World Examples

Contoh implementasi komponen dalam use case nyata.

Hero Section CTA

Ready to Get Started?

Join thousands of companies already using our platform to streamline their workflow.

Feature Cards

🚀

Fast Setup

Get started in minutes with our intuitive setup process.

🔒

Secure

Enterprise-grade security to protect your data.

⚡

Powerful

Advanced features for complex workflows.

Newsletter Signup

Stay Updated

Subscribe to our newsletter and get the latest updates delivered to your inbox.

📚 Full Documentation

Lihat dokumentasi lengkap dengan props, usage examples, best practices, dan troubleshooting guide.

Read PUBLIC_COMPONENTS.md ↗