From 8b93696b0ffd2d235ba6198edea1a08d6960402c Mon Sep 17 00:00:00 2001 From: Klesti Selimaj Date: Wed, 9 Sep 2026 13:07:40 +0200 Subject: [PATCH] Build Osias landing page and privacy policy Calm-dark aesthetic (warm near-black, glass cards, amber accent, Newsreader + Inter) translated from the Claude Design canvas mockup: hero with a faithful mock of the extension's real blur-lock treatment, how-it-works, shipped features, an honestly-labeled coming-soon section, and a privacy policy page matching the text already submitted to AMO. Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01HoMzqFw3d93hG6c9xB4thU --- src/app/globals.css | 44 +++++++----- src/app/layout.tsx | 24 +++---- src/app/page.tsx | 78 ++++----------------- src/app/privacy/page.tsx | 118 ++++++++++++++++++++++++++++++++ src/components/ComingSoon.tsx | 38 ++++++++++ src/components/Features.tsx | 50 ++++++++++++++ src/components/Hero.tsx | 46 +++++++++++++ src/components/HowItWorks.tsx | 55 +++++++++++++++ src/components/LockDemoCard.tsx | 39 +++++++++++ src/components/SiteFooter.tsx | 49 +++++++++++++ src/components/SiteHeader.tsx | 32 +++++++++ src/components/icons.tsx | 99 +++++++++++++++++++++++++++ src/lib/links.ts | 7 ++ 13 files changed, 586 insertions(+), 93 deletions(-) create mode 100644 src/app/privacy/page.tsx create mode 100644 src/components/ComingSoon.tsx create mode 100644 src/components/Features.tsx create mode 100644 src/components/Hero.tsx create mode 100644 src/components/HowItWorks.tsx create mode 100644 src/components/LockDemoCard.tsx create mode 100644 src/components/SiteFooter.tsx create mode 100644 src/components/SiteHeader.tsx create mode 100644 src/components/icons.tsx create mode 100644 src/lib/links.ts diff --git a/src/app/globals.css b/src/app/globals.css index a2dc41e..af45b7a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,26 +1,34 @@ @import "tailwindcss"; +@theme { + --color-ink: #17130f; + --color-cream: #f3eee6; + --color-muted: #a79e90; + --color-muted-2: #756c5e; + --color-muted-3: #5c554a; + --color-accent: #e2824c; + --color-accent-hover: #ec935a; + --color-accent-soft: #eda06e; + --color-loss: #e2734a; + --color-gain: #7fd89a; + + --font-sans: var(--font-inter), ui-sans-serif, system-ui, sans-serif; + --font-display: var(--font-newsreader), Georgia, "Times New Roman", serif; +} + :root { - --background: #ffffff; - --foreground: #171717; + color-scheme: dark; } -@theme inline { - --color-background: var(--background); - --color-foreground: var(--foreground); - --font-sans: var(--font-geist-sans); - --font-mono: var(--font-geist-mono); -} +@layer base { + body { + background: var(--color-ink); + color: var(--color-cream); + font-family: var(--font-sans); + text-wrap: pretty; + } -@media (prefers-color-scheme: dark) { - :root { - --background: #0a0a0a; - --foreground: #ededed; + a { + color: var(--color-accent); } } - -body { - background: var(--background); - color: var(--foreground); - font-family: Arial, Helvetica, sans-serif; -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 9852c15..f48bb4b 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,29 +1,29 @@ import type { Metadata } from "next"; -import { Geist, Geist_Mono } from "next/font/google"; +import { Inter, Newsreader } from "next/font/google"; import "./globals.css"; -const geistSans = Geist({ - variable: "--font-geist-sans", +const inter = Inter({ + variable: "--font-inter", subsets: ["latin"], + weight: ["400", "500", "600", "700"], }); -const geistMono = Geist_Mono({ - variable: "--font-geist-mono", +const newsreader = Newsreader({ + variable: "--font-newsreader", subsets: ["latin"], + weight: ["400", "500", "600"], }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Osias — the pause before the trade you'll regret", + description: + "Osias watches your connected Solana wallet in real time and locks buy actions when your trading turns loss-driven.", }; export default function RootLayout({ children }: LayoutProps<"/">) { return ( - - {children} + + {children} ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index c887311..d614f96 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -1,69 +1,21 @@ -import Image from "next/image"; +import { ComingSoon } from "@/components/ComingSoon"; +import { Features } from "@/components/Features"; +import { Hero } from "@/components/Hero"; +import { HowItWorks } from "@/components/HowItWorks"; +import { SiteFooter } from "@/components/SiteFooter"; +import { SiteHeader } from "@/components/SiteHeader"; export default function Home() { return ( -
-
- Next.js logo -
-

- To get started, edit the{" "} - - page.tsx - {" "} - file. -

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. -

-
-
- - Vercel logomark - Deploy Now - - - Documentation - -
+ <> + +
+ + + +
-
+ + ); } diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx new file mode 100644 index 0000000..883104c --- /dev/null +++ b/src/app/privacy/page.tsx @@ -0,0 +1,118 @@ +import type { Metadata } from "next"; +import { SiteFooter } from "@/components/SiteFooter"; +import { SiteHeader } from "@/components/SiteHeader"; +import { LINKS } from "@/lib/links"; + +export const metadata: Metadata = { + title: "Privacy Policy — Osias", + description: "What Osias collects, why, and how it's handled.", +}; + +function H2({ children }: { children: React.ReactNode }) { + return

{children}

; +} + +function P({ children }: { children: React.ReactNode }) { + return

{children}

; +} + +export default function PrivacyPolicy() { + return ( + <> + +
+
+

+ Privacy Policy +

+

Last updated: September 9, 2026

+ +

+ Osias is a browser extension that helps you notice and interrupt loss-driven trading by watching your + connected wallet’s on-chain activity. This policy explains what data the extension and its backend + collect, why, and how it’s handled. +

+ +

What we collect

+

+ Wallet address. Collected when you connect your Phantom + wallet — used as your account identifier and to subscribe to your wallet’s on-chain activity. +

+

+ Authentication data. To verify you control the wallet, you + sign a one-time nonce message; we store the resulting session token. Your private key and seed phrase + never leave your wallet and are never accessible to us. +

+

+ On-chain trading activity. While you’re actively + connected (extension open, on a supported trading site), our backend subscribes to your wallet’s + transaction activity via a Solana RPC provider (Helius) to calculate realized profit/loss. This is + public blockchain data, no different from what anyone could see on a block explorer. +

+

+ Settings. Your configured lock thresholds and cooldown + period, stored so they persist across sessions. +

+ +

What we don’t collect

+
    +
  • Private keys or seed phrases
    • +
  • Browsing history or page content on any site
    • +
  • Any data from sites other than the specific trading sites Osias supports
    • +
+ +

Why we collect it

+

+ Solely to run the core feature — detecting loss-driven trading against your configured thresholds and + applying/lifting the buy-lock. We do not use this data for advertising and we do not sell it. +

+ +

Who we share it with

+

+ Helius (our Solana RPC infrastructure provider) receives + your wallet address to stream transaction data to our backend, governed by their own privacy policy. We + do not otherwise share, sell, or disclose your wallet address, trading activity, or account data to any + third party. +

+ +

Data retention

+

+ Your wallet address, session data, and settings are retained for as long as your account exists. + On-chain subscriptions are only active while you have a live connection — we don’t monitor while + you’re offline. There’s no self-serve account deletion yet — to request deletion, open an + issue at{" "} + + github.com/osias-trade/copilot/issues + {" "} + and we’ll process it manually. +

+ +

Your controls

+

+ You can disconnect your wallet and sign out at any time from the extension popup, which revokes access + and ends your session. +

+ +

Open source

+

+ The extension’s frontend is open source (Apache License 2.0):{" "} + + github.com/osias-trade/copilot + {" "} + — you can review exactly what it collects and transmits. +

+ +

Contact

+

+ Questions about this policy or your data: open an issue at{" "} + + github.com/osias-trade/copilot/issues + + . +

+
+
+ + + ); +} diff --git a/src/components/ComingSoon.tsx b/src/components/ComingSoon.tsx new file mode 100644 index 0000000..c732331 --- /dev/null +++ b/src/components/ComingSoon.tsx @@ -0,0 +1,38 @@ +const upcoming = [ + { + title: "Full-site block escalation", + body: "If the buy-lock is circumvented, escalate to blocking the entire site.", + }, + { + title: "More site support", + body: "axiom.trade first — the architecture is built so new sites are a self-contained addition.", + }, + { + title: "In-extension chat", + body: "A real check-in with Osias during a lock, not just a static reason message.", + }, + { + title: "Multi-wallet linking", + body: "One account, more than one wallet under it.", + }, +]; + +export function ComingSoon() { + return ( +
+
+

Coming soon

+ not yet shipped +
+ +
+ {upcoming.map((item) => ( +
+

{item.title}

+

{item.body}

+
+ ))} +
+
+ ); +} diff --git a/src/components/Features.tsx b/src/components/Features.tsx new file mode 100644 index 0000000..597f115 --- /dev/null +++ b/src/components/Features.tsx @@ -0,0 +1,50 @@ +import { CodeIcon, KeyIcon, SignalIcon, SlidersIcon } from "./icons"; + +const features = [ + { + icon: KeyIcon, + title: "Real Phantom wallet auth", + body: "Connect, sign, sign out, switch accounts — genuine wallet signing, no stub keypair.", + }, + { + icon: SlidersIcon, + title: "Configurable thresholds", + body: "Single-trade and losing-streak triggers, plus your auto-unlock cooldown — all tunable from the popup.", + }, + { + icon: SignalIcon, + title: "Live connection status", + body: 'Always know whether Osias is actually watching — a broken connection is never silently mistaken for "unlocked".', + }, + { + icon: CodeIcon, + title: "Open source frontend", + body: "Apache 2.0. The detection and enforcement logic is auditable, not a black box asking for trust.", + }, +]; + +export function Features() { + return ( +
+
+

What’s shipped today

+

+ This is an early, working MVP — not a promise, a thing you can install right now. +

+
+ +
+ {features.map((feature) => ( +
+ +

{feature.title}

+

{feature.body}

+
+ ))} +
+
+ ); +} diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx new file mode 100644 index 0000000..017313b --- /dev/null +++ b/src/components/Hero.tsx @@ -0,0 +1,46 @@ +import { LockDemoCard } from "./LockDemoCard"; +import { LINKS } from "@/lib/links"; + +export function Hero() { + return ( +
+
+
+ Browser extension · Firefox & Chromium +
+

+ The pause before the trade you’ll regret. +

+

+ Osias watches your connected wallet in real time and locks buy actions when your trading turns + loss-driven — so the moment passes before your money does. +

+ +

+ Open source (Apache 2.0). No seed phrase or private key ever touches the extension. +

+
+ +
+ +
+
+ ); +} diff --git a/src/components/HowItWorks.tsx b/src/components/HowItWorks.tsx new file mode 100644 index 0000000..a4e07a8 --- /dev/null +++ b/src/components/HowItWorks.tsx @@ -0,0 +1,55 @@ +import { ClockIcon, LockIcon, PulseIcon, WalletIcon } from "./icons"; + +const steps = [ + { + icon: WalletIcon, + label: "Step 1", + title: "Connect your wallet", + body: "Real Phantom sign-in via message signing. Your seed phrase and private key never touch the extension.", + }, + { + icon: PulseIcon, + label: "Step 2", + title: "Osias watches", + body: "A live Solana subscription tracks your realized P&L in the background — while you're connected, nothing more.", + }, + { + icon: LockIcon, + label: "Step 3", + title: "Buying locks", + body: "Cross your threshold — a single bad trade or a losing streak — and new buys disable. Sell and manage stay untouched.", + }, + { + icon: ClockIcon, + label: "Step 4", + title: "The moment passes", + body: "Auto-unlocks after your configured cooldown, or unlock manually with an explicit confirmation.", + }, +]; + +export function HowItWorks() { + return ( +
+
+

How it works

+

+ No manual logging. Your trades are already on-chain — Osias just watches, and steps in only when it + matters. +

+
+ +
+ {steps.map((step) => ( +
+
+ +
+
{step.label.toUpperCase()}
+

{step.title}

+

{step.body}

+
+ ))} +
+
+ ); +} diff --git a/src/components/LockDemoCard.tsx b/src/components/LockDemoCard.tsx new file mode 100644 index 0000000..ba8ba16 --- /dev/null +++ b/src/components/LockDemoCard.tsx @@ -0,0 +1,39 @@ +import { LockIcon } from "./icons"; + +// The hero's product visual — a faithful mock of the real lock treatment +// (blur-disable.ts's overlay + toast.ts's reason banner), not abstract art. +export function LockDemoCard() { + return ( +
+
+
+
+
+
PIXELCAT
+
−41.2% today
+
+
+
axiom.trade
+
+ +
+
+ Sell +
+
+
Buy
+
+ +
+
+
+ +
+ +
+ Buying paused — down $62 on PIXELCAT, past your $50 threshold. Auto-unlocks in 24m, or unlock now. +
+
+
+ ); +} diff --git a/src/components/SiteFooter.tsx b/src/components/SiteFooter.tsx new file mode 100644 index 0000000..4256429 --- /dev/null +++ b/src/components/SiteFooter.tsx @@ -0,0 +1,49 @@ +import Link from "next/link"; +import { LockIcon } from "./icons"; +import { LINKS } from "@/lib/links"; + +export function SiteFooter() { + return ( +
+
+
+ + + + + Osias + +

+ Your blockchain-powered trading companion. Early beta — we’d genuinely love your honest feedback. +

+
+ +
+
PROJECT
+ + Firefox Add-ons + + + GitHub + + + Privacy Policy + +
+
+
+ © {new Date().getFullYear()} Osias. Open source under the Apache License 2.0. +
+
+ ); +} diff --git a/src/components/SiteHeader.tsx b/src/components/SiteHeader.tsx new file mode 100644 index 0000000..31f8e88 --- /dev/null +++ b/src/components/SiteHeader.tsx @@ -0,0 +1,32 @@ +import Link from "next/link"; +import { LockIcon } from "./icons"; +import { LINKS } from "@/lib/links"; + +export function SiteHeader() { + return ( +
+ + + + + Osias + + +
+ ); +} diff --git a/src/components/icons.tsx b/src/components/icons.tsx new file mode 100644 index 0000000..d5b7c95 --- /dev/null +++ b/src/components/icons.tsx @@ -0,0 +1,99 @@ +type IconProps = { + className?: string; +}; + +// Shared stroke props keep every icon in the set visually consistent — +// same weight, cap and join, so icons from different sections read as one system. +const stroke = { + fill: "none", + stroke: "currentColor", + strokeWidth: 1.8, + strokeLinecap: "round" as const, + strokeLinejoin: "round" as const, +}; + +export function LockIcon({ className }: IconProps) { + return ( + + + + + ); +} + +export function WalletIcon({ className }: IconProps) { + return ( + + + + + + ); +} + +export function PulseIcon({ className }: IconProps) { + return ( + + + + + ); +} + +export function ClockIcon({ className }: IconProps) { + return ( + + + + + ); +} + +export function KeyIcon({ className }: IconProps) { + return ( + + + + + + + + ); +} + +export function SlidersIcon({ className }: IconProps) { + return ( + + + + + + + + + + + + ); +} + +export function SignalIcon({ className }: IconProps) { + return ( + + + + + + + + ); +} + +export function CodeIcon({ className }: IconProps) { + return ( + + + + + ); +} diff --git a/src/lib/links.ts b/src/lib/links.ts new file mode 100644 index 0000000..202b723 --- /dev/null +++ b/src/lib/links.ts @@ -0,0 +1,7 @@ +// Central place for external URLs used across the site — update here, not per-component. +export const LINKS = { + github: "https://github.com/osias-trade/copilot", + githubIssues: "https://github.com/osias-trade/copilot/issues", + // TODO: fill in once the AMO listing is live (e.g. https://addons.mozilla.org/firefox/addon/osias/). + firefoxAddon: "#", +};