feat: implement news details page with content and sidebar

app/components/BackToTop.tsx

@@ -0,0 +1,7 @@
+export default function BackToTop() {
+    return (
+        <button id="back-top" className="back-to-top show">
+            <i className="fa-regular fa-arrow-up"></i>
+        </button>
+    );
+}

app/components/Breadcrumb.tsx

@@ -0,0 +1,31 @@
+interface BreadcrumbProps {
+    title: string;
+    current: string;
+}
+
+export default function Breadcrumb({ title, current }: BreadcrumbProps) {
+    return (
+        <section
+            className="breadcrumb-wrapper fix bg-cover"
+            style={{ backgroundImage: "url(/assets/img/inner-page/breadcrumb.jpg)" }}
+        >
+            <div className="shape">
+                <img src="/assets/img/inner-page/shape.png" alt="img" />
+            </div>
+            <div className="container">
+                <div className="page-heading">
+                    <h1 className="breadcrumb-title">{title}</h1>
+                    <ul className="breadcrumb-list">
+                        <li>
+                            <a href="/">Home</a>
+                        </li>
+                        <li>
+                            <i className="fa-solid fa-chevron-right"></i>
+                        </li>
+                        <li>{current}</li>
+                    </ul>
+                </div>
+            </div>
+        </section>
+    );
+}

app/components/Footer.tsx

@@ -176,16 +176,6 @@ export default function Footer() {
           </div>
         </div>
       </div>
-
-      {/* Floating Contact Button */}
-      <div className="fixed bottom-6 right-6 z-50">
-        <Link
-          href="/appointment"
-          className="bg-green-500 text-white p-4 rounded-full shadow-lg hover:bg-green-600 transition-colors flex items-center justify-center"
-        >
-          <span className="text-2xl">💬</span>
-        </Link>
-      </div>
     </footer>
   );
 }

app/components/Loader.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+export default function Loader() {
+    const [show, setShow] = useState(true);
+
+    useEffect(() => {
+        const timer = setTimeout(() => setShow(false), 700);
+        return () => clearTimeout(timer);
+    }, []);
+
+    if (!show) return null;
+
+    return (
+        <div id="preloader" className="preloader">
+            <div className="animation-preloader">
+                <div className="spinner"></div>
+                <div className="txt-loading">
+                    <span data-text-preloader="V" className="letters-loading">V</span>
+                    <span data-text-preloader="I" className="letters-loading">I</span>
+                    <span data-text-preloader="S" className="letters-loading">S</span>
+                    <span data-text-preloader="A" className="letters-loading">A</span>
+                    <span data-text-preloader="W" className="letters-loading">W</span>
+                    <span data-text-preloader="A" className="letters-loading">A</span>
+                    <span data-text-preloader="Y" className="letters-loading">Y</span>
+                </div>
+                <p className="text-center">Loading</p>
+            </div>
+            <div className="loader">
+                <div className="row">
+                    <div className="col-3 loader-section section-left">
+                        <div className="bg"></div>
+                    </div>
+                    <div className="col-3 loader-section section-left">
+                        <div className="bg"></div>
+                    </div>
+                    <div className="col-3 loader-section section-right">
+                        <div className="bg"></div>
+                    </div>
+                    <div className="col-3 loader-section section-right">
+                        <div className="bg"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+}
+

app/components/MouseCursor.tsx

@@ -0,0 +1,8 @@
+export default function MouseCursor() {
+  return (
+    <>
+      <div className="mouseCursor cursor-outer"></div>
+      <div className="mouseCursor cursor-inner"></div>
+    </>
+  );
+}