Merge version_1 into main #2
207
src/app/page.tsx
207
src/app/page.tsx
@@ -41,7 +41,7 @@ export default function HomePage() {
|
||||
borderRadius="rounded"
|
||||
contentWidth="mediumSmall"
|
||||
sizing="mediumLarge"
|
||||
background="aurora"
|
||||
background="circleGradient"
|
||||
cardStyle="gradient-radial"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="glass"
|
||||
@@ -60,7 +60,7 @@ export default function HomePage() {
|
||||
tag="Platform Infrastructure"
|
||||
tagIcon={Shield}
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "aurora" }}
|
||||
background={{ variant: "plain" }}
|
||||
buttons={[
|
||||
{ text: "Start Building", href: "/documentation" },
|
||||
{ text: "View on GitHub", href: "https://github.com" },
|
||||
@@ -68,13 +68,9 @@ export default function HomePage() {
|
||||
buttonAnimation="slide-up"
|
||||
mediaItems={[
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-modern-clean-software-dashboard-interf-1772747791688-2dc35ebd.png?_wi=1",
|
||||
imageAlt: "Kola dashboard and infrastructure visualization",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-modern-clean-software-dashboard-interf-1772747791688-2dc35ebd.png", imageAlt: "Kola dashboard and infrastructure visualization"},
|
||||
{
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-technical-diagram-showing-firebase-rea-1772747791005-69360c8f.png?_wi=1",
|
||||
imageAlt: "Firebase real-time database integration",
|
||||
},
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-technical-diagram-showing-firebase-rea-1772747791005-69360c8f.png", imageAlt: "Firebase real-time database integration"},
|
||||
]}
|
||||
mediaAnimation="slide-up"
|
||||
rating={5}
|
||||
@@ -90,7 +86,7 @@ export default function HomePage() {
|
||||
tag="Core Architecture"
|
||||
tagIcon={Zap}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-technical-architecture-diagram-showing-1772747790433-3e3fb3df.png?_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-technical-architecture-diagram-showing-1772747790433-3e3fb3df.png"
|
||||
imageAlt="Kola modular architecture diagram"
|
||||
buttons={[{ text: "Explore Architecture", href: "/architecture" }]}
|
||||
buttonAnimation="slide-up"
|
||||
@@ -108,72 +104,39 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
title: "Foundation Setup",
|
||||
description: "Vite + React + TypeScript scaffold with Tailwind CSS, shadcn/ui, and security-first ESLint rules",
|
||||
bentoComponent: "globe",
|
||||
},
|
||||
title: "Foundation Setup", description: "Vite + React + TypeScript scaffold with Tailwind CSS, shadcn/ui, and security-first ESLint rules", bentoComponent: "globe"},
|
||||
{
|
||||
title: "Modular Architecture",
|
||||
description: "Factory-pattern provider system supporting configurable swapping of all core services",
|
||||
bentoComponent: "3d-stack-cards",
|
||||
items: [
|
||||
title: "Modular Architecture", description: "Factory-pattern provider system supporting configurable swapping of all core services", bentoComponent: "3d-stack-cards", items: [
|
||||
{
|
||||
icon: Database,
|
||||
title: "Storage Backend",
|
||||
subtitle: "Configurable",
|
||||
detail: "Swap storage providers seamlessly",
|
||||
},
|
||||
title: "Storage Backend", subtitle: "Configurable", detail: "Swap storage providers seamlessly"},
|
||||
{
|
||||
icon: Bell,
|
||||
title: "Notifications",
|
||||
subtitle: "Flexible",
|
||||
detail: "Multiple notification channels",
|
||||
},
|
||||
title: "Notifications", subtitle: "Flexible", detail: "Multiple notification channels"},
|
||||
{
|
||||
icon: Shield,
|
||||
title: "Security",
|
||||
subtitle: "First-class",
|
||||
detail: "RLS rules and auth enforcement",
|
||||
},
|
||||
title: "Security", subtitle: "First-class", detail: "RLS rules and auth enforcement"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Firebase Integration",
|
||||
description: "Real-time database with role-based security rules and CORS pre-configuration",
|
||||
bentoComponent: "animated-bar-chart",
|
||||
},
|
||||
title: "Firebase Integration", description: "Real-time database with role-based security rules and CORS pre-configuration", bentoComponent: "animated-bar-chart"},
|
||||
{
|
||||
title: "Performance Layer",
|
||||
description: "Rust WASM utilities for position calculations, PIN hashing, and tolerance validation",
|
||||
bentoComponent: "line-chart",
|
||||
},
|
||||
title: "Performance Layer", description: "Rust WASM utilities for position calculations, PIN hashing, and tolerance validation", bentoComponent: "line-chart"},
|
||||
{
|
||||
title: "DevOps Ready",
|
||||
description: "GitHub Actions CI/CD stub with dependency audit and security header validation",
|
||||
bentoComponent: "icon-info-cards",
|
||||
items: [
|
||||
title: "DevOps Ready", description: "GitHub Actions CI/CD stub with dependency audit and security header validation", bentoComponent: "icon-info-cards", items: [
|
||||
{
|
||||
icon: GitBranch,
|
||||
label: "CI/CD Pipeline",
|
||||
value: "Automated",
|
||||
},
|
||||
label: "CI/CD Pipeline", value: "Automated"},
|
||||
{
|
||||
icon: CheckCircle,
|
||||
label: "Security Audit",
|
||||
value: "Built-in",
|
||||
},
|
||||
label: "Security Audit", value: "Built-in"},
|
||||
{
|
||||
icon: Zap,
|
||||
label: "Dependency Check",
|
||||
value: "Active",
|
||||
},
|
||||
label: "Dependency Check", value: "Active"},
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Security Compliance",
|
||||
description: "ESLint enforcement, Firebase RLS validation, and transparent dependency management",
|
||||
bentoComponent: "orbiting-icons",
|
||||
centerIcon: Shield,
|
||||
title: "Security Compliance", description: "ESLint enforcement, Firebase RLS validation, and transparent dependency management", bentoComponent: "orbiting-icons", centerIcon: Shield,
|
||||
items: [
|
||||
{ icon: Lock, ring: 1 },
|
||||
{ icon: CheckCircle, ring: 2 },
|
||||
@@ -200,45 +163,17 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
products={[
|
||||
{
|
||||
id: "1",
|
||||
brand: "Kola Infrastructure",
|
||||
name: "Storage Backend Service",
|
||||
price: "Enterprise Ready",
|
||||
rating: 5,
|
||||
reviewCount: "12.3k+ deployments",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-technical-architecture-diagram-showing-1772747790433-3e3fb3df.png?_wi=2",
|
||||
imageAlt: "Storage backend module",
|
||||
},
|
||||
id: "1", brand: "Kola Infrastructure", name: "Storage Backend Service", price: "Enterprise Ready", rating: 5,
|
||||
reviewCount: "12.3k+ deployments", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-technical-architecture-diagram-showing-1772747790433-3e3fb3df.png", imageAlt: "Storage backend module"},
|
||||
{
|
||||
id: "2",
|
||||
brand: "Kola Infrastructure",
|
||||
name: "Authentication & Admin",
|
||||
price: "Enterprise Ready",
|
||||
rating: 5,
|
||||
reviewCount: "8.9k+ deployments",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-security-and-compliance-illustration-s-1772747793070-37196111.png?_wi=1",
|
||||
imageAlt: "Authentication admin module",
|
||||
},
|
||||
id: "2", brand: "Kola Infrastructure", name: "Authentication & Admin", price: "Enterprise Ready", rating: 5,
|
||||
reviewCount: "8.9k+ deployments", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-security-and-compliance-illustration-s-1772747793070-37196111.png", imageAlt: "Authentication admin module"},
|
||||
{
|
||||
id: "3",
|
||||
brand: "Kola Infrastructure",
|
||||
name: "Rate Limiter & QR Generator",
|
||||
price: "Enterprise Ready",
|
||||
rating: 5,
|
||||
reviewCount: "6.2k+ deployments",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-github-actions-ci-cd-pipeline-diagram--1772747790994-f8c7ebd0.png?_wi=1",
|
||||
imageAlt: "Rate limiter QR generator",
|
||||
},
|
||||
id: "3", brand: "Kola Infrastructure", name: "Rate Limiter & QR Generator", price: "Enterprise Ready", rating: 5,
|
||||
reviewCount: "6.2k+ deployments", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-github-actions-ci-cd-pipeline-diagram--1772747790994-f8c7ebd0.png", imageAlt: "Rate limiter QR generator"},
|
||||
{
|
||||
id: "4",
|
||||
brand: "Kola Infrastructure",
|
||||
name: "Search Engine Interface",
|
||||
price: "Enterprise Ready",
|
||||
rating: 5,
|
||||
reviewCount: "5.1k+ deployments",
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-modern-clean-software-dashboard-interf-1772747791688-2dc35ebd.png?_wi=2",
|
||||
imageAlt: "Search engine module",
|
||||
},
|
||||
id: "4", brand: "Kola Infrastructure", name: "Search Engine Interface", price: "Enterprise Ready", rating: 5,
|
||||
reviewCount: "5.1k+ deployments", imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-modern-clean-software-dashboard-interf-1772747791688-2dc35ebd.png", imageAlt: "Search engine module"},
|
||||
]}
|
||||
gridVariant="two-columns-alternating-heights"
|
||||
animationType="slide-up"
|
||||
@@ -259,59 +194,23 @@ export default function HomePage() {
|
||||
tagAnimation="slide-up"
|
||||
testimonials={[
|
||||
{
|
||||
id: "1",
|
||||
name: "Sarah Chen",
|
||||
role: "CTO",
|
||||
company: "TechCorp",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-fu-1772747790447-27c18a4f.png",
|
||||
imageAlt: "Sarah Chen, CTO at TechCorp",
|
||||
},
|
||||
id: "1", name: "Sarah Chen", role: "CTO", company: "TechCorp", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-fu-1772747790447-27c18a4f.png", imageAlt: "Sarah Chen, CTO at TechCorp"},
|
||||
{
|
||||
id: "2",
|
||||
name: "Michael Rodriguez",
|
||||
role: "Engineering Lead",
|
||||
company: "InnovateLab",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-de-1772747790024-79eb98bd.png",
|
||||
imageAlt: "Michael Rodriguez, Engineering Lead at InnovateLab",
|
||||
},
|
||||
id: "2", name: "Michael Rodriguez", role: "Engineering Lead", company: "InnovateLab", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-de-1772747790024-79eb98bd.png", imageAlt: "Michael Rodriguez, Engineering Lead at InnovateLab"},
|
||||
{
|
||||
id: "3",
|
||||
name: "Emily Watson",
|
||||
role: "DevOps Director",
|
||||
company: "CloudScale",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-se-1772747790175-5256a6ae.png?_wi=1",
|
||||
imageAlt: "Emily Watson, DevOps Director at CloudScale",
|
||||
},
|
||||
id: "3", name: "Emily Watson", role: "DevOps Director", company: "CloudScale", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-se-1772747790175-5256a6ae.png", imageAlt: "Emily Watson, DevOps Director at CloudScale"},
|
||||
{
|
||||
id: "4",
|
||||
name: "David Park",
|
||||
role: "Platform Architect",
|
||||
company: "SystemsX",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-pr-1772747790099-11d74d5d.png?_wi=1",
|
||||
imageAlt: "David Park, Platform Architect at SystemsX",
|
||||
},
|
||||
id: "4", name: "David Park", role: "Platform Architect", company: "SystemsX", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-pr-1772747790099-11d74d5d.png", imageAlt: "David Park, Platform Architect at SystemsX"},
|
||||
{
|
||||
id: "5",
|
||||
name: "Jessica Liu",
|
||||
role: "Full-Stack Lead",
|
||||
company: "DevForce",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-fr-1772747790256-b100f693.png",
|
||||
imageAlt: "Jessica Liu, Full-Stack Lead at DevForce",
|
||||
},
|
||||
id: "5", name: "Jessica Liu", role: "Full-Stack Lead", company: "DevForce", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-fr-1772747790256-b100f693.png", imageAlt: "Jessica Liu, Full-Stack Lead at DevForce"},
|
||||
{
|
||||
id: "6",
|
||||
name: "Marcus Johnson",
|
||||
role: "Infrastructure Lead",
|
||||
company: "NextGen Systems",
|
||||
rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-sy-1772747789917-516cfa79.png?_wi=1",
|
||||
imageAlt: "Marcus Johnson, Infrastructure Lead at NextGen Systems",
|
||||
},
|
||||
id: "6", name: "Marcus Johnson", role: "Infrastructure Lead", company: "NextGen Systems", rating: 5,
|
||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-professional-headshot-portrait-of-a-sy-1772747789917-516cfa79.png", imageAlt: "Marcus Johnson, Infrastructure Lead at NextGen Systems"},
|
||||
]}
|
||||
gridVariant="uniform-all-items-equal"
|
||||
animationType="slide-up"
|
||||
@@ -330,41 +229,23 @@ export default function HomePage() {
|
||||
tag="Support"
|
||||
tagIcon={HelpCircle}
|
||||
tagAnimation="slide-up"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-team-collaboration-illustration-showin-1772747792940-36e42fec.png?_wi=1"
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3APBfuc5WXkTZKJcsNoDjfhytJC/a-team-collaboration-illustration-showin-1772747792940-36e42fec.png"
|
||||
imageAlt="Support and collaboration"
|
||||
mediaAnimation="slide-up"
|
||||
mediaPosition="left"
|
||||
faqs={[
|
||||
{
|
||||
id: "1",
|
||||
title: "What technologies does Kola use?",
|
||||
content: "Kola is built with Vite, React, TypeScript, Tailwind CSS, shadcn/ui components, Firebase for real-time database capabilities, and Rust WASM for performance-critical calculations. This stack provides excellent developer experience, type safety, and production-grade performance.",
|
||||
},
|
||||
id: "1", title: "What technologies does Kola use?", content: "Kola is built with Vite, React, TypeScript, Tailwind CSS, shadcn/ui components, Firebase for real-time database capabilities, and Rust WASM for performance-critical calculations. This stack provides excellent developer experience, type safety, and production-grade performance."},
|
||||
{
|
||||
id: "2",
|
||||
title: "How does the modular provider system work?",
|
||||
content: "Our factory-pattern provider system allows you to swap implementations for StorageBackend, NotificationChannel, RateLimiter, AdminAuth, QrGenerator, and SearchEngine without changing your application code. This enables flexibility and vendor lock-in prevention.",
|
||||
},
|
||||
id: "2", title: "How does the modular provider system work?", content: "Our factory-pattern provider system allows you to swap implementations for StorageBackend, NotificationChannel, RateLimiter, AdminAuth, QrGenerator, and SearchEngine without changing your application code. This enables flexibility and vendor lock-in prevention."},
|
||||
{
|
||||
id: "3",
|
||||
title: "What security features are included?",
|
||||
content: "Kola includes Firebase role-based security rules, ESLint enforcement with no console.log in production, strict dependency auditing, CORS header pre-configuration, and comprehensive security compliance validation. Perfect for meeting regulatory standards.",
|
||||
},
|
||||
id: "3", title: "What security features are included?", content: "Kola includes Firebase role-based security rules, ESLint enforcement with no console.log in production, strict dependency auditing, CORS header pre-configuration, and comprehensive security compliance validation. Perfect for meeting regulatory standards."},
|
||||
{
|
||||
id: "4",
|
||||
title: "How is performance optimized?",
|
||||
content: "We provide a Rust WASM layer for position calculations, PIN hashing, and tolerance validation. This ensures critical computations run at near-native speeds. Combined with Vite's fast build times and React optimization, you get enterprise-grade performance.",
|
||||
},
|
||||
id: "4", title: "How is performance optimized?", content: "We provide a Rust WASM layer for position calculations, PIN hashing, and tolerance validation. This ensures critical computations run at near-native speeds. Combined with Vite's fast build times and React optimization, you get enterprise-grade performance."},
|
||||
{
|
||||
id: "5",
|
||||
title: "Is CI/CD automation included?",
|
||||
content: "Yes, Kola includes GitHub Actions CI/CD stubs with automated dependency audit workflows and security header validation. This enables teams to deploy with confidence and maintain security compliance automatically.",
|
||||
},
|
||||
id: "5", title: "Is CI/CD automation included?", content: "Yes, Kola includes GitHub Actions CI/CD stubs with automated dependency audit workflows and security header validation. This enables teams to deploy with confidence and maintain security compliance automatically."},
|
||||
{
|
||||
id: "6",
|
||||
title: "Can I use Kola for multiple projects?",
|
||||
content: "Absolutely! Kola is designed as a reusable scaffold. The modular architecture allows you to extend it for different project requirements while maintaining security compliance and architectural best practices across all implementations.",
|
||||
},
|
||||
id: "6", title: "Can I use Kola for multiple projects?", content: "Absolutely! Kola is designed as a reusable scaffold. The modular architecture allows you to extend it for different project requirements while maintaining security compliance and architectural best practices across all implementations."},
|
||||
]}
|
||||
faqsAnimation="slide-up"
|
||||
textboxLayout="default"
|
||||
|
||||
Reference in New Issue
Block a user