feat: improve animations

package.json

@@ -45,6 +45,7 @@
     "clsx": "^2.1.1",
     "cmdk": "^1.0.0",
     "date-fns": "^3.6.0",
+    "embla-carousel-autoplay": "^8.3.0",
     "embla-carousel-react": "^8.2.0",
     "framer-motion": "^11.9.0",
     "geist": "^1.3.1",

src/components/main-wrapper.tsx

@@ -1,5 +1,7 @@
 import { useEffect } from "react"
 
+import { AnimatePresence, motion } from "framer-motion"
+
 import Footer from "@/components/footer"
 import Header from "@/components/header"
 import SmoothScroll from "@/components/smooth-scroll"
@@ -16,7 +18,15 @@ export default function MainWrapper({
   return (
     <SmoothScroll>
       <Header />
-      <main>{children}</main>
+      <AnimatePresence>
+        <motion.main
+          initial={{ opacity: 0 }}
+          animate={{ opacity: 1, transition: { duration: 0.5 } }}
+          exit={{ opacity: 0 }}
+        >
+          {children}
+        </motion.main>
+      </AnimatePresence>
       <Footer />
     </SmoothScroll>
   )

src/components/project-card.tsx

@@ -69,7 +69,7 @@ export default function ProjectCard({
 
         {/* Badges */}
         <div className="relative flex flex-nowrap gap-2 overflow-hidden">
-          <div className="absolute h-full w-full bg-gradient-to-l from-background to-transparent to-20%"></div>
+          <div className="pointer-events-none absolute h-full w-full bg-gradient-to-l from-background to-transparent to-20%"></div>
           {project.badges.map((badge) => (
             <TechBadge
               key={badge.name}

src/locale/i18n.ts

@@ -12,6 +12,7 @@ i18n
     load: "languageOnly",
     fallbackLng: "en",
     supportedLngs: ["en", "pt"],
+    ns: ["common", "validation"],
     defaultNS: "common",
     debug: process.env.NODE_ENV === "production" ? false : true,
     interpolation: {

src/pages/Home/Sections/hero.tsx

@@ -1,21 +1,12 @@
 import { useTranslation } from "react-i18next"
 
-import { motion } from "framer-motion"
-
 import waves from "@/assets/waves.svg"
 
 export default function Hero() {
   const { t } = useTranslation("pages/home")
 
   return (
-    <motion.section
-      initial={{ opacity: 0 }}
-      animate={{
-        opacity: 1,
-        transition: { duration: 1, ease: "anticipate" }
-      }}
-      className="relative h-[calc(100vh-64px)]"
-    >
+    <section className="relative h-[calc(100vh-64px)]">
       <div
         className="absolute -z-10 h-full w-full bg-primary/40"
         style={{
@@ -34,6 +25,6 @@ export default function Hero() {
           {t("hero.subtitle")}
         </p>
       </div>
-    </motion.section>
+    </section>
   )
 }

src/pages/Home/Sections/projects.tsx

@@ -4,6 +4,7 @@ import { useMediaQuery } from "react-responsive"
 import { Link, redirect, useNavigate } from "react-router-dom"
 
 import { AspectRatio } from "@radix-ui/react-aspect-ratio"
+import Autoplay from "embla-carousel-autoplay"
 import { ExpandIcon, ExternalLinkIcon, TriangleAlertIcon } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
@@ -30,7 +31,6 @@ export default function Projects() {
   const topProjects = Object.values(projects)
     .flatMap(({ items }) => items)
     .filter((project) => project.top)
-    .reverse()
 
   if (topProjects.length === 0) return
 
@@ -48,6 +48,13 @@ export default function Projects() {
             loop: true,
             align: "center"
           }}
+          plugins={[
+            Autoplay({
+              delay: 4000,
+              stopOnInteraction: true,
+              stopOnMouseEnter: true
+            }) as any
+          ]}
         >
           <CarouselContent className="items-center">
             {topProjects.map((project) => (

src/styles/globals.css

@@ -104,4 +104,25 @@
   p {
     @apply my-2 text-base font-medium tracking-normal text-primary/80;
   }
+
+  html.lenis,
+  html.lenis body {
+    @apply h-auto;
+  }
+
+  .lenis.lenis-smooth {
+    @apply scroll-auto;
+  }
+
+  .lenis.lenis-smooth [data-lenis-prevent] {
+    @apply overscroll-contain;
+  }
+
+  .lenis.lenis-stopped {
+    @apply overflow-hidden;
+  }
+
+  .lenis.lenis-scrolling iframe {
+    @apply pointer-events-none;
+  }
 }