Tech Stack

The Tech Stack component displays all the technologies, frameworks, and tools used in Solo Kit in a visually appealing grid layout. It helps users understand what they're getting and builds confidence in the technical foundation.

Usage

import { TechStack } from '@/components/sections';

export default function HomePage() {
  return (
    <div>
      <TechStack />
      {/* Other sections */}
    </div>
  );
}

Features

• Technology logos - Visual representation of each tool
• Responsive grid - Adapts to different screen sizes
• Hover effects - Interactive logo animations
• Categorized sections - Organized by technology type
• Dark mode support - Logo variants for different themes

Technology Categories

The component typically showcases:

Frontend & Framework

• Next.js 15
• React 18
• TypeScript
• Tailwind CSS

UI & Design

• shadcn/ui
• Radix UI
• Lucide React
• Framer Motion

Backend & Database

• Drizzle ORM
• PostgreSQL
• Server Actions
• API Routes

Development Tools

• ESLint
• Prettier
• Vitest
• pnpm

Deployment & Monitoring

• Vercel
• Sentry
• Analytics
• Docker

Customization

Adding Technologies

Edit the technologies array in the component:

const technologies = [
  {
    name: 'Technology Name',
    logo: '/logos/tech-logo.svg',
    category: 'frontend', // or 'backend', 'tools', etc.
  },
  // ... other technologies
];

Logo Management

Ensure logos are:

• SVG format for crisp scaling
• Consistent sizing (typically 48x48px or 64x64px)
• Dark/light variants for theme compatibility
• Optimized file size for fast loading

Grid Layout

The component uses responsive grid classes:

• grid-cols-3 - 3 columns on mobile
• md:grid-cols-4 - 4 columns on medium screens
• lg:grid-cols-6 - 6 columns on large screens

Best Practices

1. Relevant technologies - Only show technologies actually used
2. Current versions - Keep technology versions up to date
3. Logo licensing - Ensure proper licensing for all logos
4. Performance - Optimize logo file sizes
5. Accessibility - Include alt text for all logos

Styling Notes

• Consistent spacing between logos
• Subtle hover effects for interactivity
• Grayscale to color transitions on hover
• Proper aspect ratios maintained for all logos

This component builds trust by showcasing the modern, professional technology stack behind your product.