diff --git a/explorer-nextjs/public/profileImagePlaceholder.png b/explorer-nextjs/public/profileImagePlaceholder.png
new file mode 100644
index 0000000000..bbeef84ed0
Binary files /dev/null and b/explorer-nextjs/public/profileImagePlaceholder.png differ
diff --git a/explorer-nextjs/src/app/page.tsx b/explorer-nextjs/src/app/page.tsx
index 35e1709eef..a6da680189 100644
--- a/explorer-nextjs/src/app/page.tsx
+++ b/explorer-nextjs/src/app/page.tsx
@@ -1,16 +1,17 @@
+"use client";
+
+import {
+ AccountStatsCard,
+ type IAccountStatsCardProps,
+} from "@/components/Cards/AccountStatsCard";
import ExplorerCard from "@/components/Cards/ExplorerCard";
import ExplorerHeroCard from "@/components/Cards/ExplorerHeroCard";
import ExplorerListItem from "@/components/List/ListItem";
import ProgressBar from "@/components/RatingMeter/RatingMeter";
import StarRarating from "@/components/StarRating/StarRating";
+import TwoSidedSwitch from "@/components/TwoSidedButtonSwitch";
import CopyFile from "@/components/icons/CopyFile";
import Gateway from "@/components/icons/Gateway";
-("use client");
-import TwoSidedSwitch from "@/components/TwoSidedButtonSwitch";
-import {
- AccountStatsCard,
- type IAccountStatsCardProps,
-} from "@/components/cards/AccountStatsCard";
import { CurrentEpochCard } from "@/components/landingPageComponents/CurrentEpochCard";
import { NetworkStakeCard } from "@/components/landingPageComponents/NetworkStakeCard";
import { NoiseCard } from "@/components/landingPageComponents/NoiseCard";
@@ -23,6 +24,84 @@ import React, { useEffect, useState } from "react";
import { type ContentCardProps, MonoCard } from "../components/cards/MonoCard";
import { type ExplorerData, getCacheExplorerData } from "./api";
+const explorerCard: ContentCardProps = {
+ overTitle: "SINGLE",
+ profileImage: {},
+ title: "SINGLE",
+ profileCountry: {
+ countryCode: "NO",
+ countryName: "Norway",
+ },
+ upDownLine: {
+ percentage: 10,
+ numberWentUp: true,
+ },
+ titlePrice: {
+ price: 1.15,
+ upDownLine: {
+ percentage: 10,
+ numberWentUp: true,
+ },
+ },
+ dataRows: {
+ rows: [
+ { key: "Market cap", value: "$ 1000000" },
+ { key: "24H VOL", value: "$ 1000000" },
+ ],
+ },
+ graph: {
+ data: [
+ {
+ date_utc: "2024-11-20",
+ numericData: 10,
+ },
+ {
+ date_utc: "2024-11-21",
+ numericData: 12,
+ },
+ {
+ date_utc: "2024-11-22",
+ numericData: 9,
+ },
+ {
+ date_utc: "2024-11-23",
+ numericData: 11,
+ },
+ ],
+ color: "#00CA33",
+ label: "Label",
+ },
+ nymAddress: {
+ address: "n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su",
+ title: "Nym address",
+ },
+ identityKey: {
+ address: "n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su",
+ title: "Nym address",
+ },
+ qrCode: {
+ url: "https://nymtech.net",
+ },
+ ratings: {
+ ratings: [
+ { title: "Rating-1", numberOfStars: 4 },
+ { title: "Rating-2", numberOfStars: 2 },
+ { title: "Rating-3", numberOfStars: 3 },
+ ],
+ },
+ progressBar: {
+ overTitle: "Current NGM epoch",
+ start: "2024-12-08T12:26:19Z",
+ showEpoch: true,
+ },
+ comments: true,
+ paragraph: "Additional line",
+ stakeButton: {
+ label: "Stake on node",
+ identityKey: "n1w7tfthyfkhh3au3mqpy294p4dk65dzal2h04su",
+ },
+};
+
const accountStatsCard: IAccountStatsCardProps = {
overTitle: "Total value",
priceTitle: 1990.0174,
@@ -146,6 +225,9 @@ export default function Home() {
// onSwitch={() => console.log("object :>> ")}
/>
+
+
+