From 488b4ac49bb1d87525eea3eeab0f59802c00e447 Mon Sep 17 00:00:00 2001 From: Denis Fadeev Date: Wed, 31 Jul 2024 16:51:06 +0300 Subject: [PATCH] feat: add welcome screen to the web template (#64) * feat: add welcome screen to the web template * dark mode * noopener noreferrer * dark mode --- web/src/app/page.tsx | 2 + web/src/app/welcome.tsx | 935 ++++++++++++++++++++++++++++++++++++++++ web/tailwind.config.js | 2 + 3 files changed, 939 insertions(+) create mode 100644 web/src/app/welcome.tsx diff --git a/web/src/app/page.tsx b/web/src/app/page.tsx index bde0edb..909790c 100644 --- a/web/src/app/page.tsx +++ b/web/src/app/page.tsx @@ -2,6 +2,7 @@ import { ConnectButton } from "@rainbow-me/rainbowkit"; import { ConnectBitcoin } from "@zetachain/universalkit"; +import { Welcome } from "./welcome"; const Page = () => { return ( @@ -10,6 +11,7 @@ const Page = () => { +
{/* Add components here */}
diff --git a/web/src/app/welcome.tsx b/web/src/app/welcome.tsx new file mode 100644 index 0000000..da70555 --- /dev/null +++ b/web/src/app/welcome.tsx @@ -0,0 +1,935 @@ +import Link from "next/link"; +import { useTheme } from "next-themes"; + +export const Welcome = () => { + const { theme } = useTheme(); + + return ( +
+
+
+
+
+
+ +
+
+
from
+
+ +
+
+
+ A robust ZetaChain component library of ready to use React + components that lets you build user interfaces for universal + apps. +
+
+
+
+ {theme === "dark" ? : } +
+
+
+ +
+
+ +
+
+
+
+ Get Started +
+
+ Learn about universal apps +
+
+
+ +
+ + +
+
+ +
+
+
+
+ Documentation +
+
+ Explore components +
+
+
+ +
+ + +
+
+ +
+
+
+
+ Discord +
+
+ Join a thriving community +
+
+
+ +
+ +
+
+
+ ); +}; + +const HeroLight = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const HeroDark = () => { + return ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const Logo = () => { + return ( + + + + ); +}; + +const ZetaChain = () => { + return ( + + + + ); +}; + +const IconCircles = () => { + return ( + + + + + + + ); +}; + +const IconArrow = () => { + return ( + + + + ); +}; + +const IconDoc = () => { + return ( + + + + + + + + + ); +}; + +const IconDiscord = () => { + return ( + + + + + ); +}; diff --git a/web/tailwind.config.js b/web/tailwind.config.js index 5277847..ba7ca46 100644 --- a/web/tailwind.config.js +++ b/web/tailwind.config.js @@ -27,6 +27,8 @@ module.exports = { rainbowkit: "0px 4px 12px rgba(0, 0, 0, 0.1)", xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);", "2xl": "0 10px 50px -12px rgb(0 0 0 / 0.25);", + "zeta-xl": + "0px 18px 28px 0px rgba(9, 30, 66, 0.10), 0px 0px 1px 0px rgba(9, 30, 66, 0.20)", }, colors: { bitcoin: "#f89414",