Project Structure

Here's the recommended folder structure when using gettemplate templates:

my-project/
├── components/
│   ├── ui/           # Reusable UI components
│   ├── layouts/      # Layout components
│   └── sections/     # Page sections (Hero, Features, etc.)
├── pages/            # Next.js pages (or app/ for App Router)
│   ├── _app.js
│   ├── _document.js
│   └── index.js
├── styles/
│   └── globals.css   # Global styles + Tailwind imports
├── lib/
│   └── utils.js      # Utility functions
├── public/
│   └── images/       # Static assets
├── tailwind.config.js
├── next.config.js
└── package.json

Component Organization

We recommend organizing templates by category:

components/
├── Hero/
│   ├── KlipHeroSection.jsx
│   ├── AgentoHeroSection.jsx
│   └── index.js
├── Portfolio/
│   ├── DeveloperPortfolio.jsx
│   └── DesignerPortfolio.jsx
├── Payment/
│   ├── CheckoutPage.jsx
│   └── PricingSection.jsx
└── Forms/
    ├── LoginForm.jsx
    └── SignupForm.jsx

Best Practices

1.Keep components isolated - Each template should be self-contained

2.Use consistent naming - PascalCase for components

3.Extract reusable parts - Create shared UI components

4.Maintain clean imports - Use index files for exports