From 2206011392be63dd0d7b7646baa6a2726e04965f Mon Sep 17 00:00:00 2001 From: MatheusTrindade5201 Date: Wed, 13 Nov 2024 21:18:10 -0300 Subject: [PATCH] feat: add benefits component --- .deco/blocks/pages-home-5afd25174424.json | 25 ++++++++++ manifest.gen.ts | 58 ++++++++++++----------- sections/Benefits.tsx | 52 ++++++++++++++++++++ static/tailwind.css | 11 +++++ 4 files changed, 118 insertions(+), 28 deletions(-) create mode 100644 sections/Benefits.tsx diff --git a/.deco/blocks/pages-home-5afd25174424.json b/.deco/blocks/pages-home-5afd25174424.json index a437e6b..58d0042 100644 --- 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 index 7cb3a21..3dd43dc 100644 --- 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 new file mode 100644 index 0000000..332c808 --- /dev/null +++ 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 ( +
+
+
+

+ {title} +

+
+
+ {cards.map((card) => ( +
+
+ {card.alt} +
+

+ {card.description} +

+
+ ))} +
+
+
+ ); +} diff --git a/static/tailwind.css b/static/tailwind.css index 58250fd..e4d3498 100644 --- 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; }