Add visual polish and consistent theming to the landing page
Integrate a TypeWriter component for animated headlines, apply scanline and grid overlays for a retro aesthetic, and transition realm colors to HSL-based CSS variables for theme consistency. Also, introduce `AnimatePresence` for improved component animations and wrap the landing page in a shared `Layout` component. Replit-Commit-Author: Agent Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e Replit-Commit-Checkpoint-Type: intermediate_checkpoint Replit-Commit-Event-Id: ffdbb5c6-e466-4bfb-9a16-1473e09d5156 Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/KZZu8Eu Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr
parent
67c3980d62
commit
8ba89278eb
2 changed files with 116 additions and 189 deletions
4
.replit
4
.replit
|
|
@ -60,6 +60,10 @@ externalPort = 3000
|
|||
localPort = 40437
|
||||
externalPort = 3001
|
||||
|
||||
[[ports]]
|
||||
localPort = 43575
|
||||
externalPort = 3002
|
||||
|
||||
[deployment]
|
||||
deploymentTarget = "autoscale"
|
||||
run = ["node", "dist/server/production.mjs"]
|
||||
|
|
|
|||
|
|
@ -1,9 +1,44 @@
|
|||
import { useState, useCallback, useEffect, useMemo } from "react";
|
||||
import { motion } from "framer-motion";
|
||||
import { motion, AnimatePresence } from "framer-motion";
|
||||
import { useNavigate, Link } from "react-router-dom";
|
||||
import IsometricRealmCard, { RealmData } from "./IsometricRealmCard";
|
||||
|
||||
const REALM_COLORS = ["#a855f7", "#22c55e", "#ef4444", "#eab308", "#3b82f6", "#7c3aed", "#06b6d4"];
|
||||
function TypeWriter({ text, delay = 0 }: { text: string; delay?: number }) {
|
||||
const [displayText, setDisplayText] = useState("");
|
||||
const [started, setStarted] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const startTimer = setTimeout(() => setStarted(true), delay);
|
||||
return () => clearTimeout(startTimer);
|
||||
}, [delay]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!started) return;
|
||||
if (displayText.length < text.length) {
|
||||
const timer = setTimeout(() => {
|
||||
setDisplayText(text.slice(0, displayText.length + 1));
|
||||
}, 50);
|
||||
return () => clearTimeout(timer);
|
||||
}
|
||||
}, [displayText, text, started]);
|
||||
|
||||
return (
|
||||
<>
|
||||
{displayText}
|
||||
{displayText.length < text.length && <span className="cursor-blink">|</span>}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const REALM_COLORS = [
|
||||
"hsl(250, 100%, 60%)",
|
||||
"hsl(120, 100%, 70%)",
|
||||
"hsl(280, 100%, 70%)",
|
||||
"hsl(50, 100%, 70%)",
|
||||
"hsl(210, 100%, 70%)",
|
||||
"hsl(250, 100%, 70%)",
|
||||
"hsl(180, 100%, 60%)",
|
||||
];
|
||||
|
||||
interface ParticleData {
|
||||
id: number;
|
||||
|
|
@ -33,7 +68,7 @@ const realms: RealmData[] = [
|
|||
{
|
||||
id: "nexus",
|
||||
label: "NEXUS",
|
||||
color: "#a855f7",
|
||||
color: "hsl(250, 100%, 60%)",
|
||||
route: "/dashboard/nexus",
|
||||
icon: "🌐",
|
||||
description: "The marketplace hub. Find opportunities, contracts, and commissions.",
|
||||
|
|
@ -42,7 +77,7 @@ const realms: RealmData[] = [
|
|||
{
|
||||
id: "gameforge",
|
||||
label: "GAMEFORGE",
|
||||
color: "#22c55e",
|
||||
color: "hsl(120, 100%, 70%)",
|
||||
route: "/gameforge",
|
||||
icon: "🎮",
|
||||
description: "Game development powerhouse. Build immersive experiences together.",
|
||||
|
|
@ -51,7 +86,7 @@ const realms: RealmData[] = [
|
|||
{
|
||||
id: "foundation",
|
||||
label: "FOUNDATION",
|
||||
color: "#ef4444",
|
||||
color: "hsl(0, 70%, 55%)",
|
||||
route: "/foundation",
|
||||
icon: "🏛️",
|
||||
description: "Learn and grow. Courses, mentorship, and achievement tracking.",
|
||||
|
|
@ -60,7 +95,7 @@ const realms: RealmData[] = [
|
|||
{
|
||||
id: "labs",
|
||||
label: "LABS",
|
||||
color: "#eab308",
|
||||
color: "hsl(50, 100%, 70%)",
|
||||
route: "/dashboard/labs",
|
||||
icon: "🔬",
|
||||
description: "Research & experimentation. Push the boundaries of what's possible.",
|
||||
|
|
@ -69,7 +104,7 @@ const realms: RealmData[] = [
|
|||
{
|
||||
id: "corp",
|
||||
label: "CORP",
|
||||
color: "#3b82f6",
|
||||
color: "hsl(210, 100%, 70%)",
|
||||
route: "/corp",
|
||||
icon: "🏢",
|
||||
description: "Enterprise solutions. Managed services for teams and organizations.",
|
||||
|
|
@ -78,7 +113,7 @@ const realms: RealmData[] = [
|
|||
{
|
||||
id: "staff",
|
||||
label: "STAFF",
|
||||
color: "#7c3aed",
|
||||
color: "hsl(250, 100%, 70%)",
|
||||
route: "/staff",
|
||||
icon: "⚡",
|
||||
description: "Internal operations and team management for AeThex staff members.",
|
||||
|
|
@ -87,7 +122,7 @@ const realms: RealmData[] = [
|
|||
{
|
||||
id: "devlink",
|
||||
label: "DEV-LINK",
|
||||
color: "#06b6d4",
|
||||
color: "hsl(180, 100%, 60%)",
|
||||
route: "/devlink",
|
||||
icon: "🔗",
|
||||
description: "Developer networking and collaboration. Connect with fellow builders.",
|
||||
|
|
@ -150,6 +185,10 @@ export default function IsometricRealmSelector() {
|
|||
|
||||
return (
|
||||
<div className="realm-selector">
|
||||
{/* Scanline overlay */}
|
||||
<div className="scanline-overlay" />
|
||||
{/* Tech grid overlay */}
|
||||
<div className="grid-overlay" />
|
||||
{/* Ambient particles */}
|
||||
<div className="ambient-layer">
|
||||
{particles.map((particle) => (
|
||||
|
|
@ -188,7 +227,9 @@ export default function IsometricRealmSelector() {
|
|||
transition={{ duration: 0.6, delay: 0.2 }}
|
||||
>
|
||||
<p className="tagline">Build the Future</p>
|
||||
<h1 className="main-headline">The Platform for Builders</h1>
|
||||
<h1 className="main-headline">
|
||||
<TypeWriter text="The Platform for Builders" delay={400} />
|
||||
</h1>
|
||||
<p className="sub-headline">
|
||||
AeThex is an advanced development platform and community where creators collaborate,
|
||||
learn, and bring ideas to life. Join thousands of developers, designers, and innovators.
|
||||
|
|
@ -226,11 +267,47 @@ export default function IsometricRealmSelector() {
|
|||
.realm-selector {
|
||||
min-height: 100vh;
|
||||
width: 100%;
|
||||
font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
|
||||
color: #e5e7eb;
|
||||
font-family: var(--font-sans, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
|
||||
color: hsl(var(--foreground));
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 60px;
|
||||
background: hsl(var(--background));
|
||||
}
|
||||
|
||||
.scanline-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background: repeating-linear-gradient(
|
||||
0deg,
|
||||
transparent,
|
||||
transparent 2px,
|
||||
hsl(var(--foreground) / 0.02) 2px,
|
||||
hsl(var(--foreground) / 0.02) 4px
|
||||
);
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.grid-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(hsl(var(--aethex-500) / 0.03) 1px, transparent 1px),
|
||||
linear-gradient(90deg, hsl(var(--aethex-500) / 0.03) 1px, transparent 1px);
|
||||
background-size: 40px 40px;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.cursor-blink {
|
||||
animation: blink 0.8s infinite;
|
||||
color: hsl(var(--aethex-400));
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%, 50% { opacity: 1; }
|
||||
51%, 100% { opacity: 0; }
|
||||
}
|
||||
|
||||
.ambient-layer {
|
||||
|
|
@ -238,6 +315,7 @@ export default function IsometricRealmSelector() {
|
|||
inset: 0;
|
||||
pointer-events: none;
|
||||
overflow: hidden;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.particle {
|
||||
|
|
@ -246,70 +324,6 @@ export default function IsometricRealmSelector() {
|
|||
filter: blur(1px);
|
||||
}
|
||||
|
||||
.selector-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px 40px;
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.header-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.02em;
|
||||
}
|
||||
|
||||
.logo-icon {
|
||||
color: #38bdf8;
|
||||
font-size: 24px;
|
||||
}
|
||||
|
||||
.version-tag {
|
||||
font-size: 11px;
|
||||
padding: 4px 10px;
|
||||
border-radius: 20px;
|
||||
background: rgba(56, 189, 248, 0.1);
|
||||
border: 1px solid rgba(56, 189, 248, 0.2);
|
||||
color: #7dd3fc;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.header-right {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.connect-btn {
|
||||
padding: 12px 24px;
|
||||
border-radius: 12px;
|
||||
border: 1px solid #38bdf8;
|
||||
background: rgba(14, 165, 233, 0.1);
|
||||
color: #e0f2fe;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
transition: all 0.3s ease;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.connect-btn:hover {
|
||||
background: rgba(14, 165, 233, 0.2);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 8px 20px rgba(14, 165, 233, 0.2);
|
||||
}
|
||||
|
||||
.selector-main {
|
||||
max-width: 1400px;
|
||||
margin: 0 auto;
|
||||
|
|
@ -323,24 +337,24 @@ export default function IsometricRealmSelector() {
|
|||
max-width: 720px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
border: 1px solid rgba(124, 58, 237, 0.2);
|
||||
background: hsl(var(--muted) / 0.6);
|
||||
border: 1px solid hsl(var(--aethex-500) / 0.2);
|
||||
border-radius: 16px;
|
||||
backdrop-filter: blur(12px);
|
||||
box-shadow: 0 0 40px rgba(124, 58, 237, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
box-shadow: 0 0 40px hsl(var(--aethex-500) / 0.1), inset 0 1px 0 hsl(var(--foreground) / 0.05);
|
||||
}
|
||||
|
||||
.tagline {
|
||||
display: inline-block;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
color: #c084fc;
|
||||
color: hsl(var(--aethex-400));
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.2em;
|
||||
margin-bottom: 12px;
|
||||
padding: 6px 14px;
|
||||
background: rgba(124, 58, 237, 0.15);
|
||||
border: 1px solid rgba(124, 58, 237, 0.3);
|
||||
background: hsl(var(--aethex-500) / 0.15);
|
||||
border: 1px solid hsl(var(--aethex-500) / 0.3);
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
|
|
@ -348,7 +362,7 @@ export default function IsometricRealmSelector() {
|
|||
font-size: clamp(32px, 5vw, 48px);
|
||||
font-weight: 800;
|
||||
margin-bottom: 14px;
|
||||
background: linear-gradient(135deg, #f8fafc 0%, #c084fc 40%, #60a5fa 100%);
|
||||
background: linear-gradient(135deg, hsl(var(--foreground)) 0%, hsl(var(--aethex-400)) 40%, hsl(var(--neon-blue)) 100%);
|
||||
-webkit-background-clip: text;
|
||||
-webkit-text-fill-color: transparent;
|
||||
background-clip: text;
|
||||
|
|
@ -358,7 +372,7 @@ export default function IsometricRealmSelector() {
|
|||
|
||||
.sub-headline {
|
||||
font-size: 15px;
|
||||
color: #94a3b8;
|
||||
color: hsl(var(--muted-foreground));
|
||||
max-width: 480px;
|
||||
margin: 0 auto 24px;
|
||||
line-height: 1.6;
|
||||
|
|
@ -374,43 +388,43 @@ export default function IsometricRealmSelector() {
|
|||
.cta-primary {
|
||||
padding: 12px 28px;
|
||||
border-radius: 10px;
|
||||
background: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
|
||||
background: linear-gradient(135deg, hsl(var(--aethex-500)) 0%, hsl(var(--aethex-400)) 100%);
|
||||
color: white;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 0 20px rgba(124, 58, 237, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
|
||||
border: 1px solid rgba(168, 85, 247, 0.5);
|
||||
transition: all 0.2s ease;
|
||||
box-shadow: 0 0 20px hsl(var(--aethex-500) / 0.4), 0 4px 12px hsl(var(--background) / 0.3);
|
||||
border: 1px solid hsl(var(--aethex-400) / 0.5);
|
||||
}
|
||||
|
||||
.cta-primary:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 30px rgba(124, 58, 237, 0.6), 0 8px 20px rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 0 30px hsl(var(--aethex-500) / 0.6), 0 8px 20px hsl(var(--background) / 0.4);
|
||||
}
|
||||
|
||||
.cta-secondary {
|
||||
padding: 12px 28px;
|
||||
border-radius: 10px;
|
||||
border: 1px solid rgba(96, 165, 250, 0.3);
|
||||
background: rgba(15, 23, 42, 0.8);
|
||||
color: #60a5fa;
|
||||
border: 1px solid hsl(var(--neon-blue) / 0.3);
|
||||
background: hsl(var(--muted) / 0.8);
|
||||
color: hsl(var(--neon-blue));
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
transition: all 0.3s ease;
|
||||
transition: all 0.2s ease;
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
|
||||
.cta-secondary:hover {
|
||||
background: rgba(96, 165, 250, 0.1);
|
||||
border-color: rgba(96, 165, 250, 0.5);
|
||||
background: hsl(var(--neon-blue) / 0.1);
|
||||
border-color: hsl(var(--neon-blue) / 0.5);
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 0 20px rgba(96, 165, 250, 0.2);
|
||||
box-shadow: 0 0 20px hsl(var(--neon-blue) / 0.2);
|
||||
}
|
||||
|
||||
.hero-text {
|
||||
|
|
@ -422,14 +436,14 @@ export default function IsometricRealmSelector() {
|
|||
font-size: clamp(20px, 3vw, 28px);
|
||||
font-weight: 700;
|
||||
margin-bottom: 8px;
|
||||
color: #e5e7eb;
|
||||
color: hsl(var(--foreground));
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
}
|
||||
|
||||
.hero-text p {
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
color: hsl(var(--muted-foreground));
|
||||
max-width: 400px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -460,84 +474,7 @@ export default function IsometricRealmSelector() {
|
|||
}
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
margin-top: 80px;
|
||||
padding-top: 40px;
|
||||
border-top: 1px solid #1e293b;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 32px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.footer-col h4 {
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #e5e7eb;
|
||||
margin-bottom: 16px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
.footer-col a {
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
color: #64748b;
|
||||
text-decoration: none;
|
||||
margin-bottom: 10px;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-col a:hover {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-top: 24px;
|
||||
border-top: 1px solid #1e293b;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.footer-bottom p {
|
||||
font-size: 13px;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.footer-links-simple {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 12px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
.footer-links-simple a {
|
||||
color: #64748b;
|
||||
text-decoration: none;
|
||||
transition: color 0.2s ease;
|
||||
}
|
||||
|
||||
.footer-links-simple a:hover {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.footer-links-simple .divider {
|
||||
color: #334155;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.selector-header {
|
||||
padding: 16px 20px;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.selector-main {
|
||||
padding: 20px;
|
||||
}
|
||||
|
|
@ -571,20 +508,6 @@ export default function IsometricRealmSelector() {
|
|||
.realms-grid {
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.footer-section {
|
||||
margin-top: 50px;
|
||||
}
|
||||
|
||||
.footer-grid {
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.footer-bottom {
|
||||
flex-direction: column;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
`}</style>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue