Merge pull request #14 from thirdbase1/k/58faf7ae

feat: UI overhaul with enhanced header and design improvements

Author: thirdbase1

client/src/components/Layout.tsx

@@ -1,6 +1,6 @@
 import { Link, useLocation } from "wouter";
 import { HardHat, Menu, X, Download, BookOpen, Home, Printer } from "lucide-react";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { Button } from "@/components/ui/button";
 import { Sheet, SheetContent, SheetTrigger } from "@/components/ui/sheet";
 // @ts-ignore
@@ -9,6 +9,15 @@ import html2pdf from "html2pdf.js";
 export function Layout({ children }: { children: React.ReactNode }) {
   const [location] = useLocation();
   const [isMobileOpen, setIsMobileOpen] = useState(false);
+  const [scrolled, setScrolled] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = () => {
+      setScrolled(window.scrollY > 20);
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, []);
 
   const navItems = [
     { label: "Home", href: "/", icon: Home },
@@ -19,34 +28,54 @@ export function Layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="min-h-screen flex flex-col bg-background font-roboto">
       {/* Header */}
-      <header className="sticky top-0 z-50 w-full border-b bg-card/95 backdrop-blur supports-[backdrop-filter]:bg-card/60 print:hidden">
+      <header className={`sticky top-0 z-50 w-full transition-all duration-300 print:hidden ${
+        scrolled 
+          ? "border-b bg-card/95 backdrop-blur-lg shadow-lg" 
+          : "border-b border-white/10 bg-slate-900/95 backdrop-blur-md"
+      }`}>
         <div className="container flex h-16 items-center justify-between px-4 md:px-6">
-          <Link href="/" className="flex items-center gap-2">
-            <div className="bg-primary p-1.5 rounded-md">
+          <Link href="/" className="flex items-center gap-3 group">
+            <div className="bg-gradient-to-br from-primary to-secondary p-2 rounded-lg shadow-lg shadow-primary/20 group-hover:shadow-primary/40 transition-shadow duration-300">
               <HardHat className="h-6 w-6 text-primary-foreground" />
             </div>
-            <span className="text-xl font-bold font-oswald tracking-tight text-foreground">
-              CRANESIGNAL<span className="text-primary">PRO</span>
-            </span>
+            <div className="flex flex-col">
+              <span className={`text-xl font-bold font-oswald tracking-tight transition-colors duration-300 ${
+                scrolled ? "text-foreground" : "text-white"
+              }`}>
+                CRANESIGNAL<span className="text-primary">PRO</span>
+              </span>
+              <span className={`text-xs font-medium transition-colors duration-300 ${
+                scrolled ? "text-muted-foreground" : "text-white/60"
+              }`}>
+                Certified Safety Training
+              </span>
+            </div>
           </Link>
 
           {/* Desktop Nav */}
           <nav className="hidden md:flex items-center gap-6">
             {navItems.map((item) => (
               <Link key={item.href} href={item.href}>
                 <span
-                  className={`text-sm font-medium transition-colors hover:text-primary ${
+                  className={`text-sm font-medium transition-all duration-200 hover:text-primary relative ${
                     location === item.href
-                      ? "text-primary border-b-2 border-primary"
-                      : "text-muted-foreground"
+                      ? scrolled
+                        ? "text-foreground"
+                        : "text-white"
+                      : scrolled
+                        ? "text-muted-foreground"
+                        : "text-white/70"
                   }`}
                 >
                   {item.label}
+                  {location === item.href && (
+                    <span className="absolute -bottom-1 left-0 right-0 h-0.5 bg-primary rounded-full" />
+                  )}
                 </span>
               </Link>
             ))}
             <Link href="/curriculum">
-              <Button size="sm" className="font-oswald uppercase tracking-wide">
+              <Button size="sm" className="font-oswald uppercase tracking-wide bg-gradient-to-r from-primary to-secondary hover:opacity-90 transition-all duration-200 shadow-md hover:shadow-lg">
                 Start Course
               </Button>
             </Link>
@@ -55,7 +84,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
           {/* Mobile Nav */}
           <Sheet open={isMobileOpen} onOpenChange={setIsMobileOpen}>
             <SheetTrigger asChild className="md:hidden">
-              <Button variant="ghost" size="icon">
+              <Button variant="ghost" size="icon" className={scrolled ? "" : "text-white"}>
                 <Menu className="h-6 w-6" />
                 <span className="sr-only">Toggle menu</span>
               </Button>
@@ -65,9 +94,9 @@ export function Layout({ children }: { children: React.ReactNode }) {
                 {navItems.map((item) => (
                   <Link key={item.href} href={item.href} onClick={() => setIsMobileOpen(false)}>
                     <span
-                      className={`flex items-center gap-2 text-lg font-medium p-2 rounded-md transition-colors ${
+                      className={`flex items-center gap-3 text-lg font-medium p-3 rounded-lg transition-all duration-200 ${
                         location === item.href
-                          ? "bg-primary/10 text-primary"
+                          ? "bg-primary/10 text-primary border-l-4 border-primary"
                           : "hover:bg-muted"
                       }`}
                     >
@@ -77,7 +106,7 @@ export function Layout({ children }: { children: React.ReactNode }) {
                   </Link>
                 ))}
                 <Link href="/curriculum" onClick={() => setIsMobileOpen(false)}>
-                  <Button className="w-full mt-4 font-oswald uppercase">Start Learning</Button>
+                  <Button className="w-full mt-4 font-oswald uppercase bg-gradient-to-r from-primary to-secondary">Start Learning</Button>
                 </Link>
               </nav>
             </SheetContent>
@@ -91,16 +120,35 @@ export function Layout({ children }: { children: React.ReactNode }) {
       </main>
 
       {/* Footer */}
-      <footer className="border-t bg-muted/40 py-6 md:py-10 print:hidden">
-        <div className="container px-4 md:px-6 flex flex-col md:flex-row items-center justify-between gap-4">
-          <div className="flex items-center gap-2">
-            <HardHat className="h-5 w-5 text-muted-foreground" />
-            <span className="text-sm font-semibold text-muted-foreground">
-              CraneSignal Pro &copy; 2025
-            </span>
+      <footer className="border-t bg-gradient-to-b from-slate-900 to-slate-950 py-8 md:py-12 print:hidden">
+        <div className="container px-4 md:px-6">
+          <div className="grid md:grid-cols-3 gap-8 items-center">
+            <div className="flex items-center gap-3">
+              <div className="bg-primary/20 p-2 rounded-lg">
+                <HardHat className="h-5 w-5 text-primary" />
+              </div>
+              <div>
+                <span className="text-sm font-bold text-white font-oswald tracking-tight">
+                  CRANESIGNAL<span className="text-primary">PRO</span>
+                </span>
+                <p className="text-xs text-white/60">Certified Safety Training &copy; 2025</p>
+              </div>
+            </div>
+            <div className="text-center">
+              <p className="text-sm text-white/60">Official ANSI standard hand signals for mobile cranes.</p>
+              <p className="text-xs text-white/40 mt-1">Ensuring jobsite safety through standardized communication.</p>
+            </div>
+            <div className="flex md:justify-end gap-4">
+              <Link href="/curriculum">
+                <span className="text-sm text-white/60 hover:text-primary transition-colors">Curriculum</span>
+              </Link>
+              <Link href="/downloads">
+                <span className="text-sm text-white/60 hover:text-primary transition-colors">Downloads</span>
+              </Link>
+            </div>
           </div>
-          <div className="text-sm text-muted-foreground text-center md:text-right">
-            <p>Official ANSI standard hand signals for mobile cranes.</p>
+          <div className="mt-6 pt-6 border-t border-white/10 text-center">
+            <p className="text-xs text-white/40">Always verify signals with official site safety regulations. This training is for educational purposes.</p>
           </div>
         </div>
       </footer>

client/src/components/LessonComponents.tsx

@@ -1,40 +1,59 @@
 import { useState, useEffect } from "react";
 import { Link } from "wouter";
-import { CheckCircle, XCircle, ArrowRight, ShieldCheck, Loader2 } from "lucide-react";
+import { CheckCircle, XCircle, ArrowRight, ShieldCheck, Loader2, Play } from "lucide-react";
 import { Signal } from "@/lib/course-data";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent } from "@/components/ui/card";
 import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Label } from "@/components/ui/label";
 import { useAleoWallet } from "@/hooks/use-aleo-wallet";
 import { useToast } from "@/hooks/use-toast";
+import { motion } from "framer-motion";
 
 export function SignalCard({ signal }: { signal: Signal }) {
   return (
     <Link href={`/lesson/${signal.id}`}>
-      <div className="group cursor-pointer h-full">
-        <Card className="h-full overflow-hidden border-2 border-transparent transition-all hover:border-primary hover:shadow-md">
-          <div className="aspect-square bg-muted p-6 flex items-center justify-center relative overflow-hidden">
+      <motion.div 
+        className="group cursor-pointer h-full"
+        whileHover={{ y: -5 }}
+        transition={{ duration: 0.2 }}
+      >
+        <div className="h-full rounded-2xl bg-card border-2 border-transparent hover:border-primary/30 overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300">
+          <div className="aspect-square bg-gradient-to-br from-muted/50 to-muted p-6 flex items-center justify-center relative overflow-hidden">
             <img 
               src={signal.image} 
               alt={signal.name} 
-              className="w-full h-full object-contain transition-transform group-hover:scale-105"
+              className="w-full h-full object-contain transition-transform duration-500 group-hover:scale-110"
             />
-            <div className="absolute inset-0 bg-primary/10 opacity-0 group-hover:opacity-100 transition-opacity" />
+            <div className="absolute inset-0 bg-gradient-to-t from-primary/10 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-300" />
+            <div className="absolute top-3 right-3">
+              <span className="px-2 py-1 bg-white/90 dark:bg-slate-800/90 rounded-md text-xs font-bold uppercase tracking-wider shadow-sm backdrop-blur-sm">
+                {signal.category}
+              </span>
+            </div>
+            <div className="absolute bottom-3 left-3 right-3 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+              <div className="flex items-center gap-2 text-primary font-medium text-sm bg-white/90 dark:bg-slate-800/90 rounded-lg px-3 py-2 backdrop-blur-sm shadow-sm">
+                <Play className="h-4 w-4" />
+                <span>Start Lesson</span>
+                <ArrowRight className="h-4 w-4 ml-auto group-hover:translate-x-1 transition-transform" />
+              </div>
+            </div>
           </div>
-          <CardContent className="p-4">
-            <div className="flex items-center justify-between mb-2">
-              <span className="text-xs font-bold uppercase tracking-wider text-primary">{signal.category}</span>
+          <div className="p-5">
+            <div className="flex items-center gap-2 mb-2">
+              <span className="text-xs font-bold uppercase tracking-wider text-primary bg-primary/10 px-2 py-0.5 rounded-full">
+                {signal.category}
+              </span>
             </div>
-            <h3 className="text-xl font-bold font-oswald text-foreground mb-2 group-hover:text-primary transition-colors">
+            <h3 className="text-lg font-bold font-oswald uppercase text-foreground mb-2 group-hover:text-primary transition-colors line-clamp-1">
               {signal.name}
             </h3>
             <p className="text-sm text-muted-foreground line-clamp-2">
               {signal.description}
             </p>
-          </CardContent>
-        </Card>
-      </div>
+          </div>
+        </div>
+      </motion.div>
     </Link>
   );
 }
@@ -51,7 +70,6 @@ export function QuizComponent({ signal }: { signal: Signal }) {
 
   const isCorrect = selected === signal.quiz.correctAnswer;
 
-  // Poll for transaction status if we have a txId
   useEffect(() => {
     let interval: NodeJS.Timeout;
     if (txId && (txStatus === "Pending" || !txStatus)) {
@@ -80,7 +98,6 @@ export function QuizComponent({ signal }: { signal: Signal }) {
     try {
       const programId = "crane_signals_cert.aleo";
       const functionName = "issue_certification";
-      // Inputs: recipient address, signal_id (u8)
       const inputs = [address, `${signal.id}u8`];
 
       const id = await requestTransaction(programId, functionName, inputs, 0.1);
@@ -98,73 +115,100 @@ export function QuizComponent({ signal }: { signal: Signal }) {
   };
 
   return (
-    <Card className="bg-muted/30 border-none">
+    <Card className="bg-gradient-to-br from-primary/5 to-secondary/5 border-primary/20">
       <CardContent className="p-6">
-        <h3 className="text-lg font-bold font-oswald mb-4 flex items-center gap-2">
-          <span className="bg-primary text-primary-foreground px-2 py-0.5 rounded text-sm">QUIZ</span>
-          Test Your Knowledge
-        </h3>
+        <div className="flex items-center gap-3 mb-6">
+          <div className="bg-gradient-to-br from-primary to-secondary p-2 rounded-lg">
+            <span className="text-xs font-bold text-primary-foreground">Q</span>
+          </div>
+          <h3 className="text-lg font-bold font-oswald">Test Your Knowledge</h3>
+        </div>
 
         {!submitted ? (
-          <div className="space-y-4">
+          <motion.div 
+            className="space-y-5"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: 1 }}
+          >
             <p className="font-medium text-lg">{signal.quiz.question}</p>
-            <RadioGroup onValueChange={(v) => setSelected(parseInt(v))}>
+            <RadioGroup 
+              onValueChange={(v) => setSelected(parseInt(v))}
+              className="space-y-3"
+            >
               {signal.quiz.options.map((option, idx) => (
-                <div key={idx} className="flex items-center space-x-2">
+                <motion.div 
+                  key={idx} 
+                  className={`flex items-center space-x-3 p-3 rounded-lg border-2 transition-all cursor-pointer ${
+                    selected === idx 
+                      ? "border-primary bg-primary/5" 
+                      : "border-transparent hover:border-muted"
+                  }`}
+                  whileHover={{ scale: 1.01 }}
+                  whileTap={{ scale: 0.99 }}
+                >
                   <RadioGroupItem value={idx.toString()} id={`option-${idx}`} />
-                  <Label htmlFor={`option-${idx}`} className="cursor-pointer">{option}</Label>
-                </div>
+                  <Label htmlFor={`option-${idx}`} className="cursor-pointer flex-1">
+                    {option}
+                  </Label>
+                </motion.div>
               ))}
             </RadioGroup>
             <Button 
               onClick={() => setSubmitted(true)} 
               disabled={selected === null}
-              className="w-full sm:w-auto font-oswald uppercase"
+              className="w-full sm:w-auto font-oswald uppercase bg-gradient-to-r from-primary to-secondary hover:opacity-90 transition-all duration-200 shadow-sm"
             >
-              Check Answer
+              Check Answer <ArrowRight className="ml-2 h-4 w-4" />
             </Button>
-          </div>
+          </motion.div>
         ) : (
-          <div className="space-y-4 animate-in fade-in slide-in-from-bottom-2">
-            <div className={`flex items-center gap-3 text-lg font-bold ${isCorrect ? 'text-green-600' : 'text-red-600'}`}>
+          <motion.div 
+            className="space-y-5 animate-in fade-in slide-in-from-bottom-2"
+            initial={{ opacity: 0, y: 10 }}
+            animate={{ opacity: 1, y: 0 }}
+          >
+            <div className={`flex items-center gap-3 text-lg font-bold p-4 rounded-xl ${
+              isCorrect 
+                ? "bg-green-50 text-green-700 border-2 border-green-200" 
+                : "bg-red-50 text-red-700 border-2 border-red-200"
+            }`}>
               {isCorrect ? <CheckCircle className="h-6 w-6" /> : <XCircle className="h-6 w-6" />}
-              {isCorrect ? "Correct!" : "Incorrect"}
+              {isCorrect ? "Excellent! You've mastered this signal." : `The correct answer is: ${signal.quiz.options[signal.quiz.correctAnswer]}`}
             </div>
-            <p className="text-muted-foreground">
-              {isCorrect 
-                ? "Great job! You've mastered this signal." 
-                : `The correct answer is: ${signal.quiz.options[signal.quiz.correctAnswer]}`
-              }
-            </p>
+            
             <div className="flex flex-col sm:flex-row gap-3">
-              <Button variant="outline" onClick={() => {
-                setSubmitted(false);
-                setSelected(null);
-                setTxId(null);
-                setTxStatus(null);
-              }}>
+              <Button 
+                variant="outline" 
+                onClick={() => {
+                  setSubmitted(false);
+                  setSelected(null);
+                  setTxId(null);
+                  setTxStatus(null);
+                }}
+                className="font-oswald uppercase"
+              >
                 Try Again
               </Button>
 
               {isCorrect && !txId && (
                 <Button
                   onClick={handleMintCertificate}
                   disabled={minting}
-                  className="bg-green-600 hover:bg-green-700 text-white gap-2"
+                  className="bg-gradient-to-r from-green-600 to-emerald-600 hover:opacity-90 text-white gap-2 shadow-sm"
                 >
                   {minting ? <Loader2 className="h-4 w-4 animate-spin" /> : <ShieldCheck className="h-4 w-4" />}
                   {address ? "Mint ZK-Certificate" : "Connect Wallet to Mint"}
                 </Button>
               )}
 
               {txId && (
-                <div className="flex items-center gap-2 px-4 py-2 bg-background border rounded-md text-sm font-medium">
+                <div className="flex items-center gap-2 px-4 py-2 bg-background border rounded-xl text-sm font-medium shadow-sm">
                   <div className={`h-2 w-2 rounded-full ${txStatus === "Completed" ? "bg-green-500" : "bg-amber-500 animate-pulse"}`} />
                   Status: {txStatus || "Processing..."}
                 </div>
               )}
             </div>
-          </div>
+          </motion.div>
         )}
       </CardContent>
     </Card>