Initial commit for project Spoon!

2026-06-21 17:52:02 -05:00
commit cf7ff2ee4e
268 changed files with 32981 additions and 0 deletions
@@ -0,0 +1,75 @@
+const techStack = [
+  {
+    category: 'Frontend',
+    technologies: [
+      { name: 'Next.js 16', description: 'React framework with App Router' },
+      { name: 'Expo 54', description: 'React Native framework' },
+      { name: 'React 19', description: 'Latest React with Server Components' },
+      {
+        name: 'Tailwind CSS v4',
+        description: 'Utility-first CSS framework',
+      },
+      { name: 'shadcn/ui', description: 'Beautiful component library' },
+    ],
+  },
+  {
+    category: 'Backend',
+    technologies: [
+      { name: 'Convex', description: 'Self-hosted reactive backend' },
+      {
+        name: '@convex-dev/auth',
+        description: 'Multi-provider authentication',
+      },
+      { name: 'UseSend', description: 'Self-hosted email service' },
+      { name: 'File Storage', description: 'Built-in file uploads' },
+    ],
+  },
+  {
+    category: 'Developer Tools',
+    technologies: [
+      { name: 'Turborepo', description: 'High-performance build system' },
+      { name: 'TypeScript', description: 'Type-safe development' },
+      { name: 'Bun', description: 'Fast package manager and runtime' },
+      { name: 'ESLint + Prettier', description: 'Code quality tools' },
+      { name: 'Docker', description: 'Containerized deployment' },
+    ],
+  },
+];
+
+export const TechStack = () => (
+  <section id='tech-stack' className='border-border/40 bg-muted/30 border-t'>
+    <div className='container mx-auto px-4 py-24'>
+      <div className='mx-auto max-w-6xl'>
+        <div className='mb-16 text-center'>
+          <h2 className='mb-4 text-3xl font-bold tracking-tight sm:text-4xl md:text-5xl'>
+            Modern Tech Stack
+          </h2>
+          <p className='text-muted-foreground mx-auto max-w-2xl text-lg'>
+            Built with the latest and greatest tools for maximum productivity
+            and performance.
+          </p>
+        </div>
+
+        <div className='grid gap-12 md:grid-cols-3'>
+          {techStack.map((stack) => (
+            <div key={stack.category}>
+              <h3 className='mb-6 text-xl font-semibold'>{stack.category}</h3>
+              <ul className='space-y-4'>
+                {stack.technologies.map((tech) => (
+                  <li key={tech.name}>
+                    <div className='text-foreground font-medium'>
+                      {tech.name}
+                    </div>
+                    <div className='text-muted-foreground text-sm'>
+                      {tech.description}
+                    </div>
+                  </li>
+                ))}
+              </ul>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  </section>
+);