Skip to content

Commit cc5c394

Browse files
Chucks1093claude
Chucks1093
and
claude
committed
Add marketing page as root and update index.html metadata
Replaces the placeholder landing page with a full marketing page that describes the project, how it works, and links to the community. Updates index.html title, description, open graph, and favicon to match the AccessLayer project. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent e166152 commit cc5c394

3 files changed

Lines changed: 178 additions & 24 deletions

File tree

‎index.html‎

Lines changed: 12 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,54 +4,44 @@
44
<!-- Basic -->
55
<meta charset="UTF-8" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<meta name="theme-color" content="#ffffff" />
7+
<meta name="theme-color" content="#04090f" />
88

99
<!-- Title -->
10-
<title>Build Better Sites | Ship and Stabilize Web Products Faster</title>
10+
<title>Access Layer | Creator Keys Marketplace on Stellar</title>
1111

1212
<!-- Meta Description -->
1313
<meta
1414
name="description"
15-
content="I help startups and small teams ship MVPs faster and fix fragile frontend and backend systems. Short-term engagements focused on speed, stability, and real users."
15+
content="AccessLayer is an open source marketplace on the Stellar blockchain where fans can buy and sell keys tied to their favorite creators."
1616
/>
1717

1818
<!-- SEO -->
1919
<meta name="robots" content="index, follow" />
20-
<link rel="canonical" href="https://buildbettersites.com/" />
20+
<link rel="canonical" href="https://accesslayer.xyz/" />
2121

2222
<!-- Open Graph (LinkedIn, Facebook) -->
2323
<meta property="og:type" content="website" />
24-
<meta property="og:title" content="Build Better Sites" />
24+
<meta property="og:title" content="Access Layer | Creator Keys Marketplace on Stellar" />
2525
<meta
2626
property="og:description"
27-
content="Ship MVPs faster and turn fragile web apps into stable, scalable products."
28-
/>
29-
<meta property="og:url" content="https://buildbettersites.com/" />
30-
<meta
31-
property="og:image"
32-
content="https://buildbettersites.com/card-image.png"
27+
content="An open source marketplace on the Stellar blockchain where fans can buy and sell keys tied to their favorite creators."
3328
/>
29+
<meta property="og:url" content="https://accesslayer.xyz/" />
30+
<meta property="og:image" content="https://accesslayer.xyz/images/og-image.png" />
3431
<meta property="og:image:width" content="1200" />
3532
<meta property="og:image:height" content="630" />
3633

3734
<!-- Twitter -->
3835
<meta name="twitter:card" content="summary_large_image" />
39-
<meta name="twitter:title" content="Build Better Sites" />
36+
<meta name="twitter:title" content="Access Layer | Creator Keys Marketplace on Stellar" />
4037
<meta
4138
name="twitter:description"
42-
content="Short-term frontend and backend work to ship and stabilize real web products."
43-
/>
44-
<meta
45-
name="twitter:image"
46-
content="https://buildbettersites.com/card-image.png"
39+
content="An open source marketplace on the Stellar blockchain where fans can buy and sell keys tied to their favorite creators."
4740
/>
41+
<meta name="twitter:image" content="https://accesslayer.xyz/images/og-image.png" />
4842

4943
<!-- Favicon -->
50-
<link
51-
rel="icon"
52-
type="image/png"
53-
href="https://buildbettersites.com/favicon.png"
54-
/>
44+
<link rel="icon" type="image/svg+xml" href="/icons/logo.svg" />
5545

5646
<!-- Preconnect -->
5747
<link rel="preconnect" href="https://fonts.googleapis.com" />

‎src/App.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
import { Toaster } from 'react-hot-toast';
22
import { createBrowserRouter, RouterProvider } from 'react-router';
3-
import LandingPage from './pages/LandingPage';
3+
import MarketingPage from './pages/MarketingPage';
44
import NotFoundPage from './pages/NotFoundPage';
55

66
const router = createBrowserRouter([
77
{
88
path: '/',
9-
element: <LandingPage />,
9+
element: <MarketingPage />,
1010
},
1111
{
1212
path: '*',

‎src/pages/MarketingPage.tsx‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
export default function MarketingPage() {
2+
return (
3+
<div className="relative min-h-screen overflow-hidden bg-[#04090f] text-white">
4+
{/* Background glow */}
5+
<div className="pointer-events-none absolute inset-0">
6+
<div className="absolute left-[-6rem] top-[8%] size-96 rounded-full bg-blue-600/10 blur-3xl" />
7+
<div className="absolute bottom-[10%] right-[-4rem] size-80 rounded-full bg-blue-500/8 blur-3xl" />
8+
<div className="absolute inset-0 bg-[radial-gradient(ellipse_at_top,rgba(59,130,246,0.07),transparent_50%)]" />
9+
</div>
10+
11+
<div className="relative z-10 mx-auto max-w-3xl px-6 pb-24 pt-36 sm:px-8">
12+
{/* Title */}
13+
<h1 className="leading-tight">
14+
<span
15+
className="font-grotesque text-[clamp(2.75rem,8vw,6rem)] font-extrabold tracking-tight text-white"
16+
style={{
17+
display: 'inline-block',
18+
textShadow:
19+
'2px 2px 0 #1d4ed8, 4px 4px 0 #1e3a8a, 6px 6px 0 rgba(30,58,138,0.25)',
20+
}}
21+
>
22+
Access Layer
23+
</span>
24+
</h1>
25+
26+
{/* Intro */}
27+
<p className="mt-8 font-jakarta text-lg leading-relaxed text-white/55">
28+
AccessLayer is an open source platform built on the Stellar
29+
blockchain. It works like a marketplace for creators and their fans,
30+
where the relationship between them has real financial value.
31+
</p>
32+
33+
<div className="mt-14 h-px bg-white/8" />
34+
35+
{/* The idea */}
36+
<section className="mt-14">
37+
<p className="font-mono text-[10px] uppercase tracking-[0.22em] text-blue-400">
38+
The idea
39+
</p>
40+
<p className="mt-5 font-jakarta text-base leading-relaxed text-white/65">
41+
Most platforms give creators a page and some followers. AccessLayer
42+
gives creators a market. Each creator on the platform has a supply
43+
of keys that fans can buy and sell. When more people buy keys the
44+
price goes up, and when people sell the price goes down. This means
45+
fans who support a creator early can benefit as that creator becomes
46+
more popular over time.
47+
</p>
48+
<p className="mt-4 font-jakarta text-base leading-relaxed text-white/65">
49+
Holding keys gives fans access to gated content and perks that only
50+
key holders can unlock. The price is not set by anyone. It is
51+
determined by a bonding curve formula that runs entirely on chain,
52+
so nobody can change the rules or interfere with trades.
53+
</p>
54+
</section>
55+
56+
{/* How it works */}
57+
<section className="mt-14">
58+
<p className="font-mono text-[10px] uppercase tracking-[0.22em] text-blue-400">
59+
How it works
60+
</p>
61+
<p className="mt-5 font-jakarta text-base leading-relaxed text-white/65">
62+
You connect your Stellar wallet, browse the marketplace, and buy
63+
keys for any creator you believe in. You can hold those keys to
64+
access exclusive content or sell them at any time. Every trade
65+
settles on chain in seconds with low fees, and creators earn a cut
66+
every time their keys change hands.
67+
</p>
68+
<p className="mt-4 font-jakarta text-base leading-relaxed text-white/65">
69+
This means creators earn not just from content but from the activity
70+
their community generates around them. The more their fan base grows
71+
and trades, the more value flows back to the creator.
72+
</p>
73+
</section>
74+
75+
{/* What makes it different */}
76+
<section className="mt-14">
77+
<p className="font-mono text-[10px] uppercase tracking-[0.22em] text-blue-400">
78+
What makes it different
79+
</p>
80+
<p className="mt-5 font-jakarta text-base leading-relaxed text-white/65">
81+
On most platforms a creator with a million followers and a creator
82+
with ten thousand followers are treated the same way when it comes
83+
to what their fans can actually do. On AccessLayer the market itself
84+
reflects how much people believe in a creator. Early supporters are
85+
rewarded for their conviction and creators benefit from genuine
86+
community growth, not just follower counts or ad impressions.
87+
</p>
88+
</section>
89+
90+
<div className="mt-14 h-px bg-white/8" />
91+
92+
{/* Built on Stellar */}
93+
<section className="mt-14">
94+
<p className="font-mono text-[10px] uppercase tracking-[0.22em] text-blue-400">
95+
Built on Stellar
96+
</p>
97+
<p className="mt-5 font-jakarta text-base leading-relaxed text-white/65">
98+
AccessLayer is built on the Stellar blockchain using Soroban smart
99+
contracts. The project has three main parts. The first is this
100+
website where users connect their wallet, browse creators, and trade
101+
keys. The second is a server that stores creator data and handles
102+
requests from the website. The third is a set of smart contracts
103+
that run on Stellar and handle all the buying, selling, and fee
104+
collection in a trustless way.
105+
</p>
106+
<p className="mt-4 font-jakarta text-base leading-relaxed text-white/65">
107+
Stellar makes every transaction fast and cheap. Soroban handles the
108+
fee splits, key balances, and payment flows with no middleman. You
109+
do not have to trust us. You just have to trust the contract. The
110+
whole project is open source and built for contributors to help
111+
improve it.
112+
</p>
113+
</section>
114+
115+
<div className="mt-14 h-px bg-white/8" />
116+
117+
{/* Community */}
118+
<section className="mt-14 flex flex-col items-start gap-5 sm:flex-row sm:items-center sm:justify-between">
119+
<div>
120+
<p className="font-mono text-[10px] uppercase tracking-[0.22em] text-blue-400">
121+
Join the community
122+
</p>
123+
<p className="mt-2 font-jakarta text-sm text-white/40">
124+
Follow us as we keep building. Tell us what you think.
125+
</p>
126+
</div>
127+
<div className="flex items-center gap-3">
128+
<a
129+
href="https://github.com/accesslayerorg"
130+
target="_blank"
131+
rel="noopener noreferrer"
132+
className="flex items-center gap-2 rounded-sm border border-white/15 bg-white/5 px-5 py-2.5 font-mono text-[9px] uppercase tracking-wider text-white/60 transition-all hover:border-white/30 hover:bg-white/10 hover:text-white"
133+
>
134+
<img src="/icons/github.svg" alt="" className="size-3.5 invert opacity-60" />
135+
GitHub
136+
</a>
137+
<a
138+
href="https://t.me/c/accesslayerorg/"
139+
target="_blank"
140+
rel="noopener noreferrer"
141+
className="flex items-center gap-2 rounded-sm border border-blue-500/35 bg-blue-500/10 px-5 py-2.5 font-mono text-[9px] uppercase tracking-wider text-blue-400 transition-all hover:border-blue-400 hover:bg-blue-500 hover:text-white"
142+
>
143+
Telegram
144+
</a>
145+
</div>
146+
</section>
147+
148+
{/* Footer */}
149+
<div className="mt-14 h-px bg-white/8" />
150+
<div className="mt-8 flex items-center justify-between">
151+
<div className="flex items-center gap-3">
152+
<img src="/icons/logo.svg" alt="Access Layer" className="size-5 opacity-40" />
153+
<span className="font-mono text-[9px] uppercase tracking-wider text-white/25">
154+
Access Layer
155+
</span>
156+
</div>
157+
<span className="font-mono text-[9px] text-white/20">
158+
Built on Stellar
159+
</span>
160+
</div>
161+
</div>
162+
</div>
163+
);
164+
}

0 commit comments

Comments
 (0)