OctoTechHub · krishvsoni · Jun 30, 2024 · Jun 30, 2024
diff --git a/Opus-Stellar/index.html b/Opus-Stellar/index.html
@@ -4,7 +4,7 @@
 <head>
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-  <title>Opus👾</title>
+  <title>Fantility</title>
   <link rel="icon" type="image/png" href="public/favicon.ico">
 </head>
 

diff --git a/Opus-Stellar/package-lock.json b/Opus-Stellar/package-lock.json
diff --git a/Opus-Stellar/package.json b/Opus-Stellar/package.json
@@ -10,6 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.5.2",
+    "@fortawesome/free-brands-svg-icons": "^6.5.2",
+    "@fortawesome/free-solid-svg-icons": "^6.5.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
     "@stellar/stellar-sdk": "^12.0.1",
     "@types/leaflet": "^1.9.12",
     "@types/mongoose": "^5.11.97",
@@ -22,6 +26,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-globe.gl": "^2.27.2",
+    "react-icons": "^5.2.1",
     "react-router-dom": "^6.23.1",
     "react-toastify": "^10.0.5",
     "stellar-sdk": "^12.0.1"

diff --git a/Opus-Stellar/public/173474766.png b/Opus-Stellar/public/173474766.png
diff --git a/Opus-Stellar/public/favicon.ico b/Opus-Stellar/public/favicon.ico
diff --git a/Opus-Stellar/src/pages/BuyLand.tsx b/Opus-Stellar/src/pages/BuyLand.tsx
@@ -32,7 +32,7 @@ const BuyLand = () => {
         <div className="bg-gradient-to-br from-gray-800 to-black px-5 py-10 gap-5 justify-center flex-col text-center">
           <div className="bg-gradient-to-br from-gray-800 to-black p-6 rounded-lg shadow-lg">
             <div className="mt-8 py-2 rounded-lg bg-slate-900 w-auto to-black text-white font-mono">
-              <h2 className="text-3xl font-bold text-center text-white font-mono">Buy Opus Land 🌴</h2>
+              <h2 className="text-3xl font-bold text-center text-white font-mono">Buy your fandom</h2>
             </div>
             <nav className="text-center text-gray-500 mb-4"></nav>
             <div className="w-full max-w-screen-lg">

diff --git a/Opus-Stellar/src/pages/Home.tsx b/Opus-Stellar/src/pages/Home.tsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import GlobeComponent from './components/Globe'; 
 import Navbar from './components/Navbar';
+import Footer from './components/footer';
 
 const Home: React.FC = () => {
   return (
-    <div>
+      <>
       <Navbar/>
       <GlobeComponent />
-    </div>
+      <Footer/>
+</>
   );
 };
 

diff --git a/Opus-Stellar/src/pages/StellarAcountCreation.tsx b/Opus-Stellar/src/pages/StellarAcountCreation.tsx
@@ -4,12 +4,13 @@ import { useNavigate } from 'react-router-dom';
 import { ToastContainer, toast } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 import Navbar from './components/Navbar';
+import logo from '../../public/173474766.png';
 
 const StellarAccountCreation = () => {
   const [privatekey, setprivatekey] = useState('');
   const [publickey, setpublickey] = useState('');
   const [keypair, setkeypair] = useState<Keypair | null>(null);
-  const [generated, setGenerated] = useState(false); 
+  const [generated, setGenerated] = useState(false);
   const navigate = useNavigate();
 
   const handlechange = (e: React.ChangeEvent<HTMLInputElement>, value: string) => {
@@ -34,7 +35,7 @@ const StellarAccountCreation = () => {
     setpublickey(pair.publicKey());
     localStorage.setItem('publickey', pair.publicKey());
     localStorage.setItem('privatekey', pair.secret());
-    setGenerated(true); // Set generated state to true
+    setGenerated(true); 
   };
 
   const downloadKeyPairAsTextFile = (keypair: Keypair) => {
@@ -66,83 +67,84 @@ const StellarAccountCreation = () => {
 
   return (
     <>
-    <Navbar/>
-    <div className="flex justify-center w-screen bg-gradient-to-br from-gray-800 to-black items-center h-screen">
-      <ToastContainer /> 
-      <div className="flex h-4/5 bg-gradient-to-br from-gray-700 text-white rounded-lg px-5 py-10 gap-5 justify-center flex-col text-center">
-        <h1 className="text-4xl font-bold font-mono">Opus-Stellar 
-        <svg xmlns="Opus-Stellar\src\assets\saturn-svgrepo-com.svg" className="h-6 w-6 inline-block" fill="none" viewBox="0 0 24 24" stroke="currentColor"> </svg>
-        </h1>
-        <p className="text-2xl font-bold font-mono">Claim Your Virtual Territory Today!</p>
-        <input
-          autoComplete="off"
-          onChange={(e) => handlechange(e, 'publickey')}
-          id="publickey"
-          type="text"
-          placeholder="Enter Public Key"
-          className="px-3 py-2 text-black bg-white rounded-lg font-mono"
-        />
-        <input
-          autoComplete="off"
-          onChange={(e) => handlechange(e, 'privatekey')}
-          id="privatekey"
-          type="text"
-          placeholder="Enter Private Key"
-          className="px-3 py-2 bg-white text-black rounded-lg font-mono"
-        />
-        <button
-          onClick={handleSubmit}
-          className="px-2 py-2 rounded-lg bg-orange-500 hover:bg-orange-700  transition duration-200 font-mono"
-        >
-          Enter the Opus World
-        </button>
-        {generated && (
-          <div className="text-wrap">
-            <p className="font-mono">
-              <strong>Public Key:</strong> 
-              <span
-                className="ml-2 cursor-pointer text-gray-200 font-mono"
-                onClick={() => {
-                  copyToClipboardAndShowToast(publickey);
-                }}
+      <Navbar />
+      <div className="flex justify-center w-screen bg-gradient-to-br from-gray-500 to-black items-center h-screen">
+        <ToastContainer />
+        <div className="flex h-4/5 bg-black text-white rounded-lg px-5 py-10 gap-5 justify-center flex-col text-center">
+          <h1 className="text-4xl font-bold font-mono">
+            <img src={logo} alt="Fantility Logo" className="h-12 inline-block" />
+          </h1>
+          <p className="text-2xl font-bold font-mono">Claim Your Virtual Territory Today!</p>
+          <input
+            autoComplete="off"
+            onChange={(e) => handlechange(e, 'publickey')}
+            id="publickey"
+            type="text"
+            placeholder="Enter Public Key"
+            className="px-3 py-2 text-black bg-white rounded-lg font-mono"
+          />
+          <input
+            autoComplete="off"
+            onChange={(e) => handlechange(e, 'privatekey')}
+            id="privatekey"
+            type="text"
+            placeholder="Enter Private Key"
+            className="px-3 py-2 bg-white text-black rounded-lg font-mono"
+          />
+          <button
+            onClick={handleSubmit}
+            className="px-2 py-2 rounded-lg bg-orange-500 hover:bg-orange-700 transition duration-200 font-mono"
+          >
+            Enter to your fandom
+          </button>
+          {generated && (
+            <div className="text-wrap">
+              <p className="font-mono">
+                <strong>Public Key:</strong>
+                <span
+                  className="ml-2 cursor-pointer text-gray-200 font-mono"
+                  onClick={() => {
+                    copyToClipboardAndShowToast(publickey);
+                  }}
+                >
+                  {publickey}
+                </span>
+              </p>
+              <p className="font-mono">
+                <strong>Private Key:</strong>
+                <span
+                  className="ml-2 cursor-pointer text-gray-200 font-mono"
+                  onClick={() => {
+                    copyToClipboardAndShowToast(privatekey);
+                  }}
+                >
+                  {privatekey}
+                </span>
+              </p>
+              <button
+                onClick={handledownloadclick}
+                className="px-2 py-2 rounded-lg bg-orange-500 hover:bg-orange-700 transition duration-200 mt-4 font-mono"
               >
-                {publickey}
-              </span>
-            </p>
-            <p className="font-mono">
-              <strong>Private Key:</strong>
-              <span
-                className="ml-2 cursor-pointer text-gray-200 font-mono"
-                onClick={() => {
-                 copyToClipboardAndShowToast(privatekey);
-                }}
+                Download Your Keys
+              </button>
+            </div>
+          )}
+          {!generated && (
+            <div className="text-semibold mt-4 text-white font-mono">
+              New to Fantility? Create an Account
+              <button
+                onClick={handleGenerate}
+                className="ml-2 px-2 py-1 rounded-lg bg-orange-500 hover:bg-orange-700 transition duration-200 text-sm font-mono"
               >
-                {privatekey}
-              </span>
-            </p>
-            <button
-              onClick={handledownloadclick}
-              className="px-2 py-2 rounded-lg bg-orange-500 hover:bg-orange-700  transition duration-200 mt-4 font-mono"
-            >
-              Download Your Keys
-            </button>
-          </div>
-        )}
-        {!generated && (
-          <div className="text-semibold mt-4 text-white font-mono">
-            New to Opus? Create an Account
-            <button
-              onClick={handleGenerate}
-              className="ml-2 px-2 py-1 rounded-lg bg-orange-500 hover:bg-orange-700     transition duration-200 text-sm font-mono"
-            >
-              Join Today
-            </button>
-          </div>
-        )}
+                Join Today
+              </button>
+            </div>
+          )}
+        </div>
       </div>
-    </div>
+
     </>
   );
 };
 
-export default StellarAccountCreation;
+export default StellarAccountCreation;
diff --git a/Opus-Stellar/src/pages/Transactions.tsx b/Opus-Stellar/src/pages/Transactions.tsx
@@ -1,6 +1,7 @@
 import axios from "axios";
 import { useEffect, useState } from "react";
 import Navbar from "./components/Navbar";
+import Footer from "./components/footer";
 
 interface TransactionData {
   _id: string;
@@ -86,6 +87,7 @@ const Transaction = () => {
           </div>
         </div>
       </div>
+      <Footer />
     </>
   );
 };

diff --git a/Opus-Stellar/src/pages/components/Globe.tsx b/Opus-Stellar/src/pages/components/Globe.tsx
@@ -5,7 +5,7 @@ import './GlobeComponent.css';
 
 const GlobeComponent: React.FC = () => {
   const [arcsData, setArcsData] = useState<any[]>([]);
-  const [title] = useState<string>('Welcome to Opus-Stellar!');
+  const [title] = useState<string>('Welcome to Fantility!');
   const navigate = useNavigate();
 
   useEffect(() => {
@@ -30,7 +30,7 @@ const GlobeComponent: React.FC = () => {
         <p className='text-6xl font-mono'>
           {title}
         </p>
-        <p className='text-2xl font-semibold mt-4 font-mono'>Enter into the World of Virtual Estate</p>
+        <p className='text-2xl font-semibold mt-4 font-mono'>your go-to fandom based virtual experience platform</p>
         <button className="bg-orange-500 hover:bg-orange-700 text-white font-mono py-2 px-4 mt-4 rounded"
                 onClick={handleGetStarted}>
           Get Started Today

diff --git a/Opus-Stellar/src/pages/components/Navbar.tsx b/Opus-Stellar/src/pages/components/Navbar.tsx
@@ -2,6 +2,7 @@ import { useState, useEffect } from 'react';
 import { Link, useNavigate, useLocation } from 'react-router-dom';
 import { toast, ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
+import logo from '../../../public/173474766.png';
 
 const Navbar = () => {
   const [showProfileDropdown, setShowProfileDropdown] = useState(false);
@@ -43,16 +44,15 @@ const Navbar = () => {
     }
   };
 
-  // Check if public and private keys are recognized
   const isKeysRecognized = publicKey && privateKey;
 
   return (
-    <nav className="bg-black text-white shadow-md py-4">
+    <nav className="bg-black text-white shadow-md py-4 font-mono">
       <ToastContainer />
       <div className="container mx-auto px-4">
         <div className="flex justify-between items-center">
-          <Link to="/" className="text-2xl font-bold font-mono text-white">
-            Stellar App
+          <Link to="/" className="flex items-center">
+            <img src={logo} alt="Logo" className="h-8 mr-2" /> Fantility
           </Link>
           {location.pathname === '/' && (
             <button