Classic - CBC

Building Classic UI for Elite Websites : Best for NEXTJS (JavaScript)

🚀 Currently compatible with Next.js using JavaScript. We are working on TypeScript support and will release it soon with even more features!

📖 Documentation

🔹 Existing Components

Fully Dynamic Navbar
Customize titles, links, text, and background colors effortlessly.
Responsive Design – Ensures seamless adaptability across all screen sizes.
Lightweight & Fast – Optimized for speed and performance.

Example Usage:

<Navbar
  title="My Awesome Site"
  bgColor="#3498db"
  links=[
    { label: "Home", href: "/" },
    { label: "About", href: "/about" },
    { label: "Services", href: "/services" },
    { label: "Contact", href: "/contact" }
  ]
/>

Buttons
✅ Multiple Variants: Primary, Secondary, Outline, and more.
✅ Size Options: Small, Large, and Full-Rounded.
✅ Highly Customizable: Modify styles, colors, and interactions.

Example Usage:

<Button onClick={() => alert("Clicked Primary!")}>Primary</Button>
<Button variant="secondary" onClick={() => alert("Clicked Secondary!")}>Secondary</Button>
<Button variant="outline" onClick={() => alert("Clicked Outline!")}>Outline</Button>
<Button size="lg" rounded="full">Large Rounded</Button>
<Button size="sm" variant="primary">Small Button</Button>

CircleLoad - Animated Loader
It is a dynamic, animated loading component.

Example Usage:

<CircleLoad size={350} color="green" speed={0.05} />

AIChatBubble
A professional AI chat option that floats at the bottom right of the page with seamless operation.

Atom
Classic UI design component that simulates the motion of an atom.
Parameters:
size = 400, dotColor = "#0ea5e9", bgColor = "#111827", speed = 0.02, dotSize = 3

AuthForm
Includes sign-in and sign-up options with a ready-made design.
Parameter:
isLogin = true

Card
Classic info card design best suited for professional sites.
Parameters:
title = "Default Title", description = "This is a default description.", bgColor = "#fff", textColor = "#000", borderColor = "#ddd"

Carousel
Best carousel with a classic design.
Parameters:
items = defaultImages, autoPlay = true, autoPlaySpeed = 3000

CircleLoad
Best circular loader design.
Parameters:
size = 400, color = "#0ea5e9", speed = 0.05

Footer
Professional footer design.
Parameters:
companyName = "CBC-Classic", year = new Date().getFullYear(), links = [...], socialLinks = [...]

GlassCard
Glass-effect info card with a glowing hover effect.
Parameters:
title = "CBC-GlassCard", description = "This is a modern glass-effect card with a glowing hover effect."

HelixLoader
Beautiful animated loading effect.
Parameters:
color = "#0ea5e9", size = 100, speed = 2

HomePage
Fully dynamic homepage with a professional design.
Parameters:
heroTitle, heroSubtitle, heroButtonText, heroButtonLink, aboutTitle, aboutDescription, sectionOneTitle, sectionOneContent, sectionTwoTitle, sectionTwoContent, footerText

SpaceMagic
Another interactive design component that enhances the creativity of your website.
Parameters:
size = 400, dotColor = "#0ea5e9", bgColor = "#111827", speed = 0.02, dotSize = 3

XBallBg
Highly recommended background animation effect.
Parameters:
text = "Click the Ball", ballColor = "rgba(14, 165, 233, 0.8)", bgColor = "black"

🔹 Component Implementation Code

AIChatBubble

<AIChatBubble />

Atom

<Atom size={400} dotColor="#0ea5e9" bgColor="#111827" speed={0.02} dotSize={3} />

AuthForm

<AuthForm isLogin={true} />

Card

<Card title="Default Title" description="This is a default description." bgColor="#fff" textColor="#000" borderColor="#ddd" />

Carousel

<Carousel items={defaultImages} autoPlay={true} autoPlaySpeed={3000} />

Footer

<Footer companyName="CBC-Classic" year={new Date().getFullYear()} links={[...]} socialLinks={[...]} />

GlassCard

<GlassCard title="CBC-GlassCard" description="This is a modern glass-effect card with a glowing hover effect." />

HelixLoader

<HelixLoader color="#0ea5e9" size={100} speed={2} />

HomePage

<HomePage heroTitle="Welcome to CBC Basic HomePage" heroSubtitle="This is a fully dynamic homepage." ... />

SpaceMagic

<SpaceMagic size={400} dotColor="#0ea5e9" bgColor="#111827" speed={0.02} dotSize={3} />

XBallBg

<XBallBg text="Click the Ball" ballColor="rgba(14, 165, 233, 0.8)" bgColor="black" />

🎉 Thank You for Choosing CBC!

🚀 Build elite Next.js websites effortlessly with Classic - CBC. Stay tuned for more updates! 🚀