Social links

app/(marketing)/layout.tsx

@@ -1,14 +1,15 @@
 import AnnouncementSection from "@/components/layout/announcement-section";
 import SiteFooter from "@/components/layout/site-footer";
 import SiteHeader from "@/components/layout/site-header";
+import { socialConfig } from "@/config/social";
 
 export default function layout({ children }: { children: React.ReactNode }) {
   return (
     <div className="relative flex min-h-screen flex-col">
       <AnnouncementSection/>
       <SiteHeader />
       <div className="flex-1">{children}</div>
-      <SiteFooter />
+      <SiteFooter items={socialConfig} />
     </div>
   );
 }

components/icons.tsx

@@ -36,6 +36,9 @@ import {
   Link,
   X,
   type Icon as LucideIcon,
+  Youtube,
+  Instagram,
+  Linkedin,
 } from "lucide-react";
 
 export type Icon = LucideIcon;
@@ -93,4 +96,7 @@ export const Icons = {
   ),
   twitter: Twitter,
   check: Check,
+  youtube: Youtube,
+  instagram: Instagram,
+  linkedin: Linkedin
 };

components/layout/site-footer.tsx

@@ -1,56 +1,95 @@
 import React from "react";
 import { cn } from "@/lib/utils";
-import { Button, buttonVariants } from "../ui/button";
+import { buttonVariants } from "../ui/button";
 import Link from "next/link";
+import { SocialConfig } from "@/types";
 
-type Props = {};
 
-export default function SiteFooter({}: Props) {
+interface FooterProps {
+  items?: SocialConfig[];
+}
+
+export default function SiteFooter({items}: FooterProps) {
   return (
-    <footer className="bg-gray-100 dark:bg-[#161D29] py-10">
-      <div className="container mx-auto px-4">
-        <div className="flex items-center justify-center dark:text-white text-gray-700">
+    <footer className="bg-gray-100 dark:bg-[#161D29] pt-10">
+      <div className="container mx-auto px-4 flex flex-col items-center gap-10">
+        <div className="flex md:gap-10 gap-5">
+          {
+            items?.map((item, index) => <Link key={index} href={item.href} target="_blank" rel="noreferrer">
+            <item.iconName className="h-9 w-9 hover:text-[#8fa0be] dark:hover:text-[#30405c]"/>
+
+            <span className="sr-only">{item.title}</span>
+          </Link>)
+          }
+        </div>
+
+        <div>
+        <Link
+              href="https://discord.com/invite/vee94km4Wh"
+              target="_blank"
+              className={cn(buttonVariants({variant: "rounded"}))}
+            >
+              Join Community
+            </Link>
+        </div>
+
+        <div className="flex items-center justify-center md:gap-8 gap-4  dark:text-white text-gray-700">
           <a
             href="/"
             className={cn(
-              "mr-4 font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
+              "font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
             )}
           >
             Home
           </a>
           <a
             href="/batch/learn/html/basic"
             className={cn(
-              "mr-4 font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
+              "font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
             )}
           >
             Learn
           </a>
-          <Link
-              href="https://discord.com/invite/vee94km4Wh"
-              target="_blank"
-              className={`${cn(buttonVariants({ variant: "rounded" })) } md:flex md:min-w-fit`}
-            >
-              Join Community
-            </Link>
+
+          <a
+            href="/batch/dsa/loops"
+            className={cn(
+              "font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
+            )}
+          >
+            DSA in JS
+          </a>
+
           <a
             href="/batch/build/react/fundamentals"
             className={cn(
-              "mr-4 ml-4 font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
+              "font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
             )}
           >
             Build
           </a>
           <a
             href="/batch/hire/hire"
             className={cn(
-              "font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
+              " font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
             )}
           >
             Hire
           </a>
+          <a
+            href="/docs"
+            className={cn(
+              " font-normal transition-colors hover:text-foreground/70 sm:text-md text-foreground/100"
+            )}
+          >
+            Docs
+          </a>
         </div>
       </div>
+
+      <div>
+        <p className="bg-[#161D29] dark:bg-gray-100 py-6 mt-10 text-white dark:text-gray-700 text-center">© FrontendFreaks. All rights reserved</p>
+      </div>
     </footer>
   );
 }

config/social.ts

@@ -0,0 +1,31 @@
+import { SocialConfig } from "@/types";
+import { Github, Instagram, Linkedin, Twitter, Youtube } from "lucide-react";
+
+
+export const socialConfig: SocialConfig[] = [
+  {
+    title: "GitHub",
+    href: "https://github.com/FrontendFreaks",
+    iconName: Github,
+  },
+  {
+    title: "Twitter",
+    href: "https://twitter.com/frontendfreaks",
+    iconName: Twitter,
+  },
+  {
+    title: "YouTube",
+    href: "https://www.youtube.com/c/VishalRajput_1",
+    iconName: Youtube,
+  },{
+    title: "Instagram",
+    href: "https://www.instagram.com/vishalraj.dev/",    
+    iconName: Instagram,
+  },{
+    title: "LinkedIn",
+    href: "https://www.linkedin.com/company/frontendfreaks/",
+    iconName: Linkedin,
+  },
+];
+
+// '<Icons.youtube className="h-9 w-9 hover:text-[#8fa0be] dark:hover:text-[#30405c]" />'

types/index.d.ts

@@ -1,3 +1,9 @@
+
+import { Icon } from "@/components/icons";
+import { LucideProps } from "lucide-react";
+import { LucideIcon } from "lucide-react";
+import { ElementType } from "react";
+
 export interface NavItem {
   title: string;
   href: string;
@@ -36,4 +42,10 @@ export type DocsConfig = {
   sidebarNav: SidebarNav[];
 };
 
+export type SocialConfig = {
+  title: string
+  href: string,
+  iconName: Icon,
+}
+
 export type documentationConfig = SidebarNavItem[];