From ca97d7433931b7a8d5bb46695f65f96825f7d939 Mon Sep 17 00:00:00 2001 From: MatheusTrindade5201 Date: Thu, 14 Nov 2024 18:25:21 -0300 Subject: [PATCH 1/2] feat: faq and footer --- .deco/blocks/Faq%20-%20default.json | 21 +- .deco/blocks/Footer.json | 9 +- .deco/blocks/Neutral.json | 3 +- .deco/blocks/pages-home-5afd25174424.json | 68 +++--- sections/Benefits.tsx | 2 +- sections/Faq.tsx | 89 ++++---- sections/Footer.tsx | 259 +--------------------- static/tailwind.css | 132 +++++------ tailwind.css | 4 +- 9 files changed, 183 insertions(+), 404 deletions(-) diff --git a/.deco/blocks/Faq%20-%20default.json b/.deco/blocks/Faq%20-%20default.json index 2f01f8d..fd95606 100644 --- a/.deco/blocks/Faq%20-%20default.json +++ b/.deco/blocks/Faq%20-%20default.json @@ -1 +1,20 @@ -{"title":"FAQs","__resolveType":"site/sections/Faq.tsx"} \ No newline at end of file +{ + "title": "FAQ", + "__resolveType": "site/sections/Faq.tsx", + "questions": [ + { + "title": "O que é a tal tal tal?", + "answer": "

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

" + }, + { + "title": "O que é a tal tal tal?", + "answer": "

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

" + }, + { + "title": "O que é a tal tal tal?", + "answer": "

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

" + } + ], + "headline": "Perguntas Frequentes", + "description": "Caso a sua dúvida não tenha sido respondida nesta página, entre em contato com minha equipe de suporte através do e-mail " +} \ No newline at end of file diff --git a/.deco/blocks/Footer.json b/.deco/blocks/Footer.json index 746bfb5..6d79208 100644 --- a/.deco/blocks/Footer.json +++ b/.deco/blocks/Footer.json @@ -1 +1,8 @@ -{"__resolveType":"site/sections/Footer.tsx","links":[],"bottomLinks":[],"social":[],"subscribe":{}} \ No newline at end of file +{ + "__resolveType": "site/sections/Footer.tsx", + "links": [], + "bottomLinks": [], + "social": [], + "subscribe": {}, + "copyright": "2024 @ Todos os direitos reservados" +} \ No newline at end of file diff --git a/.deco/blocks/Neutral.json b/.deco/blocks/Neutral.json index a116d01..aa3ad89 100644 --- a/.deco/blocks/Neutral.json +++ b/.deco/blocks/Neutral.json @@ -67,6 +67,7 @@ "base-200": "#848484", "base-300": "#FEFCFE", "base-content": "#545454", - "primary-content": "#000000" + "primary-content": "#000000", + "secondary-content": "#DBDBDB" } } \ No newline at end of file diff --git a/.deco/blocks/pages-home-5afd25174424.json b/.deco/blocks/pages-home-5afd25174424.json index 58d0042..22f41f0 100644 --- a/.deco/blocks/pages-home-5afd25174424.json +++ b/.deco/blocks/pages-home-5afd25174424.json @@ -42,43 +42,43 @@ ] }, { - "__resolveType": "website/sections/Rendering/Lazy.tsx", - "section": { - "__resolveType": "site/sections/ImageWithDescription.tsx", - "placement": "left", - "image": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/d50888cb-263f-4cb4-b498-7e52bb90be1b/IMAGEM-2.svg", - "title": "Nossa solução é desenvolvida para operações de assistências extra-hospitalares que buscam tecnologia de ponta e um diferencial competitivo no mercado", - "description": "Se você quer otimizar a eficiência operacional e elevar a qualidade dos cuidados, estamos aqui para fazer a diferença ", - "cta": { - "text": "Agendar Reunião", - "href": "#" - } + "__resolveType": "site/sections/ImageWithDescription.tsx", + "placement": "left", + "image": "https://deco-sites-assets.s3.sa-east-1.amazonaws.com/quorum/d50888cb-263f-4cb4-b498-7e52bb90be1b/IMAGEM-2.svg", + "title": "Nossa solução é desenvolvida para operações de assistências extra-hospitalares que buscam tecnologia de ponta e um diferencial competitivo no mercado", + "description": "Se você quer otimizar a eficiência operacional e elevar a qualidade dos cuidados, estamos aqui para fazer a diferença ", + "cta": { + "text": "Agendar Reunião", + "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": "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": "Faq - default" + }, + { + "__resolveType": "Footer" } ], "__resolveType": "website/pages/Page.tsx", diff --git a/sections/Benefits.tsx b/sections/Benefits.tsx index 332c808..8764596 100644 --- a/sections/Benefits.tsx +++ b/sections/Benefits.tsx @@ -22,7 +22,7 @@ export interface Props { export default function Benefits({ cards, title }: Props) { return ( -
+

diff --git a/sections/Faq.tsx b/sections/Faq.tsx index a05edec..9daa764 100644 --- a/sections/Faq.tsx +++ b/sections/Faq.tsx @@ -1,3 +1,5 @@ +import Icon from "site/components/ui/Icon.tsx"; + export interface CTA { id?: string; href: string; @@ -13,15 +15,15 @@ export interface Question { export interface Props { title?: string; + headline?: string; description?: string; - cta?: CTA; questions?: Question[]; } export default function BlogPosts({ title = "FAQs", + headline = "Perguntas Frequentes", description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.", - cta = { id: "change-me", href: "/", text: "Change me", outline: true }, questions = [ { title: "Question #1 text goes here", @@ -51,50 +53,47 @@ export default function BlogPosts({ ], }: Props) { return ( -
-
-
-

{title}

-

{description}

- - {cta?.text} - -
-
- {questions?.map((question) => ( -
- - {question.title} - - - +
+
+
+

{title}

+

+ {headline} +

+

+ {description} +

+
+
+ {questions?.map((question, index) => ( +
+
-

-
- ))} +
+ + + ))} +

diff --git a/sections/Footer.tsx b/sections/Footer.tsx index f2e1279..9d33a37 100644 --- a/sections/Footer.tsx +++ b/sections/Footer.tsx @@ -1,268 +1,13 @@ -import Image from "apps/website/components/Image.tsx"; -import type { ImageWidget } from "apps/admin/widgets.ts"; - -export interface Column { - title: string; - items: Items[]; -} - -export interface Items { - label: string; - href: string; -} - -export interface Subscribe { - title: string; - description: string; - /** @format rich-text */ - instructions: string; -} - -export interface Social { - network: "Facebook" | "Instagram" | "Linkedin" | "X - Twitter" | "Youtube"; - href: string; -} - export interface Props { - logo?: { - src?: ImageWidget; - alt?: string; - }; - links?: Column[]; - subscribe?: Subscribe; - madeWith?: { - label?: string; - src?: ImageWidget; - href?: string; - }; copyright?: string; - bottomLinks?: Items[]; - social?: Social[]; } export default function Footer({ - logo = { - src: "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/1527/67120bcd-936a-4ea5-a760-02ed5c4a3d04", - alt: "Logo", - }, - links = [ - { - title: "Column One", - items: [ - { label: "Link One", href: "/" }, - { label: "Link Two", href: "/" }, - { label: "Link Three", href: "/" }, - { label: "Link Four", href: "/" }, - { label: "Link Five", href: "/" }, - ], - }, - { - title: "Column Two", - items: [ - { label: "Link Six", href: "/" }, - { label: "Link Seven", href: "/" }, - { label: "Link Eight", href: "/" }, - { label: "Link Nine", href: "/" }, - { label: "Link Ten", href: "/" }, - ], - }, - { - title: "Column Three", - items: [ - { label: "Link Eleven", href: "/" }, - { label: "Link Twelve", href: "/" }, - { label: "Link FourThirteenteen", href: "/" }, - { label: "Link Fourteen", href: "/" }, - { label: "Link Fifteen", href: "/" }, - ], - }, - ], - subscribe = { - title: "Subcribe", - description: - "Join our newsletter to stay up to date on features and releases.", - instructions: - "By subscribing you agree to with our Privacy Policy and provide consent to receive updates from our company.", - }, - madeWith = { - label: "Made with", - src: "https://ozksgdmyrqcxcwhnbepg.supabase.co/storage/v1/object/public/assets/1527/cc202be0-af57-4b32-b9c9-d1d7dc97bf85", - href: "https://deco.cx", - }, copyright = "© 2024 deco.cx. All rights reserved.", - bottomLinks = [ - { label: "Privacy Policy", href: "/" }, - { label: "Terms of Service", href: "/" }, - { label: "Cookies Settings", href: "/" }, - ], - social = [ - { network: "Facebook", href: "" }, - { network: "Instagram", href: "" }, - { network: "X - Twitter", href: "" }, - { network: "Linkedin", href: "" }, - { network: "Youtube", href: "" }, - ], }: Props) { return ( -
-
-
-
- {logo.alt} -
-
- {links?.map((link) => ( -
-

{link.title}

- {link.items?.map((item) => ( - - {item.label} - - ))} -
- ))} -
-
-

{subscribe?.title}

-
-

{subscribe.description}

-
- - -
-

-
-
-
-
-
- - {madeWith?.label} - {madeWith?.label} - - {copyright} -
- {bottomLinks?.map((item) => ( - - {item.label} - - ))} -
-
-
- {social?.map((item) => ( - - {item.network == "Facebook" && ( - - - - )} - {item.network == "Instagram" && ( - - - - )} - {item.network == "Linkedin" && ( - - - - )} - {item.network == "X - Twitter" && ( - - - - )} - {item.network == "Youtube" && ( - - - - )} - - ))} -
-
-
+
+ {copyright}
); } diff --git a/static/tailwind.css b/static/tailwind.css index e4d3498..08e4258 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -476,7 +476,8 @@ html { } html, body { - background-color: oklch(var(--n) / 1) + background-color: oklch(var(--n) / 1); + overflow-x: hidden; } *, ::before, ::after { @@ -1895,16 +1896,6 @@ input.tab:checked + .tab-content, outline-offset: 2px; outline-color: var(--fallback-bc,oklch(var(--bc)/0.2)); } -.input-primary { - --tw-border-opacity: 1; - border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))); -} -.input-primary:focus, - .input-primary:focus-within { - --tw-border-opacity: 1; - border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))); - outline-color: var(--fallback-p,oklch(var(--p)/1)); -} .input-disabled, .input:disabled, .input[disabled] { @@ -2675,6 +2666,9 @@ input.tab:checked + .tab-content, .left-4 { left: 1rem; } +.right-0 { + right: 0px; +} .right-1 { right: 0.25rem; } @@ -2737,10 +2731,6 @@ input.tab:checked + .tab-content, margin-left: 1.25rem; margin-right: 1.25rem; } -.mx-auto { - margin-left: auto; - margin-right: auto; -} .my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; @@ -2754,9 +2744,6 @@ input.tab:checked + .tab-content, .mb-5 { margin-bottom: 1.25rem; } -.mb-6 { - margin-bottom: 1.5rem; -} .ml-1 { margin-left: 0.25rem; } @@ -2981,6 +2968,9 @@ input.tab:checked + .tab-content, .max-w-\[400px\] { max-width: 400px; } +.max-w-\[418px\] { + max-width: 418px; +} .max-w-\[420px\] { max-width: 420px; } @@ -3017,9 +3007,6 @@ input.tab:checked + .tab-content, .flex-auto { flex: 1 1 auto; } -.flex-none { - flex: none; -} .flex-shrink { flex-shrink: 1; } @@ -3097,6 +3084,9 @@ input.tab:checked + .tab-content, .justify-end { justify-content: flex-end; } +.\!justify-center { + justify-content: center !important; +} .justify-center { justify-content: center; } @@ -3136,8 +3126,8 @@ input.tab:checked + .tab-content, .gap-8 { gap: 2rem; } -.gap-9 { - gap: 2.25rem; +.gap-\[10px\] { + gap: 10px; } .gap-\[16px\] { gap: 16px; @@ -3180,6 +3170,9 @@ input.tab:checked + .tab-content, .overflow-x-auto { overflow-x: auto; } +.overflow-x-hidden { + overflow-x: hidden; +} .overflow-y-hidden { overflow-y: hidden; } @@ -3269,20 +3262,10 @@ input.tab:checked + .tab-content, .border-2 { border-width: 2px; } -.border-b { - border-bottom-width: 1px; -} -.border-t { - border-top-width: 1px; -} .border-base-content { --tw-border-opacity: 1; border-color: var(--fallback-bc,oklch(var(--bc)/var(--tw-border-opacity))); } -.border-primary { - --tw-border-opacity: 1; - border-color: var(--fallback-p,oklch(var(--p)/var(--tw-border-opacity))); -} .border-secondary { --tw-border-opacity: 1; border-color: var(--fallback-s,oklch(var(--s)/var(--tw-border-opacity))); @@ -3317,6 +3300,14 @@ input.tab:checked + .tab-content, --tw-bg-opacity: 1; background-color: var(--fallback-n,oklch(var(--n)/var(--tw-bg-opacity))); } +.bg-primary { + --tw-bg-opacity: 1; + background-color: var(--fallback-p,oklch(var(--p)/var(--tw-bg-opacity))); +} +.bg-primary-content { + --tw-bg-opacity: 1; + background-color: var(--fallback-pc,oklch(var(--pc)/var(--tw-bg-opacity))); +} .bg-secondary { --tw-bg-opacity: 1; background-color: var(--fallback-s,oklch(var(--s)/var(--tw-bg-opacity))); @@ -3421,6 +3412,10 @@ input.tab:checked + .tab-content, padding-top: 0.75rem; padding-bottom: 0.75rem; } +.py-4 { + padding-top: 1rem; + padding-bottom: 1rem; +} .py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; @@ -3429,9 +3424,8 @@ input.tab:checked + .tab-content, padding-top: 1.5rem; padding-bottom: 1.5rem; } -.py-8 { - padding-top: 2rem; - padding-bottom: 2rem; +.pb-1 { + padding-bottom: 0.25rem; } .pb-12 { padding-bottom: 3rem; @@ -3466,9 +3460,6 @@ input.tab:checked + .tab-content, .pt-12 { padding-top: 3rem; } -.pt-16 { - padding-top: 4rem; -} .pt-2 { padding-top: 0.5rem; } @@ -3502,6 +3493,9 @@ input.tab:checked + .tab-content, font-size: 3rem; line-height: 1; } +.text-\[10px\] { + font-size: 10px; +} .text-\[12px\] { font-size: 12px; } @@ -3517,6 +3511,9 @@ input.tab:checked + .tab-content, .text-\[24px\] { font-size: 24px; } +.text-\[28px\] { + font-size: 28px; +} .text-\[40px\] { font-size: 40px; } @@ -3546,6 +3543,9 @@ input.tab:checked + .tab-content, .font-bold { font-weight: 700; } +.font-extralight { + font-weight: 200; +} .font-light { font-weight: 300; } @@ -3600,9 +3600,6 @@ input.tab:checked + .tab-content, .leading-normal { line-height: 1.5; } -.leading-relaxed { - line-height: 1.625; -} .leading-snug { line-height: 1.375; } @@ -3652,6 +3649,10 @@ input.tab:checked + .tab-content, --tw-text-opacity: 1; color: var(--fallback-s,oklch(var(--s)/var(--tw-text-opacity))); } +.text-secondary-content { + --tw-text-opacity: 1; + color: var(--fallback-sc,oklch(var(--sc)/var(--tw-text-opacity))); +} .text-warning { --tw-text-opacity: 1; color: var(--fallback-wa,oklch(var(--wa)/var(--tw-text-opacity))); @@ -3666,6 +3667,9 @@ input.tab:checked + .tab-content, .no-underline { text-decoration-line: none; } +.opacity-100 { + opacity: 1; +} .shadow-md { --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color); @@ -3682,13 +3686,14 @@ input.tab:checked + .tab-content, .filter { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; +.transition-all { + transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } +.duration-200 { + transition-duration: 200ms; +} /** Remove scrollbar from overflow-auto */ .default-container { @@ -3811,11 +3816,6 @@ input.tab:checked + .tab-content, font-weight: 700; } -.group[open] .group-open\:rotate-180 { - --tw-rotate: 180deg; - transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); -} - .group[open] .group-open\:border-b-\[4px\] { border-bottom-width: 4px; } @@ -3834,6 +3834,10 @@ input.tab:checked + .tab-content, background-color: rgb(13 23 23 / var(--tw-bg-opacity)); } +.group:has(input[data-id=plus]:checked) .group-has-\[input\[data-id\=plus\]\:checked\]\:block { + display: block; +} + @media (min-width: 640px) { .sm\:h-\[273px\] { @@ -3939,6 +3943,11 @@ input.tab:checked + .tab-content, @media (min-width: 1024px) { + .lg\:mx-\[143px\] { + margin-left: 143px; + margin-right: 143px; + } + .lg\:mx-auto { margin-left: auto; margin-right: auto; @@ -3972,10 +3981,6 @@ input.tab:checked + .tab-content, width: 12rem; } - .lg\:w-\[40\%\] { - width: 40%; - } - .lg\:max-w-\[485px\] { max-width: 485px; } @@ -4008,10 +4013,6 @@ input.tab:checked + .tab-content, flex-direction: row-reverse; } - .lg\:items-center { - align-items: center; - } - .lg\:justify-end { justify-content: flex-end; } @@ -4032,10 +4033,6 @@ input.tab:checked + .tab-content, gap: 1.25rem; } - .lg\:gap-6 { - gap: 1.5rem; - } - .lg\:px-12 { padding-left: 3rem; padding-right: 3rem; @@ -4082,6 +4079,10 @@ input.tab:checked + .tab-content, line-height: 2rem; } + .lg\:text-\[21px\] { + font-size: 21px; + } + .lg\:text-\[32px\] { font-size: 32px; } @@ -4109,6 +4110,11 @@ input.tab:checked + .tab-content, line-height: 1.75rem; } + .lg\:text-xs { + font-size: 0.75rem; + line-height: 1rem; + } + .lg\:leading-normal { line-height: 1.5; } diff --git a/tailwind.css b/tailwind.css index 2469dd3..80018fd 100644 --- a/tailwind.css +++ b/tailwind.css @@ -22,8 +22,10 @@ } html, body { - background-color: oklch(var(--n) / 1) + background-color: oklch(var(--n) / 1); + overflow-x: hidden; } + } @layer components { From f9dccbfc88618ab8cd2c328ad7fa722b8c9aa123 Mon Sep 17 00:00:00 2001 From: MatheusTrindade5201 Date: Thu, 14 Nov 2024 18:25:44 -0300 Subject: [PATCH 2/2] fix: fix overflow x --- sections/Header.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/sections/Header.tsx b/sections/Header.tsx index a1cee61..6ded665 100644 --- a/sections/Header.tsx +++ b/sections/Header.tsx @@ -77,7 +77,7 @@ export default function Header({
{/* sidebar */} -