first commit

components/AboutSection.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import Link from "next/link";
+import { useEffect, useState } from "react";
+
+interface AboutSectionProps {
+  isAuthenticated: boolean;
+}
+
+export default function AboutSection({ isAuthenticated }: AboutSectionProps) {
+  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="about-section" suppressHydrationWarning>
+      <div className="right-shape">
+        <img src="/assets/img/core-img/shape.png" alt="" />
+      </div>
+      <div className="divider"></div>
+      <div className="container">
+        <div className="row g-5 align-items-center">
+          <div className="col-12 col-lg-6">
+            <div className="about-content ps-md-4">
+              <div className="section-heading">
+                <span className="sub-title">About Us</span>
+                <h2 className="mb-4">We Are About to Witness Something Great</h2>
+                <p className="mb-5">
+                  Empower your business with our cutting-edge IT services and unmatched support, tailored for transformative growth and harness innovation.
+                </p>
+                <ul className="about-list ps-0 d-flex flex-column gap-3 list-unstyled mb-5">
+                  <li className="d-flex align-items-center gap-2">
+                    <div className="icon"><i className="ti ti-arrow-right"></i></div>
+                    <h5 className="mb-0">Complete authentication system with email verification</h5>
+                  </li>
+                  <li className="d-flex align-items-center gap-2">
+                    <div className="icon"><i className="ti ti-arrow-right"></i></div>
+                    <h5 className="mb-0">Social login with Google and GitHub integration</h5>
+                  </li>
+                  <li className="d-flex align-items-center gap-2">
+                    <div className="icon"><i className="ti ti-arrow-right"></i></div>
+                    <h5 className="mb-0">Secure JWT token management and refresh</h5>
+                  </li>
+                </ul>
+                <Link className="btn btn-primary" href={isAuthenticated ? "/dashboard" : "/auth/register"}>
+                  {isAuthenticated ? "View Dashboard" : "Get Started"} <i className="ti ti-arrow-up-right"></i>
+                </Link>
+              </div>
+            </div>
+          </div>
+          <div className="col-12 col-lg-6">
+            <div 
+              className={mounted ? "about-video-content wow fadeInUp" : "about-video-content"} 
+              data-wow-duration="1000ms" 
+              data-wow-delay="500ms"
+              suppressHydrationWarning
+            >
+              <img src="/assets/img/bg-img/25.jpg" alt="" />
+              <div className="play-video-btn video-btn" data-video="https://youtu.be/4GUFkrHvZdE">
+                <div className="icon"><i className="ti ti-player-play-filled"></i></div>
+              </div>
+            </div>
+            <div 
+              className={mounted ? "about-images d-flex px-5 mt-5 wow fadeInUp" : "about-images d-flex px-5 mt-5"} 
+              data-wow-duration="1000ms" 
+              data-wow-delay="800ms"
+              suppressHydrationWarning
+            >
+              <div>
+                <img className="w-100" src="/assets/img/bg-img/26.jpg" alt="" />
+              </div>
+              <div>
+                <svg className="rotatingImage" xmlns="http://www.w3.org/2000/svg" width={70} height={70} viewBox="0 0 70 70" fill="none">
+                  <path d="M35 0L46.1369 23.8631L70 35L46.1369 46.1369L35 70L23.8631 46.1369L0 35L23.8631 23.8631L35 0Z" fill="#222222" />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="divider"></div>
+    </section>
+  );
+}
+
+// Extend Window interface
+declare global {
+  interface Window {
+    WOW: any;
+  }
+}
+