feat: homePage

src/components/ButtonGroup/ButtonGroup.tsx

@@ -18,7 +18,7 @@ export const ButtonGroup = (props: props) => {
   }
   return (
     <div className="flex justify-center
-    gap-4 flex-wrap w-full
+    gap-6 p-2 flex-wrap w-full
     background-slate-200 h-50">
       <ButtonTalk children="Front-End CE" active={mode == "frontend"} onModeChange={handleChange("frontend")} />
       <ButtonTalk children="Convida" active={mode == "convida"} onModeChange={handleChange("convida")} />

src/components/DeadComponent/DeadComponent.tsx

@@ -4,8 +4,8 @@ export const DeadComponent = ({title, hours}: DeadComponentProps) => {
 
 
   return (
-    <div className="flex flex-col items-center justify-center h-screen">
-      <div className="bg-[#261537] w-full sm:w-[620px] h-[62px] rounded-[8px] p-4 sm:p-12 flex items-center justify-start">
+    <div className="flex flex-col items-center justify-center mt-8">
+      <div className="bg-[#261537] w-[420px] sm:w-[620px] h-[62px] rounded-[8px] p-4 sm:p-12 flex items-center justify-start">
         <div className="text-[#E6D5F7] text-xl sm:text-3xl flex items-center">
           <span className="text-[#9888A8] mr-5">{hours}</span>
           <p>{title}</p>

src/components/LinkAgenda/LinkAgenda.tsx

@@ -1,24 +1,24 @@
-// import React from "react";
-// import { Link } from "react-router-dom";
-// import { Link } from "lucide-react";
+import { Link } from "react-router-dom";
 
+export const LinkAgenda = () => {
 
-//substituir a => Link
+  
 
-export const LinkAgenda = () => {
   return (
-    <div>  
-      <div className="flex flex-row justify-between items-center p-2 md:p-1 space-x-4 md:space-x-6">
-        <a 
-          className="underline text-xs md:text-sm flex-1 text-center" 
-          /*to="/acontecendo-agora"*/ >
+    <div className="flex justify-center  items-center">
+      <div className="text-white flex flex-row justify-between items-center p-2 md:p-1 space-x-4 md:space-x-6">
+        <Link
+          className="underline text-[12px] "
+          to="/lives"
+        >
           Acontecendo agora
-        </a>
-        <a 
-          className="underline text-xs md:text-sm flex-1 text-center" 
-          /*to="/agenda"*/ >
+        </Link>
+        <Link
+          className="underline text-[12px] md:text-sm flex-1 text-center p-2 md:p-1"
+          to="/agenda"
+        >
           Ver minha agenda &gt;
-        </a>
+        </Link>
       </div>
     </div>
   );

src/components/SpeakerCard/SpeakerCard.tsx

@@ -12,15 +12,14 @@ export const SpeakerCard = ({
   imageUrl,
   name,
   role,
+  hour,
   onChangeMode,
 }: SpeakerCardProps) => {
   return (
-    <Card className="max-w-[300px] p-3 flex items-start flex-col justify-center bg-transparent border gap-4 border-[#D9B1FF] rounded-lg ">
+    <Card className="p-5 max-w-[500px] flex items-start flex-col justify-center bg-transparent border gap-4 border-[#D9B1FF] rounded-lg ">
       <div className="flex gap-3 justify-between items-start w-full">
-        <span className="text-[#A190B2]">8:00</span>
-        <h1
-          className="text-[#E6D5F7] mt-0 pt-0 w-full text-wrap whitespace-normal text-base max-w-[180px] break-words"
-        >
+        <span className="text-[#A190B2] text-sm">{hour}</span>
+        <h1 className="text-[#E6D5F7] mt-0 pt-0 w-full text-wrap whitespace-normal text-base break-words">
           {label}
         </h1>
         <Togglebutton initialMode={true} onModeChange={onChangeMode} />{" "}

src/components/SpeakerCard/types.ts

@@ -3,5 +3,6 @@ import { ProfileCardProps } from "../ProfileCard/types"
 export interface SpeakerCardProps extends ProfileCardProps {
     label: string
     tags: string[]
+    hour: string
     onChangeMode: (mode: boolean) => void
 }

src/index.css

@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --background: 0 0% 100%;
+    --background: 0 0% 6%;
     --foreground: 222.2 84% 4.9%;
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
@@ -68,3 +68,4 @@
     @apply bg-background text-foreground;
   }
 }
+

src/pages/HomePage.tsx

@@ -0,0 +1,44 @@
+
+import { Palestra } from "@/api/types";
+import { ButtonGroup } from "@/components/ButtonGroup";
+import { DeadComponent } from "@/components/DeadComponent";
+import { Header } from "@/components/Header";
+import { LinkAgenda } from "@/components/LinkAgenda";
+import { SpeakerCard } from "@/components/SpeakerCard";
+import { useAgenda } from "@/hooks/useAgenda";
+
+
+export const HomePage = () => {
+
+  const { data } = useAgenda();
+console.log(data);
+  return (
+    <section className=" flex flex-col items-center justify-center container">
+    <div className="mt-8">
+     <Header label={"Agenda do evento"} />
+     </div>
+     <LinkAgenda />
+     <div className="mt-8">
+     <ButtonGroup />
+     </div>
+     <DeadComponent title={"Abertura"} hours={"8:00"} />
+     <div className="mt-8 mx-auto flex flex-col items-center justify-center gap-3">
+      {data?.Convida.map((item: Palestra) => (
+        <SpeakerCard
+        hour={item.hour}
+          label={item.title}
+          tags={item.tags}
+          name={item.speaker.title}
+          role={item.speaker.role}
+          imageUrl={item.speaker.image}
+          imageFallback={item.speaker.title}
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          onChangeMode={function (_mode: boolean): void {
+            throw new Error("Function not implemented.");
+          } }       />
+      ))}
+     </div>
+     <DeadComponent title={"Abertura"} hours={"8:00"} />
+    </section>
+  );
+};

src/routes/index.tsx

@@ -1,9 +1,11 @@
+import { HomePage } from "@/pages/HomePage";
+
 import { Routes, Route } from "react-router-dom";
 
 export const AppRoutes = () => {
   return (
     <Routes>
-      <Route path="/" element={<h1>Home</h1>} />
+      <Route path="/" element={<HomePage />} />
       <Route path="/agenda" element={<h1>Minha Agenda</h1>} />
       <Route path="/lives" element={<h1>Live Talks</h1>} />
       <Route path="*" element={<h1>404</h1>} />