feat(web): adjust light ray

brunocroh · May 19, 2024 · 469bdc5 · 469bdc5
1 parent 6e2a946
commit 469bdc5
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 17 deletions.
diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -1,30 +1,36 @@
 import { Button } from "@/components/ui/button";
+import Image from "next/image";
 import Link from "next/link";
 import React from "react";
 
 export default function Page(): JSX.Element {
   return (
     <main className="flex flex-col h-full">
       <div>
-        <img
+        <Image
           src="/light-ray.svg"
+          alt="Purple light ray"
+          width="1024"
+          height="800"
           className="absolute animate-in fade-in slide-in-from-bottom-1"
-          style={{ color: "transparent", animationDuration: "5s" }}
+          style={{ color: "transparent", animationDuration: "10s" }}
         />
         <div className="flex flex-row w-full">
-          <video
-            className=""
-            style={{
-              display: "block",
-              width: "920px",
-              height: "700px",
-            }}
-            playsInline
-            loop={true}
-            autoPlay={true}
-            muted={true}
-            src="/earth.mp4"
-          ></video>
+          <div className="flex">
+            <video
+              className="w-full max-w-2xl rounded-lg animation-scale-in-fade"
+              style={{
+                display: "block",
+                width: "920px",
+                height: "700px",
+              }}
+              playsInline
+              loop={true}
+              autoPlay={true}
+              muted={true}
+              src="/earth.mp4"
+            ></video>
+          </div>
           <div className="content-center">
             <Link href={`room/queue`}>
               <Button className="bg-red-500 min-w-max">Start a chat</Button>

diff --git a/apps/web/public/light-ray.svg b/apps/web/public/light-ray.svg