add new Data Union page

.env

@@ -1,2 +1,4 @@
-PRIVKEY=
-L2_RPC=https://sepolia-rollup.arbitrum.io/rpc
+PRIVKEY= "hjjkkk"
+L2_RPC=https://sepolia-rollup.arbitrum.io/rpcNEXT_PUBLIC_CONTRACT_ADDRESS=YourContractAddressHere
+NEXT_PUBLIC_CONTRACT_ADDRESS="0x0BA7b1cB490E375F33773e0f24d3f80D74a96347-"
+LIGHTHOUSE_API_KEY = "40e765c6.269a4fb5ab074aec9fbaf9e1bc242bd2"

components/Campaign.tsx

@@ -31,7 +31,7 @@ const Button: React.FC<SimpleButtonProps> = ({
 
 export function Campaign() {
   return (
-    <div className="grid md:grid-cols-2 gap-10 mt-36 ml-36">
+    <div className="grid md:grid-cols-2 gap-10 mt-36 ml-36 ">
       <div className="flex flex-col gap-10">
         <div className="space-y-2">
           <h1 className="text-3xl font-bold">Make it Shine Campaign</h1>
@@ -46,17 +46,17 @@ export function Campaign() {
               <p>
                 Shiomi Beauty is on the hunt for passionate content creators to
                 join our latest campaign, designed to showcase the
-                transformative power of our skincare line. We're inviting you to
-                dive deep into the essence of beauty and wellness, crafting
-                authentic and engaging stories that resonate with audiences on
-                Instagram and TikTok.
+                transformative power of our skincare line. We&apos;re inviting
+                you to dive deep into the essence of beauty and wellness,
+                crafting authentic and engaging stories that resonate with
+                audiences on Instagram and TikTok.
               </p>
 
               <p>
                 Your mission, should you choose to accept it, involves creating
                 a series of captivating posts and videos that highlight your
-                personal skincare journey using Shiomi Beauty's products. We're
-                looking for creators who can:
+                personal skincare journey using Shiomi Beauty&apos;s products.
+                We&apos;re looking for creators who can:
               </p>
 
               <ul>
@@ -84,12 +84,12 @@ export function Campaign() {
 
               <p>
                 Each piece of content should be tagged with #ShiomiGlow,
-                inviting your audience to explore and engage with our brand's
-                vision of accessible, effective skincare. In return for your
-                creativity and passion, selected creators will receive an
-                exclusive Shiomi Beauty care package, competitive compensation,
-                and the chance to be featured on our official social media
-                channels.
+                inviting your audience to explore and engage with our
+                brand&apos;s vision of accessible, effective skincare. In return
+                for your creativity and passion, selected creators will receive
+                an exclusive Shiomi Beauty care package, competitive
+                compensation, and the chance to be featured on our official
+                social media channels.
               </p>
 
               <p>
@@ -110,14 +110,16 @@ export function Campaign() {
         </div>
 
         <div className="flex items-center justify-end space-x-4">
-          <Button>Join Data Union</Button>
-          <Link href="/createNFT" passHref>
+          <Link href="/dataunion" passHref>
+            <Button>Join Data Union</Button>
+          </Link>{" "}
+          <Link href="/creater" passHref>
             <Button>Join Creators Studio</Button>
           </Link>
         </div>
       </div>
-      <div className="grid grid-cols-1 gap-4">
-        <div className="border border-gray-200 rounded-lg">
+      <div className="grid grid-cols-1 gap-4 pr-10">
+        <div className="border border-gray-200 rounded-xl">
           <img
             alt="Image"
             className="rounded-t-lg"
@@ -126,7 +128,7 @@ export function Campaign() {
             style={{
               objectFit: "cover",
             }}
-            width={500}
+            width={700}
           />
         </div>
         <div className="grid grid-cols-1 gap-4">

components/Mint.tsx

@@ -0,0 +1,40 @@
+// MintNFT.js
+import React from "react";
+import { ethers } from "ethers";
+import abi from "/contracts/HypeTribe.json";
+
+const MintNFT = ({ fileURL }) => {
+  const mintNFT = async () => {
+    if (!window.ethereum) return alert("Please install MetaMask.");
+    const provider = new ethers.providers.Web3Provider(window.ethereum);
+    await provider.send("eth_requestAccounts", []); // Request access to the user's ETH account
+    const signer = provider.getSigner();
+    const contract = new ethers.Contract(
+      process.env.NEXT_PUBLIC_CONTRACT_ADDRESS,
+      abi,
+      signer
+    );
+
+    try {
+      // Call the mint function of your smart contract
+      const transaction = await contract.mint(
+        fileURL /*, other necessary arguments */
+      );
+      await transaction.wait();
+      alert("NFT minted successfully!");
+    } catch (error) {
+      console.error("Error minting NFT:", error);
+    }
+  };
+
+  return (
+    <button
+      onClick={mintNFT}
+      className="bg-red-600 hover:bg-red-800 text-white font-bold py-2 px-4 rounded"
+    >
+      Create NFT
+    </button>
+  );
+};
+
+export default MintNFT;

data/campaigns.tsx

@@ -6,36 +6,36 @@ export const campaigns = [
     title: "Make it Shine Campaign",
     description: "Join SMM activation for Shine's new beauty products",
     image: "/assets/1.png",
-    link: "pages/campaignpage",
+    link: "/campaignpage",
   },
   {
     id: "nft-giveaway",
     title: "Majorca with In&Balance",
     description:
       "Create a yoga&meditation content to promote our summer retreats",
     image: "/assets/2.png",
-    link: "pages/campaignpage",
+    link: "/campaignpage",
   },
   {
     id: "membership",
     title: "New membership tiers for Guineve",
     description: "Support our loyalty program and invite new customers to join",
     image: "/assets/3.png",
-    link: "pages/campaignpage",
+    link: "/campaignpage",
   },
   {
     id: "customized",
     title: "Web3 London Hackathon",
     description:
       "Invite diverse members to participate in a Web3 development event",
     image: "/assets/4.png",
-    link: "pages/campaignpage",
+    link: "/campaignpage",
   },
   {
     id: "sbt",
     title: "Cross-marketing for UK Charity",
     description: "Work with a group of NGOs to amplify their prositive impact",
     image: "/assets/5.png",
-    link: "pages/campaignpage",
+    link: "/campaignpage",
   },
 ];