Dev services

src/app/(homepage)/_components/About.tsx

@@ -25,7 +25,7 @@ function CardFull({ title, description, children }: Props) {
         <CardTitle className="text-center font-primary">{title}</CardTitle>
       </CardHeader>
       <CardContent className="h-[150px] items-center justify-center px-2 py-3">
-        <CardDescription className="p-auto h-full py-2 text-center font-secondary text-sm text-black md:text-xs xl:text-sm">
+        <CardDescription className="h-full py-2 text-center font-secondary text-sm text-black md:text-xs xl:text-sm">
           {description}
         </CardDescription>
       </CardContent>
@@ -56,13 +56,12 @@ export function About() {
     },
   ];
   return (
-    <section className="flex h-auto w-screen items-center justify-center lg:h-screen">
-      <div className="flex w-[100%] flex-col items-center rounded-lg p-4 lg:h-[54%] lg:flex-row lg:px-4 xl:px-28 2xl:px-44">
+    <section className="flex h-auto w-full items-center justify-center px-2 lg:h-screen">
+      <div className="flex w-full flex-col items-center rounded-lg p-4 lg:h-[54%] lg:flex-row lg:px-4 xl:px-28 2xl:px-44">
         {/* Mobile */}
         <div className="mb-2 lg:hidden">
           <div className="flex w-full flex-row items-center">
-            <span className="mr-3 h-10 w-2 rounded-md bg-orange lg:h-14" />
-            <h1 className="my-4 font-primary text-3xl font-bold md:text-4xl">
+            <h1 className="decorated-border my-4 font-primary text-3xl font-bold md:text-4xl">
               Quem Somos?
             </h1>
           </div>
@@ -82,9 +81,9 @@ export function About() {
         <img
           src="/team.jpg"
           alt="Team"
-          className="mx-2 mb-4 h-[100%] w-full rounded-md shadow-lg lg:mb-0 lg:w-[50%]"
+          className="mx-2 mb-4 size-full rounded-md shadow-lg lg:mb-0 lg:w-1/2"
         />
-        <div className="flex h-[100%] w-full flex-col gap-4 pl-2 pr-2">
+        <div className="flex size-full flex-col gap-4 px-2">
           {/* Desktop */}
           <div className="hidden h-auto items-start justify-start lg:flex lg:flex-col">
             <div className="flex h-auto w-3/4 flex-row items-start">

src/app/(homepage)/_components/Header/Hero.tsx

@@ -6,7 +6,7 @@ export function Hero() {
     <div className="relative flex h-screen flex-col justify-start md:py-16 lg:justify-center">
       <div className="relative z-10 my-6 flex w-full flex-col items-center justify-center px-5 md:px-10 lg:w-1/2 lg:items-start lg:justify-start lg:px-0">
         <h1 className="text-center font-secondary text-4xl font-semibold text-white-200 md:text-5xl lg:text-start lg:text-6xl">
-          <span className="pointer-events-none font-secondary lg:underline lg:decoration-orange lg:decoration-[4px]">
+          <span className="pointer-events-none font-secondary lg:underline lg:decoration-orange lg:decoration-4">
             Inove
           </span>{" "}
           seu negócio

src/app/(homepage)/_components/Header/index.tsx

@@ -1,23 +1,25 @@
 import { Navbar } from "@/components/layout/Navbar";
 import Image from "next/image";
+import background from "@/../public/background.png";
+import meiologo from "@/../public/meiologo.png";
 import { Hero } from "./Hero";
 
 // configuração das imagens de fundo da home page
 function BackgroundImage() {
   return (
     <div className="absolute inset-0">
       <Image
-        src="/background.png"
-        layout="fill"
-        objectFit="cover"
+        src={background}
         alt="Background"
-        className="-z-10"
+        placeholder="blur"
+        className="-z-10 object-cover"
+        fill
       />
       <div className="absolute inset-0 bg-blue-800 opacity-90 mix-blend-lighten" />
-
-      <img
-        src="/meiologo.png"
-        alt=""
+      <Image
+        src={meiologo}
+        alt="logo"
+        placeholder="empty"
         className="absolute bottom-0 z-0 w-full lg:left-12 lg:w-1/2"
       />
     </div>

src/app/(homepage)/_components/Services.tsx

@@ -1,7 +1,130 @@
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import { ReactNode } from "react";
+import { TbWorldCheck, TbDeviceMobileCheck } from "react-icons/tb";
+import { FiMonitor } from "react-icons/fi";
+import { RiRobot3Line } from "react-icons/ri";
+import { MdOutlineHandshake } from "react-icons/md";
+import { BsFileEarmarkBarGraph } from "react-icons/bs";
+
+import {
+  Carousel,
+  CarouselContent,
+  CarouselItem,
+  CarouselNext,
+  CarouselPrevious,
+} from "@/components/ui/carousel";
+
+type Props = {
+  title: string;
+  description: string;
+  children: ReactNode;
+};
+
+function CardFull({ title, description, children }: Props) {
+  return (
+    <Card className="min-h-[180px] w-full shadow-lg drop-shadow-lg lg:w-auto lg:max-w-[300px]">
+      <CardHeader className="flex flex-row items-center justify-center pb-0 pt-3">
+        {children}
+        <CardTitle className="text-center font-primary text-base sm:text-2xl">
+          {title}
+        </CardTitle>
+      </CardHeader>
+      <CardContent className="h-[150px] items-center justify-center px-2 py-0 sm:py-3">
+        <CardDescription className="h-full py-2 text-center font-secondary text-sm text-black md:text-xs xl:text-sm">
+          {description}
+        </CardDescription>
+      </CardContent>
+    </Card>
+  );
+}
+
 export function Services() {
+  const dataCards = [
+    {
+      icon: TbWorldCheck,
+      title: "Aplicações Web",
+      description:
+        "Desenvolvemos aplicações web inovadoras que atendem às necessidades específicas de cada cliente.",
+    },
+    {
+      icon: FiMonitor,
+      title: "Aplicações Desktop",
+      description:
+        "Criamos aplicações desktop robustas e personalizadas, otimizando a eficiência e a produtividade dos nossos clientes.",
+    },
+    {
+      icon: TbDeviceMobileCheck,
+      title: "Apps Mobile",
+      description:
+        "Desenvolvemos aplicativos móveis intuitivos e eficientes, proporcionando experiências excepcionais aos usuários finais.",
+    },
+    {
+      icon: RiRobot3Line,
+      title: "Automação",
+      description:
+        "Implementamos soluções de automação inteligentes que melhoram processos empresariais e reduzem custos operacionais.",
+    },
+    {
+      icon: MdOutlineHandshake,
+      title: "Consultoria em TI",
+      description:
+        "Oferecemos consultoria em TI para resolver desafios tecnológicos, com soluções estratégicas e personalizadas para cada cliente.",
+    },
+    {
+      icon: BsFileEarmarkBarGraph,
+      title: "Análise de Dados",
+      description:
+        "Realizamos análises de dados detalhadas, transformando informações em insights valiosos para decisões estratégicas.",
+    },
+  ];
+
   return (
-    <section className="flex h-72 w-full items-center justify-center">
-      <h2>NOSSOS SERVIÇOS</h2>
+    <section className="flex h-auto w-full flex-col items-center justify-center py-8">
+      <div className="flex w-full flex-col items-center justify-center px-10 md:px-28 lg:px-48">
+        <h2 className="font-primary text-2xl font-bold lg:text-5xl">
+          NOSSOS SERVIÇOS
+        </h2>
+        <hr className="mb-12 mt-5 h-1 w-full border-0 bg-orange md:mb-24 md:w-1/2 lg:w-2/6" />
+
+        <div className="hidden flex-wrap items-center justify-center gap-5 lg:flex">
+          {dataCards.map(({ icon: Icon, title, description }) => (
+            <CardFull key={title} title={title} description={description}>
+              <Icon size={30} className="mr-1 text-orange" />
+            </CardFull>
+          ))}
+        </div>
+
+        <Carousel
+          className="relative flex w-full items-center justify-center lg:hidden"
+          opts={{
+            align: "center",
+          }}
+        >
+          <CarouselContent className="-ml-4 px-8 sm:px-24">
+            {dataCards.map(({ icon: Icon, title, description }) => (
+              <CarouselItem key={title} className="pl-4">
+                <CardFull key={title} title={title} description={description}>
+                  <Icon size={30} className="mr-1 text-orange" />
+                </CardFull>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious
+            className="absolute -left-9 top-1/2 z-10 -translate-y-1/2"
+            variant="link"
+          />
+          <CarouselNext
+            className="absolute -right-9 top-1/2 z-10 -translate-y-1/2"
+            variant="link"
+          />
+        </Carousel>
+      </div>
     </section>
   );
 }

src/app/api/recaptcha/route.ts

@@ -18,7 +18,7 @@ export async function POST(req: NextRequest) {
 
     if (response.data.success)
       return Response.json(response.data, { status: 200 });
-    else return Response.json(response.data, { status: 400 });
+    return Response.json(response.data, { status: 400 });
   } catch (error) {
     if (error instanceof z.ZodError) {
       return Response.json(error.issues, { status: 400 });

src/app/contato/page.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import ReCAPTCHA from "react-google-recaptcha";
-import React, { useState, useRef } from "react";
+import React, { useState } from "react";
 import { env } from "@/env";
 
 export default function FormularioContato() {
@@ -66,7 +66,7 @@ export default function FormularioContato() {
             onChange={(token: string | null) => handleCaptchaSubmissions(token)}
             onExpired={() => setIsVerified(false)}
             className="mb-2"
-          ></ReCAPTCHA>
+          />
 
           <button
             type="submit"

src/components/layout/Navbar.tsx

@@ -29,7 +29,7 @@ export function Navbar() {
           />
         </Link>
 
-        <ul className="absolute right-0 top-1/2 hidden -translate-x-1/3 -translate-y-1/2 transform lg:mx-auto lg:flex lg:w-auto lg:items-center lg:space-x-6">
+        <ul className="absolute right-0 top-1/2 hidden -translate-x-1/3 -translate-y-1/2 lg:mx-auto lg:flex lg:w-auto lg:items-center lg:space-x-6">
           {links.map((link) => (
             <li key={link.name}>
               <a

src/components/ui/accordion.tsx

@@ -36,7 +36,7 @@ const AccordionTrigger = React.forwardRef<
       {...props}
     >
       {children}
-      <ChevronDown className="h-4 w-4 shrink-0 transition-transform duration-200" />
+      <ChevronDown className="size-4 shrink-0 transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
 ));

src/components/ui/alert.tsx

@@ -7,7 +7,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground",
+  "relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
   {
     variants: {
       variant: {