fix nav link href

src/app/(main)/explore/_components/agent-card.tsx

@@ -3,6 +3,8 @@ import React from "react";
 import Link from "next/link";
 import Image from "next/image";
 
+import { motion } from "framer-motion";
+
 import { Play } from "lucide-react";
 
 import { formatDate } from "@/lib/utils";
@@ -12,7 +14,9 @@ import { Tables } from "@/utils/supabase/database.types";
 import { Badge } from "@/components/ui/badge";
 import { buttonVariants } from "@/components/ui/button";
 
-type AgentCardProps = { data: Tables<"agents"> };
+const ease = [0.16, 1, 0.3, 1];
+
+type AgentCardProps = { data: Tables<"agents">; idx: number };
 
 export default function AgentCard(props: AgentCardProps) {
   const {
@@ -27,7 +31,16 @@ export default function AgentCard(props: AgentCardProps) {
   } = props.data;
 
   return (
-    <li className="flex flex-col rounded-lg p-4 border border-accent-foreground hover:shadow-sm transition-shadow duration-200">
+    <motion.li
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{
+        duration: 0.8,
+        delay: props.idx * 0.2,
+        ease,
+      }}
+      className="flex flex-col rounded-lg p-4 border border-accent-foreground hover:shadow-sm transition-shadow duration-200"
+    >
       <figure className="overflow-hidden relative rounded-lg object-cover border mb-3 w-full h-[200px]">
         <Image
           className="w-full object-cover"
@@ -62,6 +75,6 @@ export default function AgentCard(props: AgentCardProps) {
           <span>Try it</span>
         </Link>
       </div>
-    </li>
+    </motion.li>
   );
 }

src/app/(main)/explore/_components/agent-list.tsx

@@ -5,6 +5,8 @@ import Link from "next/link";
 
 import { parseAsInteger, useQueryState } from "nuqs";
 
+import { motion } from "framer-motion";
+
 import { useQuery } from "@tanstack/react-query";
 
 import { BadgePlus, ChevronLeft, ChevronRight, Search } from "lucide-react";
@@ -26,6 +28,7 @@ import AgentCard from "./agent-card";
 import AgentCardSkeleton from "./agent-card-skeleton";
 
 const DATA_DISPLAY = 6;
+const ease = [0.16, 1, 0.3, 1];
 
 export function AgentList() {
   const [searchFilter, setSearchFilter] = useQueryState("search", {
@@ -74,7 +77,20 @@ export function AgentList() {
 
   return (
     <>
-      <div className="mb-8 flex flex-col sm:flex-row justify-between">
+      <motion.h1
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, ease }}
+        className="mb-4 text-3xl font-bold text-foreground sm:text-4xl"
+      >
+        Agents
+      </motion.h1>
+      <motion.div
+        initial={{ opacity: 0, y: -20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.8, ease }}
+        className="mb-8 flex flex-col sm:flex-row gap-3 justify-between"
+      >
         <div className="relative">
           <Input
             aria-label="search"
@@ -102,7 +118,7 @@ export function AgentList() {
           <BadgePlus className="h-6 w-6" />
           Create new Agent
         </Link>
-      </div>
+      </motion.div>
       {agentsData && agentsData.data.length === 0 && (
         <div className="flex flex-col justify-center items-center ">
           <figure className="relative w-full sm:w-1/2 h-72 sm:h-96 mb-6">
@@ -116,18 +132,27 @@ export function AgentList() {
           <h1 className="text-xl font-bold">No data found</h1>
         </div>
       )}
-      <ul className="grid gap-8 mb-10 sm:grid-cols-2 lg:grid-cols-3">
+      {isLoading ? (
-        {isLoading &&
+        <motion.ul
-          [...Array(6)].map((_, idx) => (
+          initial={{ opacity: 0, y: 20 }}
+          animate={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.8, ease }}
+          className="grid gap-8 mb-10 sm:grid-cols-2 lg:grid-cols-3"
+        >
+          {[...Array(6)].map((_, idx) => (
             <li key={idx}>
               <AgentCardSkeleton />
             </li>
           ))}
+        </motion.ul>
+      ) : (
+        <ul className="grid gap-8 mb-10 sm:grid-cols-2 lg:grid-cols-3">
           {agentsData &&
-          agentsData.data?.map((agent) => (
+            agentsData.data?.map((agent, idx) => (
-            <AgentCard key={agent.name} data={agent} />
+              <AgentCard key={agent.name} data={agent} idx={idx} />
             ))}
         </ul>
+      )}
       {agentsData ? (
         <Pagination>
           <PaginationContent>

src/app/(main)/explore/page.tsx

@@ -5,9 +5,6 @@ export default function Explore() {
   return (
     <section className="group pt-8 pb-10 min-h-[50vh] ">
       <div className="layout">
-        <h1 className="mb-4 text-3xl font-bold text-foreground sm:text-4xl">
-          Agents
-        </h1>
         <Suspense>
           <AgentList />
         </Suspense>

src/components/drawer.tsx

@@ -10,16 +10,104 @@ import {
 import { siteConfig } from "@/lib/config";
 import { cn } from "@/lib/utils";
 import { LoginModalOptions } from "@privy-io/react-auth";
+import Image from "next/image";
 import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React from "react";
 import { IoMenuSharp } from "react-icons/io5";
 
-export default function drawerDemo({
+const headerLinks = [
+  // {
+  //   trigger: "Features",
+  //   content: {
+  //     main: {
+  //       icon: <Icons.logo className="h-6 w-6" />,
+  //       title: "AI-Powered Automation",
+  //       description: "Streamline your workflow with intelligent automation.",
+  //       href: "#",
+  //     },
+  //     items: [
+  //       {
+  //         href: "#",
+  //         title: "Task Automation",
+  //         description: "Automate repetitive tasks and save time.",
+  //       },
+  //       {
+  //         href: "#",
+  //         title: "Workflow Optimization",
+  //         description: "Optimize your processes with AI-driven insights.",
+  //       },
+  //       {
+  //         href: "#",
+  //         title: "Intelligent Scheduling",
+  //         description: "AI-powered scheduling for maximum efficiency.",
+  //       },
+  //     ],
+  //   },
+  // },
+  // {
+  //   trigger: "Solutions",
+  //   content: {
+  //     items: [
+  //       {
+  //         title: "For Small Businesses",
+  //         href: "#",
+  //         description: "Tailored automation solutions for growing companies.",
+  //       },
+  //       {
+  //         title: "Enterprise",
+  //         href: "#",
+  //         description: "Scalable AI automation for large organizations.",
+  //       },
+  //       {
+  //         title: "Developers",
+  //         href: "#",
+  //         description: "API access and integration tools for developers.",
+  //       },
+  //       {
+  //         title: "Healthcare",
+  //         href: "#",
+  //         description: "Specialized automation for healthcare workflows.",
+  //       },
+  //       {
+  //         title: "Finance",
+  //         href: "#",
+  //         description: "AI-driven process automation for financial services.",
+  //       },
+  //       {
+  //         title: "Education",
+  //         href: "#",
+  //         description:
+  //           "Streamline administrative tasks in educational institutions.",
+  //       },
+  //     ],
+  //   },
+  // },
+  {
+    href: "/explore",
+    label: "Agents",
+  },
+  {
+    href: "/faq",
+    label: "FAQ",
+  },
+  {
+    href: "/docs",
+    label: "Docs",
+  },
+];
+
+export default function DrawerDemo({
   login,
 }: {
   login: (options?: LoginModalOptions | React.MouseEvent<any, any>) => void;
 }) {
+  const pathName = usePathname();
+
+  const [open, setOpen] = React.useState(false);
+
   return (
-    <Drawer>
+    <Drawer open={open} onOpenChange={(val) => setOpen(val)}>
       <DrawerTrigger>
         <IoMenuSharp className="text-2xl" />
       </DrawerTrigger>
@@ -29,23 +117,32 @@ export default function drawerDemo({
             <Link
               href="/"
               title="brand-logo"
-              className="relative mr-6 flex items-center space-x-2"
+              className="grow relative flex items-center space-x-2"
             >
-              <Icons.logo className="w-auto h-[40px]" />
+              <Image
+                src="/logo.png"
+                height={44}
+                width={44}
+                alt="logo"
+                className="rounded-md shadow"
+              />
               <span className="font-bold text-xl">{siteConfig.name}</span>
             </Link>
           </div>
           <nav>
             <ul className="mt-7 text-left">
-              {siteConfig.header.map((item, index) => (
+              {headerLinks.map((item, index) => (
                 <li key={index} className="my-3">
-                  {item.trigger ? (
+                  <Link
-                    <span className="font-semibold">{item.trigger}</span>
+                    href={index === 0 ? item.href : "/#"}
-                  ) : (
+                    className={cn(
-                    <Link href={item.href || ""} className="font-semibold">
+                      "font-semibold",
+                      item.href === pathName && "underline"
+                    )}
+                    onClick={() => setOpen(false)}
+                  >
                     {item.label}
                   </Link>
-                  )}
                 </li>
               ))}
             </ul>

src/components/menu.tsx

@@ -14,67 +14,116 @@ import {
 } from "@/components/ui/navigation-menu";
 import { siteConfig } from "@/lib/config";
 import { cn } from "@/lib/utils";
+import { Icons } from "@/components/icons";
+import { usePathname } from "next/navigation";
+
+const headerLinks = [
+  // {
+  //   trigger: "Features",
+  //   content: {
+  //     main: {
+  //       icon: <Icons.logo className="h-6 w-6" />,
+  //       title: "AI-Powered Automation",
+  //       description: "Streamline your workflow with intelligent automation.",
+  //       href: "#",
+  //     },
+  //     items: [
+  //       {
+  //         href: "#",
+  //         title: "Task Automation",
+  //         description: "Automate repetitive tasks and save time.",
+  //       },
+  //       {
+  //         href: "#",
+  //         title: "Workflow Optimization",
+  //         description: "Optimize your processes with AI-driven insights.",
+  //       },
+  //       {
+  //         href: "#",
+  //         title: "Intelligent Scheduling",
+  //         description: "AI-powered scheduling for maximum efficiency.",
+  //       },
+  //     ],
+  //   },
+  // },
+  // {
+  //   trigger: "Solutions",
+  //   content: {
+  //     items: [
+  //       {
+  //         title: "For Small Businesses",
+  //         href: "#",
+  //         description: "Tailored automation solutions for growing companies.",
+  //       },
+  //       {
+  //         title: "Enterprise",
+  //         href: "#",
+  //         description: "Scalable AI automation for large organizations.",
+  //       },
+  //       {
+  //         title: "Developers",
+  //         href: "#",
+  //         description: "API access and integration tools for developers.",
+  //       },
+  //       {
+  //         title: "Healthcare",
+  //         href: "#",
+  //         description: "Specialized automation for healthcare workflows.",
+  //       },
+  //       {
+  //         title: "Finance",
+  //         href: "#",
+  //         description: "AI-driven process automation for financial services.",
+  //       },
+  //       {
+  //         title: "Education",
+  //         href: "#",
+  //         description:
+  //           "Streamline administrative tasks in educational institutions.",
+  //       },
+  //     ],
+  //   },
+  // },
+  {
+    href: "/explore",
+    label: "Agents",
+  },
+  {
+    href: "/faq",
+    label: "FAQ",
+  },
+  {
+    href: "/docs",
+    label: "Docs",
+  },
+];
 
 export default function NavigationMenuDemo() {
+  const pathName = usePathname();
+
+  console.log(pathName);
+
   return (
     <NavigationMenu>
       <NavigationMenuList>
-        {siteConfig.header.map((item, index) => (
+        {headerLinks.map((item, index) => (
           <NavigationMenuItem key={index}>
-            {item.trigger ? (
-              <>
-                <NavigationMenuTrigger>{item.trigger}</NavigationMenuTrigger>
-                <NavigationMenuContent>
-                  <ul
-                    className={`grid gap-3 p-6 ${
-                      item.content.main
-                        ? "md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]"
-                        : "w-[400px] md:w-[500px] md:grid-cols-2 lg:w-[600px]"
-                    }`}
-                  >
-                    {item.content.main && (
-                      <li className="row-span-3">
-                        <NavigationMenuLink asChild>
             <Link
-                            className="flex h-full w-full select-none flex-col justify-end rounded-md bg-primary/10 from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+              // href={item.href || ""}
-                            href={item.content.main.href}
+              href={index === 0 ? item.href : "/#"}
-                          >
-                            {item.content.main.icon}
-                            <div className="mb-2 mt-4 text-lg font-medium">
-                              {item.content.main.title}
-                            </div>
-                            <p className="text-sm leading-tight text-muted-foreground">
-                              {item.content.main.description}
-                            </p>
-                          </Link>
-                        </NavigationMenuLink>
-                      </li>
-                    )}
-                    {item.content.items.map((subItem, subIndex) => (
-                      <ListItem
-                        key={subIndex}
-                        href={subItem.href}
-                        title={subItem.title}
-                        className="hover:bg-primary/10"
-                      >
-                        {subItem.description}
-                      </ListItem>
-                    ))}
-                  </ul>
-                </NavigationMenuContent>
-              </>
-            ) : (
-              <Link
-                href={item.href || ""}
               target="_arya"
               legacyBehavior
               passHref
             >
-                <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+              <NavigationMenuLink
+                className={cn(
+                  navigationMenuTriggerStyle(),
+                  item.href === pathName && "underline"
+                )}
+              >
                 {item.label}
               </NavigationMenuLink>
             </Link>
-            )}
           </NavigationMenuItem>
         ))}
       </NavigationMenuList>

src/components/sections/cta.tsx

@@ -1,5 +1,9 @@
+"use client";
+
 import Link from "next/link";
 
+import { motion } from "framer-motion";
+
 import { Rocket } from "lucide-react";
 
 import { cn } from "@/lib/utils";
@@ -7,6 +11,8 @@ import { cn } from "@/lib/utils";
 import { buttonVariants } from "@/components/ui/button";
 import Section from "@/components/section";
 
+const ease = [0.16, 1, 0.3, 1];
+
 export default function CtaSection() {
   return (
     <Section
@@ -15,7 +21,12 @@ export default function CtaSection() {
       subtitle="Join us and try our agentic AI into your operations."
       className="bg-primary/10 dark:bg-primary/70 rounded-xl py-16"
     >
-      <div className="flex flex-col w-full sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4 pt-4">
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ delay: 0.8, duration: 0.8, ease }}
+        className="flex flex-col w-full sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4 pt-4"
+      >
         <Link
           href={`${process.env.NEXT_PUBLIC_DASHBOARD_URL}/explore`}
           className={cn(
@@ -26,7 +37,7 @@ export default function CtaSection() {
           <Rocket className="h-6 w-6" />
           Get started
         </Link>
-      </div>
+      </motion.div>
     </Section>
   );
 }

src/components/sections/footer.tsx

@@ -4,15 +4,32 @@ import Image from "next/image";
 import { ChevronRight } from "lucide-react";
 
 import { siteConfig } from "@/lib/config";
+import { buttonVariants } from "../ui/button";
+import { FaBook, FaDiscord } from "react-icons/fa";
+import { FaXTwitter } from "react-icons/fa6";
+
+const headerLinks = [
+  {
+    title: "Resources",
+    links: [
+      { href: "#", text: "FAQ", icon: null },
+      { href: "#", text: "Documentation", icon: null },
+      // { href: "#", text: "Pricing", icon: null },
+      // { href: "#", text: "API", icon: null },
+    ],
+  },
+];
 
 export default function Footer() {
   return (
     <footer>
-      <div className="layout py-16 sm:px-10 px-5 pb-0">
+      <div className="layout py-16 sm:px-10 px-5">
-        <a
+        <div className="grid sm:grid-cols-3">
+          <div>
+            <Link
               href="/"
               title={siteConfig.name}
-          className="relative mr-6 flex items-center space-x-2"
+              className="mb-5 relative mr-6 flex items-center space-x-2"
             >
               <Image
                 src="/logo.png"
@@ -21,12 +38,46 @@ export default function Footer() {
                 alt="logo"
                 className="rounded-md shadow"
               />
-          {/* <Icons.logo className="w-auto h-[40px]" /> */}
               <span className="font-bold text-xl">{siteConfig.name}</span>
-        </a>
+            </Link>
-
+            <p className="mb-5">Build advanced custom ai agents with no code</p>
-        <div className="grid md:grid-cols-3 lg:grid-cols-4 sm:grid-cols-2 mt-8">
+            <ul className="flex gap-3">
-          {siteConfig.footer.map((section, index) => (
+              <li>
+                <Link
+                  href="/"
+                  className={buttonVariants({
+                    variant: "outline",
+                    size: "icon",
+                  })}
+                >
+                  <FaBook className="text-primary" />
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/"
+                  className={buttonVariants({
+                    variant: "outline",
+                    size: "icon",
+                  })}
+                >
+                  <FaXTwitter className="text-primary" />
+                </Link>
+              </li>
+              <li>
+                <Link
+                  href="/"
+                  className={buttonVariants({
+                    variant: "outline",
+                    size: "icon",
+                  })}
+                >
+                  <FaDiscord className="text-primary" />
+                </Link>
+              </li>
+            </ul>
+          </div>
+          {headerLinks.map((section, index) => (
             <div key={index} className="mb-5">
               <h2 className="font-semibold">{section.title}</h2>
               <ul>
@@ -46,27 +97,6 @@ export default function Footer() {
             </div>
           ))}
         </div>
-        <div className="max-w-6xl mx-auto border-t py-2 grid md:grid-cols-2 h-full justify-between w-full grid-cols-1 gap-1">
-          <span className="text-sm tracking-tight text-foreground">
-            Copyright © {new Date().getFullYear()}{" "}
-            <Link href="/" className="cursor-pointer">
-              {siteConfig.name}
-            </Link>{" "}
-            - {siteConfig.description}
-          </span>
-          <ul className="flex justify-start md:justify-end text-sm tracking-tight text-foreground">
-            <li className="mr-3 md:mx-4">
-              <Link href="#" target="_blank" rel="noopener noreferrer">
-                Privacy Policy
-              </Link>
-            </li>
-            <li className="mr-3 md:mx-4">
-              <Link href="#" target="_blank" rel="noopener noreferrer">
-                Terms of Service
-              </Link>
-            </li>
-          </ul>
-        </div>
       </div>
     </footer>
   );

src/components/sections/header.tsx

@@ -26,7 +26,9 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Button, buttonVariants } from "@/components/ui/button";
+import Menu from "@/components/menu";
 import Spinner from "../spinner";
+import { Skeleton } from "../ui/skeleton";
 
 export default function Header() {
   const [addBorder, setAddBorder] = React.useState(false);
@@ -66,11 +68,11 @@ export default function Header() {
     <header
       className={"h-16 sticky top-0 z-50 py-2 bg-background/60 backdrop-blur"}
     >
-      <div className="flex justify-between items-center container">
+      <div className="flex items-center layout">
         <Link
           href="/"
           title="brand-logo"
-          className="relative mr-6 flex items-center space-x-2"
+          className="grow relative flex items-center space-x-2"
         >
           <Image
             src="/logo.png"
@@ -84,9 +86,12 @@ export default function Header() {
 
         <div className="hidden lg:block">
           <div className="flex items-center ">
+            <nav className="mr-10">
+              <Menu />
+            </nav>
             <div className="gap-2 flex">
               {!ready ? (
-                <Spinner />
+                <Skeleton className="h-10 w-32" />
               ) : (
                 <>
                   {authenticated && user ? (
@@ -162,7 +167,7 @@ export default function Header() {
             </div>
           </div>
         </div>
-        <div className="ml-2 mt-2 cursor-pointer block lg:hidden">
+        <div className="ml-1 mt-2 cursor-pointer block lg:hidden">
           {authenticated && user ? (
             <DropdownMenu>
               <DropdownMenuTrigger className="max-w-48 flex items-center gap-2 border p-2 rounded-md">
@@ -225,6 +230,9 @@ export default function Header() {
             </Button>
           )}
         </div>
+        <div className="ml-1 mt-2 cursor-pointer block lg:hidden">
+          <Drawer login={login} />
+        </div>
       </div>
       <hr
         className={cn(

src/components/sections/hero.tsx

@@ -20,30 +20,14 @@ function HeroPill() {
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.8, ease }}
     >
-      <Link
+      <div className="flex w-auto items-center space-x-2 rounded-full bg-primary/20 px-2 py-1 ring-1 ring-accent whitespace-pre">
-        href={process.env.NEXT_PUBLIC_DASHBOARD_URL!}
-        className="flex w-auto items-center space-x-2 rounded-full bg-primary/20 px-2 py-1 ring-1 ring-accent whitespace-pre"
-      >
         <div className="w-fit rounded-full bg-accent px-2 py-0.5 text-center text-xs font-medium text-primary sm:text-sm">
           📣 Announcement
         </div>
         <p className="text-xs font-medium text-primary sm:text-sm">
           Introducing beactio.ai
         </p>
-        <svg
+      </div>
-          width="12"
-          height="12"
-          className="ml-1"
-          viewBox="0 0 12 12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M8.78141 5.33312L5.20541 1.75712L6.14808 0.814453L11.3334 5.99979L6.14808 11.1851L5.20541 10.2425L8.78141 6.66645H0.666748V5.33312H8.78141Z"
-            fill="hsl(var(--primary))"
-          />
-        </svg>
-      </Link>
     </motion.div>
   );
 }
@@ -158,7 +142,7 @@ function HeroImage() {
 export default function Hero2() {
   return (
     <section id="hero">
-      <div className="relative flex w-full flex-col items-center justify-start px-4 pt-32 sm:px-6 sm:pt-24 md:pt-32 lg:px-8">
+      <div className="relative flex w-full flex-col items-center justify-start px-4 py-32 sm:px-6 sm:py-24 md:py-32 lg:px-8">
         <HeroPill />
         <HeroTitles />
         <HeroCTA />

src/components/ui/navigation-menu.tsx

@@ -41,7 +41,7 @@ NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName;
 const NavigationMenuItem = NavigationMenuPrimitive.Item;
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-10 w-max items-center justify-center rounded-md  px-4 py-2 text-sm font-medium transition-colors hover:bg-primary/10 hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-primary/10 data-[state=open]:bg-primary/10"
+  "group inline-flex h-10 w-max items-center justify-center rounded-md  px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-primary focus:bg-accent focus:text-primary focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[active]:bg-accent data-[state=open]:bg-accent"
 );
 
 const NavigationMenuTrigger = React.forwardRef<

src/lib/config.tsx

@@ -216,15 +216,15 @@ export const siteConfig = {
     //     { href: "#", text: "Partners", icon: null },
     //   ],
     // },
-    {
+    // {
-      title: "Resources",
+    //   title: "Resources",
-      links: [
+    //   links: [
-        // { href: "#", text: "Community", icon: null },
+    //     // { href: "#", text: "Community", icon: null },
-        // { href: "#", text: "Contact", icon: null },
+    //     // { href: "#", text: "Contact", icon: null },
-        { href: "#", text: "Support", icon: null },
+    //     { href: "#", text: "Support", icon: null },
-        { href: "#", text: "Status", icon: null },
+    //     { href: "#", text: "Status", icon: null },
-      ],
+    //   ],
-    },
+    // },
     {
       title: "Social",
       links: [