Merge branch 'main' into front-end

next.config.mjs

@@ -1,15 +1,22 @@
-/** @type {import('next').NextConfig} */
+const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL_SOURCE;
+
 const nextConfig = {
-    images: {
+  reactStrictMode: true, // From the second config
-      remotePatterns: [
+  images: {
-        {
+    remotePatterns: [
-          protocol: 'https',
+      {
-          hostname: 'upload.wikimedia.org',
+        protocol: "https",
-          pathname: '/wikipedia/**', 
+        hostname: SUPABASE_URL,
-        },
+        port: "",
-      ],
+        pathname: "/storage/v1/object/sign/**", // From the second config
-    },
+      },
-  };
+      {
-  
+        protocol: "https",
-  export default nextConfig;
+        hostname: "upload.wikimedia.org",
-  
+        pathname: "/wikipedia/**", // From the first config
+      },
+    ],
+  },
+};
+
+export default nextConfig;

package.json

@@ -30,6 +30,7 @@
     "b2d-ventures": "file:",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.1",
+    "date-fns": "^4.1.0",
     "dotenv": "^16.4.5",
     "embla-carousel-react": "^8.2.0",
     "lucide-react": "^0.428.0",
@@ -39,18 +40,21 @@
     "react-countup": "^6.5.3",
     "react-dom": "^18",
     "react-hot-toast": "^2.4.1",
+    "react-markdown": "^9.0.1",
     "recharts": "^2.12.7",
     "tailwind-merge": "^2.5.2",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {
     "@playwright/test": "^1.47.2",
+    "@tailwindcss/typography": "^0.5.15",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
+    "supabase": "^1.200.3",
     "tailwindcss": "^3.4.1",
     "typescript": "^5"
   }

src/app/(investment)/deals/[id]/followShareButton.tsx

@@ -0,0 +1,61 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip";
+import { ShareIcon, StarIcon } from "lucide-react";
+import { redirect } from "next/navigation";
+import useSession from "@/lib/supabase/useSession";
+import toast from "react-hot-toast";
+
+const FollowShareButtons = () => {
+  const [progress, setProgress] = useState(0);
+  const [tab, setTab] = useState("Pitch");
+  const { session, loading } = useSession();
+  const user = session?.user;
+  const [sessionLoaded, setSessionLoaded] = useState(false);
+  const [isFollow, setIsFollow] = useState(false);
+
+  useEffect(() => {
+    if (!loading) {
+      setSessionLoaded(true);
+    }
+  }, [loading]);
+
+  const handleShare = () => {
+    const currentUrl = window.location.href;
+    if (document.hasFocus()) {
+      navigator.clipboard.writeText(currentUrl).then(() => {
+        toast.success("URL copied to clipboard!");
+      });
+    }
+  };
+  const handleFollow = () => {
+    if (user) {
+      setIsFollow((prevState) => !prevState);
+    } else {
+      redirect("/login");
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-2 gap-5 justify-self-end ">
+      <div className="mt-2 cursor-pointer" onClick={handleFollow}>
+        <TooltipProvider>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <StarIcon id="follow" fill={isFollow ? "#FFFF00" : "#fff"} strokeWidth={2} />
+            </TooltipTrigger>
+            <TooltipContent>
+              <p>Follow NVIDIA</p>
+            </TooltipContent>
+          </Tooltip>
+        </TooltipProvider>
+      </div>
+      <div onClick={handleShare} className="cursor-pointer mt-2">
+        <ShareIcon />
+      </div>
+    </div>
+  );
+};
+
+export default FollowShareButtons;

src/app/(investment)/deals/[id]/page.tsx

@@ -0,0 +1,162 @@
+import Image from "next/image";
+import Link from "next/link";
+
+import ReactMarkdown from "react-markdown";
+
+import * as Tabs from "@radix-ui/react-tabs";
+import { Button } from "@/components/ui/button";
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel";
+import { Card, CardContent, CardHeader, CardTitle, CardDescription } from "@/components/ui/card";
+import { Progress } from "@/components/ui/progress";
+import { Separator } from "@/components/ui/separator";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import FollowShareButtons from "./followShareButton";
+
+import { getProjectData } from "@/lib/data/projectQuery";
+
+export default async function ProjectDealPage({ params }: { params: { id: number } }) {
+  const supabase = createSupabaseClient();
+
+  const { data: projectData, error: projectDataError } = await getProjectData(supabase, params.id);
+
+  const carouselData = [
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+    { src: "/boiler1.jpg", alt: "Boiler 1" },
+  ];
+
+  if (projectDataError) {
+    return <div>Error</div>;
+  }
+
+  return (
+    <div className="container max-w-screen-xl my-5">
+      <div className="flex flex-col gap-y-10">
+        <div id="content">
+          {/* Name, star and share button packed */}
+          <div id="header" className="flex flex-col">
+            <div className="flex justify-between">
+              <span className="flex">
+                <Image src="/logo.svg" alt="logo" width={50} height={50} className="sm:scale-75" />
+                <h1 className="mt-3 font-bold  text-lg md:text-3xl">{projectData?.project_name}</h1>
+              </span>
+              <FollowShareButtons />
+            </div>
+            {/* end of pack */}
+            <p className="mt-2 sm:text-sm">{projectData?.project_short_description}</p>
+            <div className="flex flex-wrap mt-3">
+              {projectData?.tags.map((tag, index) => (
+                <span key={index} className="text-xs rounded-md bg-slate-200 dark:bg-slate-700 p-1 mx-1 mb-1">
+                  {tag.tag_name}
+                </span>
+              ))}
+            </div>
+          </div>
+          <div id="sub-content" className="flex flex-row mt-5">
+            {/* image carousel */}
+            <div id="image-corousel" className="shrink-0 w-[700px] flex flex-col">
+              <Carousel className="w-full h-full ml-1">
+                <CarouselContent className="flex h-full">
+                  {carouselData.map((item, index) => (
+                    <CarouselItem key={index}>
+                      <Image src={item.src} alt={item.alt} width={700} height={400} className="rounded-lg" />
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+                <CarouselPrevious />
+                <CarouselNext />
+              </Carousel>
+
+              <Carousel className="w-full ml-1 h-[100px]">
+                <CarouselContent className="flex space-x-1">
+                  {carouselData.map((item, index) => (
+                    <CarouselItem key={index} className="flex">
+                      <Image src={item.src} alt={item.alt} width={200} height={100} className="rounded-lg basis-0" />
+                    </CarouselItem>
+                  ))}
+                </CarouselContent>
+              </Carousel>
+            </div>
+            <div id="stats" className="flex flex-col w-full mt-4 pl-12">
+              <div className="pl-5">
+                <span>
+                  <h1 className="font-semibold text-xl md:text-4xl mt-8">${projectData?.total_investment}</h1>
+                  <p className="text-sm md:text-lg"> 5% raised of \$5M max goal</p>
+                  <Progress
+                    value={projectData?.total_investment / projectData?.target_investment}
+                    className="w-[60%] h-3 mt-3"
+                  />
+                </span>
+                <span>
+                  <h1 className="font-semibold text-4xl md:mt-8">
+                    <p className="text-xl md:text-4xl">{projectData?.total_investment}</p>
+                  </h1>
+                  <p className="text-sm md:text-lg"> Investors</p>
+                </span>
+                <Separator decorative className="mt-3 w-3/4 ml-5" />
+                <span>
+                  <h1 className="font-semibold text-xl md:text-4xl mt-8 ml-5"></h1>
+                  <p className="text-xl md:text-4xl">1 hours</p>
+                  <p> Left to invest</p>
+                </span>
+                <Button className="mt-5 w-3/4 h-12">
+                  <Link href={`/invest/${params.id}`}>Invest in {projectData?.project_name}</Link>
+                </Button>
+              </div>
+            </div>
+          </div>
+        </div>
+        {/* menu */}
+        <div id="deck">
+          <div className="flex w-fit">
+            <Tabs.Root defaultValue="pitch">
+              <Tabs.List className="list-none flex gap-10 text-lg md:text-xl">
+                <Tabs.Trigger value="pitch">Pitch</Tabs.Trigger>
+                <Tabs.Trigger value="general">General Data</Tabs.Trigger>
+                <Tabs.Trigger value="update">Updates</Tabs.Trigger>
+              </Tabs.List>
+              <Separator className="mb-4 mt-2 w-full border-1" />
+              <Tabs.Content value="pitch">
+                <Card>
+                  <CardHeader>
+                    <CardTitle></CardTitle>
+                    <CardDescription></CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <div className="prose prose-sm max-w-none">
+                      <ReactMarkdown>{projectData?.project_description || "No pitch available."}</ReactMarkdown>
+                    </div>
+                  </CardContent>
+                </Card>
+              </Tabs.Content>
+              <Tabs.Content value="general">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>general</CardTitle>
+                    <CardDescription>general Description</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <p>general Content</p>
+                  </CardContent>
+                </Card>
+              </Tabs.Content>
+              <Tabs.Content value="update">
+                <Card>
+                  <CardHeader>
+                    <CardTitle>update</CardTitle>
+                    <CardDescription>update Description</CardDescription>
+                  </CardHeader>
+                  <CardContent>
+                    <p>update Content</p>
+                  </CardContent>
+                </Card>
+              </Tabs.Content>
+            </Tabs.Root>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/(investment)/deals/page.tsx

@@ -0,0 +1,273 @@
+"use client";
+
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { useState } from "react";
+import { Clock3Icon, UserIcon, UsersIcon } from "lucide-react";
+import { Separator } from "@/components/ui/separator";
+import { ProjectCard } from "@/components/projectCard";
+import { getAllTagsQuery, getALlFundedStatusQuery, getAllBusinessTypeQuery } from "@/lib/data/dropdownQuery";
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
+import { searchProjectsQuery, FilterParams, FilterProjectQueryParams } from "@/lib/data/projectQuery";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import Link from "next/link";
+
+const ProjectSection = ({ filteredProjects }) => {
+  interface Tags {
+    tag_name: string;
+  }
+
+  if (!filteredProjects) {
+    return <div>No projects found!</div>;
+  }
+
+  return (
+    <div>
+      <div className="mt-10">
+        <h2 className="text-2xl">Deals</h2>
+        <p className="mt-3">The deals attracting the most interest right now</p>
+      </div>
+
+      {/* Block for all the deals */}
+      <div className="mt-10 grid grid-cols-3 gap-4">
+        {filteredProjects.map((item, index) => (
+          <Link key={index} href={`/deals/${item.project_id}`}>
+            <ProjectCard
+              key={index}
+              name={item.project_name}
+              description={item.project_short_description}
+              joinDate={item.published_time}
+              imageUri={item.card_image_url}
+              location={item.business_location}
+              minInvestment={item.min_investment}
+              totalInvestor={item.total_investment}
+              totalRaised={item.target_investment}
+              tags={item.tags.map((tag: Tags) => tag.tag_name)}
+            />
+          </Link>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+const ShowFilter = ({ filterParams, clearAll }: { filterParams: FilterParams; clearAll: () => void }) => {
+  const { searchTerm, tagsFilter, projectStatusFilter, businessTypeFilter, sortByTimeFilter } = filterParams;
+
+  if (!searchTerm && !tagsFilter && !projectStatusFilter && !businessTypeFilter && !sortByTimeFilter) {
+    return <div></div>;
+  }
+
+  if (
+    projectStatusFilter === "all" &&
+    businessTypeFilter === "all" &&
+    sortByTimeFilter === "all" &&
+    (!tagsFilter || tagsFilter.length === 0)
+  ) {
+    return <div></div>;
+  }
+
+  return (
+    <div className="flex flex-wrap gap-2">
+      {searchTerm && (
+        <Button key={searchTerm} variant="secondary">
+          {searchTerm}
+        </Button>
+      )}
+
+      {tagsFilter &&
+        tagsFilter.map((tag: string) => (
+          <Button key={tag} variant="secondary">
+            {tag}
+          </Button>
+        ))}
+
+      {projectStatusFilter && projectStatusFilter !== "all" && (
+        <Button key={projectStatusFilter} variant="secondary">
+          {projectStatusFilter}
+        </Button>
+      )}
+
+      {businessTypeFilter && businessTypeFilter !== "all" && (
+        <Button key={businessTypeFilter} variant="secondary">
+          {businessTypeFilter}
+        </Button>
+      )}
+
+      {sortByTimeFilter && sortByTimeFilter !== "all" && (
+        <Button key={sortByTimeFilter} variant="secondary">
+          {sortByTimeFilter}
+        </Button>
+      )}
+
+      {/* Clear All button */}
+      <Button variant="destructive" onClick={clearAll}>
+        Clear All
+      </Button>
+    </div>
+  );
+};
+
+export default function Deals() {
+  const supabase = createSupabaseClient();
+
+  const [searchTerm, setSearchTerm] = useState("");
+  const [searchTermVisual, setSearchTermVisual] = useState("");
+  const [sortByTimeFilter, setSortByTimeFilter] = useState("all");
+  const [businessTypeFilter, setBusinessTypeFilter] = useState("all");
+  const [tagFilter, setTagFilter] = useState([]);
+  const [projectStatusFilter, setprojectStatusFilter] = useState("all");
+  const [page, setPage] = useState(1);
+  const [pageSize, setPageSize] = useState(4);
+
+  const filterParams: FilterParams = {
+    searchTerm,
+    tagsFilter: tagFilter,
+    projectStatusFilter,
+    businessTypeFilter,
+    sortByTimeFilter,
+  };
+
+  const filterProjectQueryParams: FilterProjectQueryParams = {
+    searchTerm,
+    tagsFilter: tagFilter,
+    projectStatusFilter,
+    businessTypeFilter,
+    sortByTimeFilter,
+    page,
+    pageSize,
+  };
+
+  const { data: tags, isLoading: isLoadingTags, error: tagsLoadingError } = useQuery(getAllTagsQuery(supabase));
+  const {
+    data: projectStatus,
+    isLoading: isLoadingFunded,
+    error: fundedLoadingError,
+  } = useQuery(getALlFundedStatusQuery(supabase));
+  const {
+    data: businessType,
+    isLoading: isLoadingBusinessType,
+    error: businessTypeLoadingError,
+  } = useQuery(getAllBusinessTypeQuery(supabase));
+
+  const {
+    data: projects,
+    isLoading: isLoadingProjects,
+    error: projectsLoadingError,
+  } = useQuery(searchProjectsQuery(supabase, filterProjectQueryParams));
+
+  const clearAll = () => {
+    setSearchTerm("");
+    setTagFilter([]);
+    setprojectStatusFilter("all");
+    setBusinessTypeFilter("all");
+    setSortByTimeFilter("all");
+  };
+
+  return (
+    <div className="container max-w-screen-xl mx-auto px-4">
+      <div className="h-auto mt-10">
+        <h1 className="text-4xl font-bold">Investment Opportunities</h1>
+        <br />
+        <p>Browse current investment opportunities on B2DVenture.</p>
+        <p>
+          All companies are <u>vetted & pass due diligence.</u>
+        </p>
+
+        {/* {JSON.stringify(projects, null, 4)} */}
+
+        <div className="flex mt-10 gap-3">
+          <Input
+            type="text"
+            placeholder="Search projects"
+            value={searchTermVisual}
+            onChange={(e) => setSearchTermVisual(e.target.value)}
+            onKeyDown={(e) => {
+              if (e.key === "Enter") {
+                setSearchTerm(e.currentTarget.value);
+              }
+            }}
+          />
+
+          {/* Posted At Filter */}
+          <Select onValueChange={(value) => setSortByTimeFilter(value)}>
+            <SelectTrigger className="w-full sm:w-[180px]">
+              <Clock3Icon className="ml-2" />
+              <SelectValue placeholder="Posted at" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">All Time</SelectItem>
+              <SelectItem value="Today">Today</SelectItem>
+              <SelectItem value="This Week">This Week</SelectItem>
+              <SelectItem value="This Month">This Month</SelectItem>
+            </SelectContent>
+          </Select>
+
+          {/* Business Type Filter */}
+          <Select onValueChange={(value) => setBusinessTypeFilter}>
+            <SelectTrigger className="w-full sm:w-[180px]">
+              <UsersIcon className="ml-2" />
+              <SelectValue placeholder="Business Type" />
+            </SelectTrigger>
+            <SelectContent>
+              {isLoadingBusinessType ? (
+                <SelectItem disabled value="_">
+                  Loading...
+                </SelectItem>
+              ) : businessTypeLoadingError ? (
+                <SelectItem disabled value="_">
+                  No data available
+                </SelectItem>
+              ) : (
+                <>
+                  <SelectItem value="all">All Types</SelectItem>
+                  {businessType &&
+                    businessType.map((type) => (
+                      <SelectItem key={type.id} value={type.value}>
+                        {type.value}
+                      </SelectItem>
+                    ))}
+                </>
+              )}
+            </SelectContent>
+          </Select>
+
+          {/* Project Status Filter */}
+          <Select onValueChange={(key) => setprojectStatusFilter(key)}>
+            <SelectTrigger className="w-full sm:w-[180px]">
+              <UserIcon className="ml-2" />
+              <SelectValue placeholder="Project Status" />
+            </SelectTrigger>
+            <SelectContent>
+              {isLoadingFunded ? (
+                <SelectItem disabled value="_">
+                  Loading...
+                </SelectItem>
+              ) : fundedLoadingError ? (
+                <SelectItem disabled value="_">
+                  No data available
+                </SelectItem>
+              ) : (
+                <>
+                  <SelectItem value="all">All Statuses</SelectItem>
+                  {projectStatus &&
+                    projectStatus.map((status) => (
+                      <SelectItem key={status.id} value={status.value}>
+                        {status.value}
+                      </SelectItem>
+                    ))}
+                </>
+              )}
+            </SelectContent>
+          </Select>
+        </div>
+        <ShowFilter filterParams={filterParams} clearAll={clearAll} />
+        <Separator className="mt-10" />
+
+        {/* Project Cards Section */}
+        <ProjectSection filteredProjects={projects} />
+      </div>
+    </div>
+  );
+}

src/app/(user)/profile/page.tsx

@@ -0,0 +1,100 @@
+// components/ProfilePage.tsx
+
+import React from "react";
+import Image from "next/image";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import { getUserProfile } from "@/lib/data/userQuery";
+import { Tables } from "@/types/database.types";
+import { format } from "date-fns";
+import ReactMarkdown from "react-markdown";
+
+interface Profile extends Tables<"Profiles"> {}
+
+export default async function ProfilePage() {
+  const supabase = createSupabaseClient();
+
+  const {
+    data: { user },
+  } = await supabase.auth.getUser();
+
+  if (!user) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p className="text-red-500">No user found!</p>
+      </div>
+    );
+  }
+
+  const { data: profileData, error } = await getUserProfile(supabase, user.id);
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p className="text-red-500">Error loading profile: {error}</p>
+      </div>
+    );
+  }
+
+  if (!profileData) {
+    return (
+      <div className="flex items-center justify-center h-screen">
+        <p>Loading profile...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="container max-w-screen-xl px-4 py-8">
+      <div className="bg-card border-2 border-border shadow-xl rounded-lg overflow-hidden">
+        <div className="bg-cover bg-center h-64 p-4" style={{ backgroundImage: "url(./banner.jpg)" }}>
+          <div className="flex justify-end">
+            <button className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">
+              Edit Profile
+            </button>
+          </div>
+        </div>
+        <div className="px-4 py-2">
+          {/* Upper */}
+          <div className="flex flex-row items-center gap-4">
+            {/* Profile Image */}
+            <div className="text-center">
+              <Image
+                src={profileData.avatar_url || "https://via.placeholder.com/150"}
+                alt={profileData.full_name || "Profile"}
+                width={150}
+                height={150}
+                className="rounded-full border-4 border-white -mt-16 mx-auto sm:mx-0"
+              />
+            </div>
+            {/* Name and Username */}
+            <div className="flex-grow text-center sm:text-left mt-4 sm:mt-0">
+              <h1 className="text-3xl font-bold">{profileData.full_name || "No Name"}</h1>
+              <p className="text-gray-600">@{profileData.username || "username"}</p>
+              {profileData.website && (
+                <p className="text-blue-500 hover:text-blue-700">
+                  <a href={profileData.website} target="_blank" rel="noopener noreferrer">
+                    {profileData.website}
+                  </a>
+                </p>
+              )}
+            </div>
+          </div>
+          {/* Lower */}
+          <div>
+            <div className="mt-6">
+              <h2 className="text-xl font-semibold mb-2">Bio</h2>
+              <div className="prose prose-sm max-w-none">
+                <ReactMarkdown>{profileData.bio || "No bio available."}</ReactMarkdown>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className="px-4 py-4 border-t">
+          <p className="text-sm text-gray-600">
+            Last updated: {profileData.updated_at ? format(new Date(profileData.updated_at), "PPpp") : "N/A"}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

src/app/auth/signup/page.tsx

@@ -0,0 +1,32 @@
+import Image from "next/image";
+import { Button } from "@/components/ui/button";
+import { Card, CardContent, CardFooter, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+import { SignupButton } from "@/components/auth/signupButton";
+import { SignupForm } from "@/components/auth/signupForm";
+
+export default function Signup() {
+  return (
+    <div
+      className="bg-cover bg-center min-h-screen flex items-center justify-center"
+      style={{ backgroundImage: "url(/signup.png)" }}>
+      <Card>
+        <CardHeader className="items-center">
+          <CardTitle className="text-2xl font-bold">Join Our Community</CardTitle>
+          <CardDescription>
+            Create an account and be a part of a thriving community of investors and innovators.
+          </CardDescription>
+        </CardHeader>
+        <CardContent className="flex flex-col gap-y-2 mx-28">
+          <p className="self-center font-semibold text-slate-800 dark:text-slate-200">Sign Up With</p>
+          <SignupForm />
+          <hr></hr>
+          <SignupButton />
+        </CardContent>
+        <CardFooter className="text-xs justify-center">
+          By signing up, you agree to the Terms of Service and acknowledge you’ve read our Privacy Policy.
+        </CardFooter>
+      </Card>
+    </div>
+  );
+}

src/app/deals/page.tsx

@@ -1,130 +0,0 @@
-"use client";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
-import { useState } from "react";
-import { Clock3Icon, MessageSquareIcon, UserIcon, UsersIcon } from "lucide-react";
-import { Separator } from "@/components/ui/separator";
-import { ExtendableCard } from "@/components/extendableCard";
-
-export default function Deals() {
-  const [postAtFilter, setPostAtFilter] = useState("");
-  const [contentTypeFilter, setContentTypeFilter] = useState("");
-  const [authorFilter, setAuthorFilter] = useState("");
-  const [groupsFilter, setGroupFilter] = useState("");
-  const [selectedTag, setSelectedTag] = useState("");
-  const data = [
-    {
-      name: "NVDA",
-      description: "Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology",
-      joinDate: "December 2021",
-      location: "Bangkok, Thailand",
-      tags: ["AI", "Technology"],
-      imageUri: "/login.png",
-      minInvestment: 10000,
-      totalInvestor: 58400,
-      totalRaised: 9000000,
-    },
-    {
-      name: "Apple Inc.",
-      description:
-        "Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store.",
-      joinDate: "February 2020",
-      location: "Cupertino, California, USA",
-      tags: ["Consumer Electronics", "Software"],
-      imageUri: "/money.png",
-      minInvestment: 10000,
-      totalInvestor: 58400,
-      totalRaised: 9000000,
-    },
-    {
-      name: "Google LLC",
-      description:
-        "Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system.",
-      joinDate: "April 2019",
-      location: "Mountain View, California, USA",
-      tags: ["Internet", "Search Engine"],
-      imageUri: "/money.png",
-      minInvestment: 10000,
-      totalInvestor: 5000,
-      totalRaised: 1500000000,
-    },
-    {
-      name: "Microsoft Corporation",
-      description: "Microsoft Corporation is a multinational technology company.",
-      joinDate: "January 2018",
-      location: "California, USA",
-      tags: ["Technology", "Software"],
-      imageUri: null,
-      minInvestment: 250,
-      totalInvestor: 5000,
-      totalRaised: 1500000,
-    },
-  ];
-
-  const filteredData = selectedTag ? data.filter((item) => item.tags.includes(selectedTag)) : data;
-
-  return (
-    <div className="container max-w-screen-xl mx-auto px-4">
-      <div className="h-auto mt-10">
-        <h1 className="text-4xl font-bold">Investment Opportunities</h1>
-        <br />
-        <p>Browse current investment opportunities on B2DVenture.</p>
-        <p>
-          All companies are <u>vetted & pass due diligence.</u>
-        </p>
-
-        {/* Filters */}
-        <div className="flex flex-wrap mt-10 gap-3">
-          <Select onValueChange={(value) => setPostAtFilter(value)}>
-            <SelectTrigger className="w-full sm:w-[180px]">
-              <Clock3Icon className="ml-2" />
-              <SelectValue placeholder="Posted at" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="Today">Today</SelectItem>
-              <SelectItem value="Yesterday">Yesterday</SelectItem>
-            </SelectContent>
-          </Select>
-
-          <Select onValueChange={(value) => setSelectedTag(value)}>
-            <SelectTrigger className="w-full sm:w-[180px]">
-              <MessageSquareIcon className="ml-2" />
-              <SelectValue placeholder="Tags" />
-            </SelectTrigger>
-            <SelectContent>
-              <SelectItem value="_">All Tags</SelectItem>
-              <SelectItem value="AI">AI</SelectItem>
-              <SelectItem value="Technology">Technology</SelectItem>
-              <SelectItem value="Consumer Electronics">Consumer Electronics</SelectItem>
-              <SelectItem value="Software">Software</SelectItem>
-              <SelectItem value="Internet">Internet</SelectItem>
-            </SelectContent>
-          </Select>
-        </div>
-        <Separator className="mt-10" />
-      </div>
-
-      <div className="mt-10">
-        <h2 className="text-2xl">Deals</h2>
-        <p className="mt-3">The deals attracting the most interest right now</p>
-      </div>
-
-      {/* Block for all the deals */}
-      <div className="mt-10 grid grid-cols-3 gap-4">
-        {filteredData.map((item, index) => (
-          <ExtendableCard
-            key={index}
-            name={item.name}
-            description={item.description}
-            joinDate={item.joinDate}
-            imageUri={item.imageUri}
-            location={item.location}
-            minInvestment={item.minInvestment}
-            totalInvestor={item.totalInvestor}
-            totalRaised={item.totalRaised}
-            tags={item.tags}
-          />
-        ))}
-      </div>
-    </div>
-  );
-}

src/app/find/page.tsx

@@ -1,85 +1,25 @@
 "use client";
 
 import { useSearchParams } from "next/navigation";
-import { SupabaseClient } from "@supabase/supabase-js";
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
 import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { ExtendableCard } from "@/components/extendableCard";
+import { ProjectCard } from "@/components/projectCard";
 import { Separator } from "@/components/ui/separator";
-import {
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-  Card,
+import { getBusinesses, getInvestmentCounts, getProjects, getTags } from "@/lib/data/query";
-  CardContent,
+import { Tables } from "@/types/database.types";
-  CardDescription,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card";
 
-interface ProjectInvestmentDetail {
+interface ProjectInvestmentDetail extends Tables<"ProjectInvestmentDetail"> {}
-  minInvestment: number;
-  totalInvestment: number;
-  targetInvestment: number;
-}
 
-interface Project {
+interface Project extends Tables<"Project"> {
-  id: string;
-  projectName: string;
-  businessId: string;
-  investmentCount: number;
-  projectShortDescription: string;
-  publishedTime: string;
   ProjectInvestmentDetail: ProjectInvestmentDetail[];
-  tags: string[];
 }
 
-interface Business {
+interface Business extends Tables<"Business"> {
-  id: string;
-  businessName: string;
-  joinedDate: string;
   Projects: Project[];
 }
 
-function getBusinesses(client: SupabaseClient, query: string | null) {
-  return client
-    .from("Business")
-    .select("id, businessName, joinedDate")
-    .ilike("businessName", `%${query}%`);
-}
-
-function getProjects(client: SupabaseClient, businessIds: string[]) {
-  return client
-    .from("Project")
-    .select(
-      `
-            id,
-            projectName,
-            businessId,
-            publishedTime,
-            projectShortDescription,
-            ProjectInvestmentDetail (
-                minInvestment,
-                totalInvestment,
-                targetInvestment
-            )
-        `
-    )
-    .in("businessId", businessIds);
-}
-
-function getTags(client: SupabaseClient, projectIds: string[]) {
-  return client
-    .from("ItemTag")
-    .select("itemId, Tag (value)")
-    .in("itemId", projectIds);
-}
-
-function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
-  return client
-    .from("InvestmentDeal")
-    .select("*", { count: "exact", head: true })
-    .in("projectId", projectIds);
-}
-
 export default function Find() {
   const searchParams = useSearchParams();
   const query = searchParams.get("query");
@@ -121,11 +61,7 @@ export default function Find() {
 
   // -----
 
-  const isLoading =
+  const isLoading = isLoadingBusinesses || isLoadingProjects || isLoadingTags || isLoadingInvestments;
-    isLoadingBusinesses ||
-    isLoadingProjects ||
-    isLoadingTags ||
-    isLoadingInvestments;
   const error = businessError || projectError || tagError || investmentError;
 
   const results: Business[] =
@@ -136,13 +72,8 @@ export default function Find() {
           ?.filter((project) => project.businessId === business.id)
           .map((project) => ({
             ...project,
-            tags:
+            tags: tags?.filter((tag) => tag.itemId === project.id).map((tag) => tag.Tag.value) || [],
-              tags
+            investmentCount: investmentCounts?.find((ic) => ic.projectId === project.id)?.count || 0,
-                ?.filter((tag) => tag.itemId === project.id)
-                .map((tag) => tag.Tag.value) || [],
-            investmentCount:
-              investmentCounts?.find((ic) => ic.projectId === project.id)
-                ?.count || 0,
           })) || [],
     })) || [];
 
@@ -161,47 +92,22 @@ export default function Find() {
           <ul>
             {results.map((business) => (
               <li key={business.id}>
-                {/* <h2>{business.businessName}</h2>
-                <p>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</p>
-                {business.Projects.map((project) => (
-                  <ExtendableCard
-                    key={project.id}
-                    name={project.projectName}
-                    description={project.projectName}
-                    joinDate={project.projectName}
-                    location={"Bangkok"}
-                    minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment}
-                    totalInvestor={project.ProjectInvestmentDetail[0]?.totalInvestment}
-                    totalRaised={project.ProjectInvestmentDetail[0]?.targetInvestment}
-                    tags={null}
-                  />
-                ))} */}
-
                 <Card className="w-full">
                   <CardHeader>
                     <CardTitle>{business.businessName}</CardTitle>
-                    <CardDescription>
+                    <CardDescription>Joined Date: {new Date(business.joinedDate).toLocaleDateString()}</CardDescription>
-                      Joined Date:{" "}
-                      {new Date(business.joinedDate).toLocaleDateString()}
-                    </CardDescription>
                   </CardHeader>
                   <CardContent>
                     {business.Projects.map((project) => (
-                      <ExtendableCard
+                      <ProjectCard
                         key={project.id}
                         name={project.projectName}
                         description={project.projectName}
                         joinDate={project.projectName}
                         location={"Bangkok"}
-                        minInvestment={
+                        minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment}
-                          project.ProjectInvestmentDetail[0]?.minInvestment
+                        totalInvestor={project.ProjectInvestmentDetail[0]?.totalInvestment}
-                        }
+                        totalRaised={project.ProjectInvestmentDetail[0]?.targetInvestment}
-                        totalInvestor={
-                          project.ProjectInvestmentDetail[0]?.totalInvestment
-                        }
-                        totalRaised={
-                          project.ProjectInvestmentDetail[0]?.targetInvestment
-                        }
                         tags={[]}
                         imageUri={null}
                       />

src/app/landing/page.tsx

@@ -1,7 +0,0 @@
-"use client";
-
-import React from "react";
-
-export default function Page() {
-  return <div>hello</div>;
-}

src/app/page.tsx

@@ -3,9 +3,53 @@ import { Button } from "@/components/ui/button";
 import Link from "next/link";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
 import { Separator } from "@/components/ui/separator";
-import { ExtendableCard } from "@/components/extendableCard";
+import { ProjectCard } from "@/components/projectCard";
+import { getTopProjects } from "@/lib/data/projectQuery";
+import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
+import { Suspense } from "react";
 
-export default function Home() {
+const TopProjects = async () => {
+  const supabase = createSupabaseClient();
+  const { data: topProjectsData, error: topProjectsError } = await getTopProjects(supabase);
+
+  if (topProjectsError) {
+    return <div>Error loading top projects: {topProjectsError}</div>;
+  }
+
+  if (!topProjectsData || topProjectsData.length === 0) {
+    return <div>No top projects available.</div>;
+  }
+
+  return (
+    <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+      {topProjectsData.map((project) => (
+        <Link href={`/deals/${project.id}`} key={project.id}>
+          <ProjectCard
+            name={project.projectName}
+            description={project.projectShortDescription}
+            imageUri={project.cardImage}
+            joinDate={new Date(project.publishedTime).toLocaleDateString()}
+            location={project.Business.location}
+            tags={project.ItemTag.map((item) => item.Tag.value)}
+            minInvestment={project.ProjectInvestmentDetail[0]?.minInvestment || 0}
+            totalInvestor={0}
+            totalRaised={project.ProjectInvestmentDetail[0]?.totalInvestment || 0}
+          />
+        </Link>
+      ))}
+    </div>
+  );
+};
+
+const ProjectsLoader = () => (
+  <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+    {[...Array(4)].map((_, index) => (
+      <div key={index} className="h-64 bg-gray-200 animate-pulse rounded-lg"></div>
+    ))}
+  </div>
+);
+
+export default async function Home() {
   return (
     <main>
       <div className="relative mx-auto">
@@ -81,58 +125,9 @@ export default function Home() {
             <p className="text-xl md:text-2xl font-bold">Hottest Deals</p>
             <p className="text-md md:text-lg">The deals attracting the most interest right now</p>
           </span>
-          <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
+          <Suspense fallback={<ProjectsLoader />}>
-            <Link href={"/overview"}>
+            <TopProjects />
-              <ExtendableCard
+          </Suspense>
-                name={"NVDA"}
-                description={"Founded in 1993, NVIDIA is a key innovator of computer graphics and AI technology"}
-                joinDate={"December 2021"}
-                location={"Bangkok, Thailand"}
-                tags={[]}
-                minInvestment={10000}
-                totalInvestor={58400}
-                totalRaised={9000000}
-                imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
-              />
-            </Link>
-            <ExtendableCard
-              name={"Apple Inc."}
-              description={
-                "Founded in 1976, Apple Inc. is a leading innovator in consumer electronics, software, and online services, known for products like the iPhone, MacBook, and the App Store."
-              }
-              joinDate={"February 2020"}
-              location={"Cupertino, California, USA"}
-              tags={[]}
-              minInvestment={10000}
-              totalInvestor={58400}
-              totalRaised={9000000}
-              imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
-            />
-            <ExtendableCard
-              name={"Google LLC"}
-              description={
-                "Founded in 1998, Google LLC specializes in internet-related services and products, including search engines, online advertising, cloud computing, and the Android operating system."
-              }
-              joinDate={"April 2019"}
-              location={"Mountain View, California, USA"}
-              tags={[]}
-              minInvestment={10000}
-              totalInvestor={5000}
-              totalRaised={1500000000}
-              imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
-            />
-            <ExtendableCard
-              name={"Microsoft Corporation"}
-              description={"Microsoft Corporation is a multinational technology company."}
-              joinDate={"January 2018"}
-              location={"California, USA"}
-              tags={[]}
-              minInvestment={250}
-              totalInvestor={5000}
-              totalRaised={1500000}
-              imageUri={"https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/768px-Google_%22G%22_logo.svg.png"}
-            />
-          </div>
           <div className="self-center py-5 scale-75 md:scale-100">
             <Button>
               <Link href={"/deals"}>View all</Link>

src/components/auth/logoutButton.tsx

@@ -1,15 +1,23 @@
 "use client";
 
 import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { usePathname } from "next/navigation";
 import { useRouter } from "next/navigation";
 
 export function LogoutButton() {
   const supabase = createSupabaseClient();
+  const pathname = usePathname();
   const router = useRouter();
 
   const handleLogout = async () => {
     await supabase.auth.signOut();
-    router.push("/");
+
+    if (pathname === "/") {
+      window.location.reload();
+    } else {
+      await router.push("/");
+      window.location.reload();
+    }
   };
 
   return <button onClick={handleLogout}>Logout</button>;

src/components/auth/signupButton.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import Image from "next/image";
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { Button } from "@/components/ui/button";
+
+export function SignupButton(props: { nextUrl?: string }) {
+  const supabase = createSupabaseClient();
+
+  const handleSignup = async () => {
+    await supabase.auth.signInWithOAuth({
+      provider: "google",
+      options: {
+        redirectTo: `${location.origin}/auth/callback?next=${props.nextUrl || ""}`,
+      },
+    });
+  };
+
+  return (
+    <Button className="bg-foreground gap-2 rounded-xl" onClick={handleSignup}>
+      <Image src={"/logo/google.svg"} width={30} height={30} alt={"Google"} />
+      Sign Up with Google
+    </Button>
+  );
+}

src/components/auth/signupForm.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { useState } from "react";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { useRouter } from "next/navigation";
+import toast from "react-hot-toast";
+
+export function SignupForm() {
+  const router = useRouter();
+  const supabase = createSupabaseClient();
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+
+  const handleSignup = async (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    if (password !== confirmPassword) {
+      alert("Passwords do not match!");
+      return;
+    }
+
+    const { error } = await supabase.auth.signUp({
+      email,
+      password,
+    });
+
+    if (error) {
+      toast.error(error.message);
+    } else {
+      toast.success("Account created successfully!");
+      router.push("/");
+    }
+  };
+
+  return (
+    <div className="flex flex-col space-y-2">
+      <Input id="email" type="email" value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
+      <Input
+        id="password"
+        type="password"
+        value={password}
+        onChange={(e) => setPassword(e.target.value)}
+        placeholder="Password"
+      />
+      <Input
+        id="confirmPassword"
+        type="password"
+        value={confirmPassword}
+        onChange={(e) => setConfirmPassword(e.target.value)}
+        placeholder="Confirm Password"
+      />
+      <Button id="signup" onClick={handleSignup}>
+        Sign Up
+      </Button>
+    </div>
+  );
+}

src/components/navigationBar/nav.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import * as React from "react";
 import Link from "next/link";
 import Image from "next/image";
@@ -7,8 +5,6 @@ import Image from "next/image";
 import { cn } from "@/lib/utils";
 import { Separator } from "@/components/ui/separator";
 import { ThemeToggle } from "@/components/theme-toggle";
-import { Button } from "@/components/ui/button";
-import { useRouter } from "next/navigation";
 import {
   NavigationMenu,
   NavigationMenuContent,
@@ -16,36 +12,10 @@ import {
   NavigationMenuLink,
   NavigationMenuList,
   NavigationMenuTrigger,
-  navigationMenuTriggerStyle,
 } from "@/components/ui/navigation-menu";
-import {
+import { SearchBar } from "./serchBar";
-  DropdownMenu,
+import { ProfileBar } from "./profileBar";
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Skeleton } from "@/components/ui/skeleton";
-import { Search, Bell, Heart, Wallet } from "lucide-react";
 
-import { LogoutButton } from "@/components/auth/logoutButton";
-
-import useSession from "@/lib/supabase/useSession";
-
-const landings = [
-  {
-    id: 1,
-    title: "Landing 01",
-    route: "/project-management",
-  },
-  {
-    id: 2,
-    title: "Landing 02",
-    route: "/crm-landing",
-  },
-];
 const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWithoutRef<"a">>(
   ({ className, title, children, ...props }, ref) => {
     return (
@@ -69,81 +39,7 @@ const ListItem = React.forwardRef<React.ElementRef<"a">, React.ComponentPropsWit
 );
 ListItem.displayName = "ListItem";
 
-const unAuthenticatedComponents = () => {
-  return (
-    <div className="flex gap-2 pl-2">
-      <Link href="/auth">
-        <Button variant="secondary" className="border-2 border-border">
-          Login
-        </Button>
-      </Link>
-      <Button>Sign up</Button>
-    </div>
-  );
-};
-
-const authenticatedComponents = () => {
-  let notifications = 100;
-  const displayValue = notifications >= 100 ? "..." : notifications;
-  return (
-    <div className="flex gap-3 pl-2 items-center">
-      <Link href={"/notification"}>
-        {" "}
-        <div className="relative inline-block">
-          <Bell className="h-6 w-6" />
-          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
-            {displayValue}
-          </span>
-        </div>
-      </Link>
-      <Heart />
-      <Wallet />
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button variant="outline" size="icon" className="overflow-hidden rounded-full">
-            <Avatar>
-              <AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
-              <AvatarFallback>1</AvatarFallback>
-            </Avatar>
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end">
-          <DropdownMenuLabel>My Account</DropdownMenuLabel>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>Settings</DropdownMenuItem>
-          <DropdownMenuItem>Support</DropdownMenuItem>
-          <DropdownMenuSeparator />
-          <DropdownMenuItem>
-            <LogoutButton />
-          </DropdownMenuItem>
-        </DropdownMenuContent>
-      </DropdownMenu>
-    </div>
-  );
-};
-
 export function NavigationBar() {
-  const { session, loading } = useSession();
-  const user = session?.user;
-  const [sessionLoaded, setSessionLoaded] = React.useState(false);
-  const [searchActive, setSearchActive] = React.useState(false);
-  const router = useRouter();
-
-  React.useEffect(() => {
-    if (!loading) {
-      setSessionLoaded(true);
-    }
-  }, [loading]);
-
-  const handleKeyDown = async (k: React.KeyboardEvent<HTMLInputElement>) => {
-    if (k.key === "Enter") {
-      const query = (k.target as HTMLInputElement).value.trim();
-      if (query) {
-        router.push(`/find?query=${encodeURIComponent(query)}`);
-      }
-    }
-  };
-
   const businessComponents = [
     {
       title: "Business",
@@ -232,17 +128,7 @@ export function NavigationBar() {
                 </NavigationMenuItem>
 
                 <NavigationMenuItem className="pl-5 flex">
-                  <Search onClick={() => setSearchActive(!searchActive)} className="cursor-pointer" />
+                  <SearchBar />
-                  {/* search bar's input */}
-                  <input
-                    type="text"
-                    placeholder="Enter business name..."
-                    className={cn(
-                      "ml-2 border rounded-md px-2 py-1 transition-all duration-300 ease-in-out ",
-                      searchActive ? "w-48 opacity-100" : "w-0 opacity-0"
-                    )}
-                    onKeyDown={handleKeyDown}
-                  />
                 </NavigationMenuItem>
               </NavigationMenuList>
             </NavigationMenu>
@@ -250,17 +136,7 @@ export function NavigationBar() {
             <div className="flex gap-2 pl-2">
               <ThemeToggle />
               <Separator orientation="vertical" className="mx-3" />
-              {sessionLoaded ? (
+              <ProfileBar />
-                user ? (
-                  authenticatedComponents()
-                ) : (
-                  unAuthenticatedComponents()
-                )
-              ) : (
-                <div>
-                  <Skeleton className="rounded-lg h-full w-[160px]" />
-                </div>
-              )}
             </div>
           </div>
         </div>

src/components/navigationBar/profileBar.tsx

@@ -0,0 +1,102 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import Link from "next/link";
+import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
+import { Skeleton } from "@/components/ui/skeleton";
+import { Bell, Heart, Wallet } from "lucide-react";
+import { LogoutButton } from "@/components/auth/logoutButton";
+import useSession from "@/lib/supabase/useSession";
+
+const UnAuthenticatedComponents = () => {
+  return (
+    <div className="flex gap-2 pl-2">
+      <Link href="/auth">
+        <Button variant="secondary" className="border-2 border-border">
+          Login
+        </Button>
+      </Link>
+      <Link href="/auth/signup">
+        <Button>Sign up</Button>
+      </Link>
+    </div>
+  );
+};
+
+const AuthenticatedComponents = () => {
+  let notifications = 100;
+  const displayValue = notifications >= 100 ? "..." : notifications;
+  return (
+    <div className="flex gap-3 pl-2 items-center">
+      <Link href={"/notification"}>
+        <div className="relative inline-block">
+          <Bell className="h-6 w-6" />
+          <span className="absolute -top-1 -right-1 inline-flex items-center justify-center w-4 h-4 text-xs font-bold text-white bg-red-600 rounded-full">
+            {displayValue}
+          </span>
+        </div>
+      </Link>
+      <Heart />
+      <Wallet />
+      <DropdownMenu>
+        <DropdownMenuTrigger asChild>
+          <Button variant="outline" size="icon" className="overflow-hidden rounded-full">
+            <Avatar>
+              <AvatarImage src="https://api.dicebear.com/9.x/pixel-art/svg" />
+              <AvatarFallback>1</AvatarFallback>
+            </Avatar>
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem>
+            <Link href="/profile">Profile</Link>
+          </DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>Settings</DropdownMenuItem>
+          <DropdownMenuItem>Support</DropdownMenuItem>
+          <DropdownMenuSeparator />
+          <DropdownMenuItem>
+            <LogoutButton />
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export function ProfileBar() {
+  const { session } = useSession();
+  const user = session?.user;
+  const [sessionLoaded, setSessionLoaded] = useState(false);
+
+  useEffect(() => {
+    if (!session) {
+      setSessionLoaded(true);
+    }
+  }, [session]);
+
+  return (
+    <>
+      {sessionLoaded ? (
+        user ? (
+          <AuthenticatedComponents />
+        ) : (
+          <UnAuthenticatedComponents />
+        )
+      ) : (
+        <div>
+          <Skeleton className="rounded-lg h-full w-[160px]" />
+        </div>
+      )}
+    </>
+  );
+}

src/components/navigationBar/serchBar.tsx

@@ -0,0 +1,35 @@
+"use client";
+
+import * as React from "react";
+import { useRouter } from "next/navigation";
+import { Search } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+export function SearchBar() {
+  const [searchActive, setSearchActive] = React.useState(false);
+  const router = useRouter();
+
+  const handleKeyDown = async (e: React.KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter") {
+      const query = (e.target as HTMLInputElement).value.trim();
+      if (query) {
+        router.push(`/find?query=${encodeURIComponent(query)}`);
+      }
+    }
+  };
+
+  return (
+    <div className="flex items-center">
+      <Search onClick={() => setSearchActive(!searchActive)} className="cursor-pointer" />
+      <input
+        type="text"
+        placeholder="Enter business name..."
+        className={cn(
+          "ml-2 border rounded-md px-2 py-1 transition-all duration-300 ease-in-out",
+          searchActive ? "w-48 opacity-100" : "w-0 opacity-0"
+        )}
+        onKeyDown={handleKeyDown}
+      />
+    </div>
+  );
+}

src/components/projectCard.tsx

@@ -8,7 +8,7 @@ interface XMap {
   [tag: string]: string;
 }
 
-interface ExtendableCardProps {
+interface ProjectCardProps {
   name: string;
   description: string;
   joinDate: string;
@@ -21,7 +21,7 @@ interface ExtendableCardProps {
   className?: string;
 }
 
-export function ExtendableCard(props: ExtendableCardProps) {
+export function ProjectCard(props: ProjectCardProps) {
   return (
     <div
       className={cn(
@@ -35,14 +35,14 @@ export function ExtendableCard(props: ExtendableCardProps) {
             <Image
               src={props.imageUri}
               alt="Card image"
-              layout="fill"
+              fill
               className="rounded-t-xl bg-background dark:bg-background h-full"
             />
           ) : (
             <Image
               src="/money.png"
               alt="Card image"
-              layout="fill"
+              fill
               className="rounded-t-xl bg-background dark:bg-background h-full"
             />
           )}

src/components/ui/carousel.tsx

@@ -1,124 +1,108 @@
-"use client"
+"use client";
 
-import * as React from "react"
+import * as React from "react";
-import useEmblaCarousel, {
+import useEmblaCarousel, { type UseEmblaCarouselType } from "embla-carousel-react";
-  type UseEmblaCarouselType,
+import { ArrowLeft, ArrowRight } from "lucide-react";
-} from "embla-carousel-react"
-import { ArrowLeft, ArrowRight } from "lucide-react"
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
-import { Button } from "@/components/ui/button"
+import { Button } from "@/components/ui/button";
 
-type CarouselApi = UseEmblaCarouselType[1]
+type CarouselApi = UseEmblaCarouselType[1];
-type UseCarouselParameters = Parameters<typeof useEmblaCarousel>
+type UseCarouselParameters = Parameters<typeof useEmblaCarousel>;
-type CarouselOptions = UseCarouselParameters[0]
+type CarouselOptions = UseCarouselParameters[0];
-type CarouselPlugin = UseCarouselParameters[1]
+type CarouselPlugin = UseCarouselParameters[1];
 
 type CarouselProps = {
-  opts?: CarouselOptions
+  opts?: CarouselOptions;
-  plugins?: CarouselPlugin
+  plugins?: CarouselPlugin;
-  orientation?: "horizontal" | "vertical"
+  orientation?: "horizontal" | "vertical";
-  setApi?: (api: CarouselApi) => void
+  setApi?: (api: CarouselApi) => void;
-}
+};
 
 type CarouselContextProps = {
-  carouselRef: ReturnType<typeof useEmblaCarousel>[0]
+  carouselRef: ReturnType<typeof useEmblaCarousel>[0];
-  api: ReturnType<typeof useEmblaCarousel>[1]
+  api: ReturnType<typeof useEmblaCarousel>[1];
-  scrollPrev: () => void
+  scrollPrev: () => void;
-  scrollNext: () => void
+  scrollNext: () => void;
-  canScrollPrev: boolean
+  canScrollPrev: boolean;
-  canScrollNext: boolean
+  canScrollNext: boolean;
-} & CarouselProps
+} & CarouselProps;
 
-const CarouselContext = React.createContext<CarouselContextProps | null>(null)
+const CarouselContext = React.createContext<CarouselContextProps | null>(null);
 
 function useCarousel() {
-  const context = React.useContext(CarouselContext)
+  const context = React.useContext(CarouselContext);
 
   if (!context) {
-    throw new Error("useCarousel must be used within a <Carousel />")
+    throw new Error("useCarousel must be used within a <Carousel />");
   }
 
-  return context
+  return context;
 }
 
-const Carousel = React.forwardRef<
+const Carousel = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement> & CarouselProps>(
-  HTMLDivElement,
+  ({ orientation = "horizontal", opts, setApi, plugins, className, children, ...props }, ref) => {
-  React.HTMLAttributes<HTMLDivElement> & CarouselProps
->(
-  (
-    {
-      orientation = "horizontal",
-      opts,
-      setApi,
-      plugins,
-      className,
-      children,
-      ...props
-    },
-    ref
-  ) => {
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
         axis: orientation === "horizontal" ? "x" : "y",
       },
       plugins
-    )
+    );
-    const [canScrollPrev, setCanScrollPrev] = React.useState(false)
+    const [canScrollPrev, setCanScrollPrev] = React.useState(false);
-    const [canScrollNext, setCanScrollNext] = React.useState(false)
+    const [canScrollNext, setCanScrollNext] = React.useState(false);
 
     const onSelect = React.useCallback((api: CarouselApi) => {
       if (!api) {
-        return
+        return;
       }
 
-      setCanScrollPrev(api.canScrollPrev())
+      setCanScrollPrev(api.canScrollPrev());
-      setCanScrollNext(api.canScrollNext())
+      setCanScrollNext(api.canScrollNext());
-    }, [])
+    }, []);
 
     const scrollPrev = React.useCallback(() => {
-      api?.scrollPrev()
+      api?.scrollPrev();
-    }, [api])
+    }, [api]);
 
     const scrollNext = React.useCallback(() => {
-      api?.scrollNext()
+      api?.scrollNext();
-    }, [api])
+    }, [api]);
 
     const handleKeyDown = React.useCallback(
       (event: React.KeyboardEvent<HTMLDivElement>) => {
         if (event.key === "ArrowLeft") {
-          event.preventDefault()
+          event.preventDefault();
-          scrollPrev()
+          scrollPrev();
         } else if (event.key === "ArrowRight") {
-          event.preventDefault()
+          event.preventDefault();
-          scrollNext()
+          scrollNext();
         }
       },
       [scrollPrev, scrollNext]
-    )
+    );
 
     React.useEffect(() => {
       if (!api || !setApi) {
-        return
+        return;
       }
 
-      setApi(api)
+      setApi(api);
-    }, [api, setApi])
+    }, [api, setApi]);
 
     React.useEffect(() => {
       if (!api) {
-        return
+        return;
       }
 
-      onSelect(api)
+      onSelect(api);
-      api.on("reInit", onSelect)
+      api.on("reInit", onSelect);
-      api.on("select", onSelect)
+      api.on("select", onSelect);
 
       return () => {
-        api?.off("select", onSelect)
+        api?.off("select", onSelect);
-      }
+      };
-    }, [api, onSelect])
+    }, [api, onSelect]);
 
     return (
       <CarouselContext.Provider
@@ -126,137 +110,113 @@ const Carousel = React.forwardRef<
           carouselRef,
           api: api,
           opts,
-          orientation:
+          orientation: orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
-            orientation || (opts?.axis === "y" ? "vertical" : "horizontal"),
           scrollPrev,
           scrollNext,
           canScrollPrev,
           canScrollNext,
-        }}
+        }}>
-      >
         <div
           ref={ref}
           onKeyDownCapture={handleKeyDown}
           className={cn("relative", className)}
           role="region"
           aria-roledescription="carousel"
-          {...props}
+          {...props}>
-        >
           {children}
         </div>
       </CarouselContext.Provider>
-    )
+    );
   }
-)
+);
-Carousel.displayName = "Carousel"
+Carousel.displayName = "Carousel";
 
-const CarouselContent = React.forwardRef<
+const CarouselContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
-  HTMLDivElement,
+  ({ className, ...props }, ref) => {
-  React.HTMLAttributes<HTMLDivElement>
+    const { carouselRef, orientation } = useCarousel();
->(({ className, ...props }, ref) => {
-  const { carouselRef, orientation } = useCarousel()
 
-  return (
+    return (
-    <div ref={carouselRef} className="overflow-hidden">
+      <div ref={carouselRef} className="overflow-hidden">
+        <div
+          ref={ref}
+          className={cn("flex", orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col", className)}
+          {...props}
+        />
+      </div>
+    );
+  }
+);
+CarouselContent.displayName = "CarouselContent";
+
+const CarouselItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const { orientation } = useCarousel();
+
+    return (
       <div
         ref={ref}
-        className={cn(
+        role="group"
-          "flex",
+        aria-roledescription="slide"
-          orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
+        className={cn("min-w-0 shrink-0 grow-0", orientation === "horizontal" ? "pl-4" : "pt-4", className)}
-          className
-        )}
         {...props}
       />
-    </div>
+    );
-  )
+  }
-})
+);
-CarouselContent.displayName = "CarouselContent"
+CarouselItem.displayName = "CarouselItem";
 
-const CarouselItem = React.forwardRef<
+const CarouselPrevious = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  HTMLDivElement,
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  React.HTMLAttributes<HTMLDivElement>
+    const { orientation, scrollPrev, canScrollPrev } = useCarousel();
->(({ className, ...props }, ref) => {
-  const { orientation } = useCarousel()
 
-  return (
+    return (
-    <div
+      <Button
-      ref={ref}
+        ref={ref}
-      role="group"
+        variant={variant}
-      aria-roledescription="slide"
+        size={size}
-      className={cn(
+        className={cn(
-        "min-w-0 shrink-0 grow-0 basis-full",
+          "absolute  h-8 w-8 rounded-full",
-        orientation === "horizontal" ? "pl-4" : "pt-4",
+          orientation === "horizontal"
-        className
+            ? "-left-12 top-1/2 -translate-y-1/2"
-      )}
+            : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
-      {...props}
+          className
-    />
+        )}
-  )
+        disabled={!canScrollPrev}
-})
+        onClick={scrollPrev}
-CarouselItem.displayName = "CarouselItem"
+        {...props}>
+        <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Previous slide</span>
+      </Button>
+    );
+  }
+);
+CarouselPrevious.displayName = "CarouselPrevious";
 
-const CarouselPrevious = React.forwardRef<
+const CarouselNext = React.forwardRef<HTMLButtonElement, React.ComponentProps<typeof Button>>(
-  HTMLButtonElement,
+  ({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  React.ComponentProps<typeof Button>
+    const { orientation, scrollNext, canScrollNext } = useCarousel();
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
-  return (
+    return (
-    <Button
+      <Button
-      ref={ref}
+        ref={ref}
-      variant={variant}
+        variant={variant}
-      size={size}
+        size={size}
-      className={cn(
+        className={cn(
-        "absolute  h-8 w-8 rounded-full",
+          "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
+          orientation === "horizontal"
-          ? "-left-12 top-1/2 -translate-y-1/2"
+            ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
+            : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
+          className
-      )}
+        )}
-      disabled={!canScrollPrev}
+        disabled={!canScrollNext}
-      onClick={scrollPrev}
+        onClick={scrollNext}
-      {...props}
+        {...props}>
-    >
+        <ArrowRight className="h-4 w-4" />
-      <ArrowLeft className="h-4 w-4" />
+        <span className="sr-only">Next slide</span>
-      <span className="sr-only">Previous slide</span>
+      </Button>
-    </Button>
+    );
-  )
+  }
-})
+);
-CarouselPrevious.displayName = "CarouselPrevious"
+CarouselNext.displayName = "CarouselNext";
 
-const CarouselNext = React.forwardRef<
+export { type CarouselApi, Carousel, CarouselContent, CarouselItem, CarouselPrevious, CarouselNext };
-  HTMLButtonElement,
-  React.ComponentProps<typeof Button>
->(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  const { orientation, scrollNext, canScrollNext } = useCarousel()
-
-  return (
-    <Button
-      ref={ref}
-      variant={variant}
-      size={size}
-      className={cn(
-        "absolute h-8 w-8 rounded-full",
-        orientation === "horizontal"
-          ? "-right-12 top-1/2 -translate-y-1/2"
-          : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
-        className
-      )}
-      disabled={!canScrollNext}
-      onClick={scrollNext}
-      {...props}
-    >
-      <ArrowRight className="h-4 w-4" />
-      <span className="sr-only">Next slide</span>
-    </Button>
-  )
-})
-CarouselNext.displayName = "CarouselNext"
-
-export {
-  type CarouselApi,
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselPrevious,
-  CarouselNext,
-}

src/lib/data/dropdownQuery.ts

@@ -0,0 +1,16 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+
+function getAllTagsQuery(client: SupabaseClient) {
+  return client.from("Tag").select("id, value");
+}
+
+function getALlFundedStatusQuery(client: SupabaseClient) {
+  return client.from("FundedStatus").select("id, value, description");
+}
+
+function getAllBusinessTypeQuery(client: SupabaseClient) {
+  return client.from("BusinessType").select("id, value, description");
+}
+
+export { getAllTagsQuery, getALlFundedStatusQuery, getAllBusinessTypeQuery };

src/lib/data/projectQuery.ts

@@ -0,0 +1,157 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+async function getTopProjects(client: SupabaseClient, numberOfRecords: number = 4) {
+    try {
+      const { data, error } = await client
+        .from("Project")
+        .select(
+          `
+            id,
+            projectName,
+            businessId,
+            publishedTime,
+            projectShortDescription,
+            cardImage,
+            ProjectInvestmentDetail (
+              minInvestment,
+              totalInvestment,
+              targetInvestment,
+              investmentDeadline
+            ),
+            ItemTag (
+              Tag (
+                id,
+                value
+              )
+            ),
+            Business (
+              location
+            )
+          `
+        )
+        .order("publishedTime", { ascending: false })
+        .limit(numberOfRecords);
+
+      if (error) {
+        console.error("Error fetching top projects:", error.message);
+        return { data: null, error: error.message };
+      }
+
+      return { data, error: null };
+    } catch (err) {
+      console.error("Unexpected error:", err);
+      return { data: null, error: "An unexpected error occurred." };
+    }
+  }
+
+async function getProjectData(client: SupabaseClient, projectId: number) {
+  const query = client.from("Project").select(
+    `
+      project_name:projectName,
+      project_short_description:projectShortDescription,
+      project_description:projectDescription,
+      published_time:publishedTime,
+      ...ProjectInvestmentDetail!inner (
+        min_investment:minInvestment,
+        total_investment:totalInvestment,
+        target_investment:targetInvestment,
+        investment_deadline:investmentDeadline
+      ),
+      tags:ItemTag!inner (
+        ...Tag!inner (
+          tag_name:value
+        )
+      )
+    `
+  ).eq("id", projectId).single()
+
+  const {data, error} = await query;
+  return { data, error }
+}
+
+export interface FilterParams {
+  searchTerm?: string;
+  tagsFilter?: string[];
+  projectStatus?: string;
+  projectStatusFilter?: string;
+  businessTypeFilter?: string;
+  sortByTimeFilter?: string;
+}
+
+export interface FilterProjectQueryParams extends FilterParams {
+  page: number,
+  pageSize: number
+}
+
+function searchProjectsQuery(client: SupabaseClient, {searchTerm, tagsFilter, projectStatus, businessTypeFilter, sortByTimeFilter, page = 1, pageSize = 4}: FilterProjectQueryParams) {
+  const start = (page - 1) * pageSize;
+  const end = start + pageSize - 1;
+  
+  let query = client.from("Project").select(
+    `
+    project_id:id,
+    project_name:projectName,
+    published_time:publishedTime,
+    project_short_description:projectShortDescription,
+    card_image_url:cardImage,
+    ...ProjectStatus!Project_projectStatusId_fkey!inner (
+      project_status:value
+    ),
+    ...ProjectInvestmentDetail!inner (
+      min_investment:minInvestment,
+      total_investment:totalInvestment,
+      target_investment:targetInvestment,
+      investment_deadline:investmentDeadline
+    ),
+    tags:ItemTag!inner (
+      ...Tag!inner (
+        tag_name:value
+      )
+    ),
+    ...Business!inner (
+      ...businessType!inner (
+        business_type:value
+      ),
+      business_location:location
+    )
+    `
+  ).order("publishedTime", { ascending: false }).range(start, end)
+
+  if (sortByTimeFilter === "all") {
+    sortByTimeFilter = undefined;
+  }
+
+  if (projectStatus === "all") {
+    projectStatus = undefined;
+  }
+
+  if (businessTypeFilter === "all") {
+    businessTypeFilter = undefined;
+  }
+
+  if (tagsFilter?.length === 0) {
+    tagsFilter = undefined;
+  }
+
+  if (searchTerm) {
+    query = query.ilike('projectName', `%${searchTerm}%`)
+  }
+
+  if (tagsFilter) {
+    query = query.in('ItemTag.Tag.value', tagsFilter)
+  }
+
+  if (projectStatus) {
+    query = query.eq("ProjectStatus.value", projectStatus)
+  }
+
+  if (businessTypeFilter) {
+    query = query.eq("Business.businessType.value", businessTypeFilter)
+  }
+
+  return query;
+}
+
+
+export { getTopProjects, getProjectData, searchProjectsQuery };
+

src/lib/data/query.ts

@@ -0,0 +1,35 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+function getBusinesses(client: SupabaseClient, query: string | null) {
+  return client.from("Business").select("id, businessName, joinedDate").ilike("businessName", `%${query}%`);
+}
+
+function getProjects(client: SupabaseClient, businessIds: string[]) {
+  return client
+    .from("Project")
+    .select(
+      `
+            id,
+            projectName,
+            businessId,
+            publishedTime,
+            projectShortDescription,
+            ProjectInvestmentDetail (
+                minInvestment,
+                totalInvestment,
+                targetInvestment
+            )
+        `
+    )
+    .in("businessId", businessIds);
+}
+
+function getTags(client: SupabaseClient, projectIds: string[]) {
+  return client.from("ItemTag").select("itemId, Tag (value)").in("itemId", projectIds);
+}
+
+function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
+  return client.from("InvestmentDeal").select("*", { count: "exact", head: true }).in("projectId", projectIds);
+}
+
+export { getBusinesses, getProjects, getTags, getInvestmentCounts };

src/lib/data/userQuery.ts

@@ -0,0 +1,23 @@
+import { SupabaseClient } from "@supabase/supabase-js";
+
+async function getUserProfile(client: SupabaseClient, userId: string) {
+  try {
+    const { data, error } = await client
+      .from("Profiles")
+      .select("updated_at, username, full_name, avatar_url, website, bio")
+      .eq("id", userId)
+      .single();
+
+    if (error) {
+      console.error("Error fetching user profile:", error.message);
+      return { data: null, error: error.message };
+    }
+
+    return { data, error: null };
+  } catch (err) {
+    console.error("Unexpected error:", err);
+    return { data: null, error: "An unexpected error occurred." };
+  }
+}
+
+export { getUserProfile };

tailwind.config.ts

@@ -74,7 +74,7 @@ const config = {
       },
     },
   },
-  plugins: [require("tailwindcss-animate")],
+  plugins: [require("tailwindcss-animate"), require('@tailwindcss/typography'),],
 } satisfies Config
 
 export default config