diff --git a/components/dashboard-components/Banner.tsx b/components/dashboard-components/Banner.tsx new file mode 100644 index 0000000..2585e27 --- /dev/null +++ b/components/dashboard-components/Banner.tsx @@ -0,0 +1,19 @@ +interface JoinBannerProps { + date: string; +} + +const Banner = ({ date }: JoinBannerProps) => { + return ( +
+
+ +

{date}

+
+ +
+ ); +}; + +export default Banner; diff --git a/components/dashboard-components/BannerCampaign.tsx b/components/dashboard-components/BannerCampaign.tsx new file mode 100644 index 0000000..83dba58 --- /dev/null +++ b/components/dashboard-components/BannerCampaign.tsx @@ -0,0 +1,79 @@ +interface CampaignBannerProps { + otherBg?: string; + title: string; + icon: string; + owner: string; + shareLink: string; + telegramLink: string; + xLink: string; +} + +const BannerCampaign = ({ + otherBg, + title, + icon, + owner, + shareLink, + telegramLink, + xLink, +}: CampaignBannerProps) => { + return ( +
+
+
+

{title}

+

+ Curated by {" "} + {owner} +

+
+
+

Share :

+
+ + share + + + telegram + + + X + +
+
+
+
+ ); +}; + +export default BannerCampaign; diff --git a/components/pages/CampaignDetailsPage.tsx b/components/pages/CampaignDetailsPage.tsx new file mode 100644 index 0000000..1ef918c --- /dev/null +++ b/components/pages/CampaignDetailsPage.tsx @@ -0,0 +1,105 @@ +import { useState } from "react"; +import Banner from "../dashboard-components/Banner"; +import BannerCampaign from "../dashboard-components/BannerCampaign"; + +const CampaignDetails = () => { + return ( +
+ + +
+

+ This campaign rewards early adopters who mint and hold a + genesis or limited edition NFT. It will be used to give + early community members special access later. +

+

+ Goal: Distribute limited + NFTs and build early collector hype. +

+
+ +
+ ); +}; + +const tasksObj = [ + { + title: "Mint the Genesis NFT from a drop page.", + details: [ + "Visit the drop page URL", + "Connect your crypto wallet (e.g., MetaMask)", + 'Click the "Mint" button', + "Approve the transaction in your wallet", + ], + }, + { + title: "Hold it in your wallet for at least 7 days (verified via snapshot or chain data)", + details: null, + }, + { + title: "Share your NFT on Twitter (bonus task)", + details: null, + }, +]; + +const TasksSection = () => { + const [openIndex, setOpenIndex] = useState(0); + + return ( +
+

Tasks

+
+ {tasksObj.map((task, idx) => ( +
+ + {openIndex === idx && task.details && ( +
+
    + {task.details.map((step, i) => ( +
  1. + {step.includes('"Mint"') ? ( + + Click the{" "} + + "Mint" + {" "} + button + + ) : ( + step + )} +
    2. + ))} +
+
+ )} +
+ ))} +
+
+ ); +}; + +export default CampaignDetails; diff --git a/public/coiton-logo.png b/public/coiton-logo.png new file mode 100644 index 0000000..ca7af7b Binary files /dev/null and b/public/coiton-logo.png differ diff --git a/public/share-icon.svg b/public/share-icon.svg new file mode 100644 index 0000000..8c48909 --- /dev/null +++ b/public/share-icon.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/telegram.svg b/public/telegram.svg new file mode 100644 index 0000000..90c9a01 --- /dev/null +++ b/public/telegram.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + diff --git a/public/twitter.svg b/public/twitter.svg new file mode 100644 index 0000000..dc31b50 --- /dev/null +++ b/public/twitter.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/users-avatar.png b/public/users-avatar.png new file mode 100644 index 0000000..b3b85a4 Binary files /dev/null and b/public/users-avatar.png differ