fix(og:image): fixed og-image issue, and refactor code

Author: ShahVandit8

app/globals.css

@@ -103,6 +103,10 @@
 
 
 /* Custom scrollbar styles */
+html {
+  scroll-behavior: smooth;
+}
+
 .custom-scrollbar {
   scrollbar-width: thin;
   scrollbar-color: hsl(var(--primary)) transparent;

app/layout.tsx

@@ -19,12 +19,23 @@ export const metadata: Metadata = {
     siteName: "BlockchainX",
     type: "website",
     locale: "en_US",
+    images: [{
+      url: "https://raw.githubusercontent.com/ShahVandit8/repo-storage/refs/heads/main/blockchain-simulator/ogimage/og.png",
+      width: 1200,
+      height: 630,
+      alt: "BlockchainX - Interactive Blockchain Simulator & Visualizer",
+    }],
   },
   twitter: {
     card: "summary_large_image",
     title: "BlockchainX - Interactive Blockchain Simulator & Visualizer",
     description: "BlockchainX is an interactive blockchain simulator to visualize mining, create wallets, and send transactions in real-time. Learn blockchain and Bitcoin mining easily.",
-    images: ["https://i.ibb.co/sJ2WsJvz/og-5.png"],
+    images: [{
+      url: "https://raw.githubusercontent.com/ShahVandit8/repo-storage/refs/heads/main/blockchain-simulator/ogimage/og.png",
+      width: 1200,
+      height: 630,
+      alt: "BlockchainX - Interactive Blockchain Simulator & Visualizer",
+    }],
   },
   alternates: {
     canonical: "https://shahvandit8.github.io/blockchain-simulator/",

app/opengraph-image.png

@@ -50,7 +50,7 @@ export default function LandingPage() {
               >
                 Features
               </a>
-              <a href="#" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
+              <a href="https://github.com/ShahVandit8/blockchain-simulator" className="text-sm text-muted-foreground hover:text-foreground transition-colors">
                 GitHub
               </a>
             </div>
@@ -66,47 +66,6 @@ export default function LandingPage() {
 
       <main>
         {/* Hero Section */}
-        {/* <section className="py-24 text-center">
-          <motion.div
-            initial={{ opacity: 0, y: 20 }}
-            animate={{ opacity: 1, y: 0 }}
-            transition={{ duration: 0.5 }}
-            className="container mx-auto px-4"
-          >
-            <h1 className="text-5xl md:text-7xl font-bold mb-6 tracking-tight">
-              <span className="text-white">Visualize & Learn</span>
-              <br />
-              <span className="bg-gradient-to-r from-blue-500 to-purple-500 bg-clip-text text-transparent">
-                Blockchain
-              </span>{" "}
-              <span className="text-white">Technology</span>
-            </h1>
-            <p className="text-xl text-gray-400 mb-12 max-w-3xl mx-auto">
-              Interactive blockchain simulator for developers, students, and
-              enthusiasts. Create blocks, make transactions, and visualize the
-              entire process in real-time.
-            </p>
-            <div className="flex justify-center space-x-4">
-              <Link href="/simulator">
-                <Button
-                  size="lg"
-                  className="bg-white text-black hover:bg-gray-200"
-                >
-                  Try Simulator
-                  <ArrowRight className="ml-2 h-4 w-4" />
-                </Button>
-              </Link>
-              <Button
-                size="lg"
-                variant="outline"
-                className="border-white/20 hover:bg-white/10"
-              >
-                <Github className="mr-2 h-4 w-4" />
-                GitHub
-              </Button>
-            </div>
-          </motion.div>
-        </section> */}
         <section className="relative overflow-hidden py-24 text-center">
           <motion.div
             initial={{ opacity: 0, y: 20 }}
@@ -235,7 +194,7 @@ export default function LandingPage() {
                 BlockchainX
               </a>
               . The source code is available on{" "}
-              <a href="https://github.com/ShahVandit8" target="_blank" rel="noopener noreferrer" className="text-foreground hover:text-primary transition-colors">
+              <a href="https://github.com/ShahVandit8/blockchain-simulator" target="_blank" rel="noopener noreferrer" className="text-foreground hover:text-primary transition-colors">
                 GitHub
               </a>
               .

app/page.tsx

@@ -1,13 +1,11 @@
 "use client";
 
 import { useState, useEffect, useRef } from "react";
-import { v4 as uuidv4 } from "uuid";
 import { motion, AnimatePresence } from "framer-motion";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Card } from "@/components/ui/card";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import { LogConsole } from "@/components/log-console";
 import Link from "next/link";
 import {
@@ -31,34 +29,26 @@ import {
   Wallet,
   ArrowLeftRight,
   Plus,
-  Settings,
   ArrowLeft,
 } from "lucide-react";
 import { ModeToggle } from "@/components/theme-toggle";
 import {
   Block,
   Blockchain,
-  Transaction,
   Wallet as WalletType,
   constructMerkleTree,
-  generateWalletKeyPair,
 } from "@/lib/blockchain";
-import Image from "next/image";
 
 export default function BlockchainSimulator() {
   const [AppBlockchain] = useState(() => new Blockchain());
-  // const AppBlockchain = new Blockchain();
 
   const [logs, setLogs] = useState<{ message: string; timestamp: Date }[]>([]);
-  const [isLoading, setIsLoading] = useState(false);
-  const [selectedBlock, setSelectedBlock] = useState<Block | null>(null);
   const [isNewTransactionOpen, setIsNewTransactionOpen] = useState(false);
   const [isNewWalletOpen, setIsNewWalletOpen] = useState(false);
   const [isMiningOpen, setIsMiningOpen] = useState(false);
   const [nonce, setNonce] = useState(0);
   const [hash, setHash] = useState("");
   const [timeElapsed, setTimeElapsed] = useState(0);
-  const [nonceDisplay, setNonceDisplay] = useState(0);
   const [isMining, setIsMining] = useState(false);
   const [mined, setMined] = useState("");
   const [isPendingTransactionsEmpty, setIsPendingTransactionsEmpty] = useState(true);