feat: design explore staking page and started offical partner page

src/pages/explore-staking/ExternalLinkCard.tsx

@@ -0,0 +1,33 @@
+import { Card, CardContent } from "@/components/ui/card";
+import { Badge } from "@/components/ui/badge";
+import { MdOutlineArrowOutward } from "react-icons/md";
+import { Link } from "react-router-dom";
+
+interface Props {
+  name: string;
+  imgSrc: string;
+  label: string;
+  link: string;
+}
+
+export default function ExternalLinkCard({ name, imgSrc, label, link }: Props) {
+  return (
+    <Link to={link}>
+      <Card className="rounded-3xl shadow h-max w-max transition-transform active:scale-90">
+        <CardContent className="flex flex-col gap-5 items-center py-8 px-14">
+          <img className="w-12 h-12" src={imgSrc} alt={`${name} logo`} />
+          <p className="text-primary-foreground">{name}</p>
+          <article className="flex gap-x-3 items-center text-card-foreground">
+            <Badge
+              variant="outline"
+              className="text-card-foreground rounded-lg w-max font-medium text-[13px] border-card-foreground/[0.4]"
+            >
+              {label}
+            </Badge>
+            <MdOutlineArrowOutward />
+          </article>
+        </CardContent>
+      </Card>
+    </Link>
+  );
+}

src/pages/explore-staking/OfficialPartner.tsx

@@ -0,0 +1,67 @@
+import { Badge } from "@/components/ui/badge";
+import StatsCards from "./StatsCards";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { GiGroundbreaker } from "react-icons/gi";
+import { MdOutlineWaterDrop } from "react-icons/md";
+
+export default function OfficialPartner() {
+  return (
+    <section className="flex flex-col gap-5">
+      <h2 className="flex gap-x-3 items-center">
+        <img
+          className="w-12 h-12"
+          src="/images/Trala_Project.png"
+          alt="Trala Project"
+        />
+        <span className="text-3xl text-primary-foreground">TRALA Staking</span>
+
+        <Badge
+          variant="outline"
+          className="text-stakingSponsor border-stakingSponsor rounded-lg"
+        >
+          Official Partner
+        </Badge>
+      </h2>
+
+      <p className="text-primary-foreground">
+        Trala is the Web 3.0 all-in-one gaming platform - The Future of Fun
+      </p>
+
+      <img
+        className="shadow rounded-3xl border-[15px] border-white/[.85] max-w-[90vw]"
+        src="/images/trala_banner.png"
+        width="800"
+      />
+
+      <p className="flex gap-x-2 text-card-foreground items-center">
+        <span>Stake your</span>
+        <img className="w-6 h-6" src="/images/TRALA.png" alt="TRALA logo" />
+        <span>
+          TRALA today and secure your position in the future of finance
+        </span>
+      </p>
+
+      <StatsCards />
+
+      <Tabs defaultValue="prime-pools">
+        <section className="flex justify-between items-center flex-wrap md:flex-nowrap gap-y-2">
+          <section className="flex flex-col gap-y-2 md:flex-row gap-x-4">
+            <TabsList className="rounded-3xl bg-card text-primary shadow-sm">
+              <TabsTrigger value="prime-pools">
+                <GiGroundbreaker fontSize={20} />
+                <h2>Prime Pools</h2>
+              </TabsTrigger>
+              <TabsTrigger value="all-pools">
+                <MdOutlineWaterDrop fontSize={20} />
+                <h2>All Pools</h2>
+              </TabsTrigger>
+            </TabsList>
+          </section>
+        </section>
+
+        <TabsContent value="prime-pools">hello</TabsContent>
+        <TabsContent value="all-pools">there</TabsContent>
+      </Tabs>
+    </section>
+  );
+}

src/pages/explore-staking/StatsCards.tsx

@@ -0,0 +1,74 @@
+import { Badge } from "@/components/ui/badge";
+import { Card } from "@/components/ui/card";
+import React from "react";
+import { IoTrendingUpOutline } from "react-icons/io5";
+import {
+  MdAccountBalanceWallet,
+  MdOutlineAccountBalance,
+} from "react-icons/md";
+
+interface Props {
+  amount?: number;
+  title: string;
+  icon: React.ReactNode;
+  children: React.ReactNode;
+}
+
+function BalanceCard({ children, title, icon: Icon }: Props) {
+  return (
+    <Card className="w-full relative bg-white/75 border-transparent px-7 py-5 rounded-2xl shadow overflow-clip space-y-2">
+      <p className="text-sm text-card-foreground flex gap-x-1 items-center">
+        <span className="font-medium">{title}</span>
+      </p>
+      <p className="text-primary-foreground text-xl font-medium">{children}</p>
+      {Icon}
+    </Card>
+  );
+}
+
+export default function StatsCards() {
+  return (
+    <article className="flex gap-5 flex-wrap lg:flex-nowrap">
+      <BalanceCard
+        title="Staking APR"
+        icon={
+          <IoTrendingUpOutline
+            fontSize={80}
+            className="absolute -right-[5%] top-[16%] text-stakingSponsor opacity-[.2]"
+          />
+        }
+      >
+        <p className="flex items-center gap-x-2">
+          <span>10%</span>
+          <Badge variant="outline" className="border-primary rounded-lg">
+            Fixed
+          </Badge>
+        </p>
+      </BalanceCard>
+
+      <BalanceCard
+        title="Total Staked"
+        icon={
+          <MdOutlineAccountBalance
+            fontSize={80}
+            className="absolute -right-[8%] top-[10%] text-stakingSponsor opacity-[.2]"
+          />
+        }
+      >
+        <p>357874.88 TRALA</p>
+      </BalanceCard>
+
+      <BalanceCard
+        title="My Staked"
+        icon={
+          <MdAccountBalanceWallet
+            fontSize={80}
+            className="absolute -right-[8%] top-[10%] text-stakingSponsor opacity-[.2]"
+          />
+        }
+      >
+        <p>0 TRALA</p>
+      </BalanceCard>
+    </article>
+  );
+}

src/pages/explore-staking/index.tsx

@@ -1,3 +1,86 @@
+import Footer from "@/components/Footer";
+import { Badge } from "@/components/ui/badge";
+import { Card, CardContent } from "@/components/ui/card";
+import { FaEthereum } from "react-icons/fa6";
+import ExternalLinkCard from "./ExternalLinkCard";
+import React, { useState } from "react";
+import OfficialPartner from "./OfficialPartner";
+
+function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <>
+      <main className="relative overflow-auto pt-24 pb-20 min-h-screen max-w-screen-lg mx-auto space-y-10 p-4">
+        {children}
+      </main>
+      <Footer />
+    </>
+  );
+}
+
 export default function ExploreStaking() {
-  return <div>ExploreStaking</div>;
+  const [showOfficialPartner, setShowOfficialPartner] = useState(true);
+  function changeViewToOfficialPartner() {
+    setShowOfficialPartner(true);
+  }
+
+  if (showOfficialPartner) {
+    return (
+      <Layout>
+        <OfficialPartner />
+      </Layout>
+    );
+  }
+
+  return (
+    <Layout>
+      <section className="flex flex-col gap-4">
+        <h2 className="flex gap-x-3 items-center">
+          <FaEthereum fontSize={40} className="text-primary" />
+          <span className="font-medium text-3xl text-primary-foreground">
+            Staking
+          </span>
+        </h2>
+
+        <p className="text-card-foreground">
+          Start staking to earn rewards on your ETH and token holdings
+        </p>
+      </section>
+
+      <article className="flex gap-8 flex-wrap items-center">
+        <Card
+          className="cursor-pointer rounded-3xl shadow h-max w-max transition-transform active:scale-90"
+          onClick={changeViewToOfficialPartner}
+        >
+          <CardContent className="flex flex-col gap-5 items-center py-8 px-14">
+            <img
+              className="w-12 h-12"
+              src="/images/TRALA.png"
+              alt="TRALA token"
+            />
+            <p className="text-primary-foreground">Stake TRALA token</p>
+            <Badge
+              variant="outline"
+              className="rounded-lg w-max font-medium text-[13px] border-primary/[0.4]"
+            >
+              Official Partner
+            </Badge>
+          </CardContent>
+        </Card>
+
+        <ExternalLinkCard
+          link="https://kelpdao.xyz/restake/"
+          name="Stake ETH on Kelp"
+          imgSrc="/images/tokens/rsETH.png"
+          label="wrsETH"
+        />
+
+        <ExternalLinkCard
+          link="https://veno.finance/eth/stake/"
+          name="Stake ETH on Veno"
+          imgSrc="/images/tokens/LETH.png"
+          label="LETH"
+        />
+      </article>
+    </Layout>
+  );
 }