Merge branch 'main' into 16-utilize-vercel-image-optimizations

package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "framer-motion": "^10.12.10",
-    "next": "13.4.1",
+    "next": "^13.5.4",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-icons": "^4.8.0"

src/components/HomePage.js

@@ -5,10 +5,9 @@ import NavBar from './NavBar';
 
 const HomePage = () => {
   return (
-    <section className="h-screen overflow-x-hidden overflow-y-hidden bg-gradient-to-tr from-cyan-200 to bg-white">
-
+    <section className="bg-gradient-to-tr from-cyan-200 to bg-white">
       <NavBar />
-      <div className="max-h-full flex items-center justify-center flex-col lg:flex-row">
+      <div className="flex items-center justify-center flex-col lg:flex-row">
         <div className="scale-[80%]  2xl:scale-90 xl:pl-20 flex flex-col items-center">
           <Image alt='' src="/hero-image.png" width={1300} height={1300} className="w-full max-w-[900px] animate-float" />
           <div className='w-1/3 h-4 mt-12 rounded-full blur-2xl bg-gradient-to-t bg-black'></div>

src/components/NavBar.js

@@ -44,7 +44,7 @@ const NavBar = () => {
     setIsOpen(!isOpen);
   };
   return (
-    <header className="t-0 w-full pt-5 px-10 flex justify-between items-center">
+    <header className="w-full pt-5 px-10 flex justify-between items-center">
       <Logo />
       <div className="lg:flex justify-between items-center hidden">
         <nav>
@@ -69,9 +69,8 @@ const NavBar = () => {
           ${isOpen ? "rotate-45 translate-y-1" : "-translate-y-1"}`}
         ></span>
         <span
-          className={`bg-black block h-0.5 w-6 rounded-sm m-0.5 ${
-            isOpen ? "opacity-0" : "opacity-100"
-          }`}
+          className={`bg-black block h-0.5 w-6 rounded-sm m-0.5 ${isOpen ? "opacity-0" : "opacity-100"
+            }`}
         ></span>
         <span
           className={`bg-black block h-0.5 w-6 rounded-sm transition-all 300ms ease-in-out 
@@ -102,7 +101,7 @@ const NavBar = () => {
               title="Join us!"
               toggle={handleClick}
             />
-            
+
           </nav>
         </div>
       ) : null}

src/components/OurFocus.js

@@ -20,7 +20,7 @@ const TextBlock = ({ src, alt, width, height, title, text, className = "" }) =>
 const OurFocus = () => {
   return (
     <>
-      <div className="  bg-white/20 text-center rounded-lg shadow-xl pt-10 pb-20">
+      <div className="  bg-white/20 text-center rounded-lg shadow-xl pt-10 pb-20 mt-24">
         <h2
           className=" xl:text-7xl py-8   text-center text-transparent  text-4xl  bg-clip-text 
           bg-gradient-to-r from-yellow-400 to-red-600"