feat: enhance About page layout and add Calendar icon for authenticated users

src/app/(legal)/about/page.tsx

@@ -46,59 +46,67 @@ export default function About() {
   };
 
   return (
-    <div className="container max-w-screen-xl p-10">
+    <div className="container  bg-neutral-100">
-      <div className="flex flex-col items-center justify-center">
+      <div className="">
-        <h1 className="mt-3 font-bold text-lg md:text-5xl font-black">Growth opportunities for all sides </h1>
+        <div className="flex flex-col items-center justify-center">
-        <h1 className="mt-3 font-bold text-lg md:text-5xl font-black">of the investment market</h1>
+          <h1 className="mt-3  text-lg md:text-5xl font-black">Growth opportunities for all sides </h1>
-        <h1 className="text-gray-500 text-2xl mt-1">
+          <h1 className="mt-3 text-lg md:text-5xl font-black">of the investment market</h1>
-          B2DVentures is where both accredited and non-accredited investors meet
+          <h1 className="text-gray-500 text-2xl mt-1">
-        </h1>
+            B2DVentures is where both accredited and non-accredited investors meet
-        <h1 className="text-gray-500 text-2xl">entrepreneurs and access high-growth potential deals across a range</h1>
+          </h1>
-        <h1 className="text-gray-500 text-2xl">of private markets.</h1>
+          <h1 className="text-gray-500 text-2xl">
-      </div>
+            entrepreneurs and access high-growth potential deals across a range
-      <div className="mt-10">
+          </h1>
-        <div className="grid grid-cols-1 md:grid-cols-[1fr,auto,1fr] gap-3">
+          <h1 className="text-gray-500 text-2xl">of private markets.</h1>
+        </div>
+        <div className="mt-10">
+          <div className="grid grid-cols-1 md:grid-cols-[1fr,auto,1fr] gap-3">
+            <InfoCard
+              imageSrc={imageData.img1}
+              imageAlt="Image1"
+              heading="Individual investors"
+              content={[
+                "B2DVentures's success has been built off our hundreds",
+                "of sourced private deals, all available for",
+                "investment from you with as little as $10 or as ",
+                "much as $124,000.",
+              ]}
+              link="/deals"
+              buttonText="Explore opportunities"
+            />
+            <Separator orientation="vertical" />
+            <InfoCard
+              imageSrc={imageData.img2}
+              imageAlt="Image2"
+              heading="Accredited investors"
+              content={[
+                "The benefits of the Republic platform, optimized for",
+                "accredited investors. Access a curated investor",
+                "portal for unique private investment opportunities. ",
+              ]}
+              link="/dataroom/overview"
+              buttonText="Learn more"
+            />
+          </div>
+          <Separator className="mt-5 mb-5" />
           <InfoCard
-            imageSrc={imageData.img1}
+            imageSrc={imageData.img3}
-            imageAlt="Image1"
+            imageAlt="Image3"
-            heading="Individual investors"
+            heading="Entrepreneurs"
             content={[
-              "B2DVentures's success has been built off our hundreds",
+              "Seek funding from a wider base of diverse",
-              "of sourced private deals, all available for",
+              "investors while simultaneously growing a loyal",
-              "investment from you with as little as $10 or as ",
+              "base and leveraging Republic’s private investment",
-              "much as $124,000.",
+              "network.",
             ]}
-            link="/deals"
+            link="/project/apply"
-            buttonText="Explore opportunities"
+            buttonText="Raise money"
-          />
-          <Separator orientation="vertical" />
-          <InfoCard
-            imageSrc={imageData.img2}
-            imageAlt="Image2"
-            heading="Accredited investors"
-            content={[
-              "The benefits of the Republic platform, optimized for",
-              "accredited investors. Access a curated investor",
-              "portal for unique private investment opportunities. ",
-            ]}
-            link="/dataroom/overview"
-            buttonText="Learn more"
           />
         </div>
-        <Separator className="mt-5 mb-5" />
+      </div>
-        <InfoCard
+      <div className="flex flex-col items-center justify-center mt-10">
-          imageSrc={imageData.img3}
+        <h1 className="font-black text-5xl ">Built by a diverse team with deep </h1>
-          imageAlt="Image3"
+        <h1 className="font-black text-5xl ">expertise in private investing</h1>
-          heading="Entrepreneurs"
-          content={[
-            "Seek funding from a wider base of diverse",
-            "investors while simultaneously growing a loyal",
-            "base and leveraging Republic’s private investment",
-            "network.",
-          ]}
-          link="/project/apply"
-          buttonText="Raise money"
-        />
       </div>
 
       {/* <div className="border border-border rounded-md">

src/components/navigationBar/AuthenticatedComponents.tsx

@@ -10,7 +10,7 @@ import {
   DropdownMenuTrigger,
 } from "@/components/ui/dropdown-menu";
 import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Bell, Heart, Wallet, ChartPie } from "lucide-react";
+import { Bell, Heart, Wallet, ChartPie, CalendarClock } from "lucide-react";
 import { LogoutButton } from "@/components/auth/logoutButton";
 import { useUserRole } from "@/hooks/useUserRole";
 import CustomTooltip from "../customToolTip";
@@ -54,13 +54,25 @@ export const AuthenticatedComponents = ({ uid, avatarUrl, notificationCount }: A
           <Wallet className="cursor-pointer" />
         </Link>
       </CustomTooltip>
+      {data?.role === "investor" && (
+        <div className="flex gap-2">
+          <CustomTooltip message="Calendar">
+            <Link href="/calendar/">
+              <CalendarClock />
+            </Link>
+          </CustomTooltip>
+        </div>
+      )}
+
       {/*chart pie icon for bussiness's dashboard */}
       {data?.role === "business" && (
-        <CustomTooltip message="Dashboard">
+        <div className="flex gap-2">
-          <Link href="/dashboard">
+          <CustomTooltip message="Dashboard">
-            <ChartPie />
+            <Link href="/dashboard">
-          </Link>
+              <ChartPie />
-        </CustomTooltip>
+            </Link>
+          </CustomTooltip>
+        </div>
       )}
       <DropdownMenu>
         <DropdownMenuTrigger asChild>
@@ -86,6 +98,14 @@ export const AuthenticatedComponents = ({ uid, avatarUrl, notificationCount }: A
               <Link href="/admin">Admin</Link>
             </DropdownMenuItem>
           )}
+          {data?.role === "business" && (
+            <>
+              <DropdownMenuItem>
+                <Link href="/calendar/manage">Calendar</Link>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+            </>
+          )}
           {data != null && data != undefined && data.role === "business" && (
             <DropdownMenuItem>
               <Link href="/dataroom/manage">Dataroom</Link>