feat: implement Preloader, Footer, and Section components and integrate them into the home page layout.

app/components/Footer.tsx

@@ -0,0 +1,30 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function Footer() {
+  const [blink, setBlink] = useState(true);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setBlink((prev) => !prev);
+    }, 500);
+    return () => clearInterval(interval);
+  }, []);
+
+  return (
+    <footer className="w-full py-sp-8 border-t border-[rgba(255,255,255,0.06)] flex items-center justify-center font-mono text-[12px] text-[rgba(255,255,255,0.5)] bg-transparent">
+      <div className="flex items-center">
+        <span className="text-[rgba(255,255,255,0.7)]">evandro@dev</span>
+        <span className="text-[rgba(255,255,255,0.7)]">:</span>
+        <span className="text-[#E8FF00]">~</span>
+        <span className="text-[rgba(255,255,255,0.7)]">$ exit</span>
+        <span
+          className={`inline-block w-[6px] h-[14px] bg-[rgba(255,255,255,0.8)] ml-1 align-middle transition-opacity duration-100 ${
+            blink ? "opacity-100" : "opacity-0"
+          }`}
+        />
+      </div>
+    </footer>
+  );
+}

app/components/Preloader.tsx

@@ -2,6 +2,7 @@
 
 import { useEffect, useState } from "react";
 import { motion, AnimatePresence } from "framer-motion";
+import { Logo } from "./Logo";
 
 export function Preloader() {
   const [progress, setProgress] = useState(0);
@@ -45,46 +46,54 @@ export function Preloader() {
           initial={{ y: 0 }}
           exit={{ y: "-100vh" }}
           transition={{ duration: 0.9, ease: [0.76, 0, 0.24, 1] }}
-          className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[#0A0A0A] text-white"
+          className="fixed inset-0 z-[100] flex flex-col items-center justify-center bg-[var(--ink)] text-white w-screen h-screen"
         >
-          <div className="flex w-full max-w-sm flex-col items-center justify-center gap-6 px-6">
+          <div className="flex flex-col items-center justify-center gap-8 w-full px-6">
-            <div className="overflow-hidden">
-              <motion.h1
-                initial={{ y: "100%" }}
-                animate={{ y: 0 }}
-                transition={{ duration: 1, ease: [0.76, 0, 0.24, 1], delay: 0.1 }}
-                className="text-4xl sm:text-5xl font-extrabold tracking-tight"
-                style={{ fontFamily: "'Monument Extended', sans-serif" }}
-              >
-                evandro<span className="text-[#E8FF00]">.dev</span>
-              </motion.h1>
-            </div>
             
-            <div className="h-[2px] w-full overflow-hidden bg-white/10">
+            <motion.div
-              <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
-                className="h-full bg-[#E8FF00]"
+              animate={{ opacity: 1, scale: 1 }}
-                initial={{ width: 0 }}
+              transition={{ duration: 0.8, ease: "easeOut" }}
-                animate={{ width: `${progress}%` }}
+              className="flex justify-center"
-                transition={{ duration: 0.1, ease: "linear" }}
+            >
+              <Logo 
+                variant="mark" 
+                size="xl" 
+                theme="dark" 
+                className="w-32 h-auto md:w-48 lg:w-56 drop-shadow-[0_0_20px_rgba(232,255,0,0.15)]" 
               />
-            </div>
+            </motion.div>
 
-            <div className="flex w-full justify-between overflow-hidden text-[11px] uppercase tracking-widest text-white/50">
+            <motion.div
-              <motion.div
+              initial={{ opacity: 0, y: 20 }}
-                initial={{ y: "100%" }}
+              animate={{ opacity: 1, y: 0 }}
-                animate={{ y: 0 }}
+              transition={{ duration: 0.8, delay: 0.3, ease: "easeOut" }}
-                transition={{ duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: 0.2 }}
+              className="text-center"
-              >
+            >
-                Carregando
+              <h1 className="text-4xl sm:text-5xl md:text-6xl lg:text-7xl font-extrabold tracking-tight font-display mb-2">
-              </motion.div>
+                <span style={{ color: "var(--slash)" }}>Evandro</span><span className="text-white">.dev.br</span>
-              <motion.div
+              </h1>
-                initial={{ y: "100%" }}
+            </motion.div>
-                animate={{ y: 0 }}
+            
-                transition={{ duration: 0.8, ease: [0.76, 0, 0.24, 1], delay: 0.3 }}
+            <motion.div 
-              >
+              initial={{ opacity: 0 }}
+              animate={{ opacity: 1 }}
+              transition={{ delay: 0.6, duration: 0.5 }}
+              className="w-full max-w-[200px] mt-4"
+            >
+              <div className="h-[2px] w-full overflow-hidden bg-white/10 rounded-full">
+                <motion.div
+                  className="h-full bg-[var(--slash)]"
+                  initial={{ width: 0 }}
+                  animate={{ width: `${progress}%` }}
+                  transition={{ duration: 0.1, ease: "linear" }}
+                />
+              </div>
+              <div className="mt-4 flex justify-center text-[11px] uppercase tracking-widest text-[var(--slash)] font-mono opacity-80">
                 {progress}%
-              </motion.div>
+              </div>
-            </div>
+            </motion.div>
+
           </div>
         </motion.div>
       )}

app/components/Section.tsx

@@ -1,4 +1,7 @@
+"use client";
+
 import type React from "react";
+import { motion, Variants } from "framer-motion";
 import { Reveal } from "./Reveal";
 
 interface SectionProps {
@@ -23,21 +26,45 @@ export const Section = ({
   disableChildrenAnimation = false,
 }: SectionProps) => {
   const baseClass = dark ? "ds-section ds-section-dark" : "ds-section";
+
+  const itemVariants: Variants = {
+    hidden: { opacity: 0, y: 20 },
+    visible: { opacity: 1, y: 0, transition: { duration: 0.6, ease: "easeOut" } }
+  };
+
   return (
     <section id={id} className={baseClass}>
       <div className="ds-section-shell">
-        <Reveal y={40} duration={0.8}>
+        <motion.div
-          <div className="ds-section-header">
+          className="ds-section-header"
-            <div className="ds-section-meta">
+          initial="hidden"
-              {eyebrow && <p className="ds-eyebrow">{eyebrow}</p>}
+          whileInView="visible"
-              <h2 className="ds-section-title">{title}</h2>
+          viewport={{ once: true, margin: "-100px" }}
-              {description && (
+          variants={{
-                <p className="ds-section-description">{description}</p>
+            hidden: {},
-              )}
+            visible: {
-            </div>
+              transition: { staggerChildren: 0.15 }
-            {aside && <aside>{aside}</aside>}
+            }
+          }}
+        >
+          <div className="ds-section-meta">
+            {eyebrow && (
+              <motion.p className="ds-eyebrow" variants={itemVariants}>
+                {eyebrow}
+              </motion.p>
+            )}
+            <motion.h2 className="ds-section-title" variants={itemVariants}>
+              {title}
+            </motion.h2>
+            {description && (
+              <motion.p className="ds-section-description" variants={itemVariants}>
+                {description}
+              </motion.p>
+            )}
           </div>
-        </Reveal>
+          {aside && <motion.aside variants={itemVariants}>{aside}</motion.aside>}
+        </motion.div>
+        
         {!disableChildrenAnimation ? (
           <Reveal y={60} duration={1} delay={0.2}>
             <div>{children}</div>

app/page.tsx

@@ -6,6 +6,7 @@ import Projects from "./components/Projects";
 import Skills from "./components/Skills";
 import { WorkModalities } from "./components/WorkModalities";
 import { Preloader } from "./components/Preloader";
+import Footer from "./components/Footer";
 
 export default function Home() {
   return (
@@ -20,6 +21,7 @@ export default function Home() {
         <WorkModalities />
         <Contact />
       </main>
+      <Footer />
     </div>
   );
 }