fix(web): home highlights

web/src/components/SecondHighlights/SecondHighlights.tsx

@@ -2,7 +2,7 @@ import { Highlight } from "@/types/highlight";
 import HighlightCard from "@/components/HighlightCard";
 
 const SecondHighlights = () => {
-  const secondSectionHighlights: Highlight[] = [
+  const highlights: Highlight[] = [
     {
       id: "6",
       oldId: 6,
@@ -18,7 +18,7 @@ const SecondHighlights = () => {
       type: "GENERAL",
       title: "DRINQUES FROZEN",
       subtitle:
-        "O calor chegou e nada melhor do que um bom drinque frozen para se refrescar durante esse verão. Confira aqui nossas receitas",
+        "O calor chegou e nada melhor do que um bom drinque frozen para se refrescar durante esse verão. Confira aqui nossas receitas.",
       description: "",
       customUrl: "/drinques/frozen",
     },
@@ -46,7 +46,7 @@ const SecondHighlights = () => {
 
   return (
     <div className="mt-14 grid grid-cols-1 gap-7 md:grid-cols-4">
-      {secondSectionHighlights?.map((highlight) => (
+      {highlights?.map((highlight) => (
         <HighlightCard key={highlight.id} highlight={highlight} />
       ))}
     </div>

web/src/components/ThirdHighlights/ThirdHighlights.tsx

@@ -0,0 +1,55 @@
+import { Highlight } from "@/types/highlight";
+import HighlightCard from "@/components/HighlightCard";
+
+const ThirdHighlights = () => {
+  const highlights: Highlight[] = [
+    {
+      id: "11",
+      oldId: 11,
+      type: "GENERAL",
+      title: "FÁCEIS E RÁPIDOS",
+      subtitle:
+        "Separamos 10 drinques deliciosos e muito fáceis de preparar para você fazer em casa, sem nenhum trabalho. Confira!",
+      description: "",
+    },
+    {
+      id: "1",
+      oldId: 1,
+      type: "GENERAL",
+      title: "HALLOWEEN",
+      subtitle:
+        "O Halloween chegou? Então surpreenda seus amigos com este terríveis e assustadores drinques que separamos para esse feriado.",
+      description: "",
+    },
+    {
+      id: "112",
+      oldId: 112,
+      type: "GENERAL",
+      title: "MOJITO",
+      subtitle:
+        "O Mojito é um coquetel refrescante conhecido mundialmente. Este clássico é um dos poucos feitos com hortelã fresca, o que o torna único.",
+      description: "",
+      customUrl: "/drinques/24",
+    },
+    {
+      id: "113",
+      oldId: 113,
+      type: "GENERAL",
+      title: "MANGO DAIQUIRI",
+      subtitle:
+        "O Mango Daiquiri é delicioso e muito refrescante, perfeito para os dias quentes.",
+      description: "",
+      customUrl: "/drinques/432",
+    },
+  ];
+
+  return (
+    <div className="mt-14 grid grid-cols-1 gap-7 md:grid-cols-4">
+      {highlights?.map((highlight) => (
+        <HighlightCard key={highlight.id} highlight={highlight} />
+      ))}
+    </div>
+  );
+};
+
+export default ThirdHighlights;

web/src/components/ThirdHighlights/index.ts

@@ -0,0 +1 @@
+export { default } from "./ThirdHighlights";

web/src/pages/Home/Home.tsx

@@ -1,11 +1,53 @@
+import { Link } from "react-router-dom";
+import { Button } from "@/components/ui/button";
 import FeaturedHighlights from "@/components/FeaturedHighlights";
 import SecondHighlights from "@/components/SecondHighlights";
+import ThirdHighlights from "@/components/ThirdHighlights";
 
 const Home = () => (
-  <div className="container">
-    <FeaturedHighlights />
-    <SecondHighlights />
-  </div>
+  <>
+    <div className="container">
+      <FeaturedHighlights />
+      <SecondHighlights />
+    </div>
+    <div className="my-24 w-full bg-gray-100">
+      <div className="container grid grid-cols-2 gap-10 py-24">
+        <div>
+          <h1 className="mb-3 font-serif text-3xl font-bold text-gray-900">
+            Dicas Gerais
+          </h1>
+          <p className="pb-8 pr-0 text-gray-500 md:pr-24">
+            Descubra como criar os mixes essenciais para seus drinks favoritos,
+            aprenda técnicas de decoração simples, como fazer coquetéis em
+            camadas e muito mais.
+          </p>
+          <Link to="/drinques/caipirinhas">
+            <Button className="animate-slide-in-from-left">
+              Veja mais dicas
+            </Button>
+          </Link>
+        </div>
+        <div>
+          <h1 className="mb-3 font-serif text-3xl font-bold text-gray-900">
+            Tudo sobre bar
+          </h1>
+          <p className="pb-8 pr-0 text-gray-500 md:pr-9">
+            Explore a classificação dos coquetéis, descubra as principais
+            medidas utilizadas, conheça os diferentes tipos de copos e desvende
+            outros segredos essenciais da mixologia.
+          </p>
+          <Link to="/drinques/caipirinhas">
+            <Button className="animate-slide-in-from-left">
+              Veja mais detalhes
+            </Button>
+          </Link>
+        </div>
+      </div>
+    </div>
+    <div className="container">
+      <ThirdHighlights />
+    </div>
+  </>
 );
 
 export default Home;