Quickstart

This guide will help you understand the template structure and make your first customizations. By the end, you’ll know how to modify existing pages and create new components.

Make sure you’ve completed the installation before proceeding.

Understanding the Home Page

The home page (src/app/page.tsx) is your starting point. Let’s explore how it’s structured:

src/app/page.tsx

import AboutSectionOne from "@/components/About/AboutSectionOne";
import AboutSectionTwo from "@/components/About/AboutSectionTwo";
import Blog from "@/components/Blog";
import Brands from "@/components/Brands";
import ScrollUp from "@/components/Common/ScrollUp";
import Contact from "@/components/Contact";
import Features from "@/components/Features";
import Hero from "@/components/Hero/index1";
import Pricing from "@/components/Pricing";
import Testimonials from "@/components/Testimonials";
import Video from "@/components/Video";

export default function Home() {
  return (
    <>
      <ScrollUp />
      <Hero />
      <Features />
      <Video />
      <Brands />
      <AboutSectionOne />
      <AboutSectionTwo />
      <Testimonials />
      <Pricing />
      <Blog />
      <Contact />
    </>
  );
}

Each component represents a section on your landing page. You can reorder, remove, or add sections by simply rearranging these imports.

Quick Customizations

Customize the Hero Section

The Hero section is the first thing visitors see. Let’s modify it:Original Hero component (src/components/Hero/index1.tsx:14-19):

src/components/Hero/index1.tsx

<h1 className="mb-5 text-black dark:text-white font-bold text-3xl sm:text-4xl md:text-5xl leading-tight">
  Potencia tu negocio con un eCommerce o Landing Page diseñados para vender
</h1>
<p className="mb-12 text-base !leading-relaxed text-body-color dark:text-body-color-dark sm:text-lg md:text-xl">
  Atrae más clientes, aumenta tus ventas y optimiza cada clic con una plataforma hecha a tu medida. ¡Convierte visitantes en ventas hoy mismo!
</p>

Customize it for your business:

src/components/Hero/index1.tsx

<h1 className="mb-5 text-black dark:text-white font-bold text-3xl sm:text-4xl md:text-5xl leading-tight">
  Build Your SaaS Product Faster
</h1>
<p className="mb-12 text-base !leading-relaxed text-body-color dark:text-body-color-dark sm:text-lg md:text-xl">
  Launch your startup with a production-ready Next.js template. 
  Save months of development time and focus on what matters.
</p>

The Hero section uses responsive Tailwind classes. The heading automatically adjusts from text-3xl on mobile to text-5xl on desktop.

Modify Features Section

The Features section showcases your services. Edit the content in src/components/Features/featuresData.tsx:Original feature data (src/components/Features/featuresData.tsx:15-18):

src/components/Features/featuresData.tsx

{
  id: 1,
  icon: (
    <svg width="40" height="41" viewBox="0 0 40 41" className="fill-current">
      {/* SVG paths */}
    </svg>
  ),
  title: "Desarrollo Web",
  paragraph: "Desarrollaremos la página web que necesita tu empresa...",
}

Customize with your own features:

src/components/Features/featuresData.tsx

{
  id: 1,
  icon: (
    <svg width="40" height="41" viewBox="0 0 40 41" className="fill-current">
      {/* Keep existing SVG or replace with your icon */}
    </svg>
  ),
  title: "Lightning Fast",
  paragraph: "Built on Next.js 14 with App Router for maximum performance and SEO optimization.",
}

The features automatically render in a responsive grid (src/components/Features/index.tsx:16-20):

src/components/Features/index.tsx

<div className="grid grid-cols-1 gap-x-8 gap-y-14 md:grid-cols-2 lg:grid-cols-3">
  {featuresData.map((feature) => (
    <SingleFeature key={feature.id} feature={feature} />
  ))}
</div>

Update Site Metadata

Change your site’s title, description, and SEO metadata in src/app/layout.tsx:Original metadata (src/app/layout.tsx:13-23):

src/app/layout.tsx

export const metadata: Metadata = {
  title: 'Pengrafic: Agencia de Marketing Digital y Desarrollo Web',
  description: 'Tu descripción del sitio web de Pengrafic...',
  icons: {
    icon: '/favicon.ico',
    shortcut: '/pen2025.png',
  },
  verification: {
    google: 'xIiLIUqqWxzZ6XSXF7YQ-GKiOKmlUnUdIrTsd3fnceg',
  },
};

Customize for your brand:

src/app/layout.tsx

export const metadata: Metadata = {
  title: 'YourStartup - SaaS Template for Next.js',
  description: 'Modern, fast, and SEO-optimized SaaS landing page template built with Next.js 14 and Tailwind CSS.',
  icons: {
    icon: '/favicon.ico',
    shortcut: '/logo.png',
  },
  verification: {
    google: 'your-google-verification-code',
  },
};

Reorder or Remove Sections

Simply rearrange components in src/app/page.tsx to change section order:Before:

export default function Home() {
  return (
    <>
      <ScrollUp />
      <Hero />
      <Features />
      <Video />
      <Brands />
    </>
  );
}

After (Features before Hero):

export default function Home() {
  return (
    <>
      <ScrollUp />
      <Features />
      <Hero />
      <Video />
    </>
  );
}

Remove sections you don’t need:

export default function Home() {
  return (
    <>
      <ScrollUp />
      <Hero />
      <Features />
      {/* Video, Brands, and other sections removed */}
      <Contact />
    </>
  );
}

Creating a Custom Component

Let’s build a new “Stats” component from scratch to display key metrics.

Create the Component File

Create a new file: src/components/Stats/index.tsx

src/components/Stats/index.tsx

const Stats = () => {
  const stats = [
    { number: "10K+", label: "Active Users" },
    { number: "99.9%", label: "Uptime" },
    { number: "24/7", label: "Support" },
    { number: "50+", label: "Countries" },
  ];

  return (
    <section className="bg-primary/5 py-16 md:py-20 lg:py-28">
      <div className="container">
        <div className="grid grid-cols-2 gap-8 md:grid-cols-4">
          {stats.map((stat, index) => (
            <div key={index} className="text-center">
              <h3 className="mb-2 text-4xl font-bold text-black dark:text-white md:text-5xl">
                {stat.number}
              </h3>
              <p className="text-base text-body-color dark:text-body-color-dark">
                {stat.label}
              </p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Stats;

This component follows the same pattern as existing components like Features and uses the template’s design system classes.

Add to Home Page

Import and use your new component in src/app/page.tsx:

src/app/page.tsx

import Hero from "@/components/Hero/index1";
import Features from "@/components/Features";
import Stats from "@/components/Stats"; // Add this import

export default function Home() {
  return (
    <>
      <ScrollUp />
      <Hero />
      <Features />
      <Stats /> {/* Add your new component */}
      <Contact />
    </>
  );
}

View Your Changes

Save the files and check localhost:3000. Your new Stats section should appear between Features and Contact!

Using Existing Components

The template includes ready-to-use components. Here’s how the SectionTitle component works:

src/components/Common/SectionTitle.tsx

const SectionTitle = ({
  title,
  paragraph,
  width = "570px",
  center,
  mb = "100px",
}: {
  title: string;
  paragraph: string;
  width?: string;
  center?: boolean;
  mb?: string;
}) => {
  return (
    <div
      className={`w-full ${center ? "mx-auto text-center" : ""}`}
      style={{ maxWidth: width, marginBottom: mb }}
    >
      <h2 className="mb-4 text-3xl font-bold !leading-tight text-black dark:text-white sm:text-4xl md:text-[45px]">
        {title}
      </h2>
      <p className="text-base !leading-relaxed text-body-color md:text-lg">
        {paragraph}
      </p>
    </div>
  );
};

Use it in your components:

import SectionTitle from "@/components/Common/SectionTitle";

const MySection = () => {
  return (
    <section>
      <div className="container">
        <SectionTitle
          title="Our Services"
          paragraph="Discover what makes us different from the competition."
          center
        />
        {/* Your content */}
      </div>
    </section>
  );
};

Dark Mode Support

Dark mode is built-in using next-themes. All components automatically support dark mode with dark: prefixed Tailwind classes:

<h1 className="text-black dark:text-white">
  This text is black in light mode, white in dark mode
</h1>

<div className="bg-white dark:bg-gray-dark">
  Background adapts to theme
</div>

Users can toggle dark mode using the theme switcher in the header. Their preference is saved to localStorage.

TypeScript Types

The template uses TypeScript for type safety. When creating new features, define types in src/types/:

src/types/feature.ts

export type Feature = {
  id: number;
  icon: JSX.Element;
  title: string;
  paragraph: string;
};

Then use them in your components for autocomplete and type checking:

import { Feature } from "@/types/feature";

const SingleFeature = ({ feature }: { feature: Feature }) => {
  const { icon, title, paragraph } = feature;
  // TypeScript knows these properties exist!
};

Path Aliases

The template uses @/* as a path alias configured in tsconfig.json. This means:

// ✅ Clean imports
import Hero from "@/components/Hero";
import { supabase } from "@/lib/supabaseClient";

// ❌ Avoid relative paths
import Hero from "../../../components/Hero";

Next Steps

Components Reference

Explore all available components and their props

Styling Guide

Learn about Tailwind CSS customization and theming

Adding Pages

Create new pages using Next.js App Router

Deployment

Deploy your customized site to production

Common Tasks

How do I change the primary color?

Edit tailwind.config.js and modify the primary color value:

tailwind.config.js

theme: {
  extend: {
    colors: {
      primary: "#4A6CF7", // Change this hex value
    },
  },
},

How do I add a new page?

Create a new folder in src/app/ with a page.tsx file:

src/app/services/page.tsx

export default function Services() {
  return (
    <div>
      <h1>Our Services</h1>
      {/* Your content */}
    </div>
  );
}

The page will be automatically available at /services.

How do I change fonts?

The template uses Inter font from Google Fonts. Change it in src/app/layout.tsx:

src/app/layout.tsx

import { Poppins } from "next/font/google";

const poppins = Poppins({ 
  subsets: ["latin"],
  weight: ["400", "500", "600", "700"],
});

How do I add animations?

The template includes Framer Motion. Import and use it:

import { motion } from "framer-motion";

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.5 }}
>
  Your content
</motion.div>

Experiment freely! All changes are immediately visible with Next.js Fast Refresh. Press Ctrl+C in the terminal to stop the dev server anytime.

Getting Started

Components

Customization

Features

Deployment

Understanding the Home Page

Quick Customizations

Creating a Custom Component

Using Existing Components

Dark Mode Support

TypeScript Types

Path Aliases

Next Steps

Components Reference

Styling Guide

Adding Pages

Deployment

Common Tasks

Build docs developers (and LLMs) love

Getting Started

Components

Customization

Features

Deployment

​Understanding the Home Page

​Quick Customizations

​Creating a Custom Component

​Using Existing Components

​Dark Mode Support

​TypeScript Types

​Path Aliases

​Next Steps

Components Reference

Styling Guide

Adding Pages

Deployment

​Common Tasks

Build docs developers (and LLMs) love

Understanding the Home Page

Quick Customizations

Creating a Custom Component

Using Existing Components

Dark Mode Support

TypeScript Types

Path Aliases

Next Steps

Common Tasks