refactor: fix breakpoint, add new styles (#54)

src/components/Banner/index.tsx

@@ -1,21 +1,24 @@
 import { ChevronRight } from "lucide-react"
 import Link from "next/link"
 
+import { ResponsivePlusSign } from "../ResponsiveBrand"
+
 export function Banner() {
   return (
-    <div className="relative top-0 border-b border-white/10 bg-black py-3 text-white md:py-0">
-      <div className="container flex flex-col items-center justify-center gap-4 md:h-12 md:flex-row">
+    <div className="relative top-0 border-b border-white/10 bg-background py-3 shadow-md md:py-0">
+      <div className="container flex items-center justify-center md:h-12">
         <Link
           href="/contact"
           target="_blank"
-          className="group inline-flex items-center justify-center text-center text-sm leading-loose">
-          ✨
-          <span className="font-bold">
-            {" "}
+          className="group inline-flex items-center justify-center gap-3 text-center text-sm leading-loose">
+          <ResponsivePlusSign className="size-5 transition-transform duration-300 ease-out group-hover:rotate-90 md:size-4" />
+          <span>
             Nosso trabalho só é possível com a sua ajuda!{" "}
-            <span className="underline">Seja um voluntário, clique aqui!</span>
+            <span className="font-bold text-black underline dark:text-white max-[600px]:block">
+              Seja um voluntário, clique aqui!
+            </span>
           </span>{" "}
-          <ChevronRight className="ml-1 size-4 transition-all duration-300 ease-out group-hover:translate-x-1" />
+          <ChevronRight className="size-5 text-black transition-all duration-300 ease-out group-hover:translate-x-1 dark:text-white md:size-4" />
         </Link>
       </div>
     </div>

src/components/Banner/Banner.stories.tsx → src/components/Banner/stories.ts

@@ -4,7 +4,11 @@ import { Banner } from "."
 
 export default {
   title: "Banner",
-  component: Banner
+  component: Banner,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered"
+  }
 } as Meta
 
 export const Default: StoryObj = {}

src/components/DonateInfo/index.tsx

@@ -12,9 +12,11 @@ export default function DonateInfo({
   bankInfo
 }: InfoProps) {
   return (
-    <section className="py-10 text-left dark:bg-background-secondary dark:text-secondary sm:py-container lg:py-16">
+    <section className="py-container text-left dark:bg-background-secondary dark:text-secondary">
       <div className="px-10 sm:container">
-        <h1 className="text-start text-lg font-bold text-highlight">{title}</h1>
+        <h1 className="text-start text-h3 font-bold leading-none text-highlight">
+          {title}
+        </h1>
         <div className="mt-4 flex flex-col items-start leading-loose lg:mt-10">
           <h2>{info}</h2>
           {pixKey && (

src/components/Footer/index.tsx

@@ -16,7 +16,7 @@ const Footer = () => {
 
   return (
     <div>
-      <div className="flex flex-col items-start justify-between gap-8 px-10 py-10 text-white sm:container sm:w-full sm:flex-row sm:py-24">
+      <div className="container flex flex-col items-start justify-between gap-8 py-container text-white sm:w-full sm:flex-row">
         <Link href="/" className="flex justify-start sm:hidden">
           <ResponsiveLogo className="hidden w-48 sm:block" highlight="black" />
           <ResponsiveIcon className="w-16 sm:hidden" highlight="white" />
@@ -67,7 +67,7 @@ const Footer = () => {
           </ul>
         </div>
       </div>
-      <div className="mt-8 w-full text-center">
+      <div className="w-full text-center">
         <p className="px-1 py-1 text-sm text-gray-300">
           Desenvolvido por Comunidade DOS • © 2024
         </p>

src/components/Hero/index.tsx

@@ -41,7 +41,7 @@ export default function Hero({ bgUrl, home, donatePage }: HeroProps) {
         backgroundSize: "cover",
         backgroundRepeat: "no-repeat"
       }}>
-      <div className="container h-full py-container">
+      <div className="container mt-12 h-full py-container max-[600px]:mt-14">
         <motion.div
           initial={{ opacity: 0, y: 50 }}
           animate={{ opacity: 1, y: 0 }}

src/components/MilestoneCard/index.tsx

@@ -32,7 +32,7 @@ export const MilestoneCard = ({
         <p className="text-h2 font-bold text-highlight">
           {data && <span>{value}</span>} {content}
         </p>
-        <p className="text-xl font-medium leading-3 text-highlight">
+        <p className="text-xl font-medium leading-none text-highlight">
           {subcontent}
         </p>
       </div>

src/components/Navbar/index.tsx

@@ -77,7 +77,7 @@ export default function Navbar() {
             exit={{ opacity: 0, y: -50 }}
             transition={{ duration: 0.5 }}
             id="banner"
-            className="fixed left-0 right-0 top-0 z-50">
+            className="fixed left-0 top-0 z-50 w-full">
             <AnimatedBanner />
           </motion.div>
         )}
@@ -88,7 +88,7 @@ export default function Navbar() {
         animate={{ y: 0 }}
         transition={{ duration: 0.5 }}
         id="header"
-        className={`fixed inset-x-0 z-40 transition-all duration-300 ${bgColorClasses} ${isScrolled ? "top-0 py-2" : "top-12 py-3"}`}
+        className={`fixed inset-x-0 z-40 transition-all duration-300 ${bgColorClasses} ${isScrolled ? "top-0 py-2" : "top-12 py-3 max-[600px]:top-16"}`}
         data-testid="header">
         <div className="container flex items-center justify-between py-3 text-sm md:text-lg">
           <div className="flex items-center gap-3">

src/components/Newsletter/index.tsx

@@ -9,8 +9,8 @@ export type NewsletterProps = {
 
 export default function Newsletter({ bgUrl }: NewsletterProps) {
   return (
-    <div className="custom-bg flex h-[373px] w-full items-center">
-      <div className="container flex items-center justify-between">
+    <div className="custom-bg h- w-full">
+      <div className="container flex flex-col items-center justify-between py-container max-md:gap-12 md:flex-row">
         <div className="flex h-full flex-col items-start justify-center gap-4 md:gap-8">
           <h2 className="text-center text-paragraph text-white sm:text-h2">
             <span className="text-h3 font-bold">Cadastrar email</span> para
@@ -31,14 +31,11 @@ export default function Newsletter({ bgUrl }: NewsletterProps) {
             </h3>
           </div>
         </div>
-        <aside className="lg:justify-self-end">
-          <div className="flex flex-col items-end gap-5 lg:justify-self-end">
-            <QrCodeCard
-              label={sectionAboutData.label}
-              url={sectionAboutData.QrCode}
-            />
-          </div>
-        </aside>
+        <QrCodeCard
+          className=""
+          label={sectionAboutData.label}
+          url={sectionAboutData.QrCode}
+        />
       </div>
       <style jsx>{`
         .custom-bg {

src/components/QrCodeCard/index.tsx

@@ -1,4 +1,7 @@
 import Image from "next/image"
+import { HTMLAttributes } from "react"
+
+import { cn } from "@/lib/utils"
 
 import Button from "../Button"
 
@@ -7,16 +10,19 @@ export type QRCodeCardProps = {
   label?: string
   btnTextColor?: "primary" | "secondary" | "white" | "black" | "red"
   btnBgColor?: "white" | "black" | "red" | "transparent" | "secondary"
-}
+} & HTMLAttributes<HTMLDivElement>
 
 export default function QrCodeCard({
   url,
   label,
   btnBgColor = "red",
-  btnTextColor = "white"
+  btnTextColor = "white",
+  ...props
 }: QRCodeCardProps) {
   return (
-    <div className="flex flex-col items-center gap-5">
+    <div
+      {...props}
+      className={cn("flex flex-col items-center gap-5", props.className)}>
       <div className="w-full rounded-sm bg-white">
         <Image
           className="w-full"

src/components/ResponsiveBrand/index.tsx

@@ -40,6 +40,44 @@ export function ResponsiveIcon({
   )
 }
 
+export function ResponsiveRecIcon({
+  highlight = "red",
+  className
+}: ResponsiveLogoProps) {
+  return (
+    <svg
+      id="icon"
+      className={className}
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 8.43 11.19">
+      <path
+        fill={highlightTextColor[highlight]}
+        d="M4.17,5.2c0-.39-.3-.66-.76-.66h-.85v2.1h.38v-.79h.38l.54.79h.47l-.59-.85c.27-.1.44-.31.44-.6ZM3.34,5.52h-.41v-.64h.43c.27,0,.42.12.42.32s-.17.32-.45.32ZM4.62,4.55h1.45v.33h-1.07v.56h.95v.33h-.95v.54h1.07v.33h-1.45v-2.1ZM8.03,5.85h.4c-.08.5-.49.84-1,.84-.64,0-1.06-.44-1.06-1.09s.42-1.09,1.06-1.09c.51,0,.92.33,1,.84h-.4c-.08-.29-.28-.49-.6-.49-.41,0-.68.3-.68.75s.27.75.68.75c.32,0,.52-.2.6-.49ZM2,5.59c0,.55-.45,1-1,1s-1-.45-1-1,.45-1,1-1,1,.45,1,1ZM8.43,11.19h-4v-1h4v1ZM8.43,7.69h-1v2.5h1v-2.5ZM8.43,3.5h-1V1h1v2.5ZM8.43,0h-4v1h4V0Z"
+      />
+    </svg>
+  )
+}
+
+export function ResponsivePlusSign({
+  highlight = "red",
+  className
+}: ResponsiveLogoProps) {
+  return (
+    <svg
+      id="plus"
+      className={className}
+      aria-hidden="true"
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 10 10">
+      <path
+        fill={highlightTextColor[highlight]}
+        d="M10,6.25h-3.75v3.75h-2.5v-3.75H0v-2.5h3.75V0h2.5v3.75h3.75v2.5Z"
+      />
+    </svg>
+  )
+}
+
 export function ResponsiveLogo({
   text = "white",
   highlight = "red",

src/components/ui/TextAreaInput/index.tsx

@@ -14,9 +14,7 @@ export const TextAreaInput = React.forwardRef(
     return (
       <div className="w-full">
         {label && (
-          <label
-            htmlFor={props.id}
-            className="mb-1 block text-sm font-medium text-primary">
+          <label htmlFor={props.id} className="mb-1 block text-sm font-medium">
             {label}
           </label>
         )}

src/styles/globals.css

@@ -11,6 +11,8 @@
     --background-secondary: 0 0% 20%; /* #323232 Background Secundário (oposto) */
 
     --highlight: 358 65% 54%; /* #D63E44 Vermelho (text|bg) */
+    --light: 0 0% 90%;
+    --dark: 0 0% 20%;
   }
 
   .dark {
@@ -21,6 +23,8 @@
     --background-secondary: 0 0% 85%; /* #D9D9D9 Background Secundário (oposto) */
 
     --highlight: 358 65% 54%; /* #D63E44 Vermelho (text|bg) */
+    --light: 0 0% 90%;
+    --dark: 0 0% 20%;
   }
 }
 

src/templates/Base/index.tsx

@@ -29,7 +29,7 @@ const Base = ({ children }: BaseTemplateProps) => (
       />
     </div>
 
-    <main className="mx-auto mt-32 w-full">{children}</main>
+    <main>{children}</main>
 
     <footer className="bg-highlight">
       <Footer />

tailwind.config.ts

@@ -13,9 +13,8 @@ const config: Config = {
       container: {
         center: true,
         padding: {
-          DEFAULT: "0.5rem",
-          md: "1rem",
-          lg: "2rem"
+          DEFAULT: "1rem",
+          sm: "2rem"
         },
         screens: {
           sm: "100%", // Full width for small screens (mobile)
@@ -34,14 +33,17 @@ const config: Config = {
         ]
       },
       padding: {
-        container: "8rem"
+        container: "4.5rem",
+        section: "6rem"
       },
       colors: {
         primary: "hsl(var(--primary))",
         secondary: "hsl(var(--secondary))",
         background: "hsl(var(--background))",
         "background-secondary": "hsl(var(--background-secondary))",
-        highlight: "hsl(var(--highlight))"
+        highlight: "hsl(var(--highlight))",
+        lightColor: "hsl(var(--light))",
+        darkColor: "hsl(var(--dark))"
       },
       boxShadow: {
         button: "0px 0px 0px 1px rgba(0, 0, 0, 0.2) inset"