Hello-Storage · borjasolerme · Oct 13, 2023 · Oct 16, 2023 · Oct 16, 2023 · Oct 16, 2023
diff --git 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"
       />
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@400..600"
+      />
     </head>
     <body>{children}</body>
   </html>

diff --git 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 = () => (
-  <div className="bg-primary-black overflow-hidden h-screen text-gray-100">
-    <Navbar />
-    <Hero />
-    <Footer />
-  </div>
-);
+  return (
+    <div className="relative overflow-hidden h-screen text-gray-100 bg-slate-950">
+      <div className="absolute inset-0 bg-[url('https://media.publit.io/file/-Pngtree-noise-texture-black-background-1575880.png')] opacity-5"></div>
+      <canvas
+        data-particle-animation
+        data-particle-quantity="100"
+        data-particle-staticity="50"
+        data-particle-ease="50"
+        style={{
+          position: "fixed",
+          top: 0,
+          left: 0,
+          width: "100vw",
+          height: "100vh",
+          zIndex: 0,
+        }}
+      />
+      <Navbar />
+      <Hero />
+      <Footer />
+    </div>
+  );
+};
 
 export default Page;
diff --git a/components/Footer.jsx b/components/Footer.jsx
@@ -1,19 +1,47 @@
 "use client";
 
 const Footer = () => (
-  <footer style={{ zIndex: 0 }} className="text-sm text-gray-300 mx-8 md:mx-12 absolute inset-x-0 bottom-5">
+  <footer
+    style={{ zIndex: 0 }}
+    className="text-sm text-gray-300 mx-8 md:mx-12 absolute inset-x-0 bottom-5"
+  >
     <div className="flex space-x-4 p-2 z-60">
       <a href="mailto:team@hello.app" target="_blank" rel="noopener noreferrer">
-        <i className="zIndex-100 fas fa-envelope text-gray-300 hover:text-gray-500" />
+        <i className="h-5 w-5 zIndex-100 fas fa-envelope text-gray-300 hover:text-gray-500" />
       </a>
-      <a href="https://www.linkedin.com/company/hellostorage" target="_blank" rel="noopener noreferrer">
-        <i className="fab fa-linkedin text-gray-300 hover:text-gray-500" />
+      <a
+        href="https://www.linkedin.com/company/hellostorage"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <i className="h-5 w-5 fab fa-linkedin text-gray-300 hover:text-gray-500" />
       </a>
-      <a href="https://github.com/hello-storage" target="_blank" rel="noopener noreferrer">
-        <i className="fab fa-github text-gray-300 hover:text-gray-500" />
+      <a
+        href="https://github.com/hello-storage"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <i className="h-5 w-5 fab fa-github text-gray-300 hover:text-gray-500" />
+      </a>
+      <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer">
+        <i className="h-5 w-5 fab fa-twitter text-gray-300 hover:text-gray-500" />
+      </a>
+      <a
+        href="https://www.instagram.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <i className="h-5 w-5 fab fa-instagram text-gray-300 hover:text-gray-500" />
+      </a>
+      <a
+        href="https://www.tiktok.com/"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        <i className="h-5 w-5 fab fa-tiktok text-gray-300 hover:text-gray-500" />
       </a>
     </div>
-    © 2023 Hello.app. All rights reserved.
+    © 2023 hello.app | all rights reserved.
   </footer>
 );
 

diff --git a/components/Navbar.jsx b/components/Navbar.jsx
@@ -9,11 +9,25 @@ const Navbar = () => (
     variants={navVariants}
     initial="hidden"
     whileInView="show"
-    className="p-8 relative"
+    className="p-8 relative z-10"
   >
-    <div className="absolute w-[50%] inset-0 gradient-01" />
-    <div className="absolute mx-8 md:mx-12 pb-4 pt-4 w-[50%] inset-0 flex font-semibold text-white">
-      <Image src="/helloLogo.png" width={32} height={32} alt="Hello logo" />
+    <div className="relative w-full flex justify-between">
+      <p className="text-2xl font-semibold text-white flex items-center gap-2 font-[outfit]">
+        {" "}
+        hello.app
+        <Image
+          src="https://hello.app/assets/beta-e8ce8431.png"
+          width={48}
+          height={48}
+          alt="hello beta"
+        />
+      </p>
+      <button
+        type="button"
+        className="md:px-10 md:py-3 py-2 px-6 bg-gradient-to-b from-violet-500 to-violet-800 hover:cursor-pointer rounded-xl hover:from-violet-600 hover:to-violet-900"
+      >
+        Launch app
+      </button>
     </div>
   </motion.nav>
 );

diff --git a/next.config.js b/next.config.js
@@ -3,6 +3,9 @@ const nextConfig = {
   experimental: {
     appDir: true,
   },
+  images: {
+    domains: ["hello.app"],
+  },
 };
 
 module.exports = nextConfig;