Refactor Circuit Project: Modularization, Dark Mode Support, and Enhanced Circuit Functionality

app/globals.css

@@ -3,27 +3,152 @@
 @tailwind utilities;
 
 :root {
-  --foreground-rgb: 0, 0, 0;
-  --background-start-rgb: 214, 219, 220;
-  --background-end-rgb: 255, 255, 255;
+  --background: #101112;
+  --foreground: #d9d9d9;
+  --card: #272829;
+  --card-foreground: #ffffff;
+  --card-border: #1a1a1a;
+  --primary: #7a7fee;
+  --primary-foreground: #ffffff;
+  --secondary: #272829;
+  --secondary-foreground: #ffffff;
+  --muted: #a1a1aa;
+  --muted-foreground: #d4d4d8;
+  --accent: #2a2a2a;
+  --accent-foreground: #ffffff;
+  --border: #2a2a2a;
+  --input: #2a2a2a;
+  --ring: #7a7fee;
+  --radius: 0.75rem;
+  --font-outfit: "Outfit", sans-serif;
 }
 
-@media (prefers-color-scheme: dark) {
-  :root {
-    --foreground-rgb: 255, 255, 255;
-    --background-start-rgb: 0, 0, 0;
-    --background-end-rgb: 0, 0, 0;
+@layer base {
+  body {
+    background-color: var(--background);
+    color: var(--foreground);
+    font-family: var(--font-outfit);
+  }
+
+  html {
+    scroll-behavior: smooth;
+  }
+
+  h1 {
+    font-weight: 500;
+    font-size: 60px;
+    line-height: 1.2em;
+    letter-spacing: 0;
+  }
+
+  h2 {
+    font-weight: 400;
+    font-size: 48px;
+    line-height: 1.2em;
+    letter-spacing: 0;
+  }
+
+  @media (max-width: 1440px) {
+    h1 {
+      font-size: calc(40px + (60 - 40) * ((100vw - 768px) / (1440 - 768)));
+    }
+    h2 {
+      font-size: calc(36px + (48 - 36) * ((100vw - 768px) / (1440 - 768)));
+    }
+  }
+
+  @media (max-width: 768px) {
+    h1 {
+      font-size: 40px;
+    }
+    h2 {
+      font-size: 36px;
+    }
   }
 }
 
-body {
-  color: rgb(var(--foreground-rgb));
-  background: linear-gradient(
-      to bottom,
-      transparent,
-      rgb(var(--background-end-rgb))
-    )
-    rgb(var(--background-start-rgb));
+@layer components {
+  .container {
+    @apply mx-auto px-4 sm:px-6 lg:px-8;
+    max-width: 1200px;
+  }
+
+  .card {
+    background-color: var(--card);
+    color: var(--card-foreground);
+    border: 1px solid var(--card-border);
+    @apply rounded-3xl overflow-hidden shadow-md;
+  }
+
+  .dark .card {
+    background-color: var(--card);
+    background-image: linear-gradient(to bottom, #2d2e2f, #272829);
+    position: relative;
+  }
+
+  .dark .card::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-image: url("/noise-texture.png");
+    background-size: 200px;
+    opacity: 0.4;
+    mix-blend-mode: overlay;
+    pointer-events: none;
+    border-radius: inherit;
+  }
+
+  .btn-primary {
+    background-color: #7a7fee;
+    color: #ffffff;
+    @apply px-6 py-2.5 rounded-md hover:bg-opacity-90 transition-all text-sm font-medium shadow-sm;
+  }
+
+  .btn-secondary {
+    color: var(--foreground);
+    @apply hover:underline transition-all text-sm font-medium py-2.5;
+  }
+
+  .section-title {
+    @apply font-medium mb-2;
+    color: var(--foreground);
+  }
+
+  .section-subtitle {
+    color: #7a7fee;
+    @apply font-medium mb-6;
+  }
+
+  .accent-text {
+    color: #7a7fee;
+  }
+
+  /* Mobile menu styles */
+  .mobile-menu-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    z-index: 100;
+  }
+
+  .mobile-menu {
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    width: 85%;
+    max-width: 320px;
+    background-color: var(--background);
+    z-index: 101;
+    overflow-y: auto;
+    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
+  }
 }
 
 @layer utilities {

app/layout.tsx

@@ -1,9 +1,11 @@
 import type { Metadata } from "next";
 import "./globals.css";
-import { Orbitron } from "next/font/google";
+import { Outfit } from "next/font/google";
+import { ThemeProvider } from "@/components/theme-provider";
 
-const orbitron = Orbitron({
+const outfit = Outfit({
   subsets: ["latin"],
+  variable: "--font-outfit",
 });
 
 export const metadata: Metadata = {
@@ -74,8 +76,12 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
-      <body className={orbitron.className}>{children}</body>
+    <html lang="en" suppressHydrationWarning>
+      <body className={outfit.className}>
+               <ThemeProvider>
+          {children}
+        </ThemeProvider>
+      </body>
     </html>
   );
 }

app/page.tsx

@@ -1,118 +1,5 @@
-import React from "react";
-import Image from "next/image";
-import D from "@/public/logic-gate-or-svgrepo-com.svg";
-import cir from "@/public/8bvaKz01 (1).svg";
-import Link from "next/link";
-import { LoaderButton } from "@/components/LoaderButton";
+import LandingPage from "@/components/landing-page"
 
 export default function Home() {
-  return (
-    <div className="min-h-screen bg-[#1b1c1d] flex flex-col relative overflow-hidden">
-      <div className="flex flex-col justify-center items-center h-[92vh]">
-        {/* Header */}
-        <div className="flex flex-col sm:flex-row items-center justify-center text-center mb-6 z-10 gap-2 sm:gap-3">
-          <div className="flex flex-row items-center gap-0">
-            <Image
-              src={D}
-              alt="Logic Gate"
-              className="h-20 sm:h-32 lg:h-36 w-auto animate-pulse flex-shrink-0 object-contain"
-            />
-            <h1 className="text-emerald-600 text-5xl sm:text-6xl lg:text-7xl font-extrabold drop-shadow-[0_0_10px_rgba(0,255,157,0.3)]">
-              igital{" "}
-            </h1>
-          </div>
-
-          <h1 className="text-emerald-600 text-5xl sm:text-6xl lg:text-7xl font-extrabold drop-shadow-[0_0_10px_rgba(0,255,157,0.3)]">
-            Circuit Simulator
-          </h1>
-        </div>
-
-        <p className="text-gray-300 text-center text-lg sm:text-xl lg:text-2xl max-w-2xl mb-8 leading-relaxed z-10">
-          Build, test, and analyze your digital circuits virtually — no
-          breadboard required.
-        </p>
-
-        <div className="relative z-10">
-          <Image
-            src={cir}
-            alt="Circuit illustration"
-            className="h-[30vh] drop-shadow-[0_0_25px_rgba(0,255,157,0.4)] hover:scale-105 transition-transform duration-500 ease-out"
-          />
-        </div>
-
-        <Link href="/circuit" className="z-10">
-          <LoaderButton label="Try it Out!" />
-        </Link>
-      </div>
-
-      {/* About Section */}
-      <section className="bg-[#141515] py-20 px-8 text-center">
-        <h2 className="text-4xl sm:text-5xl font-extrabold text-emerald-500 mb-6 drop-shadow-[0_0_8px_rgba(0,255,157,0.3)]">
-          About the Project
-        </h2>
-        <p className="max-w-3xl mx-auto text-gray-300 text-lg sm:text-xl leading-relaxed">
-          The{" "}
-          <span className="text-emerald-400 font-semibold">
-            Digital Circuit Simulator{" "}
-          </span>
-          is an interactive learning platform designed to make digital
-          electronics accessible and engaging. Built with modern web
-          technologies, it offers a seamless drag-and-drop interface that lets
-          you visualize, connect, and test digital logic components — all within
-          your browser.
-        </p>
-      </section>
-
-      {/* Core Features Section */}
-      <section className="bg-black py-20 px-8">
-        <h2 className="text-4xl sm:text-5xl font-extrabold text-center text-emerald-500 mb-12 drop-shadow-[0_0_8px_rgba(0,255,157,0.3)]">
-          Core Features
-        </h2>
-
-        <div className="max-w-5xl mx-auto grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-2 gap-10 text-center">
-          <div className="p-6 rounded-xl bg-[#1f1f1f] hover:bg-[#242424] transition-all duration-300 shadow-[0_0_15px_rgba(0,255,157,0.1)] flex flex-col justify-center items-center min-h-[220px]">
-            <h3 className="text-emerald-400 text-2xl font-semibold mb-2">
-              Logic Gate Design
-            </h3>
-            <p className="text-gray-300 text-base">
-              Build circuits visually using AND, OR, NOT, NAND, NOR, XOR, and
-              XNOR gates.
-            </p>
-          </div>
-
-          <div className="p-6 rounded-xl bg-[#1f1f1f] hover:bg-[#242424] transition-all duration-300 shadow-[0_0_15px_rgba(0,255,157,0.1)] flex flex-col justify-center items-center min-h-[220px]">
-            <h3 className="text-emerald-400 text-2xl font-semibold mb-2">
-              Interactive Connections
-            </h3>
-            <p className="text-gray-300 text-base">
-              Connect components with dynamic wires and handles.
-            </p>
-          </div>
-
-          <div className="p-6 rounded-xl bg-[#1f1f1f] hover:bg-[#242424] transition-all duration-300 shadow-[0_0_15px_rgba(0,255,157,0.1)] flex flex-col justify-center items-center min-h-[220px]">
-            <h3 className="text-emerald-400 text-2xl font-semibold mb-2">
-              Live Testing
-            </h3>
-            <p className="text-gray-300 text-base">
-              Observe instant changes in output as you toggle input switches and
-              test your logic.
-            </p>
-          </div>
-
-          <div className="p-6 rounded-xl bg-[#1f1f1f] hover:bg-[#242424] transition-all duration-300 shadow-[0_0_15px_rgba(0,255,157,0.1)] flex flex-col justify-center items-center min-h-[220px]">
-            <h3 className="text-emerald-400 text-2xl font-semibold mb-2">
-              Browser-Based
-            </h3>
-            <p className="text-gray-300 text-base">
-              No installations or hardware setup — experiment directly from your
-              web browser.
-            </p>
-          </div>
-        </div>
-      </section>
-
-      {/* Subtle footer glow */}
-      <div className="absolute bottom-0 w-full h-32 bg-gradient-to-t from-[#00ff9d1a] to-transparent"></div>
-    </div>
-  );
+  return <LandingPage />
 }

components/Toolbar.tsx

@@ -13,24 +13,11 @@ import {
   Cpu,
   X,
 } from "lucide-react";
-
-interface GateType {
-  id: string;
-  color: string;
-  name: string;
-  inputs?: string[];
-  outputs: { [key: string]: string };
-  circuit?: { gates: GateType[]; wires: Wire[] };
-}
-
-interface Wire {
-  source: string;
-  target: string;
-}
+import { GateType, PendingNode } from "@/types";
 
 interface ToolbarProps {
   paletteOpen: boolean;
-  pendingNode: { type: string; gate?: GateType } | null;
+  pendingNode: PendingNode | null;
   nextLabelIndex: number;
   GateList: GateType[];
   onTogglePalette: () => void;

components/landing-page/call-to-action.tsx

@@ -0,0 +1,37 @@
+import Image from "next/image"
+import Link from "next/link"
+
+export default function CallToAction() {
+  return (
+    <section id="contact" className="card my-20 relative overflow-hidden shadow-md">
+      <div className="p-8 md:p-10 lg:p-12 flex flex-col md:flex-row items-start">
+        <div className="w-full md:w-3/5 z-10">
+          <h2 className="text-black dark:text-white mb-6 text-3xl md:text-4xl lg:text-5xl font-medium leading-tight">
+            Ready to Build Your <span className="text-[#7A7FEE] dark:text-[#7A7FEE]">First Circuit?</span>
+          </h2>
+          <p className="my-6 text-sm md:text-base max-w-md text-gray-700 dark:text-gray-300">
+            Start creating digital logic circuits today.
+          </p>
+          <p className="mb-6 text-sm md:text-base max-w-md text-gray-700 dark:text-gray-300">
+            Drag and drop components, connect them with wires, and test your designs in real-time. No installation required.
+          </p>
+          <div>
+            <Link href="/circuit" className="btn-primary">
+              Start Building Circuits
+            </Link>
+          </div>
+        </div>
+
+        <div className="hidden md:flex md:w-2/5 md:absolute md:right-0 md:top-0 md:bottom-0 md:items-center">
+          <Image
+            src="/8bvaKz01 (1).svg"
+            alt="Circuit Illustration"
+            width={500}
+            height={500}
+            className="w-full h-auto md:h-full md:w-auto md:object-cover md:object-left"
+          />
+        </div>
+      </div>
+    </section>
+  )
+}