🎨 style: update styles for demo recording UI

Improves the visual styles and user experience of the demo recording feature.

- Change background color of recording indicator to black in dark mode
- Simplify recording button by combining start and stop functionality
- Update toast message to encourage downloading the app
- Modify wording in the recording completed dialog
- Update alert dialog cancel button text

Author: mangledbottles

apps/web/components/Demo.tsx

@@ -57,11 +57,11 @@ export const Demo = () => {
 
       {isRecording && (
         <div className="fixed left-0 top-1/2 transform -translate-y-1/2 text-white px-4 pl-8 py-2 rounded-r w-10 z-50">
-          <div className="flex justify-center items-center bg-white dark:bg-gray-800">
+          <div className="flex justify-center items-center bg-white dark:bg-black">
             <TooltipProvider>
               <Tooltip>
                 <TooltipTrigger asChild>
-                  <div className="divide-y divide-gray-300 dark:divide-gray-600 rounded-md shadow-md md:flex md:divide-y-0 bg-gray-50 dark:bg-gray-700">
+                  <div className="divide-y divide-gray-300 dark:divide-gray-600 rounded-md shadow-md md:flex md:divide-y-0 bg-gray-50 dark:bg-black">
                     <button
                       className="group flex w-full items-center justify-center hover:bg-gray-100 dark:hover:bg-gray-600"
                       onClick={() => {
@@ -134,8 +134,7 @@ export const Demo = () => {
                 </div>
 
                 <button
-                  onClick={startRecording}
-                  disabled={isRecording}
+                  onClick={!isRecording ? startRecording : stopRecording}
                   className={`w-5/12 md:h-10 sm:h-auto group relative justify-center gap-2 transition-all duration-300 ease-out hover:ring-2 hover:ring-primary hover:ring-offset-2 bg-sky-700 text-white hover:bg-sky-900 border border-transparent hover:border-sky-900 focus:border-sky-500 focus:ring focus:ring-sky-500 rounded-lg ${
                     isRecording &&
                     "bg-red-500 hover:bg-red-600 focus:border-red-400 focus:ring-red-400"
@@ -200,7 +199,7 @@ export const Demo = () => {
 
 const downloadToast = () => {
   return toast(
-    `This is just a demo of the Desktop app, you can't change the source`,
+    `Interactive demo of ScreenLink Desktop, download the application!`,
     {
       action: {
         label: "Download",
@@ -221,14 +220,14 @@ const RecordingCompletedDialog = ({
     <AlertDialog open={open}>
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>Demo Recording Complete 🚀</AlertDialogTitle>
+          <AlertDialogTitle>Interactive Demo Finished 🚀</AlertDialogTitle>
           <AlertDialogDescription>
-            This was just a demo of how the ScreenLink Desktop app works! You
-            can download and get started
+            This is what ScreenLink Desktop looks like. You can download and get
+            started!
           </AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel onClick={onClose}>Cancel</AlertDialogCancel>
+          <AlertDialogCancel onClick={onClose}>I don't want to benefit</AlertDialogCancel>
           <AlertDialogAction>
             <Link href="/download">Download</Link>
           </AlertDialogAction>

apps/web/components/hero.tsx

@@ -3,8 +3,10 @@ import Link from "next/link";
 
 import CtaButton from "@components/ui/CtaButton";
 import DemoLimk from "../public/images/demo-link-2.png";
-import { HeaderAction } from "./HeaderAction";
+import { GithubStars } from "./GithubStars";
 import { Demo } from "./Demo";
+import { Badge } from "./ui/badge";
+import { LockClosedIcon } from "@radix-ui/react-icons";
 
 export default function Hero() {
   return (
@@ -13,31 +15,40 @@ export default function Hero() {
         <div className="pt-20">
           {/* Hero content */}
           <div className="max-w-3xl mx-auto text-center">
-            <HeaderAction />
-            <h1 className="h1 font-hkgrotesk mb-6 mt-12" data-aos="fade-up">
-              The Open Source Loom Alternative
+            <span
+              className="isolate inline-flex rounded-md shadow-sm"
+              data-aos="fade-up"
+            >
+              <div className="relative inline-flex">
+                <Badge>
+                  <LockClosedIcon className="h-3 w-3 mr-2 text-indigo-500" />
+                  Private, secure and open source
+                </Badge>
+              </div>
+            </span>
+
+            <h1 className="h1 font-hkgrotesk mb-4 mt-6" data-aos="fade-up">
+              Instantly Share Ideas, Screen Recordings
             </h1>
             <p
-              className="text-xl text-slate-500 mb-10"
+              className="text-xl text-slate-500 mb-12"
               data-aos="fade-up"
               data-aos-delay="100"
             >
-              Create and share screen recording demos instantly with ScreenLink
-              for free
+              Create interactive screen recordings and share them instantly. No credit card required.
             </p>
             <div
-              className="max-w-xs mx-auto sm:max-w-none sm:inline-flex sm:justify-center space-y-4 sm:space-y-0 sm:space-x-4"
+              className="flex justify-center items-center gap-4"
               data-aos="fade-up"
               data-aos-delay="200"
             >
-              <div>
-                <CtaButton styles="btn" />
-              </div>
+              <CtaButton styles="btn w-60 py-3" />
+              <GithubStars styles="w-45 py-3" />
             </div>
           </div>
           {/* Hero image */}
           <div
-            className="pt-16 md:pt-20"
+            className="pt-16"
             data-aos="fade-up"
             data-aos-delay="300"
           >

apps/web/components/ui/CtaButton.tsx

@@ -18,7 +18,7 @@ export default function CtaButton({ styles }: { styles?: string }) {
   if (status === "authenticated")
     return (
       <Link
-        className={`text-white bg-indigo-500 hover:bg-indigo-600 w-full shadow-sm group ${
+        className={`text-white bg-indigo-500 hover:bg-indigo-600 shadow-sm group ${
           styles ? styles : ``
         }`}
         href="/app"
@@ -33,12 +33,12 @@ export default function CtaButton({ styles }: { styles?: string }) {
 
   return (
     <Link
-      className={`font-medium text-white bg-indigo-500 hover:bg-indigo-600 w-full shadow-sm group px-3 lg:px-4 py-2 flex items-center transition duration-150 ease-in-out rounded-md ${
+      className={`font-medium text-white bg-indigo-500 hover:bg-indigo-600 shadow-sm group px-3 lg:px-4 py-2 flex items-center transition duration-150 ease-in-out rounded-md ${
         styles ? styles : ``
       }`}
       href="/signup"
     >
-      Start for Free{" "}
+      Get Started{" "}
       <ArrowRightIcon className="tracking-normal text-sky-300 group-hover:translate-x-0.5 transition-transform duration-150 ease-in-out ml-1" />
     </Link>
   );