Files
gallery/app/templates-data.ts
zooqueen 29267e0af3 every card photographs its own template, at all three sizes, in webp
Several cards were not pictures of a template at all. quantum was a Next
"Failed to compile" panel. prism was the demo link index. jobfinder and deploy
were shot with the Background layer off, so a lit scene photographed as tiles
on flat grey, and jobfinder was not even the right template. canvas caught a
full-screen intro counter mid-count.

The 56 remaining cards are now shot from the running template through one
recipe: 1920x1080, plus the 834x1112 and 390x844 portraits the detail page
switches between. Every card has all three; none had them before.

Six rows are gone because none could show a picture of its own. folio-html,
folio-full and folio-main share a single path with no page left between them,
folio-main's page being the link index itself, and each was displaying a
neighbour's photograph. folio-portfolio-details-3 is identical to its
neighbour, and betacrm-duplicate is what its name says.

The captures are webp, not png. next.config sets images.unoptimized, so what
is committed is exactly what a visitor downloads, and a grid of 56 png cards
is 54MB of page. At q82 the same pictures are 14MB for the whole set — RMSE
0.66/255 against the png, max 1.27, which is below what an eye resolves at
card size. It is also what the repo can carry: 162MB of png would not transfer
in one pack.

public/screenshots/full and /og go with them. Nothing in the app, the scripts
or the export has referenced either; they were 50MB of pictures nobody could
reach. The seven root *.md progress reports go too — LLM.md is the one place
this repo keeps what it knows.
2026-08-14 09:17:20 -07:00

1338 lines
32 KiB
TypeScript

export interface Template {
id: number;
name: string;
displayName: string;
slug: string; // URL-friendly slug
category: string;
screenshot: string;
path: string;
framework: string;
rating: number;
features: string[];
components: string;
easeOfSetup: number;
useCase: string;
tier: number;
description?: string;
updatedDate?: string;
port?: number;
family?: string; // Base template family (e.g., "brainwave", "xora", "bento-cards")
}
// Helper function to generate slug from display name
export function generateSlug(displayName: string): string {
return displayName
.toLowerCase()
.replace(/[^a-z0-9]+/g, '-')
.replace(/^-+|-+$/g, '');
}
// Port mapping for live previews
export const TEMPLATE_PORTS: Record<string, number> = {
// Tier 1 - Next.js templates (3000-3020)
'synapse': 3001,
'circle': 3002,
'metrics': 3003,
'kinetic': 3004,
'quantum': 3005,
'blocks': 3008,
'savor': 3009,
'mint': 3010,
// Tier 2 - React/Next.js (3021-3040)
'prism-react': 3021,
'soar': 3024,
'cipher-react': 3025,
'launch': 3026,
'construct': 3028,
'deploy': 3029,
'loop': 3030,
// Bento Cards - Next.js (3006-3007, 3022-3023)
'matrix': 3006,
'mosaic': 3007,
'matrix-react': 3022,
'mosaic-react': 3023,
// Tier 3 - HTML/Gulp (3041-3080)
'prism': 3041,
'canvas': 3042,
'solo': 3043,
'vault': 3044,
'cipher-html': 3045,
'prism-html': 3046,
'beta': 3047,
'beta-variant': 3047,
'forge': 3048,
'hygge': 3049,
'hygge-bootstrap': 3049,
'kalli-html': 3053,
'drive': 3055,
'drive-html': 3055,
'oasis': 3056,
'studio': 3057,
'consca': 3058,
// Folio variants (3050-3052, 3060-3075)
'folio-about': 3060,
'folio-contact': 3061,
'folio-creative-agency-1': 3062,
'folio-creative-agency-2': 3063,
'folio-creative-designer-1': 3064,
'folio-creative-designer-2': 3065,
'folio-creative-developer-1': 3066,
'folio-creative-developer-2': 3067,
'folio-creative-photography-1': 3068,
'folio-creative-photography-2': 3069,
'folio-grid-2': 3070,
'folio-grid-3': 3071,
'folio-grid-3-fluid': 3072,
'folio-grid-4': 3073,
'folio-grid-4-fluid': 3074,
'folio-masonry-2': 3075,
'folio-masonry-3': 3076,
'folio-masonry-3-fluid': 3077,
'folio-masonry-4': 3078,
'folio-masonry-4-fluid': 3079,
'folio-portfolio-details': 3080,
'folio-portfolio-details-2': 3081,
// Bento Cards HTML variants (3090-3095)
'loop-html': 3090,
'cipher-cards-html': 3091,
'cipher-cards-react': 3092,
// Additional (3100+)
'soar-html': 3100,
'unity': 3101,
// Newly added templates (3102-3107)
'jobfinder': 3102,
'pixel': 3103,
'saas-landing': 3104,
'serif': 3106,
};
export const templates: Template[] = [
// === TIER 1 - Excellent (Next.js 14+, TypeScript, Modern React) ===
{
id: 1,
name: 'synapse',
displayName: 'Synapse',
slug: 'synapse',
category: 'AI/SaaS',
screenshot: 'synapse',
path: 'apps/synapse',
framework: 'Next.js 14.2 + TS',
rating: 5,
features: ['AI Chat', 'Audio/Video', 'Photo Edit', 'Pricing', 'Responsive'],
components: '50+ comp',
easeOfSetup: 5,
useCase: 'AI SaaS platforms',
tier: 1,
description: 'Modern AI SaaS platform with chat, audio/video processing, and photo editing capabilities.',
updatedDate: '2024-05-01',
port: 3001,
family: 'synapse',
},
{
id: 2,
name: 'circle',
displayName: 'Circle',
slug: 'circle',
category: 'Social Media',
screenshot: 'circle',
path: 'apps/circle',
framework: 'Next.js 14.2 + TS',
rating: 5,
features: ['Posts', 'Messages', 'Profiles', 'Notifications', 'Responsive'],
components: '40+ comp',
easeOfSetup: 5,
useCase: 'Social media platforms',
tier: 1,
port: 3002,
family: 'circle',
},
{
id: 3,
name: 'metrics',
displayName: 'Metrics',
slug: 'metrics',
category: 'Dashboard',
screenshot: 'metrics',
path: 'apps/metrics',
framework: 'Next.js 13.3 + TS',
rating: 5,
features: ['Analytics', 'CRM', 'Finance', 'Projects', 'Responsive'],
components: '60+ comp',
easeOfSetup: 5,
useCase: 'Admin dashboards',
tier: 1,
port: 3003,
family: 'metrics',
},
{
id: 4,
name: 'kinetic',
displayName: 'Kinetic',
slug: 'kinetic',
category: 'Portfolio',
screenshot: 'kinetic',
path: 'apps/kinetic',
framework: 'Next.js 14.2 + TS',
rating: 5,
features: ['GSAP', 'Smooth Scroll', 'Portfolio', 'Modern'],
components: '15+ comp',
easeOfSetup: 5,
useCase: 'Creative portfolios',
tier: 1,
port: 3004,
family: 'kinetic',
},
{
id: 5,
name: 'quantum',
displayName: 'Quantum',
slug: 'quantum',
category: 'SaaS',
screenshot: 'quantum',
path: 'apps/quantum',
framework: 'Next.js 14.1',
rating: 5,
features: ['Framer Motion', 'Landing', 'Modern', 'Responsive'],
components: '20+ comp',
easeOfSetup: 5,
useCase: 'SaaS landing pages',
tier: 1,
port: 3005,
family: 'quantum',
},
{
id: 6,
name: 'blocks',
displayName: 'Blocks',
slug: 'blocks',
category: 'Component Library',
screenshot: 'blocks',
path: 'apps/blocks',
framework: 'Next.js 14 + shadcn',
rating: 5,
features: ['shadcn/ui', 'Blocks', 'Components', 'Responsive'],
components: '100+ blocks',
easeOfSetup: 5,
useCase: 'shadcn component library',
tier: 1,
port: 3008,
family: 'blocks',
},
{
id: 7,
name: 'savor',
displayName: 'Savor',
slug: 'savor',
category: 'E-commerce',
screenshot: 'savor',
path: 'apps/savor',
framework: 'Next.js 14.2 + TS',
rating: 5,
features: ['Food', 'Delivery', 'Orders', 'Responsive'],
components: '30+ comp',
easeOfSetup: 5,
useCase: 'Food delivery apps',
tier: 1,
port: 3009,
family: 'savor',
},
{
id: 8,
name: 'mint',
displayName: 'Mint',
slug: 'mint',
category: 'Portfolio',
screenshot: 'mint',
path: 'apps/mint',
framework: 'Next.js 14 + TS',
rating: 5,
features: ['Portfolio', 'Creative', 'Modern', 'Responsive'],
components: '20+ comp',
easeOfSetup: 5,
useCase: 'Creative portfolios',
tier: 1,
port: 3010,
family: 'mint',
},
// === BENTO CARDS - Tier 1 (Next.js/React) ===
{
id: 9,
name: 'matrix-nextjs',
displayName: 'Matrix',
slug: 'matrix',
category: 'Bento Cards',
screenshot: 'matrix',
path: 'apps/matrix',
framework: 'Next.js 14.2 + TS',
rating: 5,
features: ['Bento Layout', 'AI Theme', 'Next.js', 'Responsive'],
components: '30 layouts',
easeOfSetup: 5,
useCase: 'AI-focused bento card layouts',
tier: 1,
port: 3006,
family: 'bento-cards',
},
{
id: 10,
name: 'mosaic-nextjs',
displayName: 'Mosaic',
slug: 'mosaic',
category: 'Bento Cards',
screenshot: 'mosaic',
path: 'apps/mosaic',
framework: 'Next.js 14.2 + TS',
rating: 5,
features: ['Bento Layout', 'Multipurpose', 'Next.js', 'Responsive'],
components: '30 layouts',
easeOfSetup: 5,
useCase: 'General purpose bento card layouts',
tier: 1,
port: 3007,
family: 'bento-cards',
},
// === TIER 2 - Very Good (React 18, Next.js 13, Modern) ===
{
id: 11,
name: 'prism-react',
displayName: 'Prism (React)',
slug: 'prism-react',
category: 'SaaS',
screenshot: 'prism-react',
path: 'apps/prism-react',
framework: 'React 18 + Vite',
rating: 4,
features: ['Modern UI', 'Animations', 'Landing', 'Responsive'],
components: '25+ comp',
easeOfSetup: 4,
useCase: 'Modern SaaS landing',
tier: 2,
port: 3021,
family: 'prism',
},
{
id: 12,
name: 'matrix-react',
displayName: 'Matrix (React)',
slug: 'matrix-react',
category: 'Bento Cards',
screenshot: 'matrix',
path: 'apps/matrix',
framework: 'React 18',
rating: 4,
features: ['Bento Layout', 'AI Theme', 'React', 'Responsive'],
components: '30 layouts',
easeOfSetup: 4,
useCase: 'AI-focused bento card layouts',
tier: 2,
port: 3022,
family: 'bento-cards',
},
{
id: 13,
name: 'mosaic-react',
displayName: 'Mosaic (React)',
slug: 'mosaic-react',
category: 'Bento Cards',
screenshot: 'mosaic',
path: 'apps/mosaic',
framework: 'React 18 + CRA',
rating: 4,
features: ['Bento Layout', 'Multipurpose', 'React', 'Responsive'],
components: '30 layouts',
easeOfSetup: 4,
useCase: 'General purpose bento card layouts',
tier: 2,
port: 3023,
family: 'bento-cards',
},
{
id: 14,
name: 'soar-react',
displayName: 'Soar',
slug: 'soar',
category: 'Fitness',
screenshot: 'soar',
path: 'apps/soar',
framework: 'React 18 + CRA',
rating: 4,
features: ['Fitness', 'Booking', 'Classes', 'Responsive'],
components: '30+ comp',
easeOfSetup: 4,
useCase: 'Fitness/wellness apps',
tier: 2,
port: 3024,
family: 'soar',
},
{
id: 15,
name: 'cipher-dashboard-react',
displayName: 'Cipher (React)',
slug: 'cipher-react',
category: 'Dashboard',
screenshot: 'cipher-react',
path: 'apps/cipher-react',
framework: 'React 17',
rating: 4,
features: ['Crypto', 'Trading', 'Dashboard', 'Charts'],
components: '40+ comp',
easeOfSetup: 3,
useCase: 'Crypto exchanges',
tier: 2,
port: 3025,
family: 'cipher',
},
{
id: 16,
name: 'launch',
displayName: 'Launch',
slug: 'launch',
category: 'SaaS',
screenshot: 'launch',
path: 'apps/launch',
framework: 'Next.js 13',
rating: 4,
features: ['Landing', 'SaaS', 'Modern', 'Responsive'],
components: '15+ comp',
easeOfSetup: 4,
useCase: 'SaaS landing pages',
tier: 2,
port: 3026,
family: 'launch',
},
{
id: 18,
name: 'construct',
displayName: 'Construct',
slug: 'construct',
category: 'Landing',
screenshot: 'construct',
path: 'apps/construct',
framework: 'Next.js 14',
rating: 4,
features: ['App', 'Landing', 'Modern', 'Responsive'],
components: '25+ comp',
easeOfSetup: 4,
useCase: 'App landing pages',
tier: 2,
port: 3028,
family: 'construct',
},
{
id: 19,
name: 'deploy',
displayName: 'Deploy',
slug: 'deploy',
category: 'Landing',
screenshot: 'deploy',
path: 'apps/deploy',
framework: 'Next.js 14',
rating: 4,
features: ['Landing', 'Marketing', 'Modern', 'Responsive'],
components: '25+ comp',
easeOfSetup: 4,
useCase: 'Marketing landing pages',
tier: 2,
port: 3029,
family: 'deploy',
},
{
id: 20,
name: 'loop-react',
displayName: 'Loop',
slug: 'loop',
category: 'Bento Cards',
screenshot: 'loop',
path: 'apps/loop',
framework: 'React 18',
rating: 4,
features: ['Bento Layout', 'v3', 'React', 'Responsive'],
components: '30 layouts',
easeOfSetup: 4,
useCase: 'Bento card layouts v3',
tier: 2,
port: 3030,
family: 'bento-cards',
},
{
id: 22,
name: 'unity',
displayName: 'Unity',
slug: 'unity',
category: 'App',
screenshot: 'unity',
path: 'apps/unity',
framework: 'Next.js 14 + TS',
rating: 4,
features: ['App', 'Modern', 'Full Stack', 'Responsive'],
components: '30+ comp',
easeOfSetup: 4,
useCase: 'Full-stack applications',
tier: 2,
port: 3101,
family: 'unity',
},
// === TIER 3 - Good (HTML/Gulp, older frameworks) ===
// Portfolio/Agency Templates
{
id: 23,
name: 'prism-gsap',
displayName: 'Prism',
slug: 'prism',
category: 'Portfolio',
screenshot: 'prism',
path: 'apps/prism',
framework: 'HTML/SCSS + GSAP',
rating: 3,
features: ['GSAP', 'Portfolio', 'Agency', 'Responsive'],
components: '20+ comp',
easeOfSetup: 3,
useCase: 'Creative agencies',
tier: 3,
port: 3041,
family: 'prism',
},
{
id: 24,
name: 'canvas',
displayName: 'Canvas',
slug: 'canvas',
category: 'Portfolio',
screenshot: 'canvas',
path: 'apps/canvas',
framework: 'HTML/SCSS + GSAP',
rating: 3,
features: ['Portfolio', 'GSAP', 'Studio', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Design studios',
tier: 3,
port: 3042,
family: 'canvas',
},
{
id: 25,
name: 'vault',
displayName: 'Vault',
slug: 'vault',
category: 'Portfolio',
screenshot: 'vault',
path: 'apps/vault',
framework: 'HTML/CSS/JS',
rating: 3,
features: ['Architecture', 'Portfolio', 'Clean', 'Responsive'],
components: '12+ comp',
easeOfSetup: 3,
useCase: 'Architecture portfolios',
tier: 3,
port: 3044,
family: 'vault',
},
{
id: 26,
name: 'studio',
displayName: 'Studio',
slug: 'studio',
category: 'Portfolio',
screenshot: 'studio',
path: 'apps/studio',
framework: 'HTML/CSS/JS',
rating: 3,
features: ['Agency', 'Portfolio', 'Digital', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Digital agencies',
tier: 3,
port: 3057,
family: 'studio',
},
{
id: 27,
name: 'kalli-html',
displayName: 'Kalli',
slug: 'kalli',
category: 'Portfolio',
screenshot: 'kalli-html',
path: 'apps/kalli-html',
framework: 'HTML/Gulp',
rating: 3,
features: ['Portfolio', 'Creative', 'Modern', 'Responsive'],
components: '18+ comp',
easeOfSetup: 3,
useCase: 'Creative portfolios',
tier: 3,
port: 3053,
},
// Business/Agency Templates
{
id: 29,
name: 'drive-css',
displayName: 'Drive',
slug: 'drive',
category: 'Business',
screenshot: 'drive',
path: 'apps/drive',
framework: 'HTML/CSS',
rating: 3,
features: ['Automotive', 'Business', 'Modern', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Automotive websites',
tier: 3,
port: 3055,
family: 'drive',
},
{
id: 30,
name: 'drive-html',
displayName: 'Drive (HTML)',
slug: 'drive-html',
category: 'Business',
screenshot: 'drive',
path: 'apps/drive',
framework: 'HTML/Gulp',
rating: 3,
features: ['Automotive', 'Business', 'HTML', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Automotive websites',
tier: 3,
port: 3055,
family: 'drive',
},
{
id: 31,
name: 'oasis',
displayName: 'Oasis',
slug: 'oasis',
category: 'Hospitality',
screenshot: 'oasis',
path: 'apps/oasis',
framework: 'HTML/CSS',
rating: 3,
features: ['Hospitality', 'Resort', 'Luxury', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Resort/hospitality sites',
tier: 3,
port: 3056,
family: 'oasis',
},
// SaaS/Landing Templates
{
id: 32,
name: 'solo',
displayName: 'Solo',
slug: 'solo',
category: 'SaaS',
screenshot: 'solo',
path: 'apps/solo',
framework: 'HTML/Gulp',
rating: 3,
features: ['SaaS', 'Landing', 'Simple', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'SaaS landing pages',
tier: 3,
port: 3043,
family: 'solo',
},
{
id: 33,
name: 'prism-html',
displayName: 'Prism (HTML)',
slug: 'prism-html',
category: 'SaaS',
screenshot: 'prism',
path: 'apps/prism',
framework: 'HTML/Gulp',
rating: 3,
features: ['Modern UI', 'Animations', 'Landing', 'Responsive'],
components: '25+ comp',
easeOfSetup: 3,
useCase: 'Modern SaaS landing',
tier: 3,
port: 3046,
family: 'prism',
},
// Dashboard Templates
{
id: 34,
name: 'forge',
displayName: 'Forge',
slug: 'forge',
category: 'Dashboard',
screenshot: 'forge',
path: 'apps/forge',
framework: 'HTML/Gulp',
rating: 4,
features: ['Dashboard', 'Admin', 'Analytics', 'Responsive'],
components: '30+ comp',
easeOfSetup: 3,
useCase: 'Admin dashboards',
tier: 2,
port: 3048,
family: 'forge',
},
{
id: 35,
name: 'cipher-dashboard-html',
displayName: 'Cipher (HTML)',
slug: 'cipher-html',
category: 'Dashboard',
screenshot: 'cipher-html',
path: 'apps/cipher-html',
framework: 'HTML/Gulp',
rating: 3,
features: ['Crypto', 'Trading', 'Dashboard', 'Charts'],
components: '40+ comp',
easeOfSetup: 3,
useCase: 'Crypto exchanges',
tier: 3,
port: 3045,
family: 'cipher',
},
{
id: 36,
name: 'beta-html',
displayName: 'Beta',
slug: 'beta',
category: 'Dashboard',
screenshot: 'beta',
path: 'apps/beta',
framework: 'HTML/Gulp',
rating: 3,
features: ['CRM', 'Dashboard', 'Business', 'Responsive'],
components: '25+ comp',
easeOfSetup: 3,
useCase: 'CRM dashboards',
tier: 3,
port: 3047,
family: 'beta',
},
{
id: 37,
name: 'beta-variant',
displayName: 'Beta (Variant)',
slug: 'beta-variant',
category: 'Dashboard',
screenshot: 'beta',
path: 'apps/beta',
framework: 'HTML/Gulp',
rating: 3,
features: ['CRM', 'Dashboard', 'Business', 'Responsive'],
components: '25+ comp',
easeOfSetup: 3,
useCase: 'CRM dashboards',
tier: 3,
port: 3047,
family: 'beta',
},
// E-commerce Templates
{
id: 38,
name: 'hygge-html',
displayName: 'Hygge (HTML)',
slug: 'hygge-html',
category: 'E-commerce',
screenshot: 'hygge',
path: 'apps/hygge',
framework: 'HTML/Gulp',
rating: 4,
features: ['E-commerce', 'Shop', 'Clean', 'Responsive'],
components: '30+ comp',
easeOfSetup: 3,
useCase: 'E-commerce stores',
tier: 2,
port: 3049,
family: 'hygge',
},
{
id: 39,
name: 'hygge-bootstrap',
displayName: 'Hygge (Bootstrap)',
slug: 'hygge-bootstrap',
category: 'E-commerce',
screenshot: 'hygge',
path: 'apps/hygge',
framework: 'HTML/Gulp + Bootstrap 5',
rating: 4,
features: ['E-commerce', 'Shop', 'Bootstrap', 'Responsive'],
components: '30+ comp',
easeOfSetup: 3,
useCase: 'E-commerce stores',
tier: 2,
port: 3049,
family: 'hygge',
},
// Fitness Templates
{
id: 40,
name: 'soar-html',
displayName: 'Soar (HTML)',
slug: 'soar-html',
category: 'Fitness',
screenshot: 'soar',
path: 'apps/soar',
framework: 'HTML/Gulp',
rating: 3,
features: ['Fitness', 'Booking', 'Classes', 'Responsive'],
components: '30+ comp',
easeOfSetup: 3,
useCase: 'Fitness/wellness apps',
tier: 3,
port: 3100,
family: 'soar',
},
// === BENTO CARDS - HTML Variants ===
{
id: 41,
name: 'loop-html',
displayName: 'Loop (HTML)',
slug: 'loop-html',
category: 'Bento Cards',
screenshot: 'loop',
path: 'apps/loop',
framework: 'HTML/Gulp',
rating: 3,
features: ['Bento Layout', 'v3', 'HTML', 'Responsive'],
components: '30 layouts',
easeOfSetup: 3,
useCase: 'Bento card layouts v3 HTML',
tier: 3,
port: 3090,
family: 'bento-cards',
},
{
id: 42,
name: 'cipher-cards-html',
displayName: 'Cipher Cards (HTML)',
slug: 'cipher-cards-html',
category: 'Bento Cards',
screenshot: 'cipher-html',
path: 'apps/cipher-html',
framework: 'HTML/CSS',
rating: 3,
features: ['Bento Layout', 'Crypto', 'HTML', 'Responsive'],
components: '30 layouts',
easeOfSetup: 3,
useCase: 'Crypto bento card layouts',
tier: 3,
port: 3091,
family: 'bento-cards',
},
{
id: 43,
name: 'cipher-cards-react',
displayName: 'Cipher Cards (React)',
slug: 'cipher-cards-react',
category: 'Bento Cards',
screenshot: 'cipher-react',
path: 'apps/cipher-react',
framework: 'React 18',
rating: 4,
features: ['Bento Layout', 'Crypto', 'React', 'Responsive'],
components: '30 layouts',
easeOfSetup: 4,
useCase: 'Crypto bento card layouts',
tier: 2,
port: 3092,
family: 'bento-cards',
},
// === FOLIO PORTFOLIO TEMPLATES (24 variants) ===
{
id: 47,
name: 'folio-about',
displayName: 'Folio About',
slug: 'folio-about',
category: 'Folio Portfolio',
screenshot: 'folio-about',
path: 'apps/Folio - HTML Templates/about',
framework: 'HTML/Gulp',
rating: 3,
features: ['About', 'Bio', 'Profile', 'Responsive'],
components: '5+ comp',
easeOfSetup: 3,
useCase: 'About pages',
tier: 3,
port: 3060,
},
{
id: 48,
name: 'folio-contact',
displayName: 'Folio Contact',
slug: 'folio-contact',
category: 'Folio Portfolio',
screenshot: 'folio-contact',
path: 'apps/Folio - HTML Templates/contact',
framework: 'HTML/Gulp',
rating: 3,
features: ['Contact', 'Form', 'Communication', 'Responsive'],
components: '5+ comp',
easeOfSetup: 3,
useCase: 'Contact pages',
tier: 3,
port: 3061,
},
{
id: 49,
name: 'folio-creative-agency-1',
displayName: 'Folio Creative Agency 1',
slug: 'folio-creative-agency-1',
category: 'Folio Portfolio',
screenshot: 'folio-creative-agency-1',
path: 'apps/Folio - HTML Templates/creative-agency-1',
framework: 'HTML/Gulp',
rating: 3,
features: ['Agency', 'Creative', 'Modern', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Creative agency portfolios',
tier: 3,
port: 3062,
},
{
id: 50,
name: 'folio-creative-agency-2',
displayName: 'Folio Creative Agency 2',
slug: 'folio-creative-agency-2',
category: 'Folio Portfolio',
screenshot: 'folio-creative-agency-2',
path: 'apps/Folio - HTML Templates/creative-agency-2',
framework: 'HTML/Gulp',
rating: 3,
features: ['Agency', 'Creative', 'Variant', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Creative agency portfolios',
tier: 3,
port: 3063,
},
{
id: 51,
name: 'folio-creative-designer-1',
displayName: 'Folio Creative Designer 1',
slug: 'folio-creative-designer-1',
category: 'Folio Portfolio',
screenshot: 'folio-creative-designer-1',
path: 'apps/Folio - HTML Templates/creative-designer-1',
framework: 'HTML/Gulp',
rating: 3,
features: ['Designer', 'Portfolio', 'Creative', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Designer portfolios',
tier: 3,
port: 3064,
},
{
id: 52,
name: 'folio-creative-designer-2',
displayName: 'Folio Creative Designer 2',
slug: 'folio-creative-designer-2',
category: 'Folio Portfolio',
screenshot: 'folio-creative-designer-2',
path: 'apps/Folio - HTML Templates/creative-designer-2',
framework: 'HTML/Gulp',
rating: 3,
features: ['Designer', 'Portfolio', 'Variant', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Designer portfolios',
tier: 3,
port: 3065,
},
{
id: 53,
name: 'folio-creative-developer-1',
displayName: 'Folio Creative Developer 1',
slug: 'folio-creative-developer-1',
category: 'Folio Portfolio',
screenshot: 'folio-creative-developer-1',
path: 'apps/Folio - HTML Templates/creative-developer-1',
framework: 'HTML/Gulp',
rating: 3,
features: ['Developer', 'Portfolio', 'Tech', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Developer portfolios',
tier: 3,
port: 3066,
},
{
id: 54,
name: 'folio-creative-developer-2',
displayName: 'Folio Creative Developer 2',
slug: 'folio-creative-developer-2',
category: 'Folio Portfolio',
screenshot: 'folio-creative-developer-2',
path: 'apps/Folio - HTML Templates/creative-developer-2',
framework: 'HTML/Gulp',
rating: 3,
features: ['Developer', 'Portfolio', 'Variant', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Developer portfolios',
tier: 3,
port: 3067,
},
{
id: 55,
name: 'folio-creative-photography-1',
displayName: 'Folio Photography 1',
slug: 'folio-photography-1',
category: 'Folio Portfolio',
screenshot: 'folio-creative-photography-1',
path: 'apps/Folio - HTML Templates/creative-photography-1',
framework: 'HTML/Gulp',
rating: 3,
features: ['Photography', 'Gallery', 'Creative', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Photography portfolios',
tier: 3,
port: 3068,
},
{
id: 56,
name: 'folio-creative-photography-2',
displayName: 'Folio Photography 2',
slug: 'folio-photography-2',
category: 'Folio Portfolio',
screenshot: 'folio-creative-photography-2',
path: 'apps/Folio - HTML Templates/creative-photography-2',
framework: 'HTML/Gulp',
rating: 3,
features: ['Photography', 'Gallery', 'Variant', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Photography portfolios',
tier: 3,
port: 3069,
},
{
id: 57,
name: 'folio-grid-2',
displayName: 'Folio Grid 2 Columns',
slug: 'folio-grid-2-columns',
category: 'Folio Portfolio',
screenshot: 'folio-grid-2',
path: 'apps/Folio - HTML Templates/grid-2',
framework: 'HTML/Gulp',
rating: 3,
features: ['Grid', '2 Columns', 'Layout', 'Responsive'],
components: '10+ comp',
easeOfSetup: 3,
useCase: '2-column portfolio grids',
tier: 3,
port: 3070,
},
{
id: 58,
name: 'folio-grid-3',
displayName: 'Folio Grid 3 Columns',
slug: 'folio-grid-3-columns',
category: 'Folio Portfolio',
screenshot: 'folio-grid-3',
path: 'apps/Folio - HTML Templates/grid-3',
framework: 'HTML/Gulp',
rating: 3,
features: ['Grid', '3 Columns', 'Layout', 'Responsive'],
components: '10+ comp',
easeOfSetup: 3,
useCase: '3-column portfolio grids',
tier: 3,
port: 3071,
},
{
id: 59,
name: 'folio-grid-3-fluid',
displayName: 'Folio Grid 3 Fluid',
slug: 'folio-grid-3-fluid',
category: 'Folio Portfolio',
screenshot: 'folio-grid-3-fluid',
path: 'apps/Folio - HTML Templates/grid-3-fluid',
framework: 'HTML/Gulp',
rating: 3,
features: ['Grid', 'Fluid', 'Responsive', 'Responsive'],
components: '10+ comp',
easeOfSetup: 3,
useCase: 'Fluid 3-column grids',
tier: 3,
port: 3072,
},
{
id: 60,
name: 'folio-grid-4',
displayName: 'Folio Grid 4 Columns',
slug: 'folio-grid-4-columns',
category: 'Folio Portfolio',
screenshot: 'folio-grid-4',
path: 'apps/Folio - HTML Templates/grid-4',
framework: 'HTML/Gulp',
rating: 3,
features: ['Grid', '4 Columns', 'Layout', 'Responsive'],
components: '10+ comp',
easeOfSetup: 3,
useCase: '4-column portfolio grids',
tier: 3,
port: 3073,
},
{
id: 61,
name: 'folio-grid-4-fluid',
displayName: 'Folio Grid 4 Fluid',
slug: 'folio-grid-4-fluid',
category: 'Folio Portfolio',
screenshot: 'folio-grid-4-fluid',
path: 'apps/Folio - HTML Templates/grid-4-fluid',
framework: 'HTML/Gulp',
rating: 3,
features: ['Grid', 'Fluid', 'Responsive', 'Responsive'],
components: '10+ comp',
easeOfSetup: 3,
useCase: 'Fluid 4-column grids',
tier: 3,
port: 3074,
},
{
id: 62,
name: 'folio-masonry-2',
displayName: 'Folio Masonry 2 Columns',
slug: 'folio-masonry-2-columns',
category: 'Folio Portfolio',
screenshot: 'folio-masonry-2',
path: 'apps/Folio - HTML Templates/masonry-2',
framework: 'HTML/Gulp',
rating: 3,
features: ['Masonry', '2 Columns', 'Layout', 'Responsive'],
components: '10+ comp',
easeOfSetup: 3,
useCase: '2-column masonry layouts',
tier: 3,
port: 3075,
},
{
id: 63,
name: 'folio-masonry-3',
displayName: 'Folio Masonry 3 Columns',
slug: 'folio-masonry-3-columns',
category: 'Folio Portfolio',
screenshot: 'folio-masonry-3',
path: 'apps/Folio - HTML Templates/masonry-3',
framework: 'HTML/Gulp',
rating: 3,
features: ['Masonry', '3 Columns', 'Layout', 'Responsive'],
components: '10+ comp',
easeOfSetup: 3,
useCase: '3-column masonry layouts',
tier: 3,
port: 3076,
},
{
id: 64,
name: 'folio-masonry-3-fluid',
displayName: 'Folio Masonry 3 Fluid',
slug: 'folio-masonry-3-fluid',
category: 'Folio Portfolio',
screenshot: 'folio-masonry-3-fluid',
path: 'apps/Folio - HTML Templates/masonry-3-fluid',
framework: 'HTML/Gulp',
rating: 3,
features: ['Masonry', 'Fluid', 'Responsive', 'Responsive'],
components: '10+ comp',
easeOfSetup: 3,
useCase: 'Fluid 3-column masonry',
tier: 3,
port: 3077,
},
{
id: 65,
name: 'folio-masonry-4',
displayName: 'Folio Masonry 4 Columns',
slug: 'folio-masonry-4-columns',
category: 'Folio Portfolio',
screenshot: 'folio-masonry-4',
path: 'apps/Folio - HTML Templates/masonry-4',
framework: 'HTML/Gulp',
rating: 3,
features: ['Masonry', '4 Columns', 'Layout', 'Responsive'],
components: '10+ comp',
easeOfSetup: 3,
useCase: '4-column masonry layouts',
tier: 3,
port: 3078,
},
{
id: 66,
name: 'folio-masonry-4-fluid',
displayName: 'Folio Masonry 4 Fluid',
slug: 'folio-masonry-4-fluid',
category: 'Folio Portfolio',
screenshot: 'folio-masonry-4-fluid',
path: 'apps/Folio - HTML Templates/masonry-4-fluid',
framework: 'HTML/Gulp',
rating: 3,
features: ['Masonry', 'Fluid', 'Responsive', 'Responsive'],
components: '10+ comp',
easeOfSetup: 3,
useCase: 'Fluid 4-column masonry',
tier: 3,
port: 3079,
},
{
id: 67,
name: 'folio-portfolio-details',
displayName: 'Folio Details 1',
slug: 'folio-details-1',
category: 'Folio Portfolio',
screenshot: 'folio-portfolio-details',
path: 'apps/Folio - HTML Templates/portfolio-details',
framework: 'HTML/Gulp',
rating: 3,
features: ['Details', 'Project', 'Showcase', 'Responsive'],
components: '8+ comp',
easeOfSetup: 3,
useCase: 'Portfolio detail pages',
tier: 3,
port: 3080,
},
{
id: 68,
name: 'folio-portfolio-details-2',
displayName: 'Folio Details 2',
slug: 'folio-details-2',
category: 'Folio Portfolio',
screenshot: 'folio-portfolio-details-2',
path: 'apps/Folio - HTML Templates/portfolio-details-2',
framework: 'HTML/Gulp',
rating: 3,
features: ['Details', 'Project', 'Variant', 'Responsive'],
components: '8+ comp',
easeOfSetup: 3,
useCase: 'Portfolio detail pages',
tier: 3,
port: 3081,
},
// === NEWLY ADDED TEMPLATES (70-75) ===
{
id: 71,
name: 'jobfinder',
displayName: 'Job Finder',
slug: 'jobfinder',
category: 'Mobile App',
screenshot: 'jobfinder',
path: 'apps/jobfinder',
framework: 'React Native',
rating: 4,
features: ['Jobs', 'Search', 'Mobile', 'React Native'],
components: '20+ comp',
easeOfSetup: 3,
useCase: 'Job search mobile apps',
tier: 2,
port: 3102,
family: 'jobfinder',
},
{
id: 72,
name: 'pixel',
displayName: 'Pixel',
slug: 'pixel',
category: 'Portfolio',
screenshot: 'pixel',
path: 'apps/pixel',
framework: 'HTML/CSS/JS',
rating: 3,
features: ['Studio', 'Creative', 'Modern', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Creative studio sites',
tier: 3,
port: 3103,
family: 'pixel',
},
{
id: 73,
name: 'saas-landing-next',
displayName: 'SaaS Landing',
slug: 'saas-landing',
category: 'SaaS',
screenshot: 'saas-landing',
path: 'apps/saas-landing',
framework: 'Next.js 14.2',
rating: 4,
features: ['Landing', 'Pricing', 'Features', 'Responsive'],
components: '20+ comp',
easeOfSetup: 4,
useCase: 'SaaS landing pages',
tier: 2,
port: 3104,
family: 'saas-landing',
},
{
id: 75,
name: 'serif',
displayName: 'Serif',
slug: 'serif',
category: 'Portfolio',
screenshot: 'serif',
path: 'apps/serif',
framework: 'HTML/Sass',
rating: 3,
features: ['Sass', 'Template', 'Build System', 'Responsive'],
components: '15+ comp',
easeOfSetup: 3,
useCase: 'Portfolio/agency sites',
tier: 3,
port: 3106,
family: 'serif',
},
];
// Category counts for stats
export const CATEGORY_STATS = {
'AI/SaaS': 1,
'Social Media': 1,
'Dashboard': 6,
'Portfolio': 9,
'SaaS': 8,
'Component Library': 1,
'E-commerce': 3,
'Bento Cards': 9,
'Landing': 2,
'Fitness': 2,
'Business': 3,
'Hospitality': 2,
'Folio Portfolio': 26,
'App': 1,
'Mobile App': 1,
};
export const TOTAL_TEMPLATES = templates.length;
export const CATEGORIES = Object.keys(CATEGORY_STATS);