added docker and nextjs app

.env.example

@@ -0,0 +1,6 @@
+# Manufacturing Agent - Frontend Configuration
+
+# Backend API URL for analyze endpoint
+# Local development: http://localhost:8080
+# Production: Update with your backend deployment URL
+NEXT_PUBLIC_API_URL=http://localhost:8080

.gitignore

@@ -0,0 +1,42 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/versions
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# env files (can opt-in for committing if needed)
+.env
+.env.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

AGENTS.md

@@ -0,0 +1,5 @@
+<!-- BEGIN:nextjs-agent-rules -->
+# This is NOT the Next.js you know
+
+This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` before writing any code. Heed deprecation notices.
+<!-- END:nextjs-agent-rules -->

CLAUDE.md

@@ -0,0 +1 @@
+@AGENTS.md

README.md

@@ -1,11 +1,36 @@
----
-title: MachinaCheck
-emoji: 🐢
-colorFrom: gray
-colorTo: purple
-sdk: docker
-pinned: false
-short_description: Ma nufacturing  Agents
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/app/building-your-application/optimizing/fonts) to automatically optimize and load [Geist](https://vercel.com/font), a new font family for Vercel.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.

app/analyze/page.tsx

@@ -0,0 +1,123 @@
+"use client";
+
+import { useState } from "react";
+import { useAnalyze } from "@/hooks/use-analyze";
+import { UploadZone } from "@/components/analyze/upload-zone";
+import { AnalyzeForm } from "@/components/analyze/analyze-form";
+import { LoadingState } from "@/components/analyze/loading-state";
+import { AnalysisResult } from "@/components/analyze/analysis-result";
+import { Button } from "@/components/ui/button";
+import { Navbar } from "@/components/landing/navbar";
+import { Footer } from "@/components/landing/footer";
+import { AlertCircle, ArrowRight } from "lucide-react";
+
+export default function AnalyzePage() {
+  const {
+    form,
+    selectedFile,
+    handleFileSelect,
+    handleFileRemove,
+    onSubmit,
+    result,
+    error,
+    isLoading,
+    resetAnalysis,
+  } = useAnalyze();
+
+  const [isDragging, setIsDragging] = useState(false);
+
+  if (result) {
+    return (
+      <>
+        <Navbar />
+        <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 pt-20 pb-16 px-4">
+          <div className="absolute inset-0 overflow-hidden pointer-events-none">
+            <div className="absolute top-20 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
+            <div className="absolute bottom-20 right-1/4 w-80 h-80 bg-cyan-500/10 rounded-full blur-3xl"></div>
+          </div>
+          <div className="max-w-5xl mx-auto relative z-10">
+            <AnalysisResult data={result} />
+            <div className="mt-10 flex gap-4 justify-center">
+              <Button
+                onClick={resetAnalysis}
+                className="px-8 py-3 bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-700 hover:to-cyan-600 text-white rounded-lg font-semibold transition-all active:scale-95 shadow-lg"
+              >
+                <ArrowRight className="w-4 h-4 mr-2" />
+                Analyze Another File
+              </Button>
+            </div>
+          </div>
+        </div>
+        <Footer />
+      </>
+    );
+  }
+
+  return (
+    <>
+      <Navbar />
+      <div className="min-h-screen bg-gradient-to-br from-slate-950 via-slate-900 to-slate-950 pt-20 pb-16 px-4 sm:px-6 lg:px-8">
+        <div className="absolute inset-0 overflow-hidden pointer-events-none">
+          <div className="absolute top-20 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl"></div>
+          <div className="absolute bottom-20 right-1/4 w-80 h-80 bg-cyan-500/10 rounded-full blur-3xl"></div>
+        </div>
+        
+        <div className="max-w-5xl mx-auto relative z-10">
+          <div className="mb-16 text-center">
+            <div className="inline-block mb-4 px-3 py-1 bg-blue-500/10 border border-blue-500/30 rounded-full">
+              <span className="text-xs font-semibold text-blue-400 uppercase tracking-widest">Precision Analysis</span>
+            </div>
+            <h1 className="text-5xl sm:text-6xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-blue-400 to-cyan-300 mb-4 tracking-tight">
+              Manufacturability Check
+            </h1>
+            <p className="text-lg text-slate-400 max-w-2xl mx-auto leading-relaxed">
+              Upload your STEP file and specify parameters to instantly verify manufacturing feasibility
+            </p>
+          </div>
+
+          <div className="grid lg:grid-cols-3 gap-8 items-start">
+            <div className="lg:col-span-2 space-y-6">
+              <div className="bg-gradient-to-br from-slate-800/50 to-slate-900/50 border border-slate-700/50 rounded-2xl p-8 backdrop-blur-sm hover:border-blue-500/30 transition-all duration-300">
+                <label className="text-xs font-semibold uppercase tracking-widest text-slate-300 mb-4 block">📁 Upload STEP File</label>
+                <UploadZone
+                  file={selectedFile}
+                  onFileSelect={handleFileSelect}
+                  onFileRemove={handleFileRemove}
+                  isDragging={isDragging}
+                  onDragEnter={() => setIsDragging(true)}
+                  onDragLeave={() => setIsDragging(false)}
+                  isDisabled={isLoading}
+                />
+              </div>
+
+              {isLoading && <LoadingState />}
+
+              {error && (
+                <div className="border border-red-500/30 rounded-xl p-5 bg-red-950/20 backdrop-blur-sm flex gap-4">
+                  <AlertCircle className="w-5 h-5 text-red-400 flex-shrink-0 mt-1" />
+                  <div className="flex-1">
+                    <p className="text-sm font-semibold text-red-200">Analysis Failed</p>
+                    <p className="text-sm text-red-300 mt-1">{error}</p>
+                  </div>
+                </div>
+              )}
+            </div>
+
+            <div className="lg:col-span-1">
+              <div className="sticky top-24 bg-gradient-to-br from-slate-800/50 to-slate-900/50 border border-slate-700/50 rounded-2xl p-6 backdrop-blur-sm">
+                <label className="text-xs font-semibold uppercase tracking-widest text-slate-300 mb-4 block">⚙️ Parameters</label>
+                <AnalyzeForm
+                  form={form}
+                  onSubmit={onSubmit}
+                  isLoading={isLoading}
+                  isDisabled={!selectedFile}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}

app/globals.css

@@ -0,0 +1,160 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-sans);
+  --font-mono: var(--font-geist-mono);
+  --font-heading: var(--font-sans);
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  html {
+    @apply font-sans scroll-smooth;
+  }
+  
+  * {
+    @apply border-border outline-ring/50;
+  }
+  
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* Smooth transitions for interactive elements */
+@layer components {
+  button,
+  a,
+  input,
+  select,
+  textarea {
+    @apply transition-all duration-300 ease-in-out;
+  }
+  
+  /* Specific smooth transitions for buttons */
+  button {
+    @apply active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2;
+  }
+  
+  /* Link hover effects */
+  a {
+    @apply hover:text-cyan-300;
+  }
+  
+  /* Form element transitions */
+  input,
+  textarea,
+  select {
+    @apply focus:ring-2 focus:ring-cyan-500/50 focus:border-cyan-400;
+  }
+}

app/layout.tsx

@@ -0,0 +1,33 @@
+import type { Metadata } from "next";
+import { Geist, Geist_Mono } from "next/font/google";
+import "./globals.css";
+
+const geistSans = Geist({
+  variable: "--font-geist-sans",
+  subsets: ["latin"],
+});
+
+const geistMono = Geist_Mono({
+  variable: "--font-geist-mono",
+  subsets: ["latin"],
+});
+
+export const metadata: Metadata = {
+  title: "Create Next App",
+  description: "Generated by create next app",
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html
+      lang="en"
+      className={`${geistSans.variable} ${geistMono.variable} h-full antialiased dark`}
+    >
+      <body className="min-h-full flex flex-col">{children}</body>
+    </html>
+  );
+}

app/page.tsx

@@ -0,0 +1,23 @@
+import { Navbar } from "@/components/landing/navbar";
+import { Hero } from "@/components/landing/hero";
+import { Features } from "@/components/landing/features";
+import { Workflow } from "@/components/landing/workflow";
+import { DashboardPreview } from "@/components/landing/dashboard-preview";
+import { CTA } from "@/components/landing/cta";
+import { Footer } from "@/components/landing/footer";
+
+export default function Home() {
+  return (
+    <div className="flex flex-col min-h-screen">
+      <Navbar />
+      <main className="flex-1">
+        <Hero />
+        <Features />
+        <Workflow />
+        <DashboardPreview />
+        <CTA />
+      </main>
+      <Footer />
+    </div>
+  );
+}

components.json

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "radix-nova",
+  "rsc": true,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

components/analyze/analysis-result.tsx

@@ -0,0 +1,117 @@
+"use client";
+
+import { AnalysisResponse } from "@/lib/types";
+import { StatusBadge } from "./status-badge";
+import { Wrench, Lightbulb, AlertCircle, Zap } from "lucide-react";
+
+interface AnalysisResultProps {
+  data: AnalysisResponse;
+}
+
+export function AnalysisResult({ data }: AnalysisResultProps) {
+  return (
+    <div className="space-y-8 animate-in fade-in duration-500">
+      <div className="border-b border-gray-700 pb-6 space-y-3">
+        <div className="flex items-start justify-between gap-4">
+          <div className="space-y-1 flex-1">
+            <h2 className="text-2xl font-mono font-bold text-gray-100 uppercase tracking-wide">
+              ANALYSIS COMPLETE
+            </h2>
+            <p className="text-xs text-gray-500 font-mono">
+              {new Date().toLocaleString()}
+            </p>
+          </div>
+          <StatusBadge decision={data.decision} />
+        </div>
+      </div>
+
+      <div className="bg-gray-900/50 border border-gray-700/50 rounded p-4 space-y-2">
+        <p className="text-sm text-gray-200 leading-relaxed font-mono">
+          {data.summary}
+        </p>
+      </div>
+
+      <div className="grid md:grid-cols-2 gap-6">
+        {data.operations && data.operations.length > 0 && (
+          <div className="border border-gray-700/50 rounded p-4 space-y-3">
+            <h3 className="text-xs font-mono uppercase tracking-wider text-blue-400 font-semibold flex items-center gap-2">
+              <Wrench className="w-4 h-4" />
+              REQUIRED OPERATIONS
+            </h3>
+            <ul className="space-y-2">
+              {data.operations.map((op, idx) => (
+                <li
+                  key={idx}
+                  className="text-sm text-gray-300 font-mono flex items-start gap-2"
+                >
+                  <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-blue-500 flex-shrink-0" />
+                  <span>{op}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+
+        {data.required_tools && data.required_tools.length > 0 && (
+          <div className="border border-gray-700/50 rounded p-4 space-y-3">
+            <h3 className="text-xs font-mono uppercase tracking-wider text-green-400 font-semibold flex items-center gap-2">
+              <Zap className="w-4 h-4" />
+              AVAILABLE TOOLS
+            </h3>
+            <ul className="space-y-2">
+              {data.required_tools.map((tool, idx) => (
+                <li
+                  key={idx}
+                  className="text-sm text-gray-300 font-mono flex items-start gap-2"
+                >
+                  <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-green-500 flex-shrink-0" />
+                  <span>{tool}</span>
+                </li>
+              ))}
+            </ul>
+          </div>
+        )}
+      </div>
+
+      {data.missing_tools && data.missing_tools.length > 0 && (
+        <div className="border border-red-700/50 bg-red-950/20 rounded p-4 space-y-3">
+          <h3 className="text-xs font-mono uppercase tracking-wider text-red-400 font-semibold flex items-center gap-2">
+            <AlertCircle className="w-4 h-4" />
+            MISSING TOOLS
+          </h3>
+          <ul className="space-y-2">
+            {data.missing_tools.map((tool, idx) => (
+              <li
+                key={idx}
+                className="text-sm text-red-300 font-mono flex items-start gap-2"
+              >
+                <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-red-500 flex-shrink-0" />
+                <span>{tool}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+
+      {data.recommendations && data.recommendations.length > 0 && (
+        <div className="border border-blue-700/50 bg-blue-950/20 rounded p-4 space-y-3">
+          <h3 className="text-xs font-mono uppercase tracking-wider text-blue-400 font-semibold flex items-center gap-2">
+            <Lightbulb className="w-4 h-4" />
+            RECOMMENDATIONS
+          </h3>
+          <ul className="space-y-2">
+            {data.recommendations.map((rec, idx) => (
+              <li
+                key={idx}
+                className="text-sm text-blue-300 font-mono flex items-start gap-2"
+              >
+                <span className="mt-1.5 w-1.5 h-1.5 rounded-full bg-blue-500 flex-shrink-0" />
+                <span>{rec}</span>
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

components/analyze/analyze-form.tsx

@@ -0,0 +1,78 @@
+"use client";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { UseFormReturn, FieldValues } from "react-hook-form";
+import { Loader2 } from "lucide-react";
+
+interface AnalyzeFormProps {
+  form: UseFormReturn<any>;
+  onSubmit: () => Promise<void>;
+  isLoading: boolean;
+  isDisabled: boolean;
+}
+
+export function AnalyzeForm({
+  form,
+  onSubmit,
+  isLoading,
+  isDisabled,
+}: AnalyzeFormProps) {
+  const { register, formState } = form;
+
+  return (
+    <form onSubmit={onSubmit} className="space-y-4">
+      <div className="space-y-2">
+        <Label className="text-xs font-semibold uppercase tracking-wider text-slate-300">Material</Label>
+        <Input
+          {...register("material")}
+          placeholder="Steel 304, Aluminium 6061"
+          disabled={isLoading || isDisabled}
+          className="text-sm bg-slate-700/50 border-slate-600 text-slate-100 placeholder:text-slate-500 focus:border-blue-400 focus:ring-blue-500/30 transition-all duration-300 hover:border-slate-500"
+        />
+        {formState.errors.material && (
+          <p className="text-xs text-red-400">{formState.errors.material.message as string}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs font-semibold uppercase tracking-wider text-slate-300">Tolerance</Label>
+        <Input
+          {...register("tolerance")}
+          placeholder="±0.02mm, ±0.05mm"
+          disabled={isLoading || isDisabled}
+          className="text-sm bg-slate-700/50 border-slate-600 text-slate-100 placeholder:text-slate-500 focus:border-blue-400 focus:ring-blue-500/30 transition-all duration-300 hover:border-slate-500"
+        />
+        {formState.errors.tolerance && (
+          <p className="text-xs text-red-400">{formState.errors.tolerance.message as string}</p>
+        )}
+      </div>
+
+      <div className="space-y-2">
+        <Label className="text-xs font-semibold uppercase tracking-wider text-slate-300">Threads (Optional)</Label>
+        <Input
+          {...register("threads")}
+          placeholder="M8x1.25, M10x1.5"
+          disabled={isLoading || isDisabled}
+          className="text-sm bg-slate-700/50 border-slate-600 text-slate-100 placeholder:text-slate-500 focus:border-blue-400 focus:ring-blue-500/30 transition-all duration-300 hover:border-slate-500"
+        />
+      </div>
+
+      <Button
+        type="submit"
+        disabled={isLoading || isDisabled}
+        className="w-full h-11 font-semibold text-sm bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-700 hover:to-cyan-600 text-white rounded-lg transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed active:scale-95 hover:scale-105 hover:shadow-lg hover:shadow-blue-500/50 shadow-lg"
+      >
+        {isLoading ? (
+          <>
+            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
+            Analyzing...
+          </>
+        ) : (
+          "Analyze Now"
+        )}
+      </Button>
+    </form>
+  );
+}

components/analyze/loading-state.tsx

@@ -0,0 +1,21 @@
+"use client";
+
+import { Loader2 } from "lucide-react";
+
+export function LoadingState() {
+  return (
+    <div className="flex flex-col items-center justify-center py-16 gap-6 border-2 border-dashed border-gray-600 rounded-lg bg-gray-950/50 p-12">
+      <div className="p-4 rounded-lg bg-blue-950/30 border border-blue-700/30">
+        <Loader2 className="w-8 h-8 text-blue-400 animate-spin" />
+      </div>
+      <div className="text-center space-y-2">
+        <p className="text-sm font-mono font-semibold text-gray-200 uppercase tracking-wide">
+          ANALYZING MANUFACTURABILITY...
+        </p>
+        <p className="text-xs text-gray-500 font-mono">
+          Processing CAD geometry and checking tool compatibility
+        </p>
+      </div>
+    </div>
+  );
+}

components/analyze/status-badge.tsx

@@ -0,0 +1,40 @@
+"use client";
+
+import { DecisionType } from "@/lib/types";
+import { Check, X, AlertCircle } from "lucide-react";
+
+interface StatusBadgeProps {
+  decision: DecisionType;
+}
+
+export function StatusBadge({ decision }: StatusBadgeProps) {
+  const config = {
+    YES: {
+      bg: "bg-green-950/40 border-green-700/50",
+      text: "text-green-400",
+      icon: <Check className="w-5 h-5" />,
+      label: "MANUFACTURABLE",
+    },
+    NO: {
+      bg: "bg-red-950/40 border-red-700/50",
+      text: "text-red-400",
+      icon: <X className="w-5 h-5" />,
+      label: "NOT MANUFACTURABLE",
+    },
+    CONDITIONAL: {
+      bg: "bg-yellow-950/40 border-yellow-700/50",
+      text: "text-yellow-400",
+      icon: <AlertCircle className="w-5 h-5" />,
+      label: "CONDITIONALLY MANUFACTURABLE",
+    },
+  }[decision];
+
+  return (
+    <div
+      className={`inline-flex items-center gap-3 px-4 py-3 rounded border font-mono text-sm font-semibold uppercase tracking-wide ${config.bg}`}
+    >
+      <span className={config.text}>{config.icon}</span>
+      <span className={config.text}>{config.label}</span>
+    </div>
+  );
+}

components/analyze/upload-zone.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useRef, useState } from "react";
+import { Upload, X } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+interface UploadZoneProps {
+  file: File | null;
+  onFileSelect: (file: File) => void;
+  onFileRemove: () => void;
+  isDragging: boolean;
+  onDragEnter: () => void;
+  onDragLeave: () => void;
+  isDisabled?: boolean;
+}
+
+export function UploadZone({
+  file,
+  onFileSelect,
+  onFileRemove,
+  isDragging,
+  onDragEnter,
+  onDragLeave,
+  isDisabled,
+}: UploadZoneProps) {
+  const inputRef = useRef<HTMLInputElement>(null);
+
+  const handleDragOver = (e: React.DragEvent) => {
+    e.preventDefault();
+  };
+
+  const handleDrop = (e: React.DragEvent) => {
+    e.preventDefault();
+    onDragLeave();
+
+    const droppedFile = e.dataTransfer.files?.[0];
+    if (droppedFile) {
+      onFileSelect(droppedFile);
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const selectedFile = e.currentTarget.files?.[0];
+    if (selectedFile) {
+      onFileSelect(selectedFile);
+    }
+  };
+
+  const handleClick = () => {
+    if (!isDisabled) {
+      inputRef.current?.click();
+    }
+  };
+
+  if (file) {
+    return (
+      <div className="border border-blue-500/30 rounded-xl p-5 bg-gradient-to-r from-blue-950/30 to-cyan-950/30 backdrop-blur-sm transition-all duration-300">
+        <div className="flex items-center justify-between gap-4">
+          <div className="flex items-center gap-3 flex-1">
+            <div className="p-3 rounded-lg bg-gradient-to-br from-blue-500/20 to-cyan-500/20 border border-blue-500/40 transition-all duration-300">
+              <Upload className="w-5 h-5 text-blue-300" />
+            </div>
+            <div className="min-w-0 flex-1">
+              <p className="text-sm font-semibold text-blue-100 truncate">{file.name}</p>
+              <p className="text-xs text-blue-400/70">{(file.size / 1024).toFixed(2)} KB</p>
+            </div>
+          </div>
+          <button
+            onClick={onFileRemove}
+            disabled={isDisabled}
+            className="p-2 hover:bg-red-500/20 rounded-lg transition-all duration-300 disabled:opacity-50 hover:scale-110 active:scale-95"
+            type="button"
+          >
+            <X className="w-4 h-4 text-red-400" />
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div
+      onDragOver={handleDragOver}
+      onDrop={handleDrop}
+      onDragEnter={onDragEnter}
+      onDragLeave={onDragLeave}
+      onClick={handleClick}
+      className={cn(
+        "relative border-2 border-dashed rounded-2xl p-12 transition-all duration-300 cursor-pointer",
+        isDragging
+          ? "border-blue-400 bg-blue-950/40 scale-105"
+          : "border-slate-600 hover:border-slate-500 bg-slate-950/40 hover:bg-slate-950/60 hover:scale-102",
+        isDisabled && "opacity-50 cursor-not-allowed"
+      )}
+    >
+      <input
+        ref={inputRef}
+        type="file"
+        accept=".step,.stp"
+        onChange={handleInputChange}
+        disabled={isDisabled}
+        className="hidden"
+      />
+
+      <div className="flex flex-col items-center justify-center gap-4 text-center">
+        <div className="p-4 rounded-xl bg-gradient-to-br from-blue-500/20 to-cyan-500/20 border border-blue-500/30">
+          <Upload className="w-8 h-8 text-blue-400" />
+        </div>
+        <div>
+          <p className="text-base font-semibold text-slate-100">Drag & Drop CAD Files Here</p>
+          <p className="text-sm text-slate-400 mt-1">Supported: STEP, STP (Max 50MB)</p>
+        </div>
+        <button
+          type="button"
+          disabled={isDisabled}
+          className={cn(
+            "px-6 py-2.5 text-sm font-semibold rounded-lg transition-all duration-300",
+            isDisabled
+              ? "bg-slate-700 text-slate-400 cursor-not-allowed"
+              : "bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-700 hover:to-cyan-600 text-white shadow-lg hover:shadow-blue-500/50 active:scale-95 hover:scale-105"
+          )}
+        >
+          Select Files
+        </button>
+      </div>
+    </div>
+  );
+}

components/landing/cta.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import Link from "next/link";
+import { Upload, ArrowRight } from "lucide-react";
+
+export function CTA() {
+  return (
+    <section className="py-32 relative overflow-hidden bg-gradient-to-b from-slate-950 via-slate-900 to-slate-950 border-t border-slate-800">
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-1/4 left-0 w-96 h-96 bg-blue-600/15 rounded-full blur-3xl"></div>
+        <div className="absolute bottom-0 right-1/3 w-80 h-80 bg-cyan-600/15 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="max-w-4xl mx-auto">
+          <div className="bg-gradient-to-br from-slate-800/50 to-slate-900/50 border border-slate-700/50 rounded-2xl p-12 sm:p-16 text-center backdrop-blur-sm">
+            <h2 className="text-4xl sm:text-5xl lg:text-6xl font-bold tracking-tight mb-6 text-transparent bg-clip-text bg-gradient-to-r from-blue-300 to-cyan-300">
+              Ready to optimize your CNC workflow?
+            </h2>
+            <p className="text-xl text-slate-300 leading-relaxed mb-10 max-w-2xl mx-auto">
+              Join leading machine shops eliminating quoting delays, reducing errors, and maximizing shop floor efficiency with AI-powered manufacturability analysis.
+            </p>
+
+            <div className="flex flex-col sm:flex-row gap-4 justify-center mb-8">
+              <Link 
+                href="/analyze"
+                className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-lg bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-700 hover:to-cyan-600 text-white font-semibold shadow-lg hover:shadow-blue-500/50 transition-all active:scale-95"
+              >
+                <Upload className="w-5 h-5" />
+                Start Free Analysis
+              </Link>
+              <button className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-lg border border-slate-600 hover:border-blue-500 text-slate-200 font-semibold hover:bg-slate-800/50 transition-all">
+                Learn More
+                <ArrowRight className="w-4 h-4" />
+              </button>
+            </div>
+
+            <p className="text-sm text-slate-400">
+              Supports STEP, STP, and DXF files up to 50MB • 2-second analysis • No credit card required
+            </p>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/landing/dashboard-preview.tsx

@@ -0,0 +1,232 @@
+"use client";
+
+import React from "react";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { AlertCircle, CheckCircle, FileText, Info, Wrench } from "lucide-react";
+import { motion } from "framer-motion";
+
+export function DashboardPreview() {
+  return (
+    <section id="dashboard" className="py-24 relative bg-gradient-to-b from-slate-900/30 to-slate-950/50 border-y border-border/50">
+      {/* Decorative blurs */}
+      <div className="absolute top-0 right-1/4 w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl -z-10"></div>
+      <div className="absolute bottom-0 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl -z-10"></div>
+      
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center max-w-3xl mx-auto mb-16">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl mb-4">
+              <span className="bg-gradient-to-r from-blue-300 via-cyan-300 to-blue-300 bg-clip-text text-transparent">
+                Enterprise Grade Analysis
+              </span>
+            </h2>
+          </motion.div>
+          <motion.p
+            className="text-lg text-muted-foreground"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            A comprehensive dashboard providing deep insights into manufacturing feasibility, risk factors, and tool requirements.
+          </motion.p>
+        </div>
+
+        <motion.div
+          className="max-w-5xl mx-auto rounded-xl border border-cyan-500/20 bg-gradient-to-br from-slate-900/80 to-slate-950/80 shadow-2xl overflow-hidden backdrop-blur-sm"
+          initial={{ opacity: 0, y: 40, scale: 0.95 }}
+          whileInView={{ opacity: 1, y: 0, scale: 1 }}
+          viewport={{ once: true }}
+          transition={{ duration: 0.7 }}
+        >
+          {/* Dashboard Header with gradient */}
+          <div className="border-b border-cyan-500/20 bg-gradient-to-r from-slate-900/50 to-slate-950/50 px-6 py-4 flex items-center justify-between backdrop-blur-sm">
+            <div className="flex items-center gap-4">
+              <h3 className="font-semibold font-mono text-sm text-cyan-300">PART-A92-REV3</h3>
+              <Badge className="bg-gradient-to-r from-green-500 to-emerald-500 text-white border-0 rounded-sm shadow-lg">
+                <CheckCircle className="w-3 h-3 mr-1" /> Manufacturable
+              </Badge>
+            </div>
+            <div className="flex items-center gap-2">
+              <span className="text-xs text-cyan-400/70 font-mono">EST. CYCLE TIME: 4m 12s</span>
+            </div>
+          </div>
+
+          <div className="p-6 grid grid-cols-1 lg:grid-cols-3 gap-6">
+            {/* Left Column: Drawing Viewer & Agent Reasoning */}
+            <div className="lg:col-span-2 flex flex-col gap-6">
+              <Card className="flex-1 bg-gradient-to-br from-slate-850/60 to-slate-900/40 border-cyan-500/20 shadow-none">
+                <CardHeader className="py-4 px-5 border-b border-cyan-500/20">
+                  <CardTitle className="text-sm flex items-center font-medium text-cyan-300">
+                    <FileText className="w-4 h-4 mr-2 text-cyan-400" />
+                    3D model Analysis
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="p-0 h-64 relative bg-card flex items-center justify-center overflow-hidden">
+                   {/* Blueprint grid with gradient */}
+                   <div className="absolute inset-0 opacity-[0.02] bg-[linear-gradient(to_right,#06b6d4_1px,transparent_1px),linear-gradient(to_bottom,#06b6d4_1px,transparent_1px)] bg-[size:20px_20px]"></div>
+                   <div className="relative border-2 border-cyan-500/40 w-3/4 h-3/4 flex items-center justify-center rounded-lg bg-slate-950/50">
+                     <span className="font-mono text-xs text-cyan-400/60">Interactive CAD Viewer</span>
+                     <motion.div 
+                       className="absolute top-1/4 left-1/4 w-4 h-4 rounded-full border border-red-400/60 bg-red-500/20"
+                       animate={{ scale: [1, 1.2, 1] }}
+                       transition={{ duration: 2, repeat: Infinity }}
+                     />
+                     <div className="absolute top-1/2 right-1/3 w-4 h-4 rounded-full border border-yellow-400/60 bg-yellow-500/20"></div>
+                   </div>
+                </CardContent>
+              </Card>
+
+              <Card className="bg-gradient-to-br from-slate-850/60 to-slate-900/40 border-cyan-500/20 shadow-none">
+                <CardHeader className="py-4 px-5 border-b border-cyan-500/20">
+                  <CardTitle className="text-sm flex items-center font-medium text-cyan-300">
+                    <BrainIcon className="w-4 h-4 mr-2 text-cyan-400" />
+                    Agent Reasoning Panel
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="p-4">
+                  <div className="space-y-3 font-mono text-xs text-cyan-300/80">
+                    <motion.div 
+                      className="flex gap-2"
+                      initial={{ opacity: 0, x: -10 }}
+                      whileInView={{ opacity: 1, x: 0 }}
+                      viewport={{ once: true }}
+                      transition={{ delay: 0 }}
+                    >
+                      <span className="text-cyan-400 flex-shrink-0">{">"}</span>
+                      <p>Analyzed 14 geometric features and 8 dimensional tolerances.</p>
+                    </motion.div>
+                    <motion.div 
+                      className="flex gap-2"
+                      initial={{ opacity: 0, x: -10 }}
+                      whileInView={{ opacity: 1, x: 0 }}
+                      viewport={{ once: true }}
+                      transition={{ delay: 0.1 }}
+                    >
+                      <span className="text-cyan-400 flex-shrink-0">{">"}</span>
+                      <p>Identified required operations: Facing, Roughing, Finishing, Tapping (M6x1.0).</p>
+                    </motion.div>
+                    <motion.div 
+                      className="flex gap-2"
+                      initial={{ opacity: 0, x: -10 }}
+                      whileInView={{ opacity: 1, x: 0 }}
+                      viewport={{ once: true }}
+                      transition={{ delay: 0.2 }}
+                    >
+                      <span className="text-cyan-400 flex-shrink-0">{">"}</span>
+                      <p>Tolerance ±0.01mm on ID fits within machine HAAS-VF2 capability.</p>
+                    </motion.div>
+                    <motion.div 
+                      className="flex gap-2 text-green-400"
+                      initial={{ opacity: 0, x: -10 }}
+                      whileInView={{ opacity: 1, x: 0 }}
+                      viewport={{ once: true }}
+                      transition={{ delay: 0.3 }}
+                    >
+                      <span className="text-green-400 flex-shrink-0">{">"}</span>
+                      <p>Conclusion: Part can be manufactured using standard shop tooling.</p>
+                    </motion.div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+
+            {/* Right Column: Risk Flags & Tools */}
+            <div className="flex flex-col gap-6">
+              <Card className="bg-gradient-to-br from-slate-850/60 to-slate-900/40 border-cyan-500/20 shadow-none">
+                <CardHeader className="py-4 px-5 border-b border-cyan-500/20">
+                  <CardTitle className="text-sm flex items-center font-medium text-cyan-300">
+                    <AlertCircle className="w-4 h-4 mr-2 text-cyan-400" />
+                    Risk Flags
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="p-4 space-y-3">
+                  <div className="flex items-start gap-3 p-3 rounded-md bg-yellow-500/10 border border-yellow-500/30">
+                    <AlertCircle className="w-4 h-4 text-yellow-400 mt-0.5 flex-shrink-0" />
+                    <div>
+                      <h4 className="text-xs font-semibold text-yellow-100">Deep Hole Drilling</h4>
+                      <p className="text-[10px] text-yellow-200/70 mt-1">L/D ratio is 6:1. Peck drilling recommended.</p>
+                    </div>
+                  </div>
+                  <div className="flex items-start gap-3 p-3 rounded-md bg-blue-500/10 border border-blue-500/30">
+                    <Info className="w-4 h-4 text-blue-400 mt-0.5 flex-shrink-0" />
+                    <div>
+                      <h4 className="text-xs font-semibold text-blue-100">Thin Wall</h4>
+                      <p className="text-[10px] text-blue-200/70 mt-1">Wall thickness 1.5mm. Watch for chatter.</p>
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+
+              <Card className="flex-1 bg-gradient-to-br from-slate-850/60 to-slate-900/40 border-cyan-500/20 shadow-none">
+                <CardHeader className="py-4 px-5 border-b border-cyan-500/20">
+                  <CardTitle className="text-sm flex items-center font-medium text-cyan-300">
+                    <Wrench className="w-4 h-4 mr-2 text-cyan-400" />
+                    Required Tools
+                  </CardTitle>
+                </CardHeader>
+                <CardContent className="p-0">
+                  <div className="divide-y divide-cyan-500/20 text-xs">
+                    <div className="flex items-center justify-between p-3 px-5 hover:bg-cyan-500/10 transition-colors">
+                      <span className="font-mono text-cyan-400/60">T01</span>
+                      <span className="text-cyan-200">Face Mill 50mm</span>
+                      <CheckCircle className="w-3 h-3 text-green-400" />
+                    </div>
+                    <div className="flex items-center justify-between p-3 px-5 hover:bg-cyan-500/10 transition-colors">
+                      <span className="font-mono text-cyan-400/60">T04</span>
+                      <span className="text-cyan-200">End Mill 10mm</span>
+                      <CheckCircle className="w-3 h-3 text-green-400" />
+                    </div>
+                    <div className="flex items-center justify-between p-3 px-5 hover:bg-cyan-500/10 transition-colors">
+                      <span className="font-mono text-cyan-400/60">T12</span>
+                      <span className="text-cyan-200">Drill 5.0mm</span>
+                      <CheckCircle className="w-3 h-3 text-green-400" />
+                    </div>
+                    <div className="flex items-center justify-between p-3 px-5 hover:bg-cyan-500/10 transition-colors">
+                      <span className="font-mono text-cyan-400/60">T15</span>
+                      <span className="text-cyan-200">Tap M6x1.0</span>
+                      <CheckCircle className="w-3 h-3 text-green-400" />
+                    </div>
+                  </div>
+                </CardContent>
+              </Card>
+            </div>
+          </div>
+        </motion.div>
+      </div>
+    </section>
+  );
+}
+
+function BrainIcon(props: React.SVGProps<SVGSVGElement>) {
+  return (
+    <svg
+      {...props}
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    >
+      <path d="M12 5a3 3 0 1 0-5.997.125 4 4 0 0 0-2.526 5.77 4 4 0 0 0 .556 6.588A4 4 0 1 0 12 18Z" />
+      <path d="M12 5a3 3 0 1 1 5.997.125 4 4 0 0 1 2.526 5.77 4 4 0 0 1-.556 6.588A4 4 0 1 1 12 18Z" />
+      <path d="M15 13a4.5 4.5 0 0 1-3-4 4.5 4.5 0 0 1-3 4" />
+      <path d="M17.599 6.5a3 3 0 0 0 .399-1.375" />
+      <path d="M6.002 5.125A3 3 0 0 0 6.401 6.5" />
+      <path d="M3.477 10.896a4 4 0 0 1 .585-.396" />
+      <path d="M19.938 10.5a4 4 0 0 1 .585.396" />
+      <path d="M6 18a4 4 0 0 1-1.967-.516" />
+      <path d="M19.967 17.484A4 4 0 0 1 18 18" />
+    </svg>
+  );
+}

components/landing/features.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import React from "react";
+import { FileSearch, Settings2, Wrench, Cpu, AlertTriangle, FileText } from "lucide-react";
+import { motion } from "framer-motion";
+
+const features = [
+  {
+    title: "3D Parsing",
+    description: "Instantly parse complex 3D CAD models using AI agents.",
+    icon: FileSearch,
+  },
+  {
+    title: "CNC Operation Detection",
+    description: "Automatically identify required machining operations like turning, milling, drilling, and tapping.",
+    icon: Settings2,
+  },
+  {
+    title: "Tool Matching",
+    description: "Map detected features to available shop floor tooling to ensure manufacturability without custom tools.",
+    icon: Wrench,
+  },
+  {
+    title: "Machine Capability Analysis",
+    description: "Evaluate if part dimensions, tolerances, and operations fit within your specific machine envelope.",
+    icon: Cpu,
+  },
+  {
+    title: "Risk Detection",
+    description: "Identify high-risk geometric features, tight tolerances, or impossible-to-machine internal geometries.",
+    icon: AlertTriangle,
+  },
+  {
+    title: "Automated Reports",
+    description: "Generate comprehensive DFM (Design for Manufacturing) reports instantly for client feedback.",
+    icon: FileText,
+  },
+];
+
+export function Features() {
+  return (
+    <section id="features" className="py-32 bg-gradient-to-b from-slate-900 via-slate-950 to-slate-900 relative overflow-hidden border-t border-slate-800">
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-cyan-600/10 rounded-full blur-3xl"></div>
+      </div>
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="text-center max-w-3xl mx-auto mb-20">
+          <h2 className="text-4xl sm:text-5xl font-bold tracking-tight mb-6 text-transparent bg-clip-text bg-gradient-to-r from-blue-300 to-cyan-300">
+            Industrial-Grade AI Capabilities
+          </h2>
+          <p className="text-lg text-slate-300 leading-relaxed">
+            Comprehensive manufacturability analysis tools designed for advanced machine shops
+          </p>
+        </div>
+
+        <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
+          {features.map((feature, index) => {
+            const Icon = feature.icon;
+            return (
+              <motion.div
+                key={index}
+                initial={{ opacity: 0, y: 20 }}
+                whileInView={{ opacity: 1, y: 0 }}
+                viewport={{ once: true }}
+                transition={{ duration: 0.5, delay: index * 0.1 }}
+              >
+                <div className="group relative h-full">
+                  <div className="absolute inset-0 bg-gradient-to-r from-blue-500/10 to-cyan-500/10 rounded-xl blur opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
+                  <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 border border-slate-700/50 group-hover:border-blue-500/50 rounded-xl p-8 transition-all duration-300 h-full">
+                    <div className="h-12 w-12 rounded-lg bg-gradient-to-br from-blue-500/20 to-cyan-500/20 border border-blue-500/30 flex items-center justify-center mb-4 group-hover:from-blue-500/30 group-hover:to-cyan-500/30 transition-colors">
+                      <Icon className="h-6 w-6 text-blue-400" />
+                    </div>
+                    <h3 className="text-xl font-semibold text-slate-100 mb-3">{feature.title}</h3>
+                    <p className="text-slate-400 leading-relaxed">{feature.description}</p>
+                  </div>
+                </div>
+              </motion.div>
+            );
+          })}
+        </div>
+      </div>
+    </section>
+  );
+}

components/landing/footer.tsx

@@ -0,0 +1,66 @@
+import React from "react";
+import Link from "next/link";
+import { Layers } from "lucide-react";
+
+export function Footer() {
+  return (
+    <footer className="border-t border-cyan-500/20 bg-gradient-to-b from-slate-950 to-slate-900 relative overflow-hidden">
+      {/* Decorative glow */}
+      <div className="absolute bottom-0 right-0 w-96 h-96 bg-cyan-500/5 rounded-full blur-3xl -z-10"></div>
+      
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="grid grid-cols-1 md:grid-cols-4 gap-12 md:gap-8 py-16">
+          <div className="md:col-span-1">
+            <Link href="/" className="flex items-center space-x-2 mb-4 group">
+              <div className="p-2 rounded-lg bg-gradient-to-br from-blue-500 to-cyan-500 group-hover:shadow-lg group-hover:shadow-cyan-500/50 transition-shadow">
+                <Layers className="h-5 w-5 text-white" />
+              </div>
+              <span className="font-bold text-lg tracking-tight bg-gradient-to-r from-blue-300 to-cyan-300 bg-clip-text text-transparent">MachinaCheck</span>
+            </Link>
+            <p className="text-sm text-slate-400 leading-relaxed max-w-xs">
+              AI-powered CNC manufacturability assessment platform for advanced machine shops.
+            </p>
+          </div>
+          
+          <div>
+            <h4 className="font-semibold text-slate-200 mb-4">Product</h4>
+            <ul className="space-y-3 text-sm text-slate-400">
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">Features</Link></li>
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">Workflow</Link></li>
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">Integrations</Link></li>
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">Pricing</Link></li>
+            </ul>
+          </div>
+          
+          <div>
+            <h4 className="font-semibold text-slate-200 mb-4">Resources</h4>
+            <ul className="space-y-3 text-sm text-slate-400">
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">Documentation</Link></li>
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">API Reference</Link></li>
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">Blog</Link></li>
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">GitHub</Link></li>
+            </ul>
+          </div>
+          
+          <div>
+            <h4 className="font-semibold text-slate-200 mb-4">Company</h4>
+            <ul className="space-y-3 text-sm text-slate-400">
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">About</Link></li>
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">Contact</Link></li>
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">Privacy Policy</Link></li>
+              <li><Link href="#" className="hover:text-cyan-300 transition-colors duration-200">Terms of Service</Link></li>
+            </ul>
+          </div>
+        </div>
+        
+        <div className="py-8 border-t border-cyan-500/20 flex flex-col md:flex-row items-center justify-between text-xs text-slate-500">
+          <p>© {new Date().getFullYear()} MachinaCheck Inc. All rights reserved.</p>
+          <div className="flex space-x-6 mt-4 md:mt-0 font-mono">
+            <span className="text-cyan-400/60">SYS.STATUS: <span className="text-green-400">ONLINE</span></span>
+            <span className="text-slate-600">v2.0.4</span>
+          </div>
+        </div>
+      </div>
+    </footer>
+  );
+}

components/landing/hero.tsx

@@ -0,0 +1,96 @@
+"use client";
+
+import React from "react";
+import Link from "next/link";
+import { ArrowRight, Upload } from "lucide-react";
+import { motion } from "framer-motion";
+
+export function Hero() {
+  return (
+    <section className="relative overflow-hidden pt-32 pb-24 lg:pt-48 lg:pb-32 bg-gradient-to-b from-slate-900 via-slate-950 to-slate-900">
+      {/* Animated gradient blobs */}
+      <div className="absolute inset-0 overflow-hidden pointer-events-none">
+        <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-600/20 rounded-full blur-3xl animate-pulse"></div>
+        <div className="absolute top-1/3 right-0 w-80 h-80 bg-cyan-600/20 rounded-full blur-3xl animate-pulse delay-1000"></div>
+      </div>
+
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
+        <div className="max-w-4xl mx-auto text-center">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5 }}
+          >
+            <div className="inline-flex items-center gap-2 rounded-full border border-blue-500/30 bg-blue-950/50 px-4 py-2 mb-8">
+              <span className="flex h-2 w-2 rounded-full bg-blue-400 animate-pulse"></span>
+              <span className="text-sm font-medium text-blue-300">Powered by Multimodal AI</span>
+            </div>
+          </motion.div>
+          
+          <motion.h1
+            className="text-5xl sm:text-6xl lg:text-7xl font-bold tracking-tight mb-6 text-transparent bg-clip-text bg-gradient-to-r from-blue-300 via-blue-200 to-cyan-300"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            AI-Powered CNC<br />
+            Manufacturability
+          </motion.h1>
+          
+          <motion.p
+            className="text-xl sm:text-2xl text-slate-300 mb-12 leading-relaxed max-w-2xl mx-auto"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.2 }}
+          >
+            Upload 3D model determine machining feasibility using AI agents
+          </motion.p>
+          
+          <motion.div
+            className="flex flex-col sm:flex-row gap-4 justify-center"
+            initial={{ opacity: 0, y: 20 }}
+            animate={{ opacity: 1, y: 0 }}
+            transition={{ duration: 0.5, delay: 0.3 }}
+          >
+            <Link 
+              href="/analyze"
+              className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-lg bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-700 hover:to-cyan-600 text-white font-semibold shadow-lg hover:shadow-blue-500/50 transition-all active:scale-95"
+            >
+              <Upload className="h-5 w-5" />
+              Start Analysis
+            </Link>
+            <button className="inline-flex items-center justify-center gap-2 px-8 py-4 rounded-lg border border-slate-600 hover:border-blue-500 text-slate-200 font-semibold transition-all hover:bg-slate-800/50">
+              View Documentation
+              <ArrowRight className="h-4 w-4" />
+            </button>
+          </motion.div>
+
+          <motion.div
+            className="mt-20 relative group"
+            initial={{ opacity: 0, scale: 0.95 }}
+            animate={{ opacity: 1, scale: 1 }}
+            transition={{ duration: 0.7, delay: 0.4 }}
+          >
+            <div className="absolute inset-0 bg-gradient-to-r from-blue-500/20 to-cyan-500/20 rounded-2xl blur-2xl group-hover:blur-3xl transition-all"></div>
+            <div className="relative bg-gradient-to-br from-slate-800/50 to-slate-900/50 border border-slate-700/50 rounded-2xl p-8 backdrop-blur-sm">
+              <div className="grid grid-cols-3 gap-6">
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-blue-400 mb-2">10,000+</div>
+                  <div className="text-sm text-slate-400">Parts Analyzed</div>
+                </div>
+                <div className="text-center border-l border-r border-slate-700">
+                  <div className="text-3xl font-bold text-cyan-400 mb-2">99.8%</div>
+                  <div className="text-sm text-slate-400">Accuracy Rate</div>
+                </div>
+                <div className="text-center">
+                  <div className="text-3xl font-bold text-blue-400 mb-2">&lt;2s</div>
+                  <div className="text-sm text-slate-400">Analysis Time</div>
+                </div>
+              </div>
+            </div>
+          </motion.div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/landing/navbar.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import Link from "next/link";
+import { Layers } from "lucide-react";
+
+export function Navbar() {
+  return (
+    <header className="sticky top-0 z-50 w-full border-b border-slate-800 bg-slate-950/80 backdrop-blur-xl supports-[backdrop-filter]:bg-slate-950/60">
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8 flex h-16 items-center justify-between">
+        <Link href="/" className="flex items-center space-x-3 group">
+          <div className="p-2 rounded-lg bg-gradient-to-br from-blue-600 to-cyan-500 group-hover:from-blue-700 group-hover:to-cyan-600 transition-all">
+            <Layers className="h-5 w-5 text-white" />
+          </div>
+          <span className="font-bold text-lg tracking-tight text-white">MachinaCheck</span>
+        </Link>
+
+        <nav className="hidden md:flex items-center gap-8 text-sm font-medium">
+          <Link href="#features" className="text-slate-300 hover:text-blue-400 transition-colors">Features</Link>
+          <Link href="#workflow" className="text-slate-300 hover:text-blue-400 transition-colors">Workflow</Link>
+          <Link href="#dashboard" className="text-slate-300 hover:text-blue-400 transition-colors">Docs</Link>
+        </nav>
+
+        <Link 
+          href="/analyze"
+          className="hidden sm:inline-flex px-6 py-2.5 bg-gradient-to-r from-blue-600 to-cyan-500 hover:from-blue-700 hover:to-cyan-600 text-white font-semibold text-sm rounded-lg transition-all shadow-lg hover:shadow-blue-500/50 active:scale-95"
+        >
+          Analyze Now
+        </Link>
+      </div>
+    </header>
+  );
+}

components/landing/workflow.tsx

@@ -0,0 +1,100 @@
+"use client";
+
+import React from "react";
+import { Upload, BrainCircuit, Activity, Wrench, CheckCircle2, FileOutput } from "lucide-react";
+import { motion } from "framer-motion";
+
+const steps = [
+  { name: "Upload 3D model", icon: Upload, gradient: "from-blue-500 to-blue-600" },
+  { name: "AI Parsing", icon: BrainCircuit, gradient: "from-cyan-500 to-blue-500" },
+  { name: "Operations Detection", icon: Activity, gradient: "from-cyan-400 to-cyan-500" },
+  { name: "Tool Matching", icon: Wrench, gradient: "from-blue-400 to-cyan-400" },
+  { name: "Feasibility Decision", icon: CheckCircle2, gradient: "from-cyan-500 to-blue-500" },
+  { name: "Report Generation", icon: FileOutput, gradient: "from-blue-600 to-cyan-500" },
+];
+
+export function Workflow() {
+  return (
+    <section id="workflow" className="py-24 relative bg-gradient-to-b from-slate-950/50 to-slate-900/30">
+      {/* Decorative blurs */}
+      <div className="absolute top-0 left-1/4 w-96 h-96 bg-blue-500/10 rounded-full blur-3xl -z-10"></div>
+      <div className="absolute bottom-0 right-1/4 w-96 h-96 bg-cyan-500/10 rounded-full blur-3xl -z-10"></div>
+      
+      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
+        <div className="text-center max-w-3xl mx-auto mb-20">
+          <motion.div
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5 }}
+          >
+            <h2 className="text-3xl font-bold tracking-tight text-foreground sm:text-4xl mb-4">
+              <span className="bg-gradient-to-r from-blue-300 via-cyan-300 to-blue-300 bg-clip-text text-transparent">
+                Automated Assessment Pipeline
+              </span>
+            </h2>
+          </motion.div>
+          <motion.p
+            className="text-lg text-muted-foreground"
+            initial={{ opacity: 0, y: 20 }}
+            whileInView={{ opacity: 1, y: 0 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.5, delay: 0.1 }}
+          >
+            A continuous, deterministic workflow that transforms raw CAD design into actionable manufacturing intelligence within seconds.
+          </motion.p>
+        </div>
+
+        <div className="relative max-w-5xl mx-auto">
+          {/* Animated connecting line */}
+          <motion.div
+            className="hidden lg:block absolute top-1/2 left-0 right-0 h-0.5 -translate-y-1/2 z-0"
+            initial={{ scaleX: 0, opacity: 0 }}
+            whileInView={{ scaleX: 1, opacity: 1 }}
+            viewport={{ once: true }}
+            transition={{ duration: 0.8, delay: 0.2 }}
+            style={{ transformOrigin: "left" }}
+          >
+            <div className="w-full h-full bg-gradient-to-r from-transparent via-blue-500/50 to-transparent"></div>
+          </motion.div>
+          
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-6 gap-6 relative z-10">
+            {steps.map((step, index) => {
+              const Icon = step.icon;
+              return (
+                <motion.div
+                  key={index}
+                  className="flex flex-col items-center"
+                  initial={{ opacity: 0, y: 20 }}
+                  whileInView={{ opacity: 1, y: 0 }}
+                  viewport={{ once: true }}
+                  transition={{ duration: 0.5, delay: index * 0.1 }}
+                >
+                  {/* Icon container with gradient glow */}
+                  <motion.div
+                    className={`h-16 w-16 rounded-xl bg-gradient-to-br ${step.gradient} flex items-center justify-center shadow-lg mb-4 relative z-10 cursor-pointer group`}
+                    whileHover={{ scale: 1.1, boxShadow: "0 0 30px rgba(34, 211, 238, 0.5)" }}
+                    transition={{ type: "spring", stiffness: 300, damping: 10 }}
+                  >
+                    <div className="absolute inset-0 rounded-xl bg-white/10 opacity-0 group-hover:opacity-20 transition-opacity"></div>
+                    <Icon className="h-6 w-6 text-white relative z-10" />
+                    
+                    {/* Glow effect on hover */}
+                    <div className="absolute inset-0 rounded-xl bg-gradient-to-br opacity-0 group-hover:opacity-30 group-hover:blur-lg -z-10 transition-opacity" style={{ backgroundImage: `linear-gradient(to bottom right, rgba(34, 211, 238, 0.6), rgba(59, 130, 246, 0.6))` }}></div>
+                  </motion.div>
+                  
+                  <h3 className="text-sm font-semibold text-foreground text-center">
+                    {step.name}
+                  </h3>
+                  <div className="text-xs text-muted-foreground mt-1 font-mono">
+                    Step 0{index + 1}
+                  </div>
+                </motion.div>
+              );
+            })}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }

components/ui/button.tsx

@@ -0,0 +1,67 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { Slot } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean
+  }) {
+  const Comp = asChild ? Slot.Root : "button"
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+export { Button, buttonVariants }

components/ui/card.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-xl border bg-card text-card-foreground shadow",
+      className
+    )}
+    {...props}
+  />
+))
+Card.displayName = "Card"
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+))
+CardHeader.displayName = "CardHeader"
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn("font-semibold leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+CardTitle.displayName = "CardTitle"
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+))
+CardDescription.displayName = "CardDescription"
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+))
+CardFooter.displayName = "CardFooter"
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }

components/ui/input.tsx

@@ -0,0 +1,21 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+const Input = React.forwardRef<
+  HTMLInputElement,
+  React.ComponentProps<"input">
+>(({ className, type, ...props }, ref) => (
+  <input
+    type={type}
+    className={cn(
+      "flex h-9 w-full rounded-lg border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm pointer-events-auto cursor-text",
+      className
+    )}
+    ref={ref}
+    {...props}
+  />
+))
+Input.displayName = "Input"
+
+export { Input }

components/ui/label.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

dockerfile

@@ -0,0 +1,10 @@
+FROM node:18-alpine
+WORKDIR /app
+COPY package*.json ./
+RUN npm install
+COPY . .
+ENV NEXT_PUBLIC_API_URL=https://your-ngrok-url.ngrok-free.app
+RUN npm run build
+EXPOSE 3000
+ENV PORT 3000
+CMD ["npm", "start"]

eslint.config.mjs

@@ -0,0 +1,18 @@
+import { defineConfig, globalIgnores } from "eslint/config";
+import nextVitals from "eslint-config-next/core-web-vitals";
+import nextTs from "eslint-config-next/typescript";
+
+const eslintConfig = defineConfig([
+  ...nextVitals,
+  ...nextTs,
+  // Override default ignores of eslint-config-next.
+  globalIgnores([
+    // Default ignores of eslint-config-next:
+    ".next/**",
+    "out/**",
+    "build/**",
+    "next-env.d.ts",
+  ]),
+]);
+
+export default eslintConfig;

hooks/use-analyze.ts

@@ -0,0 +1,103 @@
+"use client";
+
+import { useState, useCallback } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { z } from "zod";
+import { analyzeStep } from "@/lib/api";
+import { AnalysisResponse, AnalyzeFormInputs } from "@/lib/types";
+
+const AnalyzeFormSchema = z.object({
+  material: z.string().min(1, "Material is required"),
+  tolerance: z.string().min(1, "Tolerance is required"),
+  threads: z.string(),
+});
+
+type FormSchemaType = z.infer<typeof AnalyzeFormSchema>;
+
+export function useAnalyze() {
+  const [selectedFile, setSelectedFile] = useState<File | null>(null);
+  const [result, setResult] = useState<AnalysisResponse | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  const form = useForm<FormSchemaType>({
+    resolver: zodResolver(AnalyzeFormSchema),
+    defaultValues: {
+      material: "",
+      tolerance: "",
+      threads: "",
+    },
+  });
+
+  const handleFileSelect = useCallback((file: File) => {
+    const validExtensions = [".step", ".stp"];
+    const hasValidExtension = validExtensions.some((ext) =>
+      file.name.toLowerCase().endsWith(ext)
+    );
+
+    if (!hasValidExtension) {
+      setError("Invalid file type. Please upload a .step or .stp file.");
+      setSelectedFile(null);
+      return;
+    }
+
+    setSelectedFile(file);
+    setError(null);
+  }, []);
+
+  const handleFileRemove = useCallback(() => {
+    setSelectedFile(null);
+    setError(null);
+  }, []);
+
+  const onSubmit = async (data: FormSchemaType) => {
+    if (!selectedFile) {
+      setError("Please select a STEP file to analyze.");
+      return;
+    }
+
+    setIsLoading(true);
+    setError(null);
+    setResult(null);
+
+    try {
+      const formData = new FormData();
+      formData.append("file", selectedFile);
+      formData.append("material", data.material);
+      formData.append("tolerance", data.tolerance);
+      if (data.threads) {
+        formData.append("threads", data.threads);
+      }
+
+      const response = await analyzeStep(formData);
+      setResult(response);
+    } catch (err) {
+      const message =
+        err instanceof Error ? err.message : "Failed to analyze file";
+      setError(message);
+      setResult(null);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  const resetAnalysis = useCallback(() => {
+    setSelectedFile(null);
+    setResult(null);
+    setError(null);
+    form.reset();
+  }, [form]);
+
+  return {
+    form,
+    selectedFile,
+    handleFileSelect,
+    handleFileRemove,
+    onSubmit: form.handleSubmit(onSubmit),
+    result,
+    error,
+    isLoading,
+    resetAnalysis,
+  };
+}

lib/api.ts

@@ -0,0 +1,53 @@
+import axios, { AxiosInstance } from "axios";
+import { AnalysisResponse, DecisionType } from "./types";
+
+const API_URL = process.env.NEXT_PUBLIC_API_URL || "http://localhost:8080";
+
+const client: AxiosInstance = axios.create({
+  baseURL: API_URL,
+  timeout: 120000,
+  headers: {
+    "Content-Type": "multipart/form-data",
+  },
+});
+
+function formatTool(t: { type: string; diameter_mm?: number; min_diameter_mm?: number; material?: string }): string {
+  const size = t.diameter_mm ? `${t.diameter_mm}mm` : t.min_diameter_mm ? `min ${t.min_diameter_mm}mm` : "";
+  return [t.type, size, t.material].filter(Boolean).join(" ");
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+function transformResponse(raw: any): AnalysisResponse {
+  const decisionStr: DecisionType =
+    typeof raw.decision === "object" ? raw.decision?.decision : raw.decision;
+
+  return {
+    decision: decisionStr,
+    summary: raw.report?.summary ?? raw.summary ?? "",
+    operations: raw.classification?.required_operations ?? raw.operations ?? [],
+    required_tools: (raw.match_result?.tools_available ?? raw.classification?.required_tools ?? []).map(formatTool),
+    missing_tools: (raw.match_result?.tools_missing ?? raw.missing_tools ?? []).map(formatTool),
+    recommendations: raw.report?.action_required ?? raw.recommendations ?? [],
+    status: raw.status,
+    features: raw.features,
+    classification: raw.classification,
+    match_result: raw.match_result,
+  };
+}
+
+export async function analyzeStep(formData: FormData): Promise<AnalysisResponse> {
+  try {
+    const response = await client.post("/analyze", formData);
+    return transformResponse(response.data);
+  } catch (error) {
+    if (axios.isAxiosError(error)) {
+      const message =
+        error.response?.data?.detail ||
+        error.response?.data?.message ||
+        error.message ||
+        "Failed to analyze file. Please try again.";
+      throw new Error(message);
+    }
+    throw error;
+  }
+}

lib/types.ts

@@ -0,0 +1,20 @@
+export type DecisionType = "YES" | "NO" | "CONDITIONAL";
+
+export interface AnalysisResponse {
+  decision: DecisionType;
+  summary: string;
+  operations: string[];
+  required_tools: string[];
+  missing_tools?: string[];
+  recommendations?: string[];
+  status: string;
+  features?: Record<string, unknown>;
+  classification?: Record<string, unknown>;
+  match_result?: Record<string, unknown>;
+}
+
+export interface AnalyzeFormInputs {
+  material: string;
+  tolerance: string;
+  threads?: string;
+}

lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

next.config.js

@@ -0,0 +1,5 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  output: 'standalone',
+}
+module.exports = nextConfig

next.config.ts

@@ -0,0 +1,7 @@
+import type { NextConfig } from "next";
+
+const nextConfig: NextConfig = {
+  output: 'standalone',
+};
+
+export default nextConfig;

package.json

@@ -0,0 +1,40 @@
+{
+  "name": "frontend",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^5.2.2",
+    "@tanstack/react-query": "^5.100.9",
+    "axios": "^1.16.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "framer-motion": "^12.38.0",
+    "lucide-react": "^1.14.0",
+    "next": "16.2.6",
+    "radix-ui": "^1.4.3",
+    "react": "19.2.4",
+    "react-dom": "19.2.4",
+    "react-hook-form": "^7.75.0",
+    "shadcn": "^4.7.0",
+    "tailwind-merge": "^3.5.0",
+    "tw-animate-css": "^1.4.0",
+    "zod": "^4.4.3",
+    "zustand": "^5.0.13"
+  },
+  "devDependencies": {
+    "@tailwindcss/postcss": "^4",
+    "@types/node": "^20",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "eslint": "^9",
+    "eslint-config-next": "16.2.6",
+    "tailwindcss": "^4",
+    "typescript": "^5"
+  }
+}

postcss.config.mjs

@@ -0,0 +1,7 @@
+const config = {
+  plugins: {
+    "@tailwindcss/postcss": {},
+  },
+};
+
+export default config;

tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./*"]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts",
+    "**/*.mts"
+  ],
+  "exclude": ["node_modules"]
+}