first commit

components/HeroSection.tsx

@@ -0,0 +1,71 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+interface HeroSectionProps {
+  isAuthenticated: boolean;
+}
+
+export default function HeroSection({ isAuthenticated }: HeroSectionProps) {
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    
+    // Initialize WOW.js after mount
+    if (typeof window !== "undefined" && window.WOW) {
+      new window.WOW().init();
+    }
+  }, []);
+
+  return (
+    <section className="hero-section" style={{backgroundImage: 'url("/assets/img/core-img/grid3.png")'}} suppressHydrationWarning>
+      <div className="divider"></div>
+      <div className="container">
+        <div className="hero-content">
+          <div className="row g-5">
+            <div className="col-12 col-md-6">
+              <h2 
+                className={`mb-0 text-white ${mounted ? 'wow fadeInUp' : ''}`}
+                data-wow-duration="1000ms" 
+                data-wow-delay="400ms"
+                suppressHydrationWarning
+              >
+                Best IT <span>Solution</span> Agency For Your Business
+              </h2>
+            </div>
+            <div className="col-12 col-md-6 col-xl-5 offset-xl-1 col-xxl-4 offset-xxl-1">
+              <p 
+                className={`text-white ${mounted ? 'wow fadeInUp' : ''}`}
+                data-wow-duration="1000ms" 
+                data-wow-delay="600ms"
+                suppressHydrationWarning
+              >
+                At Solvexa, we are dedicated transforming your digital aspirations into reality. With a passion for innovation and a commitment to excellence.
+              </p>
+              <Link 
+                className={`btn border-2 btn-outline-light ${mounted ? 'wow fadeInUp' : ''}`}
+                data-wow-duration="1000ms" 
+                data-wow-delay="800ms" 
+                href={isAuthenticated ? "/dashboard" : "/auth/register"}
+                suppressHydrationWarning
+              >
+                {isAuthenticated ? "Go to Dashboard" : "Get Started"} <i className="ti ti-arrow-up-right"></i>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="divider"></div>
+    </section>
+  );
+}
+
+// Extend Window interface
+declare global {
+  interface Window {
+    WOW: any;
+  }
+}
+