Merge pull request #45 from Sosokker/front-end

add business application page

next.config.mjs

@@ -1,5 +1,3 @@
-/** @type {import('next').NextConfig} */
-
 const SUPABASE_URL = process.env.NEXT_PUBLIC_SUPABASE_URL_SOURCE;
 
 const nextConfig = {
@@ -12,6 +10,11 @@ const nextConfig = {
         port: "",
         pathname: "/storage/v1/object/sign/**",
       },
+      {
+        protocol: "https",
+        hostname: "upload.wikimedia.org",
+        pathname: "/wikipedia/**",
+      },
     ],
   },
 };

src/app/business/apply/page.tsx

@@ -0,0 +1,300 @@
+"use client";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { createSupabaseClient } from "@/lib/supabase/clientComponentClient";
+import { useEffect, useState } from "react";
+
+export default function Apply() {
+  let supabase = createSupabaseClient();
+  const [industry, setIndustry] = useState<string[]>([]);
+  const [isInUS, setIsInUS] = useState("");
+  const [isForSale, setIsForSale] = useState("");
+  const [isGenerating, setIsGenarting] = useState("");
+  const [pitch, setPitch] = useState("");
+  const communitySize = [
+    "N/A",
+    "0-5K",
+    "5-10K",
+    "10-20K",
+    "20-50K",
+    "50-100K",
+    "100K+",
+  ];
+
+  const fetchIndustry = async () => {
+    let { data: BusinessType, error } = await supabase
+      .from("BusinessType")
+      .select("value");
+
+    if (error) {
+      console.error(error);
+    } else {
+      if (BusinessType) {
+        console.table();
+        setIndustry(BusinessType.map((item) => item.value));
+      }
+    }
+  };
+  useEffect(() => {
+    fetchIndustry();
+  }, []);
+  return (
+    <div>
+      <div className="grid grid-flow-row auto-rows-max w-full h-52 md:h-92 bg-gray-100 dark:bg-gray-800 p-5">
+        <h1 className="text-2xl md:text-5xl font-medium md:font-bold justify-self-center md:mt-8">
+          Apply to raise on B2DVentures
+        </h1>
+        <div className="mt-5 justify-self-center">
+          <p className="text-sm md:text-base text-neutral-500">
+            All information submitted in this application is for internal use
+            only and is treated with the utmost{" "}
+          </p>
+          <p className="text-sm md:text-base text-neutral-500">
+            confidentiality. Companies may apply to raise with B2DVentures more
+            than once.
+          </p>
+        </div>
+      </div>
+      <div className="grid grid-flow-row auto-rows-max w-full ml-48">
+        <h1 className="text-3xl font-bold mt-10 ml-96">About your company</h1>
+        <p className="ml-96 mt-5 text-neutral-500">
+          All requested information in this section is required.
+        </p>
+        {/* form */}
+
+        {/* company name */}
+        <div className="ml-96 mt-5 space-y-10">
+          <div className="mt-10 space-y-5">
+            <Label htmlFor="companyName" className="font-bold text-lg">
+              Company name
+            </Label>
+            <div className="flex space-x-5">
+              <Input type="text" id="companyName" className="w-96" />
+              <span className="text-[12px] text-neutral-500 self-center">
+                This should be the name your company uses on your <br />
+                website and in the market.
+              </span>
+            </div>
+          </div>
+          {/* industry */}
+          <div className="mt-10 space-y-5">
+            <Label htmlFor="industry" className="font-bold text-lg mt-10">
+              Industry
+            </Label>
+            <div className="flex space-x-5">
+              <Select>
+                <SelectTrigger className="w-96">
+                  <SelectValue placeholder="Select an industry" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Industry</SelectLabel>
+                    {industry.map((i) => (
+                      <SelectItem value={i}>{i}</SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <span className="text-[12px] text-neutral-500 self-center">
+                Choose the industry that best aligns with your business.
+              </span>
+            </div>
+          </div>
+          {/* How much money has your company raised to date? */}
+          <div className="space-y-5">
+            <Label htmlFor="companyName" className="font-bold text-lg">
+              How much money has your company <br /> raised to date?
+            </Label>
+            <div className="flex space-x-5">
+              <Input
+                type="text"
+                id="companyName"
+                className="w-96"
+                placeholder="$   1,000,000"
+              />
+              <span className="text-[12px] text-neutral-500 self-center">
+                The sum total of past financing, including angel or venture{" "}
+                <br />
+                capital, loans, grants, or token sales.
+              </span>
+            </div>
+          </div>
+          {/* Is your company incorporated in the United States? */}
+          <div className="space-y-5">
+            <Label htmlFor="companyName" className="font-bold text-lg">
+              Is your company incorporated in the <br />
+              United States?
+            </Label>
+            <div className="flex space-x-5">
+              <div className="flex space-x-2 w-96">
+                <Button
+                  variant={isInUS === "Yes" ? "default" : "outline"}
+                  onClick={() => setIsInUS("Yes")}
+                  className="w-20 h-12 text-base"
+                >
+                  Yes
+                </Button>
+                <Button
+                  variant={isInUS === "No" ? "default" : "outline"}
+                  onClick={() => setIsInUS("No")}
+                  className="w-20 h-12 text-base"
+                >
+                  No
+                </Button>
+              </div>
+              <span className="text-[12px] text-neutral-500 self-center">
+                Only companies that are incorporated or formed in the US are{" "}
+                <br />
+                eligible to raise via Reg CF. If your company is incorporated{" "}
+                <br />
+                outside the US, we still encourage you to apply.
+              </span>
+            </div>
+          </div>
+
+          {/* Is your product available (for sale) in market? */}
+          <div className="space-y-5">
+            <Label htmlFor="companyName" className="font-bold text-lg">
+              Is your product available (for sale) <br />
+              in market?
+            </Label>
+            <div className="flex space-x-5">
+              <div className="flex space-x-2 w-96">
+                <Button
+                  variant={isForSale === "Yes" ? "default" : "outline"}
+                  onClick={() => setIsForSale("Yes")}
+                  className="w-20 h-12 text-base"
+                >
+                  Yes
+                </Button>
+                <Button
+                  variant={isForSale === "No" ? "default" : "outline"}
+                  onClick={() => setIsForSale("No")}
+                  className="w-20 h-12 text-base"
+                >
+                  No
+                </Button>
+              </div>
+              <span className="text-[12px] text-neutral-500 self-center">
+                Only check this box if customers can access, use, or buy your{" "}
+                <br />
+                product today.
+              </span>
+            </div>
+          </div>
+
+          {/* Is your company generating revenue?*/}
+          <div className="space-y-5">
+            <Label htmlFor="companyName" className="font-bold text-lg">
+              Is your company generating revenue?
+            </Label>
+            <div className="flex space-x-5">
+              <div className="flex space-x-2 w-96">
+                <Button
+                  variant={isGenerating === "Yes" ? "default" : "outline"}
+                  onClick={() => setIsGenarting("Yes")}
+                  className="w-20 h-12 text-base"
+                >
+                  Yes
+                </Button>
+                <Button
+                  variant={isGenerating === "No" ? "default" : "outline"}
+                  onClick={() => setIsGenarting("No")}
+                  className="w-20 h-12 text-base"
+                >
+                  No
+                </Button>
+              </div>
+              <span className="text-[12px] text-neutral-500 self-center">
+                Only check this box if your company is making money. <br />
+                Please elaborate on revenue and other traction below.
+              </span>
+            </div>
+          </div>
+
+          {/* Pitch deck */}
+          <div className="space-y-5">
+            <Label htmlFor="companyName" className="font-bold text-lg">
+              Pitch deck
+            </Label>
+            <div className="flex space-x-2 w-96">
+              <Button
+                variant={pitch === "text" ? "default" : "outline"}
+                onClick={() => setPitch("text")}
+                className="w-32 h-12 text-base"
+              >
+                Paste URL
+              </Button>
+              <Button
+                variant={pitch === "file" ? "default" : "outline"}
+                onClick={() => setPitch("file")}
+                className="w-32 h-12 text-base"
+              >
+                Upload a file
+              </Button>
+            </div>
+            <div className="flex space-x-5">
+              <Input
+                type={pitch}
+                id="companyName"
+                className="w-96"
+                placeholder="https:// "
+              />
+              <span className="text-[12px] text-neutral-500 self-center">
+                Your pitch deck and other application info will be used for{" "}
+                <br />
+                internal purposes only. <br />
+                Please make sure this document is publicly accessible. This can{" "}
+                <br />
+                be a DocSend, Box, Dropbox, Google Drive or other link.
+              </span>
+            </div>
+          </div>
+
+          {/* What's the rough size of your community? */}
+          <div className="mt-10 space-y-5">
+            <Label htmlFor="industry" className="font-bold text-lg mt-10">
+              What's the rough size of your <br /> community?
+            </Label>
+            <div className="flex space-x-5">
+              <Select>
+                <SelectTrigger className="w-96">
+                  <SelectValue placeholder="Select" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Select</SelectLabel>
+                    {communitySize.map((i) => (
+                      <SelectItem value={i}>{i}</SelectItem>
+                    ))}
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+              <span className="text-[12px] text-neutral-500 self-center">
+                Include your email list, social media following (i.e. Instagram,{" "}
+                <br /> Discord, Facebook, Twitter, TikTok). We’d like to
+                understand the <br /> rough size of your current audience.
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      {/* Submit */}
+      <center>
+        <Button className="mt-12 mb-20 h-10 text-base font-bold py-6 px-5">
+          Submit application
+        </Button>
+      </center>
+    </div>
+  );
+}

src/app/find/page.tsx

@@ -38,20 +38,26 @@ export default function Find() {
     data: projects,
     isLoading: isLoadingProjects,
     error: projectError,
-  } = useQuery(getProjects(supabase, businessIds), { enabled: businessIds.length > 0 });
+  } = useQuery(getProjects(supabase, businessIds), {
+    enabled: businessIds.length > 0,
+  });
 
   const projectIds = projects?.map((p) => p.id) || [];
   const {
     data: tags,
     isLoading: isLoadingTags,
     error: tagError,
-  } = useQuery(getTags(supabase, projectIds), { enabled: projectIds.length > 0 });
+  } = useQuery(getTags(supabase, projectIds), {
+    enabled: projectIds.length > 0,
+  });
 
   const {
     data: investmentCounts,
     isLoading: isLoadingInvestments,
     error: investmentError,
-  } = useQuery(getInvestmentCounts(supabase, projectIds), { enabled: projectIds.length > 0 });
+  } = useQuery(getInvestmentCounts(supabase, projectIds), {
+    enabled: projectIds.length > 0,
+  });
 
   // -----
 
@@ -103,6 +109,7 @@ export default function Find() {
                         totalInvestor={project.ProjectInvestmentDetail[0]?.totalInvestment}
                         totalRaised={project.ProjectInvestmentDetail[0]?.targetInvestment}
                         tags={[]}
+                        imageUri={null}
                       />
                     ))}
                   </CardContent>

src/app/layout.tsx

@@ -39,8 +39,8 @@ export default function RootLayout({ children }: RootLayoutProps) {
               <NavigationBar />
               <div className="flex-1 bg-background">{children}</div>
             </div>
+            <SiteFooter />
           </ThemeProvider>
-          <SiteFooter />
         </body>
       </html>
     </ReactQueryClientProvider>

src/components/navigationBar/nav.tsx

@@ -42,9 +42,9 @@ ListItem.displayName = "ListItem";
 export function NavigationBar() {
   const businessComponents = [
     {
-      title: "Businesses",
-      href: "/landing",
-      description: "Raise on B2DVentures",
+      title: "Business",
+      href: "/business/apply",
+      description: "Apply to raise on on B2DVentures",
     },
   ];
 

src/components/siteFooter.tsx

@@ -2,8 +2,8 @@ import Link from "next/link";
 
 export function SiteFooter() {
   return (
-    <footer className="pt-6">
-      <div className="flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row bg-foreground text-background">
+    <footer className="pt-6 ">
+      <div className="flex flex-col items-center justify-between gap-4 md:h-24 md:flex-row text-background bg-foreground">
         <div className="container max-w-screen-xl flex flex-col md:flex-row justify-between items-center py-6">
           {/* Logo or Brand */}
           <div className="flex items-center space-x-4">