Skip to main content
The Pengrafic template includes a comprehensive set of pre-built components designed to help you create a professional marketing website quickly. All components are built with Next.js 14, TypeScript, and Tailwind CSS.

​
Available Components

Hero

Eye-catching hero section with CTA buttons and decorative SVG backgrounds

Features

Showcase your services with icon-based feature cards in a responsive grid

About

Tell your story with two-section about component including mission and vision

Testimonials

Build trust with customer testimonials and star ratings

Pricing

Display pricing plans with monthly/annual toggle and feature lists

Blog

Showcase your latest blog posts in an attractive grid layout

Contact

Contact form with newsletter subscription box

Video

YouTube video player with modal and custom thumbnail

Brands

Display partner logos or client brands in a responsive grid

Header

Responsive navigation header with sticky behavior and mobile menu

Footer

Comprehensive footer with logo, social links, and navigation

ScrollUp

Smooth scroll-to-top button for easy page navigation

​
Common Features

All components share these characteristics:
  • Responsive Design: Mobile-first approach with breakpoints for all screen sizes
  • Dark Mode Support: Built-in dark mode with dark: Tailwind variants
  • TypeScript: Fully typed with interfaces for props and data structures
  • Accessibility: Semantic HTML and proper ARIA attributes
  • SEO Optimized: Proper heading hierarchy and meta information

​
Getting Started

Components are located in src/components/ and can be imported directly: 
import Hero from "@/components/Hero/index1";
import Features from "@/components/Features";
import Testimonials from "@/components/Testimonials";

export default function Page() {
  return (
    <>
      <Hero />
      <Features />
      <Testimonials />
    </>
  );
}

​
Shared Components

​
SectionTitle

Most sections use the SectionTitle component for consistent headings: 
import SectionTitle from "@/components/Common/SectionTitle";

<SectionTitle
  title="Your Title"
  paragraph="Your description"
  center
  width="665px"
  mb="100px"
/>
​
title
string
required
The main heading text
​
paragraph
string
required
Supporting description text below the title
​
width
string
default:"570px"
Maximum width of the section title container
​
center
boolean
default:"false"
Center align the title and text
​
mb
string
default:"100px"
Bottom margin spacing

​
Styling System

The template uses a consistent color system defined in Tailwind config:
  • primary: Main brand color (#4A6CF7)
  • body-color: Body text color
  • body-color-dark: Dark mode body text
  • gray-dark: Dark mode backgrounds

​
Next Steps

Explore individual component documentation to learn about:
  • Component-specific props and configuration
  • Data structure requirements
  • Customization examples
  • Usage patterns and best practices

Build docs developers (and LLMs) love

Get started for freeTalk to us