landingpage-wtell/src/pages/Home.jsx

69 lines
1.4 KiB
JavaScript

import Navbar from "../components/Navbar";
import Hero from "../components/Hero";
import Produk from "../components/Produk";
import Cakupan from "../components/Cakupan";
import { motion } from "framer-motion";
const sectionVariant = {
hidden: { opacity: 0, y: 40 },
visible: (delay = 0) => ({
opacity: 1,
y: 0,
transition: {
duration: 0.8,
delay,
ease: "easeOut",
},
}),
};
export default function Home() {
return (
<motion.div
className="font-sans"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.6 }}
>
{/* Navbar muncul pertama */}
<motion.div
variants={sectionVariant}
initial="hidden"
animate="visible"
custom={0.1}
>
<Navbar />
</motion.div>
{/* Hero muncul kedua */}
<motion.section
variants={sectionVariant}
initial="hidden"
animate="visible"
custom={0.3}
>
<Hero />
</motion.section>
{/* Produk muncul ketiga */}
<motion.section
variants={sectionVariant}
initial="hidden"
animate="visible"
custom={0.6}
>
<Produk />
</motion.section>
{/* Cakupan muncul terakhir */}
<motion.section
variants={sectionVariant}
initial="hidden"
animate="visible"
custom={0.9}
>
<Cakupan />
</motion.section>
</motion.div>
);
}