refactor(homepage): refactor contact section

Author: vitingr

src/app/(user-scope)/(homepage)/page.tsx

@@ -6,6 +6,7 @@ import { getMetaData } from '@/utils/seo/get-metadata'
 import { getHomepageJsonLd } from './json-ld'
 import { Benefits } from './sections/benefits'
 import { Skiper } from './sections/contact'
+import { ContactSimplified } from './sections/contact-simplified'
 import { Details } from './sections/details'
 import { Header } from './sections/header'
 import { HowItWorks } from './sections/how-it-works'
@@ -36,6 +37,7 @@ const Page: NextPage = async () => {
         <MoreInfoAbout />
         <HowItWorks />
         <Skiper />
+        <ContactSimplified />
       </main>
     </>
   )

src/app/(user-scope)/(homepage)/sections/contact-simplified/index.tsx

@@ -0,0 +1,27 @@
+import { ArrowRight } from 'lucide-react'
+import Link from 'next/link'
+import type { FC } from 'react'
+
+export const ContactSimplified: FC = () => {
+  return (
+    <section className="relative z-40 flex w-full bg-white px-4 pt-8 pb-12 lg:hidden lg:py-16 xl:px-0">
+      <div className="mx-auto flex w-full max-w-2xl flex-col items-center gap-4 lg:max-w-7xl">
+        <h2 className="text-2xl font-bold lg:text-4xl">Tem alguma sugestão?</h2>
+        <p className="text-center text-sm text-neutral-500 lg:text-base">
+          Se conhece alguma ONG, projeto social ou iniciativa solidária, envie{' '}
+          <br className="hidden xl:block" /> sua sugestão e ajude a ampliar o
+          alcance dessas ações.
+        </p>
+        <Link
+          className="mt-2 flex cursor-pointer items-center gap-3 rounded-full bg-neutral-700 py-2.5 pr-4 pl-5 text-sm font-semibold text-white transition-all duration-150 hover:bg-neutral-800"
+          href="/contato"
+        >
+          Enviar sugestão
+          <figure className="flex h-5 w-5 items-center justify-center rounded-full bg-white">
+            <ArrowRight className="h-3 w-3 text-neutral-700" />
+          </figure>
+        </Link>
+      </div>
+    </section>
+  )
+}

src/app/(user-scope)/(homepage)/sections/contact/index.tsx

@@ -13,7 +13,7 @@ const Skiper = () => {
 
   return (
     <section
-      className="mx-auto flex h-[1560px] w-screen flex-col items-center overflow-hidden bg-white px-4"
+      className="mx-auto hidden h-[1560px] w-screen flex-col items-center overflow-hidden bg-white px-4 lg:flex"
       ref={ref}
     >
       <article className="relative mt-42 flex w-fit flex-col items-center justify-center gap-5 text-center">

src/app/(user-scope)/sobre/sections/stack/index.tsx

@@ -176,7 +176,7 @@ const Stack = () => {
 
   return (
     <ReactLenis root>
-      <section className="mb-[-45vh] w-full bg-white">
+      <section className="mb-[-45vh] hidden w-full bg-white lg:flex">
         <div
           className="relative box-border flex h-[210vh] items-center justify-center gap-[2vw] overflow-hidden bg-[#f5f4f3] p-[2vw]"
           ref={targetRef}