add list of logos

.gitignore

@@ -11,3 +11,6 @@ backend/backend/*
 # Env vars
 frontend/.env.local
 .env
+
+# Mac files
+.DS_Store

frontend/src/components/TermsOfServiceDialog.tsx

@@ -11,6 +11,8 @@ import { Input } from "./ui/input";
 import toast from "react-hot-toast";
 import { PICO_BACKEND_FORM_SECRET } from "../config";
 
+const LOGOS = ["microsoft", "amazon", "mit", "stanford", "bytedance", "baidu"];
+
 const TermsOfServiceDialog: React.FC<{
   open: boolean;
   onOpenChange: (open: boolean) => void;
@@ -31,7 +33,7 @@ const TermsOfServiceDialog: React.FC<{
     <AlertDialog open={open} onOpenChange={onOpenChange}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle className="mb-2">
+          <AlertDialogTitle className="mb-2 text-xl">
             Enter your email to get started
           </AlertDialogTitle>
         </AlertDialogHeader>
@@ -45,8 +47,8 @@ const TermsOfServiceDialog: React.FC<{
             }}
           />
         </div>
-        <div className="flex items-center space-x-2">
+        <div className="flex flex-col space-y-3 text-sm">
-          <span>
+          <p>
             By providing your email, you consent to receiving occasional product
             updates, and you accept the{" "}
             <a
@@ -56,8 +58,11 @@ const TermsOfServiceDialog: React.FC<{
             >
               terms of service
             </a>
-            . <br />
+            .{" "}
-            <br />
+          </p>
+
+          <p>
+            {" "}
             Prefer to run it yourself locally? This project is open source.{" "}
             <a
               href="https://github.com/abi/screenshot-to-code"
@@ -66,7 +71,7 @@ const TermsOfServiceDialog: React.FC<{
             >
               Download the code and get started on Github.
             </a>
-          </span>
+          </p>
         </div>
 
         <AlertDialogFooter>
@@ -80,9 +85,32 @@ const TermsOfServiceDialog: React.FC<{
               }
             }}
           >
-            Agree
+            Agree & Continue
           </AlertDialogAction>
         </AlertDialogFooter>
+
+        {/* Logos */}
+        <div>
+          <div
+            className="mx-auto grid max-w-lg items-center gap-x-2 
+          gap-y-10 sm:max-w-xl grid-cols-6 lg:mx-0 lg:max-w-none mt-10"
+          >
+            {LOGOS.map((companyName) => (
+              <img
+                key={companyName}
+                className="col-span-1 max-h-12 w-full object-contain grayscale opacity-50 hover:opacity-100"
+                src={`https://picoapps.xyz/logos/${companyName}.png`}
+                alt={companyName}
+                width={120}
+                height={48}
+              />
+            ))}
+          </div>
+          <div className="text-gray-500 text-xs mt-4 text-center">
+            Designers and engineers from these organizations use Screenshot to
+            Code to build interfaces faster.
+          </div>
+        </div>
       </AlertDialogContent>
     </AlertDialog>
   );