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

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}>
-          <div className="ds-section-header">
-            <div className="ds-section-meta">
-              {eyebrow && <p className="ds-eyebrow">{eyebrow}</p>}
-              <h2 className="ds-section-title">{title}</h2>
-              {description && (
-                <p className="ds-section-description">{description}</p>
-              )}
-            </div>
-            {aside && <aside>{aside}</aside>}
+        <motion.div
+          className="ds-section-header"
+          initial="hidden"
+          whileInView="visible"
+          viewport={{ once: true, margin: "-100px" }}
+          variants={{
+            hidden: {},
+            visible: {
+              transition: { staggerChildren: 0.15 }
+            }
+          }}
+        >
+          <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>