updated dialogues

src/Footer/footer.css

@@ -131,12 +131,12 @@ ul {
   display: grid;
   place-items: center;
   clip-path: polygon(0% 0%, 70% 0, 100% 30%, 100% 100%, 0 100%);
-  opacity: 0.5;
+  opacity: 0.3;
   transition: 250ms ease;
   z-index: 4;
 }
 
-.back-top-btn:is(:hover, :focus-visible){
+.back-top-btn:is(:hover, :focus-visible) {
   opacity: 1;
   transform: translateY(-20px);
 }

src/Header/Header.jsx

@@ -74,7 +74,7 @@ const Header = () => {
             Experience Gaming Through
             <br /> Latest <span style={{ color: "#5D3FD3" }}>Technologies</span>
           </Heading>
-          <p>
+          <p style={{padding: "10px"}}>
             Our success thrives on a dedicated, talented team to experience
             gaming. Join us at the event.
           </p>

src/components/ToastComponent.jsx

@@ -1,23 +1,43 @@
 import * as Toast from "@radix-ui/react-toast";
-import { useEffect, useRef, useState } from "react";
+import { useEffect, useState } from "react";
 import "./toast.css";
-import { RocketIcon } from "@radix-ui/react-icons";
+import { HandIcon, HeartIcon, MixIcon, RocketIcon } from "@radix-ui/react-icons";
 
 const ToastComponent = () => {
   const [open, setOpen] = useState(false);
+  const [message, setMessage] = useState("Hi there! ");
+  const [icon, setIcon] = useState("heart");
 
   useEffect(() => {
     setTimeout(() => {
       setOpen(true);
     }, 1000);
+    setTimeout(() => {
+      setOpen(false);
+    }, 5000);
+    setTimeout(() => {
+      setOpen(true);
+      setMessage("Welcome to Zero Latency! ");
+      setIcon("rocket");
+    }, 6000);
+    setTimeout(() => {
+      setOpen(false);
+    }, 11000);
+    setTimeout(() => {
+      setOpen(true);
+      setMessage("Why wait, register now! ");
+      setIcon("game");
+    }, 15000);
   }, []);
 
   return (
     <Toast.Provider swipeDirection="right">
       <Toast.Root className="ToastRoot" open={open} onOpenChange={setOpen}>
         <Toast.Title className="ToastTitle">
-          Welcome! to Zero Latency <br />
-          <RocketIcon />
+          {message}
+          {icon === "heart" && <HeartIcon />}
+          {icon === "rocket" && <RocketIcon />}
+          {icon === "game" && <MixIcon />}
         </Toast.Title>
       </Toast.Root>
       <Toast.Viewport className="ToastViewport" />

src/components/toast.css

@@ -12,7 +12,7 @@ button {
   flex-direction: column;
   padding: var(--viewport-padding);
   gap: 10px;
-  width: 290px;
+  width: 250px;
   max-width: 100vw;
   margin: 0;
   list-style: none;
@@ -21,14 +21,18 @@ button {
 }
 
 .ToastRoot {
-  border: 2px solid violet;
+  border-bottom: 2px solid violet;
+  border-right: 2px solid violet;
+  text-align: center;
   background: rgb(16, 13, 42);
   background: linear-gradient(
     90deg,
     rgba(16, 13, 42, 1) 0%,
     rgba(16, 13, 42, 0.4962359943977591) 100%
   );
-  border-radius: 6px;
+  border-top-left-radius: 30%;
+  border-bottom-left-radius: 30%;
+  border-top-right-radius: 30%;
   box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
     hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
   padding: 15px;

src/main.jsx

@@ -10,7 +10,7 @@ import * as Toast from "@radix-ui/react-toast";
 ReactDOM.createRoot(document.getElementById("root")).render(
   <React.StrictMode>
     <Theme appearance="inherit" accentColor="purple" radius="large">
-      <Toast.Provider duration={4000}>
+      <Toast.Provider duration={18000}>
         <App />
       </Toast.Provider>
     </Theme>