Added X share and solved the conflicts of X

src/app/page.tsx

@@ -4,8 +4,6 @@ import { useState } from "react";
 import Header from "../components/Header";
 import Footer from "../components/Footer";
 import Image from "next/image";
-import GitHubStars from "../components/GitHubStars";
-import SubstackEmbed from "../components/SubstackEmbed";
 import CookieConsentBanner from "../components/CookieConsent";
 import Books from "../components/BooksSection";
 import DevToolsSection from "../components/DevToolsSection";
@@ -14,9 +12,31 @@ import SubstackCustom from "../components/SubstackCustom";
 import DSAToolSection from "@/components/DSASection";
 import PeopleSection from "@/components/PeopleSection";
 
-
 export default function Home() {
   const [currentSection, setCurrentSection] = useState("home");
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [copyMessage, setCopyMessage] = useState('');
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(window.location.href);
+    setCopyMessage('Copied!');
+    setTimeout(() => setCopyMessage(''), 2000);
+  };
+
+  const openModal = () => {
+    setIsModalOpen(true);
+  };
+
+  const closeModal = () => {
+    setIsModalOpen(false);
+  };
+
+  const shareOnTwitter = () => {
+    const tweetText = "Check this awesome project: ";
+    const url = window.location.href;
+    window.open(`https://twitter.com/intent/tweet?text=${encodeURIComponent(tweetText)}&url=${encodeURIComponent(url)}`, '_blank');
+    closeModal();
+  };
 
   const renderSection = () => {
     switch (currentSection) {
@@ -52,17 +72,28 @@ export default function Home() {
             </h1>
             <br />
             <p className="text-2xl md:text-3xl lg:text-4xl text-current">
-              An Open source project with everything you need to learn about
-              Rust
+              An open-source project with everything you need to learn about Rust
             </p>
             <br />
             <div className="w-full max-w-md">
               <SubstackCustom />
             </div>
             <br />
-            {/* <div className="w-full max-w-md">
-              <SubstackEmbed />
-            </div> */}
+            <div className="flex space-x-4">
+              <button
+                onClick={handleCopy}
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              >
+                Copy URL
+              </button>
+              <button
+                onClick={openModal}
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              >
+                Share on Twitter
+              </button>
+            </div>
+            {copyMessage && <p className="text-green-500">{copyMessage}</p>}
           </div>
         );
     }
@@ -74,6 +105,43 @@ export default function Home() {
       <main className="flex-grow flex flex-col items-center justify-center text-center space-y-6">
         {renderSection()}
       </main>
+      {isModalOpen && (
+        <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="bg-white p-6 rounded shadow-lg max-w-md w-full dark:bg-gray-300">
+            <h1 className='text-center  font-bold text-2xl dark:text-black'>Preview Card</h1>
+            <h2 className="text-md font-bold text-center dark:text-black">Share on Twitter</h2>
+            <div className="flex items-start mt-4 border p-4 rounded bg-gray-100 dark:bg-gray-800">
+              <img
+                src="https://github.com/FrancescoXX.png" // Replace with actual profile image
+                alt="Profile"
+                width={50}
+                height={50}
+                className="rounded-full"
+              />
+              <div className="ml-3">
+                <p className="font-bold">Your Name</p>
+                <p className="text-gray-700 dark:text-gray-300">
+                  Check out this awesome project: {window.location.href}
+                </p>
+              </div>
+            </div>
+            <div className="flex space-x-4 mt-4">
+              <button
+                onClick={shareOnTwitter}
+                className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+              >
+                Share
+              </button>
+              <button
+                onClick={closeModal}
+                className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded"
+              >
+                Close
+              </button>
+            </div>
+          </div>
+        </div>
+      )}
       <CookieConsentBanner />
       <Footer />
     </div>