diff --git a/src/app/globals.css b/src/app/globals.css index 1988e76..b4bc304 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -4,66 +4,64 @@ @layer base { :root { - --background: 0 0% 0%; - --foreground: 240 10% 3.9%; - --muted: 240 4.8% 95.9%; - --muted-foreground: 240 3.8% 46.1%; - --popover: 0 0% 100%; - --popover-foreground: 240 10% 3.9%; - --card: 0 0% 100%; - --card-foreground: 240 10% 3.9%; - --border: 240 5.9% 90%; - --input: 240 5.9% 90%; - --primary: 240 5.9% 10%; - --primary-foreground: 0 0% 98%; - --secondary: 240 4.8% 95.9%; - --secondary-foreground: 240 5.9% 10%; - --accent: 240 4.8% 95.9%; - --accent-foreground: 240 5.9% 10%; - --destructive: 0 84.2% 60.2%; - --destructive-foreground: 0 0% 98%; - --ring: 240 10% 3.9%; - --chart-1: 12 76% 61%; - --chart-2: 173 58% 39%; - --chart-3: 197 37% 24%; - --chart-4: 43 74% 66%; - --chart-5: 27 87% 67%; + --background: #FFFFFF; + --foreground: #0A0A0A; + --muted: #F3F3F3; + --muted-foreground: #A3A3A3; + --popover: #FFFFFF; + --popover-foreground: #0A0A0A; + --card: #FFFFFF; + --card-foreground: #0A0A0A; + --border: #E6E6E6; + --input: #E6E6E6; + --primary: #19C0DE; /* Logo Cyan */ + --primary-foreground: #000000; + --secondary: #F3F3F3; + --secondary-foreground: #1A1A1A; + --accent: #F3F3F3; + --accent-foreground: #1A1A1A; + --destructive: #D93636; + --destructive-foreground: #FAFAFA; + --ring: #0A0A0A; + --chart-1: #F28B3B; + --chart-2: #2B9E63; + --chart-3: #3B5F7E; + --chart-4: #F2B02B; + --chart-5: #F2B02B; --radius: 0.5rem; } .dark { - --background: 255 100% 100%; /* White */ - --foreground: 0 0% 98%; /* White */ - --muted: 240 3.7% 15.9%; /* Dark blue-gray */ - --muted-foreground: 240 5% 64.9%; /* Light blue-gray */ - --popover: 240 10% 3.9%; /* Dark blue-gray */ - --popover-foreground: 0 0% 98%; /* White */ - --card: 240 10% 3.9%; /* Dark blue-gray */ - --card-foreground: 0 0% 98%; /* White */ - --border: 240 3.7% 15.9%; /* Dark blue-gray */ - --input: 240 3.7% 15.9%; /* Dark blue-gray */ - --primary: 0 0% 98%; /* White */ - --primary-foreground: 240 5.9% 10%; /* Dark blue-gray */ - --secondary: 240 3.7% 15.9%; /* Dark blue-gray */ - --secondary-foreground: 0 0% 98%; /* White */ - --accent: 240 3.7% 15.9%; /* Dark blue-gray */ - --accent-foreground: 0 0% 98%; /* White */ - --destructive: 0 62.8% 30.6%; /* Dark red */ - --destructive-foreground: 0 0% 98%; /* White */ - --ring: 240 4.9% 83.9%; /* Light blue-gray */ - --chart-1: 220 70% 50%; /* Blue */ - --chart-2: 160 60% 45%; /* Green */ - --chart-3: 30 80% 55%; /* Orange */ - --chart-4: 280 65% 60%; /* Purple */ - --chart-5: 340 75% 55%; /* Pink */ - } - - * { - @apply border-border; - } - - body { - font-family: Arial, Helvetica, sans-serif; + --background: #101010; + --foreground: #FAFAFA; + --muted: #292929; + --muted-foreground: #A3A3A3; + --popover: #0A0A0A; + --popover-foreground: #FAFAFA; + --card: #0A0A0A; + --card-foreground: #FAFAFA; + --border: #292929; + --input: #292929; + --primary: #19C0DE; /* Logo Cyan */ + --primary-foreground: #000000; + --secondary: #292929; + --secondary-foreground: #FAFAFA; + --accent: #292929; + --accent-foreground: #FAFAFA; + --destructive: #9E1E1E; + --destructive-foreground: #FAFAFA; + --ring: #D3D3D3; + --chart-1: #3B5F7E; + --chart-2: #2B9E63; + --chart-3: #F28B3B; + --chart-4: #B23B7E; + --chart-5: #D93B7E; } +} +* { + @apply border-border; } + +body { +} \ No newline at end of file diff --git a/src/app/page.tsx b/src/app/page.tsx index 914b42a..684074e 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -5,15 +5,7 @@ import Link from "next/link"; import TextScramble from "@components/ui/Scrambler"; const encryptedSuffixPhrases = ["Compute", "Transfers", "Swaps", "Intents"]; -const phrases = [ - "Interoperability", - "Confidentiality", - "High Performance", - "Scalability", - "Communication", - "Privacy", - "Liquidity", -]; +const layerPrefixPhrases = ["Interoperability", "Confidentiality", "Scalability", "Communication", "Privacy", "Liquidity", "Security"]; export default function Home() { return (
@@ -40,7 +32,7 @@ export default function Home() { aria-live="polite" role="text" > - +
Layer @@ -75,7 +67,7 @@ export default function Home() {

-
+
Contact Us @@ -96,7 +88,7 @@ export default function Home() { className="inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-xs sm:text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 group - bg-transparent shadow border border-cyan-300 text-black dark:text-white hover:bg-accent/40 hover:text-neutral-500 h-9 px-4 py-2" + bg-transparent shadow border border-primary text-black dark:text-white hover:bg-accent hover:text-accent-foreground h-9 px-4 py-2" > Join Waitlist diff --git a/src/components/ui/floating-navbar.tsx b/src/components/ui/floating-navbar.tsx index 1e402f7..3b35447 100644 --- a/src/components/ui/floating-navbar.tsx +++ b/src/components/ui/floating-navbar.tsx @@ -67,7 +67,7 @@ export const FloatingNav = ({ hover:bg-neutral-100 dark:hover:bg-neutral-900" > Waitlist - + diff --git a/tailwind.config.ts b/tailwind.config.ts index 259b16d..b329964 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -13,45 +13,45 @@ export default { theme: { extend: { colors: { - background: 'hsl(var(--background))', - foreground: 'hsl(var(--foreground))', + background: 'var(--background)', + foreground: 'var(--foreground)', card: { - DEFAULT: 'hsl(var(--card))', - foreground: 'hsl(var(--card-foreground))' + DEFAULT: 'var(--card)', + foreground: 'var(--card-foreground)' }, popover: { - DEFAULT: 'hsl(var(--popover))', - foreground: 'hsl(var(--popover-foreground))' + DEFAULT: 'var(--popover)', + foreground: 'var(--popover-foreground)' }, primary: { - DEFAULT: 'hsl(var(--primary))', - foreground: 'hsl(var(--primary-foreground))' + DEFAULT: 'var(--primary)', + foreground: 'var(--primary-foreground)' }, secondary: { - DEFAULT: 'hsl(var(--secondary))', - foreground: 'hsl(var(--secondary-foreground))' + DEFAULT: 'var(--secondary)', + foreground: 'var(--secondary-foreground)' }, muted: { - DEFAULT: 'hsl(var(--muted))', - foreground: 'hsl(var(--muted-foreground))' + DEFAULT: 'var(--muted)', + foreground: 'var(--muted-foreground)' }, accent: { - DEFAULT: 'hsl(var(--accent))', - foreground: 'hsl(var(--accent-foreground))' + DEFAULT: 'var(--accent)', + foreground: 'var(--accent-foreground)' }, destructive: { - DEFAULT: 'hsl(var(--destructive))', - foreground: 'hsl(var(--destructive-foreground))' + DEFAULT: 'var(--destructive)', + foreground: 'var(--destructive-foreground)' }, - border: 'hsl(var(--border))', - input: 'hsl(var(--input))', - ring: 'hsl(var(--ring))', + border: 'var(--border)', + input: 'var(--input)', + ring: 'var(--ring)', chart: { - '1': 'hsl(var(--chart-1))', - '2': 'hsl(var(--chart-2))', - '3': 'hsl(var(--chart-3))', - '4': 'hsl(var(--chart-4))', - '5': 'hsl(var(--chart-5))' + '1': 'var(--chart-1)', + '2': 'var(--chart-2)', + '3': 'var(--chart-3)', + '4': 'var(--chart-4)', + '5': 'var(--chart-5)' } }, borderRadius: {