import { Head } from '@inertiajs/react'; import { useState } from 'react'; import Layout from '@/Components/Layout'; import ProjectCard from '@/Components/ProjectCard'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; import { Sparkles, Briefcase, Filter, ArrowRight, Award, Users, Globe, Layers, Lightbulb, Pencil, Code2, Rocket, CheckCircle2, TrendingUp, Trophy, Building2, Star } from 'lucide-react'; interface ProjectCategory { id: number; name: string; slug: string; } interface Project { id: number; slug: string; title: string; client?: string; year?: number; cover?: string; category?: ProjectCategory; featured?: boolean; } interface Props { projects: Project[]; categories: ProjectCategory[]; settings?: any; } const processSteps = [ { icon: Lightbulb, title: 'Discover', description: 'We deep-dive into your business goals, audience, and constraints to define a clear product brief.', color: 'from-amber-500 to-orange-500' }, { icon: Pencil, title: 'Design', description: 'UX wireframes and high-fidelity UI mockups iteratively shaped through collaborative reviews.', color: 'from-purple-500 to-pink-500' }, { icon: Code2, title: 'Build', description: 'Modern stack engineering with weekly demos, automated tests, and continuous integration.', color: 'from-blue-500 to-cyan-500' }, { icon: Rocket, title: 'Launch', description: 'Performance, accessibility, and security checks before a smooth production rollout — then ongoing care.', color: 'from-emerald-500 to-green-500' } ]; export default function PortfolioIndex({ projects, categories, settings }: Props) { const [selectedCategory, setSelectedCategory] = useState(null); const filteredProjects = selectedCategory ? projects.filter(p => p.category?.id === selectedCategory) : projects; const featuredProjects = filteredProjects.filter(p => p.featured); const regularProjects = filteredProjects.filter(p => !p.featured); const totalProjects = projects.length; const totalCategories = categories.length; const totalFeatured = projects.filter(p => p.featured).length; const uniqueClients = new Set(projects.map(p => p.client).filter(Boolean)).size; return ( {/* Hero Section - Light Modern Style */}
{/* Subtle Mesh Gradient Background */}
{/* Grid Pattern - very subtle */}
{/* Left: Text Content */}
Success Stories

Crafting Digital{' '} Success Stories

Explore a curated collection of projects we've delivered for ambitious brands — websites, apps, custom software, and enterprise platforms that move the needle.

{totalProjects}+ Projects
{totalCategories}+ Categories
Global Clients
{/* Right: Portfolio Tiles Animation */}
{/* Background Grid */}
{/* Scanning Line */}
{/* Floating Project Tiles */}
{/* Tile 1 - Top Left */}
{/* Tile 2 - Top Right */}
{/* Tile 3 - Center (Featured) */}
Featured
{/* Tile 4 - Bottom Left */}
{/* Tile 5 - Bottom Right */}
{/* Floating Sparkle Particles */}
{/* Connection Lines SVG */} {/* Corner Accents */} {/* Live Stats - Top Left */}
SHIPPED
Projects: {totalProjects}+
{/* Live Stats - Bottom Right */}
Featured: {totalFeatured}
Industries: {totalCategories}+
{/* Floating Badge - Top Right */}
{totalFeatured}
Featured
{/* Floating Badge - Bottom Left */}
{totalProjects}+
Delivered
{/* Stats Bar */}
{totalProjects}+
Projects Delivered
{totalCategories}+
Industries Served
{uniqueClients || '50'}+
Happy Clients
98%
Client Satisfaction
{/* Featured Projects Spotlight */} {featuredProjects.length > 0 && (
Featured Work

Our{' '} Spotlight Projects

A curated selection of projects we're particularly proud of — each one a story of partnership and execution.

{featuredProjects.map(project => ( ))}
)} {/* All Projects Grid with Filter */}
Complete Portfolio

Browse All Projects

Filter by category to find work most relevant to your industry or use case.

{/* Category Filter Pills */} {categories.length > 0 && (

Filter by Category

{categories.map(category => { const count = projects.filter(p => p.category?.id === category.id).length; return ( ); })}
)} {/* Projects Grid */} {regularProjects.length > 0 ? (
{regularProjects.map(project => ( ))}
) : filteredProjects.length === 0 ? (

No projects found

{selectedCategory ? 'Try selecting a different category' : 'Check back soon for updates'}

) : null}
{/* Process Section */}
How We Work

From Idea to{' '} Launch

A proven 4-phase delivery process that consistently turns ambitious visions into shipped products.

{/* Connection line (desktop only) */}
{processSteps.map((step, index) => { const Icon = step.icon; return (
0{index + 1}

{step.title}

{step.description}

); })}
{/* Why Trust Us Section */}

Why Brands Trust HomeTech with Their{' '} Most Important Work

We don't just deliver projects — we partner with teams to ship products that customers love and businesses depend on.

{[ { title: 'Senior-Only Engineering', desc: 'Every line of code is written by experienced engineers — no junior outsourcing.' }, { title: 'Transparent Communication', desc: 'Weekly demos, async updates, and open Slack/Teams channels — you stay in the loop.' }, { title: 'Production-Grade Quality', desc: 'Automated tests, CI/CD, performance budgets, and security scans on every release.' }, { title: 'Long-Term Partnership', desc: 'We stay involved post-launch — monitoring, iterating, and growing the product with you.' } ].map((item, idx) => (

{item.title}

{item.desc}

))}
Built to Win
Award-quality delivery
{[1, 2, 3, 4, 5].map((i) => ( ))}
{/* CTA Section - Dark Elegant */}

Ready to Build Something Remarkable?

Whether it's a website, mobile app, custom software, or enterprise platform — let's turn your idea into the next case study on this page.

{totalProjects}+
Projects Shipped
98%
Satisfaction
{totalCategories}+
Industries
24/7
Support
); }