Adding Hero section and adjust the scrolling (#34)

app/components/Hero.tsx

@@ -0,0 +1,28 @@
+import React, { forwardRef } from "react";
+import Image from "next/image";
+import logo from "../../Public/logo-bw.png";
+const Hero = forwardRef<HTMLDivElement>((_, ref) => {
+  return (
+    <section
+      ref={ref}
+      className="min-h-[100dvh] snap-start relative back bg-cover bg-center bg-fixed h-screen flex items-center justify-center "
+    >
+      <div className="flex flex-col md:flex-row justify-center items-center ">
+        <Image
+          src={logo}
+          alt="Hero Image"
+          width={200}
+          height={500}
+          className="flex justify-center items-center"
+        />
+        <p className="text-white text-base md:text-lg text-center md:text-left lg:text-xl  text-pretty leading-relaxed p-4 md:p-6">
+          Digital Marketing Agency, SEO Solutions <br /> Innovative Web
+          Devolpment{" "}
+        </p>
+      </div>
+    </section>
+  );
+});
+Hero.displayName = "Hero";
+
+export default Hero;

app/components/ScrollBySection.tsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useRef, useState } from "react";
 import Welcome from "./Welcome/Welcome";
 import MeetUs from "./MeetUs";
+import Hero from "./Hero";
 
 const ScrollBySection: React.FC = () => {
   const sectionRefs = useRef<HTMLDivElement[]>([]);
@@ -73,16 +74,21 @@ const ScrollBySection: React.FC = () => {
 
   return (
     <div className="h-[100dvh] w-full overflow-hidden">
-      <Welcome
+      <Hero
         ref={(el) => {
           if (el) sectionRefs.current[0] = el;
         }}
       />
-      <MeetUs
+      <Welcome
         ref={(el) => {
           if (el) sectionRefs.current[1] = el;
         }}
       />
+      <MeetUs
+        ref={(el) => {
+          if (el) sectionRefs.current[2] = el;
+        }}
+      />
       {/* Add more sections as needed */}
     </div>
   );

app/globals.css

@@ -96,3 +96,6 @@ body {
   justify-content: center;
   align-items: center;
 }
+.back {
+  background-image: url("../Public/waves.jpg");
+}