Skip to content

Commit

Permalink
Merge pull request #11 from deco-sites/feat/servicos
Browse files Browse the repository at this point in the history 
style: add estilo para page servicos/evolucao + ajustes
  • Loading branch information
@RodolfoN1
RodolfoN1 authored Mar 20, 2024
2 parents 333d5c1 + df75773 commit 601f997
Show file tree
Hide file tree
Showing 41 changed files with 3,247 additions and 2,472 deletions.
24 changes: 13 additions & 11 deletions components/footer/CertificationImage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
interface NameImage{
linkname?:string;
interface NameImage {
linkname?: string;
}

function CertificationImage( {linkname}:NameImage ){
return(
<>
<li>
<div><img src={`${linkname}`} /></div>
</li>
</>
)
function CertificationImage({ linkname }: NameImage) {
return (
<>
<li>
<div>
<img src={`${linkname}`} />
</div>
</li>
</>
);
}

export default CertificationImage;
export default CertificationImage;
17 changes: 9 additions & 8 deletions components/footer/Copyright.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
interface Props{
copyrightText?: string;
interface Props {
copyrightText?: string;
}

function Email( {copyrightText}:Props ){
return(
<span class="text-14 text-base-150 font-noto-sans tracking-[0.98px]"> {copyrightText} </span>
)

function Email({ copyrightText }: Props) {
return (
<span class="text-14 text-base-150 font-noto-sans tracking-[0.98px]">
{copyrightText}
</span>
);
}

export default Email;
export default Email;
5 changes: 2 additions & 3 deletions components/footer/Divider.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,8 @@

interface Props{
interface Props {
style?: string | null;
}

export default function Divider( {style}:Props ) {
export default function Divider({ style }: Props) {
return (
<div class="w-full flex">
<div class={`w-full border-b ${style ? style : ""}`}></div>
Expand Down
31 changes: 19 additions & 12 deletions components/footer/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export interface SocialItem {
| "Tiktok"
| "Twitter"
| "Youtube"
| "Email";
| "Email";
link: string;
}

Expand Down Expand Up @@ -226,8 +226,10 @@ function Footer({

return (
<footer class="relative bg-[#0C1F59]">
<div class={`md:py-[60px] md:n1-container lg:pr-[93px] lg:pl-[120px] w-full flex flex-col gap-10`}>
{/* <div class={`pt-[60px] pb-[60px] n1-container w-full flex flex-col md:pb-10 gap-10 ${ColorClasses(layout)}`}> */}
<div
class={`md:py-[60px] md:n1-container lg:pr-[93px] lg:pl-[120px] w-full flex flex-col gap-10`}
>
{/* <div class={`pt-[60px] pb-[60px] n1-container w-full flex flex-col md:pb-10 gap-10 ${ColorClasses(layout)}`}> */}
<div class="lg:container mx-[20px] md:mx-6 lg:mx-auto z-[2]">
{(!layout?.variation || layout?.variation == "Variation 1") && (
<div class="flex flex-col">
Expand All @@ -248,10 +250,12 @@ function Footer({
{_copyright}
</div>
</div>
{/* <div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
{
/* <div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
<PoweredByDeco />
{_links}
</div> */}
</div> */
}
</div>
)}
{layout?.variation == "Variation 2" && (
Expand All @@ -269,7 +273,7 @@ function Footer({
{_sectionLinks}
</div>
</div>

<div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
<PoweredByDeco />
{_links}
Expand All @@ -295,7 +299,7 @@ function Footer({
{_region}
</div>
</div>

<div class="flex flex-col-reverse md:flex-row md:justify-between gap-10">
<PoweredByDeco />
{_links}
Expand Down Expand Up @@ -323,7 +327,7 @@ function Footer({
</div>
</div>
</div>

<div class="flex flex-col md:flex-row md:justify-between gap-10 md:items-center">
{_logo}
<PoweredByDeco />
Expand All @@ -343,7 +347,7 @@ function Footer({
{_apps}
</div>
</div>

<div class="flex flex-col-reverse md:flex-row md:justify-between gap-10 md:items-center">
{/* <PoweredByDeco /> */}
<div class="flex flex-col md:flex-row gap-10 md:items-center">
Expand All @@ -359,10 +363,13 @@ function Footer({
? <></>
: <BackToTop content={backToTheTop?.text} />}
<div class="overflow-hidden n1-footer__overlay w-full h-full absolute bottom-0 block">
<span class="n1-footer__overlay--bottom-left w-[1068px] h-[560px]"></span>
<span class="n1-footer__overlay--bottom-left w-[1068px] h-[560px]">
</span>
<span class="n1-footer__overlay--bottom w-[1068px] h-[560px]"></span>
<span class="n1-footer__overlay--bottom-right w-[764px] h-[416px] mobile:w-[850px] mobile:h-[500px]"></span>
<span class="n1-footer__overlay--middle-right w-[764px] h-[416px] mobile:w-[373px]"></span>
<span class="n1-footer__overlay--bottom-right w-[764px] h-[416px] mobile:w-[850px] mobile:h-[500px]">
</span>
<span class="n1-footer__overlay--middle-right w-[764px] h-[416px] mobile:w-[373px]">
</span>
</div>
</footer>
);
Expand Down
48 changes: 31 additions & 17 deletions components/footer/FooterItems.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,42 +21,56 @@ export default function FooterItems(
<>
{/* Tablet and Desktop view */}
<ul
class={clx(`mobile:[&>*:not(:first-of-type)]:mt-[40px] mobile:[&>*:not(:first-of-type)]:mb-[40px]
class={clx(
`mobile:[&>*:not(:first-of-type)]:mt-[40px] mobile:[&>*:not(:first-of-type)]:mb-[40px]
[&>*:not(:first-of-type)]:mb-[22px] md:gap-x-[50px] md:grid md:grid-cols-3-200
portatil:[&>*:last-of-type]:col-end-3 portatil:[&>*:last-of-type]:mt-[20px] portatil:grid-cols-2-200
${justify && "lg:justify-between"}`)}
${justify && "lg:justify-between"}`,
)}
>
{sections.map((section) => {
return(
return (
<li>
<div class="flex flex-col gap-2">
<span class="mobile:text-18 md:text-24 font-archimoto-medium uppercase text-base-150 mb-[10px] font-black">
{section.label}
</span>
<ul class={`flex flex-col ${section.label === 'Certificações' ? 'gap-y-[10px]' : 'gap-y-[16px] md:gap-y-[22px]' } flex-wrap text-sm`}>
<ul
class={`flex flex-col ${
section.label === "Certificações"
? "gap-y-[10px]"
: "gap-y-[16px] md:gap-y-[22px]"
} flex-wrap text-sm`}
>
{section.items?.map((item) => {
return(
return (
<>
{ item.label?.split('-')[0] === 'vtex' || item.label?.split('-')[0] === 'deco'
? (<CertificationImage linkname={`/image/footer-img-${item.label}.png`} />)
:
(
{item.label?.split("-")[0] === "vtex" ||
item.label?.split("-")[0] === "deco"
? (
<CertificationImage
linkname={`/image/footer-img-${item.label}.png`}
/>
)
: (
<li>
<a href={item.href}
class={clx(`text-[14px] leading-[21.6px] block py-1 link link-hover md:text-16 font-noto-sans font-normal text-base-150`)}>
<a
href={item.href}
class={clx(
`text-[14px] leading-[21.6px] block py-1 link link-hover md:text-16 font-noto-sans font-normal text-base-150`,
)}
>
{item.label}
</a>
</li>
)
}

</li>
)}
</>
)
);
})}
</ul>
</div>
</li>
)
);
})}
</ul>

Expand Down
32 changes: 24 additions & 8 deletions components/footer/Newsletter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,20 +45,36 @@ function Newsletter(

return (
<div
class={clx(`flex -order-1 ${tiled
? "flex-col lg:flex-row lg:w-full lg:justify-between"
: "flex-col"}`)}>
class={clx(
`flex -order-1 ${
tiled
? "flex-col lg:flex-row lg:w-full lg:justify-between"
: "flex-col"
}`,
)}
>
<div class="flex flex-col">
{content?.title && (
<h4 class={clx(`mobile:max-w-[100%] max-w-[90%] mobile:text-32 md:text-48 mobile:mt-[50px]
text-base-150 font-black font-archimoto-medium ${tiled} ? "text-2xl lg:text-3xl" : "text-lg"`)}>
<h4
class={clx(
`mobile:max-w-[100%] max-w-[90%] mobile:text-32 md:text-48 mobile:mt-[50px]
text-base-150 font-black font-archimoto-medium ${tiled} ? "text-2xl lg:text-3xl" : "text-lg"`,
)}
>
{content?.title}
</h4>
)}
{content?.description &&
<div class={clx(`pt-[10px] pb-[24px] md:pb-[30px] max-w-[90%] mobile:max-w-[100%] xl:max-w-[80%]
font-noto-sans mobile:text-14 md:text-16 text-base-150 md:leading-[25.6px]`)}>{content?.description}</div>
}
(
<div
class={clx(
`pt-[10px] pb-[24px] md:pb-[30px] max-w-[90%] mobile:max-w-[100%] xl:max-w-[80%]
font-noto-sans mobile:text-14 md:text-16 text-base-150 md:leading-[25.6px]`,
)}
>
{content?.description}
</div>
)}
</div>
<div class="flex flex-col">
<form
Expand Down
33 changes: 23 additions & 10 deletions components/footer/Social.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,31 +24,44 @@ export default function Social(
<>
{content && content.items && content.items.length > 0 && (
<div class="flex flex-col gap-4">
{content.title && <h3 class="text-24 uppercase text-base-150 mt-[10px] font-black">{content.title}</h3>}
{content.title && (
<h3 class="text-24 uppercase text-base-150 mt-[10px] font-black">
{content.title}
</h3>
)}
<ul
class={clx(`grid grid-cols-6-auto md:gap-4 mobile:gap-x-[10px] mobile:gap-y-[16px] ${vertical
? "lg:flex-col lg:items-start"
: "flex-wrap items-center"}`)}>
class={clx(
`grid grid-cols-6-auto md:gap-4 mobile:gap-x-[10px] mobile:gap-y-[16px] ${
vertical
? "lg:flex-col lg:items-start"
: "flex-wrap items-center"
}`,
)}
>
{content.items.map((item) => {
if( item.label === 'Email' ){
if (item.label === "Email") {
return (
<li class={`n1-footer__social relative mobile:order-first mobile:col-span-6 xl:ml-[60px] ${item.label}`}>
<li
class={`n1-footer__social relative mobile:order-first mobile:col-span-6 xl:ml-[60px] ${item.label}`}
>
<a
href={'mailto:' + item.link}
href={"mailto:" + item.link}
rel="noopener noreferrer"
aria-label={`${item.label} Logo`}
class="flex gap-2 items-center"
>
<span class="block p-1 rounded-full n1-footer__bg-social">
<Icon size={40} id={item.label} />
</span>
<span class="text-14 font-noto-sans font-normal text-base-150 tracking-[0.98px]"> {item.link} </span>
<span class="text-14 font-noto-sans font-normal text-base-150 tracking-[0.98px]">
{item.link}
</span>
{vertical && (
<div class="text-sm hidden lg:block">{item.label}</div>
)}
</a>
</li>
)
</li>
);
} else {
return (
<li class={`n1-footer__social relative ${item.label}`}>
Expand Down
27 changes: 16 additions & 11 deletions components/header/Drawers.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,25 +32,30 @@ interface PropsAside {
whatsapp?: string;
}

const Aside = ({ title, onClose, children, logoMobile, whatsapp }: PropsAside ) => {
const titleScape = title ? 'is-' + title?.toLocaleLowerCase() : '';
const Aside = (
{ title, onClose, children, logoMobile, whatsapp }: PropsAside,
) => {
const titleScape = title ? "is-" + title?.toLocaleLowerCase() : "";

if( titleScape === 'is-menu' ){
return(
if (titleScape === "is-menu") {
return (
<div class="bg-[#ffffff] grid grid-rows-[auto_1fr] h-full divide-y w-[85%] px-[20px] pt-[20px] pb-[40px]">
<div class={`flex justify-between items-center ${titleScape}`}>
{ logoMobile && (
{logoMobile && (
<div class="n1-header-mobile__logo">
<Image
src={logoMobile.src}
alt={logoMobile.alt}
width={logoMobile.width || 100}
height={logoMobile.height || 13}
/>
/>
</div>
) }
)}
{onClose && (
<Button onClick={onClose} class="btn btn-ghost absolute right-[-50px] top-[10px] p-0">
<Button
onClick={onClose}
class="btn btn-ghost absolute right-[-50px] top-[10px] p-0"
>
<Icon id="CloseMenuMobile" size={38} strokeWidth={2} />
</Button>
)}
Expand All @@ -65,9 +70,9 @@ const Aside = ({ title, onClose, children, logoMobile, whatsapp }: PropsAside )
{children}
</Suspense>
</div>
)
);
} else {
return(
return (
<div class="bg-base-100 grid grid-rows-[auto_1fr] h-full divide-y max-w-[100vw]">
<div class={`flex justify-between items-center ${titleScape}`}>
<h1 class="px-4 py-3">
Expand All @@ -89,7 +94,7 @@ const Aside = ({ title, onClose, children, logoMobile, whatsapp }: PropsAside )
{children}
</Suspense>
</div>
)
);
}
};

Expand Down
Loading

0 comments on commit 601f997

Please sign in to comment.