Softeneers Framework

MinimalistFooter

Documentație pentru componenta MinimalistFooter

Footer ultra-simplu și complet personalizabil. Poți ajusta bgColor, textColor, fontSize, precum și conținutul textual prin title și text. Implicit este foarte curat și compact, dar poate fi adaptat rapid pentru diverse layout-uri.

Previzualizare cu setările implicite.

Variantă light, cu titlu și text personalizat, margine superioară și font de bază.

Variantă cu culoare de brand și contrast bun (text negru pe fundal galben).

Variantă ultra-compactă, utilă pentru pagini cu spațiu limitat.

Utilizare

import MinimalistFooter from "@/components/footer-components/MinimalistFooter";

// Implicit (compact, bg negru, text alb)
<MinimalistFooter />

// Light theme cu titlu + text custom
<MinimalistFooter
  title="Stay in touch"
  text="© 2025 Softeneers — All rights reserved."
  bgColor="bg-white"
  textColor="text-black"
  fontSize="text-sm"
  className="border-t border-gray-200"
/>

// Brand color + contrast adecvat
<MinimalistFooter
  title="Softeneers"
  text="Built with ❤️ — Softeneers Framework"
  bgColor="bg-amber-600"
  textColor="text-black"
  fontSize="text-base"
  className="shadow-sm"
/>

// Ultra-compact, dark
<MinimalistFooter
  text={`© ${new Date().getFullYear()} Softeneers — Minimal footprint`}
  bgColor="bg-black"
  textColor="text-white"
  fontSize="text-xs"
  className="rounded-t-2xl"
/>

title? — titlu opțional, randat deasupra textului principal.
text? — conținutul principal (implicit: © [anul] Your Company).
bgColor? / textColor? — clase Tailwind pentru fundal și culoarea textului (ex.: bg-white, text-black, bg-amber-600).
fontSize? — control pentru mărimea textului (ex.: text-xs, text-sm, text-base).
className? — stiluri suplimentare (ex.: border-t, shadow-sm, rounded-t-2xl).

SimpleFooter

Footer minim, complet personalizabil: logo (text / imagine / combinat / ReactNode), coloane de linkuri, social icons, newsletter (cu form action) și bară inferioară cu linkuri secundare. Implicit este pe dark theme (bg-black text-white), dar poți schimba culorile prin theme.

Variantă implicită (dark) cu logo text.

Variantă light cu newsletter și logo imagine+text.

Variantă minimală (doar social + linkuri inferioare).

Utilizare

import SimpleFooter from "@/components/footer-components/SimpleFooter";

// 1) Dark implicit + logo text
<SimpleFooter
  logo={{ type: "text", text: { value: "Softeneers", as: "span", className: "font-semibold" } }}
  description="Framework UI pentru Next.js + Tailwind."
  columns={[
    { title: "Product", links: [{ label: "Features", href: "/features" }, { label: "Pricing", href: "/pricing" }] },
    { title: "Company", links: [{ label: "About", href: "/about" }, { label: "Careers", href: "/careers" }] },
  ]}
  social={[{ platform: "twitter", href: "#" }, { platform: "linkedin", href: "#" }]}
  bottomLinks={[{ label: "Privacy", href: "/privacy" }, { label: "Terms", href: "/terms" }]}
/>

// 2) Light theme + logo imagine+text + newsletter
<SimpleFooter
  logo={{
    type: "combined",
    combined: {
      image: { src: "/softeneerscool.png", alt: "Softeneers", className: "h-7 w-7" },
      text: { value: "Softeneers", as: "span", className: "ml-2 font-semibold" },
    },
  }}
  theme={{
    bg: "bg-white",
    text: "text-black",
    mutedText: "text-gray-600",
    border: "border-gray-200",
    linkHover: "hover:text-gray-900",
    inputBg: "bg-white",
    inputText: "text-black",
    inputBorder: "border-gray-300",
    button: "bg-black text-white hover:opacity-90",
  }}
  newsletter={{ action: "/api/newsletter", placeholder: "you@example.com", buttonLabel: "Join" }}
  bottomLinks={[{ label: "Status", href: "/status" }]}
/>

// 3) Minimal (fără coloane)
<SimpleFooter
  columns={[]}
  social={[{ platform: "instagram", href: "#" }, { platform: "youtube", href: "#" }]}
  bottomLinks={[{ label: "Contact", href: "/contact" }]}
/>

logo — acceptă text, image, combined sau un ReactNode custom.
columns — liste de linkuri afișate pe coloane (poți trimite [] pentru a le ascunde).
social — rețele suportate: twitter/x, facebook, instagram, linkedin, youtube.
newsletter — form simplu cu action (fără callback-uri).
theme — personalizare culori: bg, text, mutedText, border, linkHover, inputBg, inputText, inputBorder, button.

ColumnFooter

Footer pe coloane, complet personalizabil: logo (text sau imagine), seturi de linkuri pe secțiuni și bară inferioară. Implicit folosește culorile din tema globală, dar poți seta rapid bgColor și textColor pentru variante dark/light. Prima coloană include logo + linkuri utile (Terms, Cookies) și secțiunea „Made by Softeneers”.

Variantă dark cu logo text.

Variantă light cu logo imagine.

Variantă minimală (fără coloane).

Variantă dark cu logo combinat (imagine + text).

Utilizare

import ColumnFooter from "@/components/footer-components/ColumnFooter";

// 1) Dark + logo text
<ColumnFooter
  logoType="text"
  logoText="Softeneers"
  bgColor="bg-black"
  textColor="text-white"
  columns={[
    { title: "Product", links: [{ label: "Features", href: "/features" }, { label: "Pricing", href: "/pricing" }] },
    { title: "Resources", links: [{ label: "Docs", href: "/docs" }, { label: "Tutorials", href: "/tutorials" }] },
  ]}
  bottomText="© 2025 Softeneers. All rights reserved."
/>

// 2) Light + logo imagine
<ColumnFooter
  logoType="image"
  logoText="Softeneers"
  logoImage="/softeneerscool.png"
  bgColor="bg-white"
  textColor="text-black"
  columns={[
    {
      title: "Company",
      links: [
        { label: "About", href: "/about" },
        { label: "Careers", href: "/careers" },
        { label: "Blog", href: "/blog" },
      ],
    },
    {
      title: "Legal",
      links: [
        { label: "Privacy", href: "/privacy" },
        { label: "Terms", href: "/terms" },
        { label: "Cookies", href: "/cookies" },
      ],
    },
    {
      title: "Support",
      links: [
        { label: "Help Center", href: "/help" },
        { label: "Contact", href: "/contact" },
      ],
    },
  ]}
  bottomText="Crafted with ♥ by Softeneers"
/>

// 4) Dark + logo both (imagine + text)
<ColumnFooter
  logoType="both"
  logoText="Softeneers"
  logoImage="/softeneerscool.png"
  bgColor="bg-neutral-900"
  textColor="text-white"
  columns={[
    {
      title: "Developers",
      links: [
        { label: "API", href: "/api" },
        { label: "SDKs", href: "/sdks" },
        { label: "Changelog", href: "/changelog" },
      ],
    },
    {
      title: "Company",
      links: [
        { label: "About", href: "/about" },
        { label: "Careers", href: "/careers" },
      ],
    },
  ]}
  bottomText="Open-source friendly. Built with care."
/>

logoType — "text" | "image" | "both".
logoText / logoImage — conținutul logo-ului, în funcție de logoType.
columns — array de coloane (titlu + linkuri). Poți trimite [] pentru minimal.
bgColor / textColor — culori Tailwind pentru fundal și text.
bottomText — textul din bara inferioară (fallback: copyright / auto).
Prima coloană este rezervată pentru logo + linkuri utile (Terms, Cookies) și rândul „Made by Softeneers”.