Enhaced UI updated

app/devices/page.tsx

@@ -0,0 +1,108 @@
+"use client";
+
+import Navbar from "../components/layout/Navbar";
+import DNAHeroBackground from "../components/canvas/DNAHeroBackground";
+import { motion } from "framer-motion";
+import { Activity, Bluetooth, ShieldCheck, Zap } from "lucide-react";
+import Footer from "../components/layout/Footer";
+
+export default function DevicesPage() {
+    return (
+        <div className="relative min-h-screen">
+            <DNAHeroBackground />
+            <Navbar />
+
+            <main className="relative z-10 pt-40 pb-24">
+                <div className="container mx-auto px-6">
+                    <motion.div
+                        initial={{ opacity: 0, y: 20 }}
+                        animate={{ opacity: 1, y: 0 }}
+                        className="max-w-4xl"
+                    >
+                        <h1 className="text-5xl md:text-8xl font-black tracking-tighter mb-8">
+                            Medical <span className="text-gradient">Hardware</span>
+                        </h1>
+                        <p className="text-xl text-foreground/60 leading-relaxed mb-12 max-w-2xl">
+                            Precision-engineered Bluetooth vitals monitors and maternity care tools. Designed for reliability, accuracy, and absolute security.
+                        </p>
+                    </motion.div>
+
+                    {/* Device Detailed Grid */}
+                    <div className="grid grid-cols-1 lg:grid-cols-2 gap-12 mt-20">
+                        {[
+                            {
+                                title: "Vitals Hub X1",
+                                feature: "Multi-Parameter Monitoring",
+                                desc: "Measures Blood Pressure, Heart Rate, SpO2, and Body Temperature in one sleek device.",
+                                specs: ["Bluetooth 5.2", "48h Battery", "Cloud Sync"]
+                            },
+                            {
+                                title: "Fetal Doppler Pro",
+                                feature: "Maternity Care",
+                                desc: "High-sensitivity fetal heart rate detection with ultra-sound noise reduction technology.",
+                                specs: ["OLED Display", "Built-in Speaker", "App Integration"]
+                            }
+                        ].map((item, i) => (
+                            <motion.div
+                                key={i}
+                                initial={{ opacity: 0, scale: 0.95 }}
+                                whileInView={{ opacity: 1, scale: 1 }}
+                                className="glass p-12 rounded-[3rem] border-white/5 space-y-8"
+                            >
+                                <div className="flex justify-between items-start">
+                                    <div className="space-y-2">
+                                        <span className="text-primary font-bold tracking-widest uppercase text-xs">{item.feature}</span>
+                                        <h2 className="text-4xl font-bold">{item.title}</h2>
+                                    </div>
+                                    <div className="w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center">
+                                        <Activity className="w-8 h-8 text-primary" />
+                                    </div>
+                                </div>
+                                <p className="text-lg text-foreground/60">{item.desc}</p>
+
+                                <div className="flex flex-wrap gap-4">
+                                    {item.specs.map((spec, j) => (
+                                        <span key={j} className="px-4 py-2 rounded-full bg-white/5 border border-white/5 text-sm">
+                                            {spec}
+                                        </span>
+                                    ))}
+                                </div>
+
+                                <button className="w-full bg-white text-black py-4 rounded-2xl font-bold hover:bg-zinc-200 transition-colors">
+                                    View Specifications
+                                </button>
+                            </motion.div>
+                        ))}
+                    </div>
+
+                    {/* Compliance Banner */}
+                    <motion.div
+                        initial={{ opacity: 0 }}
+                        whileInView={{ opacity: 1 }}
+                        className="mt-32 p-12 glass rounded-[3rem] border-accent/20 flex flex-col md:flex-row items-center justify-between gap-12"
+                    >
+                        <div className="space-y-4">
+                            <div className="flex items-center gap-3">
+                                <ShieldCheck className="w-8 h-8 text-accent" />
+                                <h3 className="text-3xl font-bold italic">HIPAA Verified Hardware</h3>
+                            </div>
+                            <p className="text-foreground/60 max-w-xl">
+                                Every device in our ecosystem undergoes rigorous security audits. Data transmission is encrypted from the sensor to the cloud.
+                            </p>
+                        </div>
+                        <div className="flex gap-4">
+                            <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
+                                <Bluetooth className="w-8 h-8 text-primary" />
+                            </div>
+                            <div className="w-16 h-16 rounded-2xl bg-white/5 flex items-center justify-center">
+                                <Zap className="w-8 h-8 text-yellow-500" />
+                            </div>
+                        </div>
+                    </motion.div>
+                </div>
+            </main>
+
+            <Footer />
+        </div>
+    );
+}