Merge pull request #7 from deco-sites/feature/benefits

feat: add benefits component
deco-sites · Nov 14, 2024 · e72f48e · e72f48e
2 parents 3f641c5 + 2206011
commit e72f48e
Show file tree

Hide file tree

Showing 4 changed files with 118 additions and 28 deletions.
diff --git a/.deco/blocks/pages-home-5afd25174424.json b/.deco/blocks/pages-home-5afd25174424.json
@@ -54,6 +54,31 @@
           "href": "#"
         }
       }
+    },
+    {
+      "__resolveType": "website/sections/Rendering/Lazy.tsx",
+      "section": {
+        "__resolveType": "site/sections/Benefits.tsx",
+        "title": "Ao usar nossa tecnologia, você:",
+        "cards": [
+          {
+            "icon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/076eff11-122b-491d-9efd-48e7f72fe7b6/Group.svg",
+            "width": 57,
+            "height": 52,
+            "description": "Otimiza o trabalho das equipes assistenciais"
+          },
+          {
+            "icon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/45cbd8c4-fcea-4092-ada0-6c34ba130fb7/Vector-(4).svg",
+            "description": "Reduz taxas de hospitalização"
+          },
+          {
+            "description": "Fortaleça a relação com familiares e operadoras de saúde",
+            "icon": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/d450fe2e-80c8-4aa4-8b90-d538adda5c6c/Vector-(5).svg",
+            "width": 57,
+            "height": 49
+          }
+        ]
+      }
     }
   ],
   "__resolveType": "website/pages/Page.tsx",

diff --git a/manifest.gen.ts b/manifest.gen.ts
@@ -5,37 +5,39 @@
 import * as $$$$$$$$$$$0 from "./apps/deco/blog.ts";
 import * as $$$$$$$$$$$1 from "./apps/deco/htmx.ts";
 import * as $$$$$$$$$$$2 from "./apps/site.ts";
-import * as $$$$$$0 from "./sections/BlogPosts.tsx";
-import * as $$$$$$1 from "./sections/Faq.tsx";
-import * as $$$$$$2 from "./sections/Features.tsx";
-import * as $$$$$$3 from "./sections/Footer.tsx";
-import * as $$$$$$4 from "./sections/Header.tsx";
-import * as $$$$$$11 from "./sections/hero-1.tsx";
-import * as $$$$$$12 from "./sections/hero-2.tsx";
-import * as $$$$$$5 from "./sections/Hero.tsx";
-import * as $$$$$$13 from "./sections/hero2.tsx";
-import * as $$$$$$6 from "./sections/ImageWithDescription.tsx";
-import * as $$$$$$7 from "./sections/ImageWithParagraph.tsx";
-import * as $$$$$$8 from "./sections/Logos.tsx";
-import * as $$$$$$9 from "./sections/Testimonials.tsx";
-import * as $$$$$$10 from "./sections/Theme/Theme.tsx";
+import * as $$$$$$0 from "./sections/Benefits.tsx";
+import * as $$$$$$1 from "./sections/BlogPosts.tsx";
+import * as $$$$$$2 from "./sections/Faq.tsx";
+import * as $$$$$$3 from "./sections/Features.tsx";
+import * as $$$$$$4 from "./sections/Footer.tsx";
+import * as $$$$$$5 from "./sections/Header.tsx";
+import * as $$$$$$12 from "./sections/hero-1.tsx";
+import * as $$$$$$13 from "./sections/hero-2.tsx";
+import * as $$$$$$6 from "./sections/Hero.tsx";
+import * as $$$$$$14 from "./sections/hero2.tsx";
+import * as $$$$$$7 from "./sections/ImageWithDescription.tsx";
+import * as $$$$$$8 from "./sections/ImageWithParagraph.tsx";
+import * as $$$$$$9 from "./sections/Logos.tsx";
+import * as $$$$$$10 from "./sections/Testimonials.tsx";
+import * as $$$$$$11 from "./sections/Theme/Theme.tsx";
 
 const manifest = {
   "sections": {
-    "site/sections/BlogPosts.tsx": $$$$$$0,
-    "site/sections/Faq.tsx": $$$$$$1,
-    "site/sections/Features.tsx": $$$$$$2,
-    "site/sections/Footer.tsx": $$$$$$3,
-    "site/sections/Header.tsx": $$$$$$4,
-    "site/sections/hero-1.tsx": $$$$$$11,
-    "site/sections/hero-2.tsx": $$$$$$12,
-    "site/sections/Hero.tsx": $$$$$$5,
-    "site/sections/hero2.tsx": $$$$$$13,
-    "site/sections/ImageWithDescription.tsx": $$$$$$6,
-    "site/sections/ImageWithParagraph.tsx": $$$$$$7,
-    "site/sections/Logos.tsx": $$$$$$8,
-    "site/sections/Testimonials.tsx": $$$$$$9,
-    "site/sections/Theme/Theme.tsx": $$$$$$10,
+    "site/sections/Benefits.tsx": $$$$$$0,
+    "site/sections/BlogPosts.tsx": $$$$$$1,
+    "site/sections/Faq.tsx": $$$$$$2,
+    "site/sections/Features.tsx": $$$$$$3,
+    "site/sections/Footer.tsx": $$$$$$4,
+    "site/sections/Header.tsx": $$$$$$5,
+    "site/sections/hero-1.tsx": $$$$$$12,
+    "site/sections/hero-2.tsx": $$$$$$13,
+    "site/sections/Hero.tsx": $$$$$$6,
+    "site/sections/hero2.tsx": $$$$$$14,
+    "site/sections/ImageWithDescription.tsx": $$$$$$7,
+    "site/sections/ImageWithParagraph.tsx": $$$$$$8,
+    "site/sections/Logos.tsx": $$$$$$9,
+    "site/sections/Testimonials.tsx": $$$$$$10,
+    "site/sections/Theme/Theme.tsx": $$$$$$11,
   },
   "apps": {
     "site/apps/deco/blog.ts": $$$$$$$$$$$0,

diff --git a/sections/Benefits.tsx b/sections/Benefits.tsx
@@ -0,0 +1,52 @@
+import { ImageWidget } from "apps/admin/widgets.ts";
+import Image from "apps/website/components/Image.tsx";
+
+interface Card {
+  /** @title Ícone */
+  icon: ImageWidget;
+  /** @title Largura */
+  width?: number;
+  /** @title Altura */
+  height?: number;
+  alt?: string;
+  /** @title Descrição */
+  description: string;
+}
+
+export interface Props {
+  /** @title Titulo */
+  title: string;
+  /** @title Cards */
+  cards: Card[];
+}
+
+export default function Benefits({ cards, title }: Props) {
+  return (
+    <div class="default-container">
+      <div class="flex flex-col gap-10">
+        <div class="flex flex-col items-center">
+          <h3 class="text-2xl font-bold text-center lg:text-[32px] text-primary lg:leading-normal max-w-[308px] sm:max-w-[879px]">
+            {title}
+          </h3>
+        </div>
+        <div class="flex flex-col gap-6 lg:flex-row">
+          {cards.map((card) => (
+            <div class="bg-secondary rounded-3xl py-6 px-7 flex flex-col items-center lg:flex-1 gap-5">
+              <div class="rounded-full w-[68px] h-[68px] bg-secondary flex items-center justify-center">
+                <Image
+                  src={card.icon}
+                  width={card.width || 47}
+                  height={card.height || 47}
+                  alt={card.alt}
+                />
+              </div>
+              <p class="text-center font-xs text-base-100 ">
+                {card.description}
+              </p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/static/tailwind.css b/static/tailwind.css
@@ -2960,6 +2960,9 @@ input.tab:checked + .tab-content,
 .max-w-\[300px\] {
   max-width: 300px;
 }
+.max-w-\[308px\] {
+  max-width: 308px;
+}
 .max-w-\[310px\] {
   max-width: 310px;
 }
@@ -3861,6 +3864,10 @@ input.tab:checked + .tab-content,
     max-width: 488px;
   }
 
+  .sm\:max-w-\[879px\] {
+    max-width: 879px;
+  }
+
   .sm\:flex-row {
     flex-direction: row;
   }
@@ -4075,6 +4082,10 @@ input.tab:checked + .tab-content,
     line-height: 2rem;
   }
 
+  .lg\:text-\[32px\] {
+    font-size: 32px;
+  }
+
   .lg\:text-\[40px\] {
     font-size: 40px;
   }