diff --git a/app/layout.js b/app/layout.js index d6883b7..6115c8a 100644 --- a/app/layout.js +++ b/app/layout.js @@ -13,6 +13,10 @@ const RootLayout = ({ children }) => ( href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" crossOrigin="anonymous" /> + {children} diff --git a/app/page.js b/app/page.js index 9d2e8a3..ff4f7c5 100644 --- a/app/page.js +++ b/app/page.js @@ -1,12 +1,47 @@ +"use client"; + +import React, { useEffect } from "react"; import { Footer, Navbar } from "../components"; import { Hero } from "../sections"; +import ParticleAnimation from "../utils/particles"; + +const Page = () => { + useEffect(() => { + const canvasElements = document.querySelectorAll( + "[data-particle-animation]" + ); + canvasElements.forEach((canvas) => { + const options = { + quantity: canvas.dataset.particleQuantity, + staticity: canvas.dataset.particleStaticity, + ease: canvas.dataset.particleEase, + }; + new ParticleAnimation(canvas, options); + }); + }, []); -const Page = () => ( -
- - -
-); + return ( +
+
+ + + +
+ ); +}; export default Page; diff --git a/components/Footer.jsx b/components/Footer.jsx index dd52303..562d350 100644 --- a/components/Footer.jsx +++ b/components/Footer.jsx @@ -1,19 +1,47 @@ "use client"; const Footer = () => ( -