diff --git a/my-app/package-lock.json b/my-app/package-lock.json
index ba00db5..dbaab4a 100644
--- a/my-app/package-lock.json
+++ b/my-app/package-lock.json
@@ -10,7 +10,8 @@
"dependencies": {
"@headlessui/react": "^2.1.8",
"@wojtekmaj/react-hooks": "^1.21.0",
- "framer-motion": "^11.5.6",
+ "framer-motion": "^11.11.7",
+ "my-app": "file:",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-helmet": "^6.1.0",
@@ -3246,10 +3247,9 @@
}
},
"node_modules/framer-motion": {
- "version": "11.5.6",
- "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.5.6.tgz",
- "integrity": "sha512-JMwUpAxv/DWgul9vPgX0ElKn0G66sUc6O9tOXsYwn3zxwvhxFljSXC0XT2QCzuTYBshwC8nyDAa1SYcV0Ldbhw==",
- "license": "MIT",
+ "version": "11.11.7",
+ "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.7.tgz",
+ "integrity": "sha512-89CgILOXPeG3L7ymOTGrLmf8IiKubYLUN/QkYgQuLvehAHfqgwJbLfCnhuyRI4WTds1TXkUp67A7IJrgRY/j1w==",
"dependencies": {
"tslib": "^2.4.0"
},
@@ -4594,6 +4594,10 @@
"integrity": "sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==",
"license": "MIT"
},
+ "node_modules/my-app": {
+ "resolved": "",
+ "link": true
+ },
"node_modules/mz": {
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/mz/-/mz-2.7.0.tgz",
diff --git a/my-app/package.json b/my-app/package.json
index b53709b..9991b6a 100644
--- a/my-app/package.json
+++ b/my-app/package.json
@@ -12,7 +12,8 @@
"dependencies": {
"@headlessui/react": "^2.1.8",
"@wojtekmaj/react-hooks": "^1.21.0",
- "framer-motion": "^11.5.6",
+ "framer-motion": "^11.11.7",
+ "my-app": "file:",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-helmet": "^6.1.0",
diff --git a/my-app/src/App.jsx b/my-app/src/App.jsx
index 1856ad5..e360134 100644
--- a/my-app/src/App.jsx
+++ b/my-app/src/App.jsx
@@ -1,4 +1,7 @@
+// src/App.jsx
+
import { BrowserRouter, Routes, Route } from "react-router-dom";
+import { useState, useEffect } from "react";
import Home from "./pages/Home";
import About from "./pages/About";
import NotFound from "./pages/404";
@@ -7,32 +10,41 @@ import ContactForm from "./pages/Contact";
import Events from "./pages/Events";
import Base from "./layouts/Base";
import Subscribe from "./components/Subscribe";
-import { useState } from "react";
-// import NewsletterPage from "./pages/NewsletterPage";
+import Loader from "./components/Loader";
export default function App() {
- const [isVisible, setIsVisible] = useState(false);
-
- const handleSetVisible = (value)=>{
- setIsVisible(value);
- };
+ const [isVisible, setIsVisible] = useState(false);
+ const [loading, setLoading] = useState(true);
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setLoading(false);
+ }, 1500); // I have Adjusted loader time to 1.5 seconds for smoother transition
+
+ return () => clearTimeout(timer); // Cleaning up timer
+ }, []);
+
+ const handleSetVisible = (value) => setIsVisible(value);
return (
<div className="bg-primary">
- {isVisible&&<Subscribe handle={handleSetVisible} />}
- <BrowserRouter>
- <Base>
- <Routes>
- <Route path="/" element={<Home handle={handleSetVisible} />} />
- <Route path="/about-us" element={<About handle={handleSetVisible} />} />
- <Route path="/community" element={<Community />} />
- <Route path="/events" element={<Events />} />
- <Route path="/contact-us" element={<ContactForm />} />
- {/* <Route path="/newsletter" element={<NewsletterPage />} /> */}
- <Route path="*" element={<NotFound />} />
- </Routes>
- </Base>
- </BrowserRouter>
+ {isVisible && <Subscribe handle={handleSetVisible} />}
+ {loading ? (
+ <Loader />
+ ) : (
+ <BrowserRouter>
+ <Base>
+ <Routes>
+ <Route path="/" element={<Home handle={handleSetVisible} />} />
+ <Route path="/about-us" element={<About handle={handleSetVisible} />} />
+ <Route path="/community" element={<Community />} />
+ <Route path="/events" element={<Events />} />
+ <Route path="/contact-us" element={<ContactForm />} />
+ <Route path="*" element={<NotFound />} />
+ </Routes>
+ </Base>
+ </BrowserRouter>
+ )}
</div>
);
}
diff --git a/my-app/src/assets/images/codex-logo.png b/my-app/src/assets/images/codex-logo.png
new file mode 100644
index 0000000..83012d8
Binary files /dev/null and b/my-app/src/assets/images/codex-logo.png differ
diff --git a/my-app/src/components/Loader.jsx b/my-app/src/components/Loader.jsx
index dac0def..edd675a 100644
--- a/my-app/src/components/Loader.jsx
+++ b/my-app/src/components/Loader.jsx
@@ -1,7 +1,47 @@
-import React from 'react'
+// src/components/Loader.jsx
+
+import React, { useEffect, useState } from "react";
+import { motion } from "framer-motion";
+import logo from "../assets/images/codex-logo.png";
+
+const Loader = () => {
+ const [showExplore, setShowExplore] = useState(false);
+
+ useEffect(() => {
+ const timer = setTimeout(() => {
+ setShowExplore(true);
+ }, 500);
+
+ return () => clearTimeout(timer);
+ }, []);
-export default function Loader() {
return (
- <div>Loader</div>
- )
-}
+ <div className="flex items-center justify-center h-screen bg-primary">
+ <div className="flex flex-col items-center">
+ <img src={logo} alt="Logo" className="w-25" />
+
+ <div className="relative text-white text-1xl mt-0.5">
+ <motion.div
+ className="relative"
+ initial={{ opacity: 1, y: 0 }}
+ animate={{ opacity: showExplore ? 0 : 1, y: showExplore ? -20 : 0 }}
+ transition={{ duration: 0.25 }}
+ >
+ We <span className="text-secondary">Code</span>
+ </motion.div>
+
+ <motion.div
+ className="relative"
+ initial={{ opacity: 0, y: 20 }}
+ animate={{ opacity: showExplore ? 1 : 0, y: showExplore ? 0 : 20 }}
+ transition={{ duration: 0.25 }}
+ >
+ We <span className="text-secondary">Explore</span>
+ </motion.div>
+ </div>
+ </div>
+ </div>
+ );
+};
+
+export default Loader;