diff --git a/.deco/blocks/pages-Nossas%2520Lojas-998808.json b/.deco/blocks/pages-Nossas%2520Lojas-998808.json new file mode 100644 index 0000000..bf24dbd --- /dev/null +++ b/.deco/blocks/pages-Nossas%2520Lojas-998808.json @@ -0,0 +1,45 @@ +{ + "name": "Nossas Lojas", + "path": "/nossas-lojas", + "sections": [ + { + "__resolveType": "website/sections/Rendering/Lazy.tsx", + "section": { + "__resolveType": "Header" + } + }, + { + "__resolveType": "site/sections/BreadcrumbInstitucional/Breadcrumb.tsx", + "root": "HOME", + "path": "Ajuda", + "showText": false, + "route": "Nossas Lojas" + }, + { + "__resolveType": "site/sections/NossasLojas/NossasLojas.tsx", + "title": "Encontre uma loja perto de você!", + "paragraph": "

Em cada loja você vai encontrar detalhes do Mundo Mágico da Alphabeto em cada cantinho. Tudo preparado com muito carinho para receber você e a criançada com muita alegria no nosso universo alegre e colorido. Ah, sempre tem um balão divertido pra criançada começar a brincadeira.

", + "items": [ + { + "paragraph": "

Em cada loja você vai encontrar detalhes do Mundo Mágico da Alphabeto em cada cantinho. Tudo preparado com muito carinho para receber você e a criançada com muita alegria no nosso universo alegre e colorido. Ah, sempre tem um balão divertido pra criançada começar a brincadeira.

", + "title": "Encontre uma loja perto de você!" + } + ], + "apiKey": { + "__resolveType": "website/loaders/secret.ts", + "encrypted": "0bb9088851f809ab67eb0416474dd8ecac774558aa52006e414eb59cd74ae01cf0e04c3341174e6964b0a5bb06d97cd1", + "name": "GOOGLE_MAPS_API_KEY" + } + }, + { + "__resolveType": "website/sections/Rendering/Lazy.tsx", + "section": { + "__resolveType": "Footer" + } + } + ], + "seo": { + "__resolveType": "website/sections/Seo/SeoV2.tsx" + }, + "__resolveType": "website/pages/Page.tsx" +} \ No newline at end of file diff --git a/components/ui/Icon.tsx b/components/ui/Icon.tsx index 138a37e..09a5771 100644 --- a/components/ui/Icon.tsx +++ b/components/ui/Icon.tsx @@ -25,8 +25,10 @@ export type AvailableIcons = | "trash" | "location_pin" | "close-search" + | "logo_store" | "plus" | "minus" + | "whatsappIcon" | "home-breadcrumb" | "cat_sort_orders:desc" | "cat_sort_price:asc" diff --git a/fresh.gen.ts b/fresh.gen.ts index 557ae49..278ba62 100644 --- a/fresh.gen.ts +++ b/fresh.gen.ts @@ -3,12 +3,14 @@ // This file is automatically updated during development when running `dev.ts`. import * as $_app from "./routes/_app.tsx"; +import * as $Map from "./islands/Map.tsx"; import * as $MenuInstitutionalMobile from "./islands/MenuInstitutionalMobile.tsx"; import * as $MinicartFooter from "./islands/MinicartFooter.tsx"; import * as $MultiRangeSlider from "./islands/MultiRangeSlider.tsx"; import * as $Notify from "./islands/Notify.tsx"; import * as $ScrollButton from "./islands/ScrollButton.tsx"; import * as $ShowPriceItem from "./islands/ShowPriceItem.tsx"; +import * as $formsNossasLojas from "./islands/formsNossasLojas.tsx"; import type { Manifest } from "$fresh/server.ts"; const manifest = { @@ -16,12 +18,14 @@ const manifest = { "./routes/_app.tsx": $_app, }, islands: { + "./islands/Map.tsx": $Map, "./islands/MenuInstitutionalMobile.tsx": $MenuInstitutionalMobile, "./islands/MinicartFooter.tsx": $MinicartFooter, "./islands/MultiRangeSlider.tsx": $MultiRangeSlider, "./islands/Notify.tsx": $Notify, "./islands/ScrollButton.tsx": $ScrollButton, "./islands/ShowPriceItem.tsx": $ShowPriceItem, + "./islands/formsNossasLojas.tsx": $formsNossasLojas, }, baseUrl: import.meta.url, } satisfies Manifest; diff --git a/islands/Map.tsx b/islands/Map.tsx new file mode 100644 index 0000000..0fbeae6 --- /dev/null +++ b/islands/Map.tsx @@ -0,0 +1,92 @@ +// deno-lint-ignore-file +import { effect, signal, useSignal } from "@preact/signals"; +import { useEffect } from "preact/compat"; + +import { Loader } from "https://esm.sh/@googlemaps/js-api-loader@1.16.6"; + +interface Props { + apiKey: string, + stores: StoreInfo[]; +} + +interface StoreInfo { + address: { + location: { + latitude: number; + longitude: number; + }; + }; +} + +interface Zoom { + lat: number, + lng: number, + zoom: number +} + +export const zoom = signal({ + lat: -23.5489, + lng: -46.6388, + zoom: 8 +}) + +export default function Map({apiKey, stores}: Props) { + let pin: any; + const current = useSignal("") + + useEffect(() => { + let map: any; + const loader = new Loader({ + apiKey, + version: "weekly", + }) + + loader + .importLibrary("maps") + // deno-lint-ignore no-explicit-any + .then(({ Map }: any) => { + map = new Map(document.getElementById('map')!, { + center: { lat: zoom.value.lat, lng: zoom.value.lng }, + zoom: zoom.value.zoom, + mapId: 'DEMO_ID' + }) + + map.addListener("click", (e: {latLng: { lat: () => number; lng: () => number } }) => { + const data = ({ + lat: e.latLng.lat(), + lng: e.latLng.lng(), + }) + current.value = `Latitude: ${data.lat}, Longitude: ${data.lng}` + + pin.setPosition(data.lat, data.lng); + }) + + loader + .importLibrary("marker") + .then(({ AdvancedMarkerElement }) => { + const positions = stores.map(store => ({ + lat: store.address.location.latitude, + lng: store.address.location.longitude + })); + + positions.forEach(position => { + pin = new AdvancedMarkerElement({ + position: position, + map: map, + }) + }) + }) + }) + .catch((e) => { + console.error('error:', e) + }) + + + },[zoom.value]) + + return( +
+
+
+ ) +} \ No newline at end of file diff --git a/islands/formsNossasLojas.tsx b/islands/formsNossasLojas.tsx new file mode 100644 index 0000000..847a5cd --- /dev/null +++ b/islands/formsNossasLojas.tsx @@ -0,0 +1,163 @@ +import Icon from "site/components/ui/Icon.tsx"; + +import { useState } from "preact/compat"; +import { zoom } from "site/islands/Map.tsx"; +import { ItemWithWhatsapp } from "site/sections/NossasLojas/types.ts"; + +interface StoreInfo { + name: string; + id: string; + address: { + postalCode: string; + city: string; + state: string; + neighborhood: string; + street: string; + number: string; + location: { + latitude: number; + longitude: number; + }; + }; + businessHours: Array<{ + dayOfWeek: string; + openingTime: string; + closingTime: string; + }>; +} + +interface Stores { + stores: ItemWithWhatsapp[]; +} + +const days = [ + "Domingo", + "Segunda-feira", + "Terça-feira", + "Quarta-feira", + "Quinta-feira", + "Sexta-feira", + "Sábado" +] + +export default function FormsNossasLojas({ stores }: Stores) { + const [queryInput, setQueryInput] = useState(""); + const [filtered, setFiltered] = useState([]); + const [selectedIndex, setSelectedIndex] = useState(null); + + const handleClick = (id: string) => { + setSelectedIndex(id); + }; + + const handleFilter = () => { + const result = stores.filter((store) => { + return Object.values(store).some((value) => + value.toString().toLowerCase().includes(queryInput.toLowerCase()) + ); + }); + setFiltered(result); + }; + + const content = filtered.length === 0 ? stores : filtered + + return ( +
+
+

+ Busque por cidade, CEP, endereço ou loja: +

+
{ + e.preventDefault(); + handleFilter() + }}> + ) => + setQueryInput(e.currentTarget.value)} + type="text" + placeholder="Buscar" + /> + +
+
+
+ {content?.map((store) => ( + <> +
handleClick(store.id)} + key={store.id} + class={`flex mobile:flex-col mobile:justify-start justify-between items-left w-[95%] h-[194px] mobile:h-[403px] border ${ + selectedIndex === store.id ? "border-[#FF8300]" : "border-[#F5F4F1]" + } rounded-[8px] px-[10px] mb-[16px]`} + > +
+
+ +

+ {store.name} +

+
+
+

{store.address.state}

+

+ {store.address.street}, {store.address.number} -{" "} + {store.address.neighborhood} +

+

CEP: {store.address.postalCode}

+
+
+

+ {store.whatsapp} +

+ + + Enviar mensagem + +
+
+ +
+
+
+

+ Horários de funcionamento: +

+
+ {store.businessHours.map((hour, index) => ( +

+ {days[hour.dayOfWeek]}: + `{hour.openingTime.slice(0, 5)}h às {hour.closingTime.slice(0, 5)}h` +

+ ))} +
+
+
+
+ + ))} +
+
+ ); +} diff --git a/loaders/searchDocuments.ts b/loaders/searchDocuments.ts new file mode 100644 index 0000000..8fe77a9 --- /dev/null +++ b/loaders/searchDocuments.ts @@ -0,0 +1,81 @@ +import { AppContext } from "site/apps/deco/vtex.ts"; +import type { Document } from "apps/vtex/utils/types.ts"; +interface Props { + /** + * @description Two-letter string that identifies the data entity. + */ + acronym: string; + /** + * @description Names of the fields that will be returned per document, separated by a comma ,. It is possible to fetch all fields using _all as the value of this query parameter. However, in order to avoid permission errors, we strongly recommend informing only the names of the exact fields that will be used. + */ + fields?: string; + /** + * @description Specification of filters. + */ + where?: string; + /** + * @description Inform a field name plus ASC to sort results by this field value in ascending order or DESC to sort by descending order. + */ + sort?: string; + /** + * @description Number of documents to be returned. + * @default 10 + * @maxValue 100 + * @minValue 1 + */ + take?: number; + /** + * @description Skip how many documents + * @default 0 + * @maxValue 100 + * @minValue 0 + */ + skip?: number; +} + +export function resourceRange( + skip: number, + take: number, +) { + const from = Math.max(skip, 0); + const to = from + take; + + return { + from, + to, + }; +} + + +/** + * @title Search documents - VTEX + * @docs https://developers.vtex.com/docs/api-reference/masterdata-api#get-/api/dataentities/-acronym-/search + */ +export default async function loader( + props: Props, + _req: Request, + _ctx: AppContext, +): Promise { + const { acronym, fields, where, sort, skip = 0, take = 10 } = props; + const limits = resourceRange(skip, take); + + const url = new URL( + `https://alphabeto.vtexcommercestable.com.br/api/dataentities/${acronym}/search`, + ); + if (fields) url.searchParams.append("_fields", fields); + if (where) url.searchParams.append("_where", where); + if (sort) url.searchParams.append("_sort", sort); + + const documents = await fetch( + url.href, + { + headers: { + accept: "application/vnd.vtex.ds.v10+json", + "content-type": "application/json", + "REST-Range": `resources=${limits.from}-${limits.to}`, + }, + }, + ).then((res) => res.json()); + + return documents; +} \ No newline at end of file diff --git a/manifest.gen.ts b/manifest.gen.ts index 6d2aad0..dd3608a 100644 --- a/manifest.gen.ts +++ b/manifest.gen.ts @@ -13,8 +13,9 @@ import * as $$$1 from "./loaders/geolocation.ts"; import * as $$$2 from "./loaders/icons.ts"; import * as $$$3 from "./loaders/minicart.ts"; import * as $$$4 from "./loaders/savedColors.ts"; -import * as $$$5 from "./loaders/user.ts"; -import * as $$$6 from "./loaders/wishlist.ts"; +import * as $$$5 from "./loaders/searchDocuments.ts"; +import * as $$$6 from "./loaders/user.ts"; +import * as $$$7 from "./loaders/wishlist.ts"; import * as $$$$$$0 from "./sections/Animation/Animation.tsx"; import * as $$$$$$1 from "./sections/BenefitsBar/BenefitsBar.tsx"; import * as $$$$$$2 from "./sections/BreadcrumbInstitucional/Breadcrumb.tsx"; @@ -42,19 +43,22 @@ import * as $$$$$$23 from "./sections/Miscellaneous/CampaignTimer.tsx"; import * as $$$$$$24 from "./sections/Miscellaneous/CookieConsent.tsx"; import * as $$$$$$25 from "./sections/Miscellaneous/Spacer.tsx"; import * as $$$$$$26 from "./sections/Newsletter/Newsletter.tsx"; -import * as $$$$$$27 from "./sections/Policy/Policy.tsx"; -import * as $$$$$$28 from "./sections/Product/ProductDetails.tsx"; -import * as $$$$$$29 from "./sections/Product/ProductShelf.tsx"; -import * as $$$$$$30 from "./sections/Product/ProductShelfTabbed.tsx"; -import * as $$$$$$31 from "./sections/Product/QuickView.tsx"; -import * as $$$$$$32 from "./sections/Product/SearchResult.tsx"; -import * as $$$$$$33 from "./sections/Product/ShelfWithImage.tsx"; -import * as $$$$$$34 from "./sections/Product/Wishlist.tsx"; -import * as $$$$$$35 from "./sections/Session.tsx"; -import * as $$$$$$36 from "./sections/Social/InstagramPosts.tsx"; -import * as $$$$$$37 from "./sections/Social/WhatsApp.tsx"; -import * as $$$$$$38 from "./sections/TabLayout/TabLayout.tsx"; -import * as $$$$$$39 from "./sections/Theme/Theme.tsx"; +import * as $$$$$$27 from "./sections/NossasLojas/NossasLojas.tsx"; +import * as $$$$$$28 from "./sections/NossasLojas/query.ts"; +import * as $$$$$$29 from "./sections/NossasLojas/types.ts"; +import * as $$$$$$30 from "./sections/Policy/Policy.tsx"; +import * as $$$$$$31 from "./sections/Product/ProductDetails.tsx"; +import * as $$$$$$32 from "./sections/Product/ProductShelf.tsx"; +import * as $$$$$$33 from "./sections/Product/ProductShelfTabbed.tsx"; +import * as $$$$$$34 from "./sections/Product/QuickView.tsx"; +import * as $$$$$$35 from "./sections/Product/SearchResult.tsx"; +import * as $$$$$$36 from "./sections/Product/ShelfWithImage.tsx"; +import * as $$$$$$37 from "./sections/Product/Wishlist.tsx"; +import * as $$$$$$38 from "./sections/Session.tsx"; +import * as $$$$$$39 from "./sections/Social/InstagramPosts.tsx"; +import * as $$$$$$40 from "./sections/Social/WhatsApp.tsx"; +import * as $$$$$$41 from "./sections/TabLayout/TabLayout.tsx"; +import * as $$$$$$42 from "./sections/Theme/Theme.tsx"; const manifest = { "loaders": { @@ -63,8 +67,9 @@ const manifest = { "site/loaders/icons.ts": $$$2, "site/loaders/minicart.ts": $$$3, "site/loaders/savedColors.ts": $$$4, - "site/loaders/user.ts": $$$5, - "site/loaders/wishlist.ts": $$$6, + "site/loaders/searchDocuments.ts": $$$5, + "site/loaders/user.ts": $$$6, + "site/loaders/wishlist.ts": $$$7, }, "sections": { "site/sections/Animation/Animation.tsx": $$$$$$0, @@ -94,19 +99,22 @@ const manifest = { "site/sections/Miscellaneous/CookieConsent.tsx": $$$$$$24, "site/sections/Miscellaneous/Spacer.tsx": $$$$$$25, "site/sections/Newsletter/Newsletter.tsx": $$$$$$26, - "site/sections/Policy/Policy.tsx": $$$$$$27, - "site/sections/Product/ProductDetails.tsx": $$$$$$28, - "site/sections/Product/ProductShelf.tsx": $$$$$$29, - "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$30, - "site/sections/Product/QuickView.tsx": $$$$$$31, - "site/sections/Product/SearchResult.tsx": $$$$$$32, - "site/sections/Product/ShelfWithImage.tsx": $$$$$$33, - "site/sections/Product/Wishlist.tsx": $$$$$$34, - "site/sections/Session.tsx": $$$$$$35, - "site/sections/Social/InstagramPosts.tsx": $$$$$$36, - "site/sections/Social/WhatsApp.tsx": $$$$$$37, - "site/sections/TabLayout/TabLayout.tsx": $$$$$$38, - "site/sections/Theme/Theme.tsx": $$$$$$39, + "site/sections/NossasLojas/NossasLojas.tsx": $$$$$$27, + "site/sections/NossasLojas/query.ts": $$$$$$28, + "site/sections/NossasLojas/types.ts": $$$$$$29, + "site/sections/Policy/Policy.tsx": $$$$$$30, + "site/sections/Product/ProductDetails.tsx": $$$$$$31, + "site/sections/Product/ProductShelf.tsx": $$$$$$32, + "site/sections/Product/ProductShelfTabbed.tsx": $$$$$$33, + "site/sections/Product/QuickView.tsx": $$$$$$34, + "site/sections/Product/SearchResult.tsx": $$$$$$35, + "site/sections/Product/ShelfWithImage.tsx": $$$$$$36, + "site/sections/Product/Wishlist.tsx": $$$$$$37, + "site/sections/Session.tsx": $$$$$$38, + "site/sections/Social/InstagramPosts.tsx": $$$$$$39, + "site/sections/Social/WhatsApp.tsx": $$$$$$40, + "site/sections/TabLayout/TabLayout.tsx": $$$$$$41, + "site/sections/Theme/Theme.tsx": $$$$$$42, }, "actions": { "site/actions/minicart/submit.ts": $$$$$$$$$0, diff --git a/sections/BreadcrumbInstitucional/Breadcrumb.tsx b/sections/BreadcrumbInstitucional/Breadcrumb.tsx index 776914f..a6c6df0 100644 --- a/sections/BreadcrumbInstitucional/Breadcrumb.tsx +++ b/sections/BreadcrumbInstitucional/Breadcrumb.tsx @@ -6,7 +6,7 @@ interface BreadcrumbProps { /**@title Habilitar Caminho */ showText: boolean; /**@title Caminho */ - path: string; + path?: string; /**@title Rota Final */ route: string; } diff --git a/sections/NossasLojas/NossasLojas.tsx b/sections/NossasLojas/NossasLojas.tsx new file mode 100644 index 0000000..71a96c0 --- /dev/null +++ b/sections/NossasLojas/NossasLojas.tsx @@ -0,0 +1,78 @@ +// deno-lint-ignore-file +import { Secret } from "apps/website/loaders/secret.ts"; +import { type RichText } from "apps/admin/widgets.ts"; + +import Map from "site/islands/Map.tsx"; +import FormsNossasLojas from "site/islands/formsNossasLojas.tsx"; + +import { AppContext } from "site/apps/deco/vtex.ts"; +import { query } from "site/sections/NossasLojas/query.ts"; +import { Data } from "./types.ts" + +/**@title Conteúdo*/ +interface NossasLojasProps { + /**@title Título na página*/ + title?: string; + /**@title Parágrafo*/ + paragraph: RichText; +} + +interface ContentProps { + /**@title Itens*/ + items: NossasLojasProps[]; + + apiKey: Secret; +} + +interface MasterDataResponse { + store_id: string, + whatsapp: string, +} + +export async function loader({ items, apiKey }: ContentProps, _req: Request, ctx: AppContext){ + + // @deno-ignore + const masterdataStoreNumbers = await ctx.invoke.site.loaders.searchDocuments({ + acronym: "SM", + fields:"store_id,whatsapp", + take: 500, + }) as unknown as MasterDataResponse[] + + const { io } = await ctx.invoke.vtex.loaders.config() + + const response = await io.query({ + variables: {}, + query: query + }) + + + const stores = response.getStores.items.map(item => { + const storeNumber = masterdataStoreNumbers.find(storeNumber => storeNumber.store_id === item.id) + return { + ...item, + whatsapp: storeNumber?.whatsapp + } + }) + return { + items, apiKey, stores + } +} + +export default function NossasLojas({ items, apiKey, stores }: Awaited>) { + return ( +
+
+ {items.map((content, index) => ( +
+

{content.title}

+

+

+ ))} + +
+
+ +
+
+ ); +} diff --git a/sections/NossasLojas/query.ts b/sections/NossasLojas/query.ts new file mode 100644 index 0000000..66f53fc --- /dev/null +++ b/sections/NossasLojas/query.ts @@ -0,0 +1,29 @@ +export const query = ` + +query getStores($latitude: Float, $longitude: Float, $filterByTag: String) { + getStores(latitude: $latitude, longitude: $longitude, keyword: $filterByTag) + @context(provider: "vtex.store-locator") { + items { + name + id + address { + postalCode + city + state + neighborhood + street + number + location { + latitude + longitude + } + } + businessHours { + dayOfWeek + openingTime + closingTime + } + } + } + } + `; \ No newline at end of file diff --git a/sections/NossasLojas/types.ts b/sections/NossasLojas/types.ts new file mode 100644 index 0000000..55742f4 --- /dev/null +++ b/sections/NossasLojas/types.ts @@ -0,0 +1,54 @@ +// deno-lint-ignore-file + + + export interface Data { + getStores: GetStores + } + + export interface GetStores { + items: Item[] + __typename: string + } + + export interface Item { + distance: number + name: string + instructions: string + id: string + isActive: boolean + address: Address + pickupHolidays: any[] + businessHours: BusinessHour[] + __typename: string + } + + export interface ItemWithWhatsapp extends Item { + whatsapp: string | undefined + } + + export interface Address { + postalCode: string + country: any + city: string + state: string + neighborhood?: string + street: string + number?: string + complement: string + reference: string + location: Location + __typename: string + } + + export interface Location { + latitude: number + longitude: number + __typename: string + } + + export interface BusinessHour { + dayOfWeek: number + openingTime: string + closingTime: string + __typename: string + } \ No newline at end of file diff --git a/static/sprites.svg b/static/sprites.svg index 8793c31..55522f3 100644 --- a/static/sprites.svg +++ b/static/sprites.svg @@ -29,6 +29,13 @@ + + + + + + + diff --git a/static/tailwind.css b/static/tailwind.css index 7c315d3..7cce4ee 100644 --- a/static/tailwind.css +++ b/static/tailwind.css @@ -3964,9 +3964,15 @@ details.collapse summary::-webkit-details-marker { .mb-\[10px\] { margin-bottom: 10px; } +.mb-\[13px\] { + margin-bottom: 13px; +} .mb-\[14px\] { margin-bottom: 14px; } +.mb-\[16px\] { + margin-bottom: 16px; +} .mb-\[17px\] { margin-bottom: 17px; } @@ -4006,12 +4012,18 @@ details.collapse summary::-webkit-details-marker { .mr-6 { margin-right: 1.5rem; } +.mr-\[24px\] { + margin-right: 24px; +} .mr-\[2px\] { margin-right: 2px; } .mr-\[3px\] { margin-right: 3px; } +.mr-\[4px\] { + margin-right: 4px; +} .mr-\[5px\] { margin-right: 5px; } @@ -4168,6 +4180,9 @@ details.collapse summary::-webkit-details-marker { .h-\[18px\] { height: 18px; } +.h-\[194px\] { + height: 194px; +} .h-\[1px\] { height: 1px; } @@ -4180,6 +4195,9 @@ details.collapse summary::-webkit-details-marker { .h-\[35px\] { height: 35px; } +.h-\[370px\] { + height: 370px; +} .h-\[3px\] { height: 3px; } @@ -4207,6 +4225,9 @@ details.collapse summary::-webkit-details-marker { .h-\[60px\] { height: 60px; } +.h-\[675px\] { + height: 675px; +} .h-\[80px\] { height: 80px; } @@ -4365,9 +4386,15 @@ details.collapse summary::-webkit-details-marker { .w-\[197px\] { width: 197px; } +.w-\[221px\] { + width: 221px; +} .w-\[243px\] { width: 243px; } +.w-\[266px\] { + width: 266px; +} .w-\[295px\] { width: 295px; } @@ -4389,6 +4416,9 @@ details.collapse summary::-webkit-details-marker { .w-\[335px\] { width: 335px; } +.w-\[34\%\] { + width: 34%; +} .w-\[363px\] { width: 363px; } @@ -4404,15 +4434,24 @@ details.collapse summary::-webkit-details-marker { .w-\[4px\] { width: 4px; } +.w-\[50\%\] { + width: 50%; +} .w-\[522px\] { width: 522px; } .w-\[55px\] { width: 55px; } +.w-\[64\%\] { + width: 64%; +} .w-\[73px\] { width: 73px; } +.w-\[95\%\] { + width: 95%; +} .w-\[calc\(100\%-48px\)\] { width: calc(100% - 48px); } @@ -4928,6 +4967,9 @@ details.collapse summary::-webkit-details-marker { .rounded-\[6px\] { border-radius: 6px; } +.rounded-\[8px\] { + border-radius: 8px; +} .rounded-badge { border-radius: var(--rounded-badge, 1.9rem); } @@ -5003,6 +5045,9 @@ details.collapse summary::-webkit-details-marker { .border-\[0\.5px\] { border-width: 0.5px; } +.border-\[1px\] { + border-width: 1px; +} .border-b { border-bottom-width: 1px; } @@ -5039,6 +5084,9 @@ details.collapse summary::-webkit-details-marker { .border-dashed { border-style: dashed; } +.border-dotted { + border-style: dotted; +} .border-none { border-style: none; } @@ -5118,6 +5166,10 @@ details.collapse summary::-webkit-details-marker { --tw-bg-opacity: 1; background-color: rgb(13 23 23 / var(--tw-bg-opacity)); } +.bg-\[\#33D26B\] { + --tw-bg-opacity: 1; + background-color: rgb(51 210 107 / var(--tw-bg-opacity)); +} .bg-\[\#45D268\] { --tw-bg-opacity: 1; background-color: rgb(69 210 104 / var(--tw-bg-opacity)); @@ -5407,6 +5459,10 @@ details.collapse summary::-webkit-details-marker { padding-top: 14px; padding-bottom: 14px; } +.py-\[15px\] { + padding-top: 15px; + padding-bottom: 15px; +} .py-\[30px\] { padding-top: 30px; padding-bottom: 30px; @@ -5453,6 +5509,9 @@ details.collapse summary::-webkit-details-marker { .pb-\[10px\] { padding-bottom: 10px; } +.pb-\[14px\] { + padding-bottom: 14px; +} .pb-\[15px\] { padding-bottom: 15px; } @@ -5483,6 +5542,9 @@ details.collapse summary::-webkit-details-marker { .pl-\[10px\] { padding-left: 10px; } +.pl-\[20px\] { + padding-left: 20px; +} .pr-2 { padding-right: 0.5rem; } @@ -5498,6 +5560,9 @@ details.collapse summary::-webkit-details-marker { .pr-\[18px\] { padding-right: 18px; } +.pr-\[43px\] { + padding-right: 43px; +} .pr-\[60px\] { padding-right: 60px; } @@ -5534,6 +5599,9 @@ details.collapse summary::-webkit-details-marker { .pt-\[23px\] { padding-top: 23px; } +.pt-\[2px\] { + padding-top: 2px; +} .pt-\[30px\] { padding-top: 30px; } @@ -5646,6 +5714,9 @@ details.collapse summary::-webkit-details-marker { .text-\[48px\] { font-size: 48px; } +.text-\[65\%\] { + font-size: 65%; +} .text-\[80px\] { font-size: 80px; } @@ -5676,6 +5747,9 @@ details.collapse summary::-webkit-details-marker { .\!font-medium { font-weight: 500 !important; } +.font-\[12px\] { + font-weight: 12px; +} .font-bold { font-weight: 700; } @@ -6543,6 +6617,10 @@ details.collapse summary::-webkit-details-marker { } @media (max-width: 1023px) { + .mobile\:mb-\[45px\] { + margin-bottom: 45px; + } + .mobile\:mb-\[48px\] { margin-bottom: 48px; } @@ -6559,6 +6637,10 @@ details.collapse summary::-webkit-details-marker { margin-top: 1rem; } + .mobile\:mt-\[10px\] { + margin-top: 10px; + } + .mobile\:mt-\[20px\] { margin-top: 20px; } @@ -6579,6 +6661,14 @@ details.collapse summary::-webkit-details-marker { display: none; } + .mobile\:h-\[305px\] { + height: 305px; + } + + .mobile\:h-\[403px\] { + height: 403px; + } + .mobile\:w-\[160px\] { width: 160px; } @@ -6657,6 +6747,10 @@ details.collapse summary::-webkit-details-marker { padding-right: 1.25rem; } + .mobile\:pr-0 { + padding-right: 0px; + } + .mobile\:text-center { text-align: center; }