Code Studio Components

"use client";
import { useState } from "react";
import { Menu, X, Code2, ArrowRight } from "lucide-react";

export default function Navbar() {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <nav className="w-full bg-zinc-950/80 backdrop-blur-md border-b border-zinc-800/80 sticky top-0 z-50 text-zinc-100">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between">
        
        {/* Brand Logo */}
        <div className="flex items-center space-x-2 cursor-pointer">
          <div className="p-2 bg-red-600/10 border border-red-500/20 rounded-xl text-red-500">
            <Code2 className="w-5 h-5" />
          </div>
          <span className="font-extrabold text-lg tracking-tight text-white">
            Dev<span className="text-red-500">Studio</span>
          </span>
        </div>

        {/* Desktop Navigation Links */}
        <div className="hidden md:flex items-center space-x-8 text-xs font-medium text-zinc-400">
          <a href="#" className="hover:text-white transition-colors">Home</a>
          <a href="#" className="hover:text-white transition-colors">Components</a>
          <a href="#" className="hover:text-white transition-colors">Templates</a>
          <a href="#" className="hover:text-white transition-colors">Docs</a>
        </div>

        {/* Desktop CTA Button */}
        <div className="hidden md:flex items-center space-x-4">
          <button className="px-4 py-2 rounded-xl text-xs font-semibold bg-red-600 hover:bg-red-700 text-white transition-all shadow-lg shadow-red-950/40 flex items-center space-x-1.5 cursor-pointer">
            <span>Get Started</span>
            <ArrowRight className="w-3.5 h-3.5" />
          </button>
        </div>

        {/* Mobile Menu Toggle Button */}
        <button
          onClick={() => setIsOpen(!isOpen)}
          className="md:hidden p-2 rounded-lg text-zinc-400 hover:text-white bg-zinc-900 border border-zinc-800"
        >
          {isOpen ? <X className="w-5 h-5" /> : <Menu className="w-5 h-5" />}
        </button>
      </div>

      {/* Mobile Drawer Navigation */}
      {isOpen && (
        <div className="md:hidden border-b border-zinc-800 bg-zinc-950 px-4 pt-3 pb-6 space-y-3">
          <a href="#" className="block px-3 py-2 rounded-lg text-sm font-medium text-zinc-300 hover:bg-zinc-900 hover:text-white">Home</a>
          <a href="#" className="block px-3 py-2 rounded-lg text-sm font-medium text-zinc-300 hover:bg-zinc-900 hover:text-white">Components</a>
          <a href="#" className="block px-3 py-2 rounded-lg text-sm font-medium text-zinc-300 hover:bg-zinc-900 hover:text-white">Templates</a>
          <a href="#" className="block px-3 py-2 rounded-lg text-sm font-medium text-zinc-300 hover:bg-zinc-900 hover:text-white">Docs</a>
          <div className="pt-2">
            <button className="w-full py-2.5 rounded-xl text-xs font-semibold bg-red-600 hover:bg-red-700 text-white transition-all flex items-center justify-center space-x-2">
              <span>Get Started</span>
              <ArrowRight className="w-3.5 h-3.5" />
            </button>
          </div>
        </div>
      )}
    </nav>
  );
}

"use client";
import { Sparkles, ArrowRight, Terminal, Check } from "lucide-react";

export default function HeroSection() {
  return (
    <section className="relative min-h-[85vh] w-full bg-zinc-950 text-white flex items-center justify-center px-4 sm:px-6 lg:px-8 py-16 overflow-hidden">
      {/* Background Radial Glow */}
      <div className="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-[350px] sm:w-[600px] h-[350px] sm:h-[600px] bg-red-600/10 blur-[130px] rounded-full pointer-events-none" />

      <div className="max-w-5xl mx-auto text-center space-y-8 relative z-10">
        
        {/* Top Feature Tag */}
        <div className="inline-flex items-center space-x-2 px-3.5 py-1.5 rounded-full bg-zinc-900 border border-zinc-800 text-xs text-red-400 font-mono shadow-inner">
          <Sparkles className="w-3.5 h-3.5" />
          <span>Next.js 14 & Tailwind CSS Ready</span>
        </div>

        {/* Main Heading */}
        <h1 className="text-4xl sm:text-6xl md:text-7xl font-extrabold tracking-tight text-white leading-[1.15]">
          Build Modern Apps <br />
          <span className="bg-gradient-to-r from-red-500 via-rose-400 to-orange-400 bg-clip-text text-transparent">
            Without Redesigning
          </span>
        </h1>

        {/* Subtitle */}
        <p className="text-zinc-400 text-sm sm:text-base md:text-lg max-w-2xl mx-auto leading-relaxed">
          Production-ready, customizable components for your web projects. Copy, paste, and ship faster with high-performance UI.
        </p>

        {/* CTA Buttons */}
        <div className="flex flex-col sm:flex-row items-center justify-center gap-4 pt-2">
          <button className="w-full sm:w-auto px-7 py-3.5 rounded-xl bg-red-600 hover:bg-red-700 text-white font-semibold text-xs sm:text-sm transition-all shadow-lg shadow-red-950/50 flex items-center justify-center space-x-2 cursor-pointer">
            <span>Browse Components</span>
            <ArrowRight className="w-4 h-4" />
          </button>
          
          <button className="w-full sm:w-auto px-7 py-3.5 rounded-xl bg-zinc-900 hover:bg-zinc-800 border border-zinc-800 text-zinc-300 font-semibold text-xs sm:text-sm transition-all flex items-center justify-center space-x-2 cursor-pointer">
            <Terminal className="w-4 h-4 text-zinc-400" />
            <span>npm i @devstudio/ui</span>
          </button>
        </div>

        {/* Quick Highlights */}
        <div className="pt-8 flex flex-wrap items-center justify-center gap-6 text-xs text-zinc-500 font-mono">
          <div className="flex items-center space-x-1.5">
            <Check className="w-4 h-4 text-emerald-500" />
            <span>Fully Responsive</span>
          </div>
          <div className="flex items-center space-x-1.5">
            <Check className="w-4 h-4 text-emerald-500" />
            <span>Dark Theme Standard</span>
          </div>
          <div className="flex items-center space-x-1.5">
            <Check className="w-4 h-4 text-emerald-500" />
            <span>Zero Config Required</span>
          </div>
        </div>

      </div>
    </section>
  );
}

"use client";
import { useState } from "react";
import { Calculator, Delete, RotateCcw } from "lucide-react";

export default function ModernCalculator() {
  const [display, setDisplay] = useState("0");
  const [prevVal, setPrevVal] = useState(null);
  const [operation, setOperation] = useState(null);
  const [overwrite, setOverwrite] = useState(false);

  const handleNum = (num) => {
    if (display === "0" || overwrite) {
      setDisplay(num);
      setOverwrite(false);
    } else {
      setDisplay(display + num);
    }
  };

  const handleOp = (op) => {
    setPrevVal(parseFloat(display));
    setOperation(op);
    setOverwrite(true);
  };

  const handleCalculate = () => {
    if (prevVal === null || !operation) return;
    const current = parseFloat(display);
    let res = 0;

    switch (operation) {
      case "+": res = prevVal + current; break;
      case "-": res = prevVal - current; break;
      case "×": res = prevVal * current; break;
      case "÷": res = current !== 0 ? prevVal / current : "Error"; break;
      default: return;
    }

    setDisplay(String(res));
    setOperation(null);
    setPrevVal(null);
    setOverwrite(true);
  };

  const handleClear = () => {
    setDisplay("0");
    setPrevVal(null);
    setOperation(null);
  };

  const handleBackspace = () => {
    if (display.length === 1 || display === "Error") {
      setDisplay("0");
    } else {
      setDisplay(display.slice(0, -1));
    }
  };

  return (
    <div className="w-full max-w-sm mx-auto bg-zinc-900 border border-zinc-800 rounded-2xl p-5 shadow-2xl space-y-4">
      {/* Header */}
      <div className="flex items-center justify-between text-zinc-400 text-xs">
        <div className="flex items-center space-x-1.5">
          <Calculator className="w-4 h-4 text-red-500" />
          <span className="font-mono">Standard Calc</span>
        </div>
        <span className="text-[10px] bg-zinc-950 px-2 py-0.5 rounded border border-zinc-800">
          {operation ? `${prevVal} ${operation}` : "Ready"}
        </span>
      </div>

      {/* Screen Display */}
      <div className="bg-zinc-950 border border-zinc-800 rounded-xl p-4 text-right">
        <div className="text-3xl font-mono font-bold text-white tracking-wider overflow-x-auto">
          {display}
        </div>
      </div>

      {/* Buttons Pad Grid */}
      <div className="grid grid-cols-4 gap-2 font-mono">
        <button onClick={handleClear} className="p-3 bg-zinc-800 hover:bg-zinc-700 text-red-400 rounded-xl font-bold transition-all flex items-center justify-center cursor-pointer">
          <RotateCcw className="w-4 h-4" />
        </button>
        <button onClick={handleBackspace} className="p-3 bg-zinc-800 hover:bg-zinc-700 text-zinc-300 rounded-xl font-bold transition-all flex items-center justify-center cursor-pointer">
          <Delete className="w-4 h-4" />
        </button>
        <button onClick={() => handleOp("÷")} className="p-3 bg-red-600/20 text-red-400 hover:bg-red-600/30 rounded-xl font-bold transition-all cursor-pointer">÷</button>
        <button onClick={() => handleOp("×")} className="p-3 bg-red-600/20 text-red-400 hover:bg-red-600/30 rounded-xl font-bold transition-all cursor-pointer">×</button>

        {["7", "8", "9"].map((n) => (
          <button key={n} onClick={() => handleNum(n)} className="p-3 bg-zinc-950 hover:bg-zinc-800 text-white rounded-xl font-bold border border-zinc-800/80 transition-all cursor-pointer">{n}</button>
        ))}
        <button onClick={() => handleOp("-")} className="p-3 bg-red-600/20 text-red-400 hover:bg-red-600/30 rounded-xl font-bold transition-all cursor-pointer">-</button>

        {["4", "5", "6"].map((n) => (
          <button key={n} onClick={() => handleNum(n)} className="p-3 bg-zinc-950 hover:bg-zinc-800 text-white rounded-xl font-bold border border-zinc-800/80 transition-all cursor-pointer">{n}</button>
        ))}
        <button onClick={() => handleOp("+")} className="p-3 bg-red-600/20 text-red-400 hover:bg-red-600/30 rounded-xl font-bold transition-all cursor-pointer">+</button>

        {["1", "2", "3"].map((n) => (
          <button key={n} onClick={() => handleNum(n)} className="p-3 bg-zinc-950 hover:bg-zinc-800 text-white rounded-xl font-bold border border-zinc-800/80 transition-all cursor-pointer">{n}</button>
        ))}
        <button onClick={handleCalculate} className="row-span-2 p-3 bg-red-600 hover:bg-red-700 text-white rounded-xl font-bold transition-all shadow-lg shadow-red-950/40 flex items-center justify-center cursor-pointer">=</button>

        <button onClick={() => handleNum("0")} className="col-span-2 p-3 bg-zinc-950 hover:bg-zinc-800 text-white rounded-xl font-bold border border-zinc-800/80 transition-all cursor-pointer">0</button>
        <button onClick={() => handleNum(".")} className="p-3 bg-zinc-950 hover:bg-zinc-800 text-white rounded-xl font-bold border border-zinc-800/80 transition-all cursor-pointer">.</button>
      </div>
    </div>
  );
}

"use client";
import { Code2, Github, Twitter, Linkedin, ArrowRight } from "lucide-react";

export default function Footer() {
  return (
    <footer className="w-full bg-zinc-950 border-t border-zinc-800/80 text-zinc-400 pt-12 pb-8">
      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 space-y-10">
        
        {/* Main Grid Section */}
        <div className="grid grid-cols-1 md:grid-cols-5 gap-8">
          
          {/* Brand Col */}
          <div className="md:col-span-2 space-y-4">
            <div className="flex items-center space-x-2">
              <div className="p-2 bg-red-600/10 border border-red-500/20 rounded-xl text-red-500">
                <Code2 className="w-5 h-5" />
              </div>
              <span className="font-extrabold text-lg text-white tracking-tight">
                Dev<span className="text-red-500">Studio</span>
              </span>
            </div>
            <p className="text-xs text-zinc-400 max-w-sm leading-relaxed">
              Open-source components and utilities engineered for React and Next.js developers.
            </p>
            {/* Social Icons */}
            <div className="flex items-center space-x-3 text-zinc-400 pt-1">
              <a href="#" className="p-2 bg-zinc-900 border border-zinc-800 rounded-lg hover:text-white hover:border-zinc-700 transition-all"><Github className="w-4 h-4" /></a>
              <a href="#" className="p-2 bg-zinc-900 border border-zinc-800 rounded-lg hover:text-white hover:border-zinc-700 transition-all"><Twitter className="w-4 h-4" /></a>
              <a href="#" className="p-2 bg-zinc-900 border border-zinc-800 rounded-lg hover:text-white hover:border-zinc-700 transition-all"><Linkedin className="w-4 h-4" /></a>
            </div>
          </div>

          {/* Nav Links Col 1 */}
          <div className="space-y-3">
            <h4 className="text-xs font-bold text-white uppercase tracking-wider">Product</h4>
            <ul className="space-y-2 text-xs">
              <li><a href="#" className="hover:text-white transition-colors">Components</a></li>
              <li><a href="#" className="hover:text-white transition-colors">Templates</a></li>
              <li><a href="#" className="hover:text-white transition-colors">Documentation</a></li>
              <li><a href="#" className="hover:text-white transition-colors">Changelog</a></li>
            </ul>
          </div>

          {/* Nav Links Col 2 */}
          <div className="space-y-3">
            <h4 className="text-xs font-bold text-white uppercase tracking-wider">Resources</h4>
            <ul className="space-y-2 text-xs">
              <li><a href="#" className="hover:text-white transition-colors">Tailwind Guides</a></li>
              <li><a href="#" className="hover:text-white transition-colors">Next.js Snippets</a></li>
              <li><a href="#" className="hover:text-white transition-colors">Community</a></li>
              <li><a href="#" className="hover:text-white transition-colors">Support</a></li>
            </ul>
          </div>

          {/* Newsletter Input Col */}
          <div className="space-y-3">
            <h4 className="text-xs font-bold text-white uppercase tracking-wider">Stay Updated</h4>
            <p className="text-xs text-zinc-500">Get notified when new components are released.</p>
            <form onSubmit={(e) => e.preventDefault()} className="flex space-x-2">
              <input
                type="email"
                placeholder="Enter email..."
                className="w-full bg-zinc-900 border border-zinc-800 rounded-xl px-3 py-2 text-xs text-white outline-none focus:border-red-500 transition-colors"
              />
              <button className="p-2 bg-red-600 hover:bg-red-700 text-white rounded-xl transition-all cursor-pointer">
                <ArrowRight className="w-4 h-4" />
              </button>
            </form>
          </div>

        </div>

        {/* Bottom Copyright Strip */}
        <div className="pt-6 border-t border-zinc-900 flex flex-col sm:flex-row items-center justify-between text-[11px] text-zinc-500 gap-4">
          <p>© 2026 DevStudio Inc. All rights reserved.</p>
          <div className="flex space-x-6">
            <a href="#" className="hover:text-zinc-400">Privacy Policy</a>
            <a href="#" className="hover:text-zinc-400">Terms of Service</a>
          </div>
        </div>

      </div>
    </footer>
  );
}

<div class="pricing-container">
  <div class="pricing-card">
    <h3>Starter</h3>
    <p class="price">$0<span>/month</span></p>
    <ul>
      <li>✓ 1 User Account</li>
      <li>✓ Basic Components</li>
      <li>✕ Priority Support</li>
    </ul>
    <button>Choose Plan</button>
  </div>
  <div class="pricing-card popular">
    <span class="badge">Most Popular</span>
    <h3>Pro</h3>
    <p class="price">$29<span>/month</span></p>
    <ul>
      <li>✓ Unlimited Users</li>
      <li>✓ Advanced Components</li>
      <li>✓ 24/7 Priority Support</li>
    </ul>
    <button class="active">Choose Plan</button>
  </div>
</div>

<style>
.pricing-container { display: flex; gap: 20px; justify-content: center; font-family: sans-serif; background: #09090b; padding: 40px; color: #fff; }
.pricing-card { background: #121215; border: 1px solid #27272a; padding: 30px; border-radius: 16px; width: 280px; position: relative; display: flex; flex-direction: column; gap: 20px; }
.pricing-card.popular { border-color: #dc2626; box-shadow: 0 10px 30px rgba(220, 38, 38, 0.2); }
.badge { position: absolute; top: -12px; right: 20px; background: #dc2626; color: #fff; font-size: 10px; padding: 4px 10px; border-radius: 20px; font-weight: bold; }
.price { font-size: 32px; font-weight: bold; }
.price span { font-size: 14px; color: #a1a1aa; font-weight: normal; }
ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: #d4d4d8; }
button { padding: 12px; border-radius: 10px; border: 1px solid #3f3f46; background: #18181b; color: #fff; cursor: pointer; font-weight: bold; transition: 0.2s; }
button.active, button:hover { background: #dc2626; border-color: #dc2626; }
</style>

<div class="glass-wrapper">
  <form class="glass-form">
    <h2>Welcome Back</h2>
    <p>Please enter your details to sign in.</p>
    <div class="input-group">
      <label>Email</label>
      <input type="email" placeholder="name@example.com" required>
    </div>
    <div class="input-group">
      <label>Password</label>
      <input type="password" placeholder="••••••••" required>
    </div>
    <button type="submit">Sign In</button>
  </form>
</div>

<style>
.glass-wrapper { display: flex; justify-content: center; align-items: center; min-height: 400px; background: linear-gradient(135deg, #0f172a, #020617); font-family: sans-serif; }
.glass-form { background: rgba(255, 255, 255, 0.03); backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); padding: 35px; border-radius: 20px; width: 320px; color: #fff; display: flex; flex-direction: column; gap: 16px; box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
.glass-form h2 { margin: 0; font-size: 22px; }
.glass-form p { margin: 0; font-size: 12px; color: #94a3b8; }
.input-group { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: #cbd5e1; }
.input-group input { background: rgba(0,0,0,0.3); border: 1px solid rgba(255,255,255,0.1); padding: 10px 14px; border-radius: 10px; color: #fff; outline: none; }
.input-group input:focus { border-color: #ef4444; }
.glass-form button { margin-top: 10px; background: #ef4444; color: #fff; border: none; padding: 12px; border-radius: 10px; font-weight: bold; cursor: pointer; transition: 0.2s; }
.glass-form button:hover { background: #dc2626; }
</style>

<div class="todo-app">
  <h3>My Tasks</h3>
  <div class="todo-input-row">
    <input type="text" id="taskInput" placeholder="Add a new task...">
    <button id="addBtn">Add</button>
  </div>
  <ul id="taskList"></ul>
</div>

<script>
const addBtn = document.getElementById('addBtn');
const taskInput = document.getElementById('taskInput');
const taskList = document.getElementById('taskList');

addBtn.addEventListener('click', () => {
  const text = taskInput.value.trim();
  if(!text) return;
  
  const li = document.createElement('li');
  li.innerHTML = `<span>${text}</span> <button class="del-btn">✕</button>`;
  
  li.querySelector('.del-btn').addEventListener('click', () => li.remove());
  taskList.appendChild(li);
  taskInput.value = '';
});
</script>

<style>
.todo-app { background: #09090b; border: 1px solid #27272a; padding: 25px; border-radius: 16px; max-width: 320px; margin: auto; font-family: sans-serif; color: #fff; }
.todo-app h3 { margin-top: 0; font-size: 18px; }
.todo-input-row { display: flex; gap: 8px; margin-bottom: 15px; }
.todo-input-row input { flex: 1; background: #18181b; border: 1px solid #27272a; padding: 8px 12px; border-radius: 8px; color: #fff; outline: none; font-size: 12px; }
.todo-input-row button { background: #dc2626; color: #fff; border: none; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: bold; font-size: 12px; }
#taskList { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; max-height: 200px; overflow-y: auto; }
#taskList li { background: #121215; border: 1px solid #27272a; padding: 8px 12px; border-radius: 8px; display: flex; justify-content: space-between; align-items: center; font-size: 13px; }
.del-btn { background: transparent; border: none; color: #ef4444; cursor: pointer; font-weight: bold; }
</style>

<div class="clock-card">
  <span class="clock-label">Current Time</span>
  <div id="digitalClock" class="clock-display">00:00:00 AM</div>
</div>

<script>
function updateClock() {
  const now = new Date();
  let hours = now.getHours();
  const minutes = String(now.getMinutes()).padStart(2, '0');
  const seconds = String(now.getSeconds()).padStart(2, '0');
  const ampm = hours >= 12 ? 'PM' : 'AM';
  
  hours = hours % 12 || 12;
  const formattedHours = String(hours).padStart(2, '0');
  
  const clockEl = document.getElementById('digitalClock');
  if(clockEl) {
    clockEl.innerText = `${formattedHours}:${minutes}:${seconds} ${ampm}`;
  }
}
setInterval(updateClock, 1000);
updateClock();
</script>

<style>
.clock-card { background: #09090b; border: 1px solid #27272a; padding: 30px; border-radius: 16px; text-align: center; font-family: sans-serif; max-width: 280px; margin: auto; }
.clock-label { font-size: 11px; text-transform: uppercase; color: #71717a; letter-spacing: 1px; font-weight: bold; }
.clock-display { font-size: 28px; font-weight: bold; color: #fff; margin-top: 10px; font-family: monospace; background: #121215; padding: 12px; border-radius: 10px; border: 1px solid #27272a; }
</style>

<div class="faq-container">
  <h3>Frequently Asked Questions</h3>
  <div class="faq-item">
    <button class="faq-question">What is DevStudio? <span>+</span></button>
    <div class="faq-answer">DevStudio is a collection of high-performance components for developers.</div>
  </div>
  <div class="faq-item">
    <button class="faq-question">Is it free to use? <span>+</span></button>
    <div class="faq-answer">Yes, all components are open-source and free for personal and commercial projects.</div>
  </div>
</div>

<script>
document.querySelectorAll('.faq-question').forEach(btn => {
  btn.addEventListener('click', () => {
    const answer = btn.nextElementSibling;
    const isOpen = answer.style.maxHeight;
    
    document.querySelectorAll('.faq-answer').forEach(a => a.style.maxHeight = null);
    
    if(!isOpen) {
      answer.style.maxHeight = answer.scrollHeight + 'px';
    }
  });
});
</script>

<style>
.faq-container { background: #09090b; border: 1px solid #27272a; padding: 25px; border-radius: 16px; max-width: 350px; margin: auto; font-family: sans-serif; color: #fff; }
.faq-container h3 { margin-top: 0; font-size: 16px; margin-bottom: 15px; }
.faq-item { border-bottom: 1px solid #27272a; padding-bottom: 10px; margin-bottom: 10px; }
.faq-question { width: 100%; background: none; border: none; color: #fff; display: flex; justify-content: space-between; align-items: center; font-size: 13px; font-weight: bold; cursor: pointer; padding: 5px 0; text-align: left; }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; font-size: 12px; color: #a1a1aa; padding-left: 2px; }
</style>