Initial commit

src/components/sections/footer/FooterCard.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { memo } from "react";
+import FooterLogo from "@/components/sections/footer/FooterLogo";
+import SocialLinks from "@/components/shared/SocialLinks";
+import { cls } from "@/lib/utils";
+import type { SocialLink } from "@/components/shared/SocialLinks";
+
+interface FooterCardProps {
+  logoSrc?: string;
+  logoAlt?: string;
+  logoText?: string;
+  copyrightText?: string;
+  socialLinks?: SocialLink[];
+  ariaLabel?: string;
+  className?: string;
+  containerClassName?: string;
+  cardClassName?: string;
+  logoClassName?: string;
+  svgClassName?: string;
+  dividerClassName?: string;
+  copyrightContainerClassName?: string;
+  copyrightTextClassName?: string;
+  socialContainerClassName?: string;
+  socialIconClassName?: string;
+}
+
+const FooterCard = memo<FooterCardProps>(function FooterCard({
+  logoSrc,
+  logoAlt = "Logo",
+  logoText = "Webild",
+  copyrightText = `© 2025 | Webild`,
+  socialLinks,
+  ariaLabel = "Site footer",
+  className = "",
+  containerClassName = "",
+  cardClassName = "",
+  logoClassName = "",
+  svgClassName = "",
+  dividerClassName = "",
+  copyrightContainerClassName = "",
+  copyrightTextClassName = "",
+  socialContainerClassName = "",
+  socialIconClassName = "",
+}) {
+  return (
+    <footer
+      role="contentinfo"
+      aria-label={ariaLabel}
+      className={cls("relative w-full py-20", className)}
+    >
+      <div className={cls("relative w-content-width mx-auto card rounded-theme-capped px-10", containerClassName, cardClassName)}>
+        <FooterLogo
+          logoSrc={logoSrc}
+          logoAlt={logoAlt}
+          logoText={logoText}
+          className={logoClassName}
+          svgClassName={svgClassName}
+        />
+
+        <div className={cls("relative z-1 w-full h-px bg-accent/20 mb-6", dividerClassName)} />
+
+        <div
+          className={cls("relative z-1 w-full flex flex-col md:flex-row items-center justify-between gap-4 mb-6", copyrightContainerClassName)}
+        >
+          <span className={cls("text-accent/75 text-sm", copyrightTextClassName)}>
+            {copyrightText}
+          </span>
+          {socialLinks && socialLinks.length > 0 && (
+            <SocialLinks
+              socialLinks={socialLinks}
+              className={socialContainerClassName}
+              iconClassName={socialIconClassName}
+            />
+          )}
+        </div>
+      </div>
+    </footer>
+  );
+});
+
+FooterCard.displayName = "FooterCard";
+
+export default FooterCard;