File size: 12,439 Bytes
3318ac7 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 | "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>
);
}
|