From b266aa87968d3c01108920a391278e7881fdb449 Mon Sep 17 00:00:00 2001
From: euxzy <mhd.rijal203@gmail.com>
Date: Sat, 28 Jun 2025 20:22:32 +0700
Subject: [PATCH] feat(landing): add animation on hero and what we offer
 section

---
 .../(home)/_components/hero-section.tsx       | 63 ++++++++++++++-----
 .../_components/what-we-offer-section.tsx     | 13 ++--
 2 files changed, 57 insertions(+), 19 deletions(-)

diff --git a/apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx b/apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx
index 974105e..06437ee 100644
--- a/apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx
+++ b/apps/dimentorin/src/app/(public)/(home)/_components/hero-section.tsx
@@ -1,23 +1,54 @@
 import { Button } from "@imphnen-frontend-service/ui/atoms";
+import { motion } from 'framer-motion'
 
 export function HeroSection() {
   return (
     <section className="relative w-full py-20 md:py-28 lg:py-32">
       {/* Background gradients and shapes */}
       <div className="absolute inset-0 -z-10 overflow-x-clip hidden md:block">
-        <div className="absolute top-10 -left-64 size-[448px] bg-primary-200 rounded-full justify-center items-center hidden lg:flex">
-          <div className="size-[296px] bg-primary-50 rounded-full" />
-        </div>
-        <div className="absolute top-3/5 -right-56 size-96 bg-primary-500 rounded-full flex justify-center items-center lg:top-1/2 lg:-right-64 lg:size-[600px]">
-          <div className="size-64 bg-primary-50 rounded-full lg:size-[400px]" />
-        </div>
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="absolute top-10 -left-64 size-[448px] bg-primary-200 rounded-full justify-center items-center hidden lg:flex"
+        >
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+            viewport={{ once: true }}
+            className="size-[296px] bg-primary-50 rounded-full"
+          />
+        </motion.div>
+        <motion.div
+          initial={{ scale: 0 }}
+          animate={{ scale: 1 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="absolute top-3/5 -right-56 size-96 bg-primary-500 rounded-full flex justify-center items-center lg:top-1/2 lg:-right-64 lg:size-[600px]"
+        >
+          <motion.div
+            initial={{ scale: 0 }}
+            animate={{ scale: 1 }}
+            transition={{ duration: 0.3, delay: 0.1 }}
+            viewport={{ once: true }}
+            className="size-64 bg-primary-50 rounded-full lg:size-[400px]"
+          />
+        </motion.div>
 
         <div className="absolute -top-28 -left-20 size-[248px] bg-radial from-primary-300 rounded-full blur-3xl" />
         <div className="absolute top-0 -right-72 size-[480px] bg-radial from-primary-400 rounded-full blur-[80px]" />
       </div>
 
       <div className="flex flex-col items-center gap-y-10">
-        <div className="flex flex-col items-center gap-y-6">
+        <motion.div
+          initial={{ opacity: 0, y: 30 }}
+          whileInView={{ opacity: 1, y: 0 }}
+          transition={{ duration: 0.5 }}
+          viewport={{ once: true }}
+          className="flex flex-col items-center gap-y-6"
+        >
           <h1 className="text-2xl font-semibold text-primary-500 md:text-4xl md:font-bold lg:text-5xl">DIMENTORIN</h1>
           <p className="max-w-52 text-center font-semibold text-xl leading-tight text-primary-500 md:max-w-72 lg:text-4xl lg:max-w-lg">
             Learn IT smarter with AI & expert mentors!
@@ -25,15 +56,17 @@ export function HeroSection() {
           <p className="max-w-3xs text-xs text-neutral-500 text-center font-medium md:max-w-lg md:text-base lg:text-lg lg:max-w-[646px]">
             Apakah kamu siap untuk grind skill TI-mu ke level Ultimate? Dengan AI sebagai navigator dan mentor profesional sebagai sensei-mu, perjalanan belajarmu akan lebih cepat, efektif, dan penuh EXP!
           </p>
-        </div>
+        </motion.div>
 
-        <Button
-          type="button"
-          size="sm"
-          className="text-[10px] h-auto px-2.5 py-2 md:text-sm"
-        >
-          Belajar Dengan AI Sekarang
-        </Button>
+        <motion.div initial={{ opacity: 0, y: 30 }} whileInView={{ opacity: 1, y: 0 }} transition={{ duration: 0.5, delay: 0.2 }} viewport={{ once: true }}>
+          <Button
+            type="button"
+            size="sm"
+            className="text-[10px] h-auto px-2.5 py-2 md:text-sm"
+          >
+            Belajar Dengan AI Sekarang
+          </Button>
+        </motion.div>
       </div>
     </section>
   )
diff --git a/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx b/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx
index e1c8f2e..3473fc7 100644
--- a/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx
+++ b/apps/dimentorin/src/app/(public)/(home)/_components/what-we-offer-section.tsx
@@ -11,8 +11,13 @@ const OFFERS: { title: string; description: string; image: string }[] = [
 
 export const WhatWeOfferSection: FC = () => {
   return (
-    <section className="container w-full mx-auto px-8 pb-4 max-w-7xl md:pb-8 lg:px-0 lg:pt-4">
-      <div className="mb-6 flex justify-center lg:mb-10">
+    <section className="w-full mx-auto px-8 pb-4 md:px-[60px] lg:px-20 lg:pt-4">
+      <motion.div
+        initial={{ opacity: 0, y: 30 }}
+        whileInView={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.5 }}
+        className="mb-6 flex justify-center lg:mb-10"
+      >
         <Button
           type="button"
           size="sm"
@@ -21,9 +26,9 @@ export const WhatWeOfferSection: FC = () => {
         >
           Apa yang Kami Tawarkan
         </Button>
-      </div>
+      </motion.div>
 
-      <div className="grid gap-6 md:grid-cols-3">
+      <div className="grid gap-6 max-w-7xl mx-auto md:grid-cols-3">
         <For data={OFFERS}>
           {(offer) => (
             <motion.div