mirror of
https://github.com/hanzo-apps/gallery.git
synced 2026-10-30 14:48:38 +00:00
zooqueen
a7b754c33f
Every capture in public/screenshots is .webp. gen-templates-json looked for .png, matched none of the 211 of them, and wrote hasScreenshot:false for every template in the catalog. The consumer draws a schematic when that is false, so the whole gallery rendered as coloured mockups while the real screenshots sat on disk beside it. Nothing failed, which is why it lasted: a catalog with no pictures is still a valid catalog, and the count it printed — "0 with screenshots" — was the only symptom, in a build log nobody reads. So the count is now a gate. Zero screenshots across a non-empty catalog exits non-zero, because that is what a wrong extension, a moved directory and an empty checkout all look like, and none of them announced themselves before. A partial miss warns and names the slugs. 42 templates, 42 with screenshots. Also removed, on request: quantum, blocks, matrix, mosaic, matrix-react, mosaic-react, prism, canvas, kalli, drive-html, prism-html, cipher-html, beta, beta-variant, hygge-bootstrap, soar-html, loop-html, cipher-cards-html, cipher-cards-react, and six folio pages. A slug lives in three places — the Template entry, its TEMPLATE_PORTS row, and its capture — so all three go, and a capture is deleted only once nothing still references it. That last rule earned itself immediately: mosaic-react carried screenshot:'mosaic', so removing mosaic first would have left a card pointing at a file that was gone.
873 lines
21 KiB
TypeScript
873 lines
21 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,
|
|
'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)
|
|
|
|
// Tier 3 - HTML/Gulp (3041-3080)
|
|
'solo': 3043,
|
|
'vault': 3044,
|
|
'forge': 3048,
|
|
'hygge': 3049,
|
|
'kalli-html': 3053,
|
|
'drive': 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-2': 3065,
|
|
'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-4': 3073,
|
|
'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)
|
|
|
|
// Additional (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: 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) ===
|
|
|
|
|
|
// === 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: 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: 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',
|
|
},
|
|
|
|
// 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: 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',
|
|
},
|
|
|
|
// 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',
|
|
},
|
|
|
|
// 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',
|
|
},
|
|
|
|
// Fitness Templates
|
|
|
|
// === BENTO CARDS - HTML Variants ===
|
|
|
|
|
|
// === 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: 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: 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: 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: 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);
|