Skip to content

Commit 02d3016

Browse files
tuanhqv123tuanhqv123
authored
Merge pull request #1 from TaskOpenSystem/tuan
feat connect wallet & landingpage
2 parents 77bd2b5 + c5aa352 commit 02d3016

16 files changed

Lines changed: 757 additions & 73 deletions

‎.gitignore‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,6 @@ yarn-error.log*
3939
# typescript
4040
*.tsbuildinfo
4141
next-env.d.ts
42+
43+
package-lock.json
44+
bun.lock

‎app/globals.css‎

Lines changed: 144 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import "tailwindcss";
22

3+
@custom-variant dark (&:where(.dark, .dark *));
4+
35
:root {
46
--background: #ffffff;
57
--foreground: #171717;
@@ -8,8 +10,54 @@
810
@theme inline {
911
--color-background: var(--background);
1012
--color-foreground: var(--foreground);
11-
--font-sans: var(--font-geist-sans);
12-
--font-mono: var(--font-geist-mono);
13+
--font-sans: var(--font-inter);
14+
--font-display: var(--font-anton);
15+
16+
/* Custom Colors */
17+
--color-primary: #3B82F6;
18+
--color-background-light: #FDFDFD;
19+
--color-background-dark: #050505;
20+
--color-slush-yellow: #FFD600;
21+
--color-slush-orange: #FF5C00;
22+
--color-slush-purple: #9747FF;
23+
--color-slush-green: #00D68F;
24+
--color-slush-dark: #1A1A1A;
25+
26+
/* Border Radius */
27+
--radius: 0.5rem;
28+
--radius-large: 2rem;
29+
30+
/* Animations */
31+
--animate-marquee: marquee 25s linear infinite;
32+
--animate-marquee-reverse: marquee-reverse 25s linear infinite;
33+
--animate-float: float 6s ease-in-out infinite;
34+
}
35+
36+
@keyframes marquee {
37+
0% {
38+
transform: translateX(0%);
39+
}
40+
100% {
41+
transform: translateX(-100%);
42+
}
43+
}
44+
45+
@keyframes marquee-reverse {
46+
0% {
47+
transform: translateX(-100%);
48+
}
49+
100% {
50+
transform: translateX(0%);
51+
}
52+
}
53+
54+
@keyframes float {
55+
0%, 100% {
56+
transform: translateY(0);
57+
}
58+
50% {
59+
transform: translateY(-20px);
60+
}
1361
}
1462

1563
@media (prefers-color-scheme: dark) {
@@ -22,5 +70,98 @@
2270
body {
2371
background: var(--background);
2472
color: var(--foreground);
25-
font-family: Arial, Helvetica, sans-serif;
73+
font-family: var(--font-inter), Arial, Helvetica, sans-serif;
74+
}
75+
76+
.text-outline-light {
77+
-webkit-text-stroke: 2px black;
78+
color: transparent;
79+
}
80+
81+
.text-outline-dark {
82+
-webkit-text-stroke: 2px white;
83+
color: transparent;
84+
}
85+
86+
::-webkit-scrollbar {
87+
width: 8px;
88+
}
89+
90+
::-webkit-scrollbar-track {
91+
background: transparent;
92+
}
93+
94+
::-webkit-scrollbar-thumb {
95+
background: #888;
96+
border-radius: 4px;
97+
}
98+
99+
::-webkit-scrollbar-thumb:hover {
100+
background: #555;
101+
}
102+
103+
/* Custom Sui Wallet Button Styles */
104+
.sui-wallet-button button {
105+
background-color: #000;
106+
color: #fff;
107+
padding: 0.5rem 1.25rem;
108+
border-radius: 9999px;
109+
font-weight: 700;
110+
font-size: 0.875rem;
111+
text-transform: uppercase;
112+
transition: transform 0.2s;
113+
border: none;
114+
cursor: pointer;
115+
}
116+
117+
.sui-wallet-button button:hover {
118+
transform: scale(1.05);
119+
}
120+
121+
:is(.dark *) .sui-wallet-button button {
122+
background-color: #fff;
123+
color: #000;
124+
}
125+
126+
/* Style cho account menu dropdown */
127+
[data-radix-popper-content-wrapper] {
128+
z-index: 9999 !important;
129+
}
130+
131+
/* Style cho các nút trong account menu (Copy, Disconnect, v.v.) */
132+
.dapp-kit-account-dropdown-menu-item,
133+
[role="menuitem"] {
134+
padding: 0.75rem 1rem !important;
135+
font-size: 0.875rem !important;
136+
font-weight: 600 !important;
137+
text-transform: uppercase !important;
138+
transition: all 0.2s !important;
139+
border-radius: 0.5rem !important;
140+
margin: 0.25rem !important;
141+
}
142+
143+
.dapp-kit-account-dropdown-menu-item:hover,
144+
[role="menuitem"]:hover {
145+
background-color: #f3f4f6 !important;
146+
transform: translateX(4px) !important;
147+
}
148+
149+
:is(.dark *) .dapp-kit-account-dropdown-menu-item:hover,
150+
:is(.dark *) [role="menuitem"]:hover {
151+
background-color: #374151 !important;
152+
}
153+
154+
/* Style cho dropdown menu container */
155+
[role="menu"] {
156+
background: white !important;
157+
border: 2px solid #e5e7eb !important;
158+
border-radius: 1rem !important;
159+
padding: 0.5rem !important;
160+
box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1) !important;
161+
min-width: 200px !important;
162+
}
163+
164+
:is(.dark *) [role="menu"] {
165+
background: #1f2937 !important;
166+
border-color: #374151 !important;
26167
}

‎app/layout.tsx‎

Lines changed: 39 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,24 @@
11
import type { Metadata } from "next";
2-
import { Geist, Geist_Mono } from "next/font/google";
2+
import { Anton, Inter } from "next/font/google";
3+
import { SuiProviders } from "@/components/SuiProviders";
34
import "./globals.css";
5+
import "@mysten/dapp-kit/dist/index.css";
46

5-
const geistSans = Geist({
6-
variable: "--font-geist-sans",
7+
const anton = Anton({
8+
weight: "400",
9+
variable: "--font-anton",
710
subsets: ["latin"],
811
});
912

10-
const geistMono = Geist_Mono({
11-
variable: "--font-geist-mono",
13+
const inter = Inter({
14+
weight: ["400", "600", "800"],
15+
variable: "--font-inter",
1216
subsets: ["latin"],
1317
});
1418

1519
export const metadata: Metadata = {
16-
title: "Create Next App",
17-
description: "Generated by create next app",
20+
title: "Data Exchange - Unlock Your Data",
21+
description: "Monetize your insights securely. Built on Walrus, Seal, and Nautilus for unstoppable decentralized data trading.",
1822
};
1923

2024
export default function RootLayout({
@@ -23,11 +27,36 @@ export default function RootLayout({
2327
children: React.ReactNode;
2428
}>) {
2529
return (
26-
<html lang="en">
30+
<html lang="en" className="scroll-smooth" suppressHydrationWarning>
31+
<head>
32+
<link
33+
href="https://fonts.googleapis.com/icon?family=Material+Icons"
34+
rel="stylesheet"
35+
/>
36+
<script
37+
dangerouslySetInnerHTML={{
38+
__html: `
39+
(function() {
40+
try {
41+
const stored = localStorage.getItem('theme');
42+
const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
43+
const shouldBeDark = stored === 'dark' || (!stored && prefersDark);
44+
if (shouldBeDark) {
45+
document.documentElement.classList.add('dark');
46+
} else {
47+
document.documentElement.classList.remove('dark');
48+
}
49+
} catch (e) {}
50+
})();
51+
`,
52+
}}
53+
/>
54+
</head>
2755
<body
28-
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
56+
className={`${anton.variable} ${inter.variable} antialiased`}
57+
suppressHydrationWarning
2958
>
30-
{children}
59+
<SuiProviders>{children}</SuiProviders>
3160
</body>
3261
</html>
3362
);

‎app/page.tsx‎

Lines changed: 18 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,24 @@
1-
import Image from "next/image";
1+
import Navbar from "@/components/Navbar";
2+
import Hero from "@/components/Hero";
3+
import MarqueeSection from "@/components/MarqueeSection";
4+
import FeaturesSection from "@/components/FeaturesSection";
5+
import CardsSection from "@/components/CardsSection";
6+
import Footer from "@/components/Footer";
27

38
export default function Home() {
49
return (
5-
<div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
6-
<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">
7-
<Image
8-
className="dark:invert"
9-
src="/next.svg"
10-
alt="Next.js logo"
11-
width={100}
12-
height={20}
13-
priority
14-
/>
15-
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
16-
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
17-
To get started, edit the page.tsx file.
18-
</h1>
19-
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
20-
Looking for a starting point or more instructions? Head over to{" "}
21-
<a
22-
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
23-
className="font-medium text-zinc-950 dark:text-zinc-50"
24-
>
25-
Templates
26-
</a>{" "}
27-
or the{" "}
28-
<a
29-
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
30-
className="font-medium text-zinc-950 dark:text-zinc-50"
31-
>
32-
Learning
33-
</a>{" "}
34-
center.
35-
</p>
36-
</div>
37-
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
38-
<a
39-
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]"
40-
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
41-
target="_blank"
42-
rel="noopener noreferrer"
43-
>
44-
<Image
45-
className="dark:invert"
46-
src="/vercel.svg"
47-
alt="Vercel logomark"
48-
width={16}
49-
height={16}
50-
/>
51-
Deploy Now
52-
</a>
53-
<a
54-
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]"
55-
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
56-
target="_blank"
57-
rel="noopener noreferrer"
58-
>
59-
Documentation
60-
</a>
61-
</div>
62-
</main>
10+
<div className="bg-background-light dark:bg-background-dark text-black dark:text-white font-body overflow-x-hidden transition-colors duration-300">
11+
<Navbar />
12+
<Hero />
13+
<MarqueeSection text="GET DATA • OWN DATA • SELL DATA •" />
14+
<FeaturesSection />
15+
<MarqueeSection
16+
variant="reverse"
17+
text="JOIN THE REVOLUTION • UNLOCK VALUE •"
18+
bgColor="bg-primary"
19+
/>
20+
<CardsSection />
21+
<Footer />
6322
</div>
6423
);
6524
}

‎bun.lock‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎components/CardsSection.tsx‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
export default function CardsSection() {
2+
return (
3+
<section className="py-10 px-4 max-w-7xl mx-auto text-center">
4+
<h2 className="font-display text-5xl md:text-7xl mb-6 uppercase">
5+
Data for humans.
6+
<br />
7+
Not just bots.
8+
</h2>
9+
<div className="grid grid-cols-1 md:grid-cols-3 gap-6 mt-16">
10+
<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">
11+
<h3 className="font-display text-4xl uppercase mb-2 leading-none text-black">
12+
Frictionless
13+
<br />
14+
Onboarding
15+
</h3>
16+
<div className="mt-4 mb-16">
17+
<button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
18+
Learn More
19+
</button>
20+
</div>
21+
<div className="absolute bottom-4 right-4 transform rotate-12 group-hover:rotate-0 transition-transform">
22+
<span className="material-icons text-6xl text-black opacity-20 group-hover:opacity-100 transition-opacity">
23+
swipe
24+
</span>
25+
</div>
26+
</div>
27+
<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">
28+
<h3 className="font-display text-4xl uppercase mb-2 leading-none text-white">
29+
For Data
30+
<br />
31+
Power Users
32+
</h3>
33+
<div className="mt-4 mb-16">
34+
<button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
35+
Earn +
36+
</button>
37+
</div>
38+
<div className="absolute bottom-4 right-4 transform -rotate-12 group-hover:rotate-0 transition-transform">
39+
<span className="material-icons text-6xl text-white opacity-20 group-hover:opacity-100 transition-opacity">
40+
analytics
41+
</span>
42+
</div>
43+
</div>
44+
<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">
45+
<h3 className="font-display text-4xl uppercase mb-2 leading-none text-white">
46+
For
47+
<br />
48+
Developers
49+
</h3>
50+
<div className="mt-4 mb-16">
51+
<button className="bg-black text-white px-4 py-1 rounded-full text-xs font-bold uppercase">
52+
Our Discord
53+
</button>
54+
</div>
55+
<div className="absolute bottom-4 right-4 transform rotate-6 group-hover:rotate-0 transition-transform">
56+
<span className="material-icons text-6xl text-white opacity-20 group-hover:opacity-100 transition-opacity">
57+
code
58+
</span>
59+
</div>
60+
</div>
61+
</div>
62+
</section>
63+
);
64+
}

0 commit comments

Comments
 (0)