Refactor/UI update

next.config.js

@@ -48,7 +48,7 @@ const cspHeader = `
   style-src 'self' 'unsafe-inline' ${STYLE_SRC_HOSTS.join(' ')};
   connect-src *;
   img-src 'self' blob: data: ${IMG_SRC_HOSTS.join(' ')};
-  font-src 'self' data: https://js.intercomcdn.com https://fonts.intercomcdn.com;
+  font-src 'self' data: https://js.intercomcdn.com https://fonts.intercomcdn.com https://res.cloudinary.com;
   object-src 'none';
   base-uri 'self';
   form-action 'self';

package.json

@@ -53,6 +53,7 @@
     "@starknet-react/core": "^3.7.2",
     "@tanstack/query-core": "^5.90.12",
     "@tanstack/react-query": "^5.59.20",
+    "@types/three": "^0.184.0",
     "@vercel/analytics": "^1.4.0",
     "@vercel/functions": "^1.5.0",
     "axios": "^1.7.9",
@@ -63,12 +64,15 @@
     "formik": "^2.4.6",
     "framer-motion": "^10.16.4",
     "next": "^15.0.7",
+    "ogl": "^1.0.11",
+    "postprocessing": "^6.39.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.6.0",
     "react-toastify": "^10.0.6",
     "refiner-js": "1.2.4",
     "starknetkit": "2.6.1",
+    "three": "^0.184.0",
     "viem": "^2.21.41",
     "wagmi": "^2.12.26",
     "zod": "3.21.4",

src/components/footer/Footer.tsx

@@ -1,12 +1,12 @@
 'use client';
 
-import Image from 'next/image';
-import Link from 'next/link';
 import { resolveTarget } from '../../utils/resolveTarget';
 import { socialIconMap } from '../../utils/socialIconMap';
+import FooterBottomAnimated from './FooterBottomAnimated';
 import SingleFooter from './props/SingleFooter';
 import type { RawFooterConfig } from './types/types';
 
+
 type Props = {
   rawFooter: RawFooterConfig;
 };
@@ -43,36 +43,20 @@ const Footer = ({ rawFooter }: Props) => {
   ];
 
   return (
-    <footer className="lightchain-footer footer-style-default footer-style-3 position-relative variation-2 bg-one mt-0">
-      <div className="footer-top">
+    <footer className="lightchain-footer footer-style-default footer-style-3 position-relative variation-2 mt-0">
+      <div className="footer-top pb--0 bg-[#000000]">
         <div className="container mx-auto px-4 sm:px-6 lg:px-12">
           <div className="grid grid-cols-2 gap-6 md:grid-cols-3 lg:grid-cols-5">
             <SingleFooter data={services} />
             <SingleFooter data={products} />
             <SingleFooter data={solutions} />
             <SingleFooter data={company} />
           </div>
-          <div className="separator-animated variation-2 height-1 animated-true mt_sm--20 mt--70 mb--30 mt_md--30 mb_md--20 sm--30 mb_sm--20"></div>
-          <div className="flex flex-wrap justify-between">
-            <div className="w-full md:w-1/2 lg:w-1/3">
-              <div className="lightchain-footer-widget">
-                <div className="logo inline-flex">
-                  <Link href="/">
-                    <Image src="/logo.svg" width={201} height={35} alt="Corporate Logo" />
-                  </Link>
-                </div>
-              </div>
-            </div>
-            <div className="w-full md:w-1/2 lg:w-1/3">
-              <p className="copyright-text mb-0">
-                Copyright © {new Date().getFullYear()}
-                <Link href="#" className="btn-read-more ps-2">
-                  <span>Lightchain Protocol</span>
-                </Link>
-              </p>
-            </div>
-          </div>
+          <div className="separator-animated variation-2 height-1 animated-true mt_sm--20 mt--70 mb--0 mt_md--30 mb_md--0 sm--30 mb_sm--0"></div>
+
         </div>
+
+        <FooterBottomAnimated />
       </div>
     </footer>
   );