Transform Your Business
with AI-Powered Web Solutions

import React, { useState } from 'react';

export default function CustomCheckbox({ label, defaultChecked = false }) {
  const [checked, setChecked] = useState(defaultChecked);
  return (
    <label className="flex gap-3 items-center cursor-pointer">
      <input type="checkbox" className="hidden peer" checked={checked}
        onChange={() => setChecked(!checked)} />
      <span className="w-5 h-5 border border-slate-300 rounded flex items-center justify-center text-xs text-transparent peer-checked:bg-blue-600 peer-checked:text-white">✓</span>
      <span className="text-slate-700 font-medium">{checked ? 'Feature Enabled' : label}</span>
    </label>
  );
}

import React from 'react';

export default function LoginUI() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-slate-50 p-4">
      <div className="flex flex-col md:flex-row bg-white rounded-3xl shadow-2xl overflow-hidden max-w-5xl w-full">
        <div className="hidden md:flex md:w-1/2 bg-indigo-600 p-12 text-white items-end">
          <h1 className="text-5xl font-bold">Start journey.</h1>
        </div>
        <form className="w-full md:w-1/2 p-12 space-y-6">
          <h2 className="text-4xl font-bold">Sign in</h2>
          <input type="email" placeholder="Email" className="w-full h-12 border rounded-xl px-4" />
          <button className="w-full h-12 bg-indigo-600 text-white rounded-xl">Sign In</button>
        </form>
      </div>
    </div>
  );
}

import React, { useState } from 'react';

const links = ['Products', 'Stories', 'Pricing', 'Docs'];

export default function Navbar() {
  const [open, setOpen] = useState(false);
  return (
    <nav className="relative flex items-center justify-between border border-slate-700 px-6 py-4 rounded-full text-white bg-slate-900/50 backdrop-blur-md">
      <div className="hidden md:flex gap-6">
        {links.map((l) => <a key={l} href="#" className="text-slate-300 hover:text-white">{l}</a>)}
      </div>
      <button className="md:hidden" onClick={() => setOpen(!open)}>Menu</button>
      {open && (
        <div className="absolute top-16 left-0 right-0 bg-slate-900 rounded-3xl p-6 flex flex-col gap-4 md:hidden">
          {links.map((l) => <a key={l} href="#">{l}</a>)}
        </div>
      )}
    </nav>
  );
}