TaskOpenSystem · tuanhqv123 · Jan 17, 2026 · Jan 17, 2026
diff --git a/.gitignore b/.gitignore
@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+package-lock.json
+bun.lock
diff --git a/app/globals.css b/app/globals.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
   --background: #ffffff;
   --foreground: #171717;
@@ -8,8 +10,54 @@
 @theme inline {
   --color-background: var(--background);
   --color-foreground: var(--foreground);
-  --font-sans: var(--font-geist-sans);
-  --font-mono: var(--font-geist-mono);
+  --font-sans: var(--font-inter);
+  --font-display: var(--font-anton);
+
+  /* Custom Colors */
+  --color-primary: #3B82F6;
+  --color-background-light: #FDFDFD;
+  --color-background-dark: #050505;
+  --color-slush-yellow: #FFD600;
+  --color-slush-orange: #FF5C00;
+  --color-slush-purple: #9747FF;
+  --color-slush-green: #00D68F;
+  --color-slush-dark: #1A1A1A;
+
+  /* Border Radius */
+  --radius: 0.5rem;
+  --radius-large: 2rem;
+
+  /* Animations */
+  --animate-marquee: marquee 25s linear infinite;
+  --animate-marquee-reverse: marquee-reverse 25s linear infinite;
+  --animate-float: float 6s ease-in-out infinite;
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes marquee-reverse {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    transform: translateX(0%);
+  }
+}
+
+@keyframes float {
+  0%, 100% {
+    transform: translateY(0);
+  }
+  50% {
+    transform: translateY(-20px);
+  }
 }
 
 @media (prefers-color-scheme: dark) {
@@ -22,5 +70,98 @@
 body {
   background: var(--background);
   color: var(--foreground);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-inter), Arial, Helvetica, sans-serif;
+}
+
+.text-outline-light {
+  -webkit-text-stroke: 2px black;
+  color: transparent;
+}
+
+.text-outline-dark {
+  -webkit-text-stroke: 2px white;
+  color: transparent;
+}
+
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #888;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #555;
+}
+
+/* Custom Sui Wallet Button Styles */
+.sui-wallet-button button {
+  background-color: #000;
+  color: #fff;
+  padding: 0.5rem 1.25rem;
+  border-radius: 9999px;
+  font-weight: 700;
+  font-size: 0.875rem;
+  text-transform: uppercase;
+  transition: transform 0.2s;
+  border: none;
+  cursor: pointer;
+}
+
+.sui-wallet-button button:hover {
+  transform: scale(1.05);
+}
+
+:is(.dark *) .sui-wallet-button button {
+  background-color: #fff;
+  color: #000;
+}
+
+/* Style cho account menu dropdown */
+[data-radix-popper-content-wrapper] {
+  z-index: 9999 !important;
+}
+
+/* Style cho các nút trong account menu (Copy, Disconnect, v.v.) */
+.dapp-kit-account-dropdown-menu-item,
+[role="menuitem"] {
+  padding: 0.75rem 1rem !important;
+  font-size: 0.875rem !important;
+  font-weight: 600 !important;
+  text-transform: uppercase !important;
+  transition: all 0.2s !important;
+  border-radius: 0.5rem !important;
+  margin: 0.25rem !important;
+}
+
+.dapp-kit-account-dropdown-menu-item:hover,
+[role="menuitem"]:hover {
+  background-color: #f3f4f6 !important;
+  transform: translateX(4px) !important;
+}
+
+:is(.dark *) .dapp-kit-account-dropdown-menu-item:hover,
+:is(.dark *) [role="menuitem"]:hover {
+  background-color: #374151 !important;
+}
+
+/* Style cho dropdown menu container */
+[role="menu"] {
+  background: white !important;
+  border: 2px solid #e5e7eb !important;
+  border-radius: 1rem !important;
+  padding: 0.5rem !important;
+  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
+  min-width: 200px !important;
+}
+
+:is(.dark *) [role="menu"] {
+  background: #1f2937 !important;
+  border-color: #374151 !important;
 }
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -1,20 +1,24 @@
 import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
+import { Anton, Inter } from "next/font/google";
+import { SuiProviders } from "@/components/SuiProviders";
 import "./globals.css";
+import "@mysten/dapp-kit/dist/index.css";
 
-const geistSans = Geist({
-  variable: "--font-geist-sans",
+const anton = Anton({
+  weight: "400",
+  variable: "--font-anton",
   subsets: ["latin"],
 });
 
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
+const inter = Inter({
+  weight: ["400", "600", "800"],
+  variable: "--font-inter",
   subsets: ["latin"],
 });
 
 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: "Data Exchange - Unlock Your Data",
+  description: "Monetize your insights securely. Built on Walrus, Seal, and Nautilus for unstoppable decentralized data trading.",
 };
 
 export default function RootLayout({
@@ -23,11 +27,36 @@ export default function RootLayout({
   children: React.ReactNode;
 }>) {
   return (
-    <html lang="en">
+    <html lang="en" className="scroll-smooth" suppressHydrationWarning>
+      <head>
+        <link
+          href="https://fonts.googleapis.com/icon?family=Material+Icons"
+          rel="stylesheet"
+        />
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const stored = localStorage.getItem('theme');
+                  const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+                  const shouldBeDark = stored === 'dark' || (!stored && prefersDark);
+                  if (shouldBeDark) {
+                    document.documentElement.classList.add('dark');
+                  } else {
+                    document.documentElement.classList.remove('dark');
+                  }
+                } catch (e) {}
+              })();
+            `,
+          }}
+        />
+      </head>
       <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
+        className={`${anton.variable} ${inter.variable} antialiased`}
+        suppressHydrationWarning
       >
-        {children}
+        <SuiProviders>{children}</SuiProviders>
       </body>
     </html>
   );

diff --git a/app/page.tsx b/app/page.tsx
@@ -1,65 +1,24 @@
-import Image from "next/image";
+import Navbar from "@/components/Navbar";
+import Hero from "@/components/Hero";
+import MarqueeSection from "@/components/MarqueeSection";
+import FeaturesSection from "@/components/FeaturesSection";
+import CardsSection from "@/components/CardsSection";
+import Footer from "@/components/Footer";
 
 export default function Home() {
   return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
+    <div className="bg-background-light dark:bg-background-dark text-black dark:text-white font-body overflow-x-hidden transition-colors duration-300">
+      <Navbar />
+      <Hero />
+      <MarqueeSection text="GET DATA • OWN DATA • SELL DATA •" />
+      <FeaturesSection />
+      <MarqueeSection
+        variant="reverse"
+        text="JOIN THE REVOLUTION • UNLOCK VALUE •"
+        bgColor="bg-primary"
+      />
+      <CardsSection />
+      <Footer />
     </div>
   );
 }
diff --git a/bun.lock b/bun.lock
diff --git a/components/CardsSection.tsx b/components/CardsSection.tsx
@@ -0,0 +1,64 @@
+export default function CardsSection() {
+  return (
+    <section className="py-10 px-4 max-w-7xl mx-auto text-center">
+      <h2 className="font-display text-5xl md:text-7xl mb-6 uppercase">
+        Data for humans.
+        <br />
+        Not just bots.
+      </h2>
+      <div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
+        <div className="bg-slush-yellow p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300">
+          <h3 className="font-display text-4xl uppercase mb-2 leading-none text-black">
+            Frictionless
+            <br />
+            Onboarding
+          </h3>
+          <div className="mt-4 mb-16">
+            <button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
+              Learn More
+            </button>
+          </div>
+          <div className="absolute bottom-4 right-4 transform rotate-12 group-hover:rotate-0 transition-transform">
+            <span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
+              swipe
+            </span>
+          </div>
+        </div>
+        <div className="bg-slush-purple p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300">
+          <h3 className="font-display text-4xl uppercase mb-2 leading-none text-white">
+            For Data
+            <br />
+            Power Users
+          </h3>
+          <div className="mt-4 mb-16">
+            <button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
+              Earn +
+            </button>
+          </div>
+          <div className="absolute bottom-4 right-4 transform -rotate-12 group-hover:rotate-0 transition-transform">
+            <span className="material-icons text-6xl text-white opacity-20 group-hover:opacity-100 transition-opacity">
+              analytics
+            </span>
+          </div>
+        </div>
+        <div className="bg-primary p-6 rounded-large border-4 border-black dark:border-gray-200 text-left relative group hover:-translate-y-2 transition-transform duration-300">
+          <h3 className="font-display text-4xl uppercase mb-2 leading-none text-white">
+            For
+            <br />
+            Developers
+          </h3>
+          <div className="mt-4 mb-16">
+            <button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
+              Our Discord
+            </button>
+          </div>
+          <div className="absolute bottom-4 right-4 transform rotate-6 group-hover:rotate-0 transition-transform">
+            <span className="material-icons text-6xl text-white opacity-20 group-hover:opacity-100 transition-opacity">
+              code
+            </span>
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}