Hugging Face's logo

Spaces:
ThreeSixNine
/
siteforge-project
Running

App Files Community
ThreeSixNine commited on
Commit
5bc7597
·
verified ·
1 Parent(s): 5d62a18

<!DOCTYPE html>

Browse files

<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Refara — Routing Intelligence</title>
<link rel="preconnect" href="https://fonts.googleapis.com"/>
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin/>
<link href="https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap" rel="stylesheet"/>
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

:root{
--bg:#05060f;
--bg1:#080912;
--surface:rgba(255,255,255,0.04);
--surface2:rgba(255,255,255,0.07);
--border:rgba(255,255,255,0.06);
--border2:rgba(255,255,255,0.12);
--violet:#7c3aed;
--violet-light:#a78bfa;
--violet-glow:rgba(124,58,237,0.5);
--magenta:#d946ef;
--teal:#06b6d4;
--white:#eeeeff;
--muted:rgba(238,238,255,0.35);
--dimmer:rgba(238,238,255,0.18);
}

html{scroll-behavior:smooth}

body{
font-family:'DM Sans',system-ui,sans-serif;
background:var(--bg);
color:var(--white);
overflow-x:hidden;
cursor:none;
-webkit-font-smoothing:antialiased;
}

/* ── Custom cursor ── */
#cursor{
position:fixed;width:10px;height:10px;border-radius:50%;
background:var(--violet-light);pointer-events:none;z-index:9999;
transform:translate(-50%,-50%);
box-shadow:0 0 20px var(--violet-light),0 0 40px rgba(167,139,250,0.4);
transition:width 0.2s,height 0.2s,background 0.2s;
mix-blend-mode:screen;
}
#cursor-ring{
position:fixed;width:38px;height:38px;border-radius:50%;
border:1px solid rgba(167,139,250,0.4);pointer-events:none;z-index:9998;
transform:translate(-50%,-50%);
transition:all 0.12s ease;
}
body:has(a:hover,button:hover,.btn:hover) #cursor{width:16px;height:16px;background:var(--magenta);}
body:has(a:hover,button:hover,.btn:hover) #cursor-ring{width:50px;height:50px;border-color:var(--magenta);opacity:0.5;}

/* ── Grain overlay ── */
body::after{
content:'';position:fixed;inset:0;pointer-events:none;z-index:1000;
opacity:0.025;
background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
background-size:200px 200px;
}

/* ── Nav ── */
nav{
position:fixed;top:0;left:0;right:0;z-index:500;
padding:0 40px;height:64px;
display:flex;align-items:center;justify-content:space-between;
}
nav::before{
content:'';position:absolute;inset:0;
background:linear-gradient(to bottom,rgba(5,6,15,0.95) 0%,transparent 100%);
pointer-events:none;
}
.nav-logo{
display:flex;align-items:center;gap:12px;
text-decoration:none;position:relative;z-index:1;
}
.logo-mark{
width:36px;height:36px;position:relative;
display:flex;align-items:center;justify-content:center;
}
.logo-mark svg{position:absolute;}
.logo-wordmark{
font-family:'Syne',sans-serif;
font-size:11px;font-weight:700;letter-spacing:0.22em;
color:rgba(238,238,255,0.9);text-transform:uppercase;
}
.nav-right{
display:flex;align-items:center;gap:20px;
position:relative;z-index:1;
}
.nav-link{
font-size:13px;font-weight:400;color:var(--muted);
text-decoration:none;letter-spacing:0.02em;
transition:color 0.15s;
}
.nav-link:hover{color:var(--white);}
.nav-status{
display:flex;align-items:center;gap:8px;
padding:7px 16px;border-radius:20px;
background:rgba(255,255,255,0.05);
border:1px solid var(--border2);
font-size:12px;font-weight:500;color:var(--white);
}
.status-dot{
width:6px;height:6px;border-radius:50%;
background:#22c55e;
box-shadow:0 0 10px rgba(34,197,94,0.9);
animation:blink 2.5s ease infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0.5}}

/* ── HERO CANVAS SECTION ── */
.hero{
position:relative;
height:100vh;min-height:700px;
display:flex;align-items:center;
overflow:hidden;
}
#routing-canvas{
position:absolute;inset:0;
width:100%;height:100%;
}

/* radial vignette over canvas */
.hero-vignette{
position:absolute;inset:0;pointer-events:none;
background:
radial-gradient(ellipse 60% 80% at 50% 50%,transparent 0%,rgba(5,6,15,0.3) 60%,rgba(5,6,15,0.95) 100%),
linear-gradient(to bottom,rgba(5,6,15,0.6) 0%,transparent 20%,transparent 80%,rgba(5,6,15,1) 100%),
linear-gradient(to right,rgba(5,6,15,0.85) 0%,transparent 25%,transparent 75%,rgba(5,6,15,0.85) 100%);
}

.hero-content{
position:relative;z-index:2;
width:100%;
display:grid;
grid-template-columns:1fr 1fr;
gap:0;
max-width:1400px;
margin:0 auto;
padding:0 60px;
align-items:center;
}

/* LEFT: headline + get referral */
.hero-left{
display:flex;flex-direction:column;gap:0;
}
.eyebrow{
display:inline-flex;align-items:center;gap:10px;
font-family:'Syne',sans-serif;
font-size:10px;font-weight:600;letter-spacing:0.25em;
color:var(--violet-light);text-transform:uppercase;
margin-bottom:20px;
opacity:0;animation:fadeUp 0.6s 0.1s ease both;
}
.eyebrow-line{width:28px;height:1px;background:var(--violet-light);}
h1{
font-family:'Syne',sans-serif;
font-size:clamp(52px,5.5vw,88px);
font-weight:800;line-height:0.95;
letter-spacing:-0.03em;
color:#fff;
margin-bottom:24px;
opacity:0;animation:fadeUp 0.6s 0.2s ease both;
}
h1 .line2{
display:block;
background:linear-gradient(90deg,#a78bfa 0%,#e879f9 60%,#818cf8 100%);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
background-size:200%;
animation:shimmer 4s ease infinite, fadeUp 0.6s 0.3s ease both;
opacity:0;
}
@keyframes shimmer{0%,100%{background-position:0%}50%{background-position:100%}}
.hero-desc{
font-size:16px;font-weight:300;color:var(--muted);
line-height:1.65;max-width:360px;margin-bottom:44px;
opacity:0;animation:fadeUp 0.6s 0.4s ease both;
}
@keyframes fadeUp{
from{opacity:0;transform:translateY(16px)}
to{opacity:1;transform:translateY(0)}
}

/* Get referral panel */
.get-panel{
background:rgba(12,10,28,0.75);
border:1px solid rgba(124,58,237,0.25);
border-radius:20px;
padding:28px;
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
box-shadow:0 0 60px rgba(124,58,237,0.1),inset 0 1px 0 rgba(255,255,255,0.06);
opacity:0;animation:fadeUp 0.6s 0.55s ease both;
max-width:380px;
}
.get-panel-label{
font-family:'Syne',sans-serif;
font-size:10px;font-weight:600;letter-spacing:0.2em;
color:var(--muted);text-transform:uppercase;margin-bottom:14px;
}
.platform-select{
display:flex;align-items:center;gap:10px;
background:rgba(255,255,255,0.05);
border:1px solid var(--border2);
border-radius:12px;padding:12px 14px;
margin-bottom:14px;
cursor:pointer;
position:relative;
}
.platform-select select{
position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;
}
.platform-badge{
width:28px;height:28px;border-radius:8px;
background:linear-gradient(135deg,#4f46e5,#7c3aed);
display:flex;align-items:center;justify-content:center;
flex-shrink:0;
font-size:11px;font-weight:700;color:#fff;
}
.platform-name{font-size:14px;font-weight:500;color:var(--white);flex:1;}
.platform-chevron{color:var(--muted);}
.platform-chevron svg{width:14px;height:14px;}

.btn-route{
width:100%;
padding:16px 20px;border-radius:14px;
border:none;cursor:none;
font-family:'Syne',sans-serif;
font-size:14px;font-weight:700;letter-spacing:0.06em;
text-transform:uppercase;
background:linear-gradient(135deg,#5b21b6,#7c3aed,#8b5cf6);
color:#fff;
display:flex;align-items:center;justify-content:center;gap:10px;
position:relative;overflow:hidden;
box-shadow:0 0 30px rgba(124,58,237,0.4);
transition:box-shadow 0.3s,transform 0.2s;
}
.btn-route::before{
content:'';position:absolute;inset:-100%;
background:conic-gradient(from 0deg,transparent,rgba(255,255,255,0.15),transparent);
animation:spin-sheen 3s linear infinite;
}
@keyframes spin-sheen{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.btn-route:hover{
box-shadow:0 0 50px rgba(124,58,237,0.65),0 0 100px rgba(124,58,237,0.2);
transform:translateY(-1px);
}
.btn-route.routing{
animation:pulse-route 0.8s ease infinite;
}
@keyframes pulse-route{
0%,100%{box-shadow:0 0 30px rgba(124,58,237,0.4)}
50%{box-shadow:0 0 60px rgba(167,139,250,0.8)}
}
.btn-route svg{width:16px;height:16px;flex-shrink:0;}

/* RIGHT: live feed + stats */
.hero-right{
display:flex;flex-direction:column;
align-items:flex-end;gap:24px;
opacity:0;animation:fadeUp 0.6s 0.6s ease both;
}

/* big stat numbers */
.big-stats{
text-align:right;
}
.big-stat-row{
display:flex;flex-direction:column;align-items:flex-end;margin-bottom:24px;
}
.big-stat-num{
font-family:'Syne',sans-serif;
font-size:72px;font-weight:800;line-height:1;
color:#fff;letter-spacing:-0.04em;
}
.big-stat-num span{
background:linear-gradient(90deg,#a78bfa,#e879f9);
-webkit-background-clip:text;-webkit-text-fill-color:transparent;
background-clip:text;
}
.big-stat-label{
font-size:11px;font-weight:400;letter-spacing:0.12em;
color:var(--muted);text-transform:uppercase;margin-top:2px;
}

/* Live feed */
.live-feed{
width:300px;
background:rgba(12,10,28,0.8);
border:1px solid var(--border);
border-radius:16px;
overflow:hidden;
backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
}
.live-feed-header{
padding:12px 16px;
border-bottom:1px solid var(--border);
display:flex;align-items:center;gap:8px;
font-family:'Syne',sans-serif;
font-size:10px;font-weight:600;letter-spacing:0.18em;
color:var(--muted);text-transform:uppercase;
}
.live-feed-dot{
width:5px;height:5px;border-radius:50%;
background:#22c55e;box-shadow:0 0 8px rgba(34,197,94,0.8);
animation:blink 2s ease infinite;
}
.feed-items{list-style:none;max-height:160px;overflow:hidden;}
.feed-item{
display:flex;align-items:center;gap:10px;
padding:10px 16px;
border-bottom:1px solid rgba(255,255,255,0.03);
animation:feedIn 0.4s ease forwards;
}
@keyframes feedIn{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}}
.feed-platform{
width:24px;

Files changed (2) hide show
  1. README.md +7 -4
  2. index.html +623 -18
README.md CHANGED
@@ -1,10 +1,13 @@
1
  ---
2
- title: Siteforge Project
3
- emoji: 🌍
4
- colorFrom: pink
5
  colorTo: yellow
 
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
 
1
  ---
2
+ title: SiteForge Project
3
+ colorFrom: blue
 
4
  colorTo: yellow
5
+ emoji: 🐳
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - siteforge-v3
10
  ---
11
 
12
+ # Welcome to your new SiteForge project!
13
+ This project was created with [SiteForge](https://threesixnine-siteforge.hf.space).
index.html CHANGED
@@ -1,19 +1,624 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en" class="dark">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Refara - Fair Referral Routing</title>
7
+ <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
8
+ <script src="https://cdn.tailwindcss.com"></script>
9
+ <script src="https://unpkg.com/feather-icons"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
12
+ <script>
13
+ tailwind.config = {
14
+ darkMode: 'class',
15
+ theme: {
16
+ extend: {
17
+ colors: {
18
+ primary: {
19
+ 50: '#f0f9ff',
20
+ 100: '#e0f2fe',
21
+ 200: '#bae6fd',
22
+ 300: '#7dd3fc',
23
+ 400: '#38bdf8',
24
+ 500: '#0ea5e9',
25
+ 600: '#0284c7',
26
+ 700: '#0369a1',
27
+ 800: '#075985',
28
+ 900: '#0c4a6e',
29
+ 950: '#082f49',
30
+ },
31
+ secondary: {
32
+ 50: '#faf5ff',
33
+ 100: '#f3e8ff',
34
+ 200: '#e9d5ff',
35
+ 300: '#d8b4fe',
36
+ 400: '#c084fc',
37
+ 500: '#a855f7',
38
+ 600: '#9333ea',
39
+ 700: '#7e22ce',
40
+ 800: '#6b21a8',
41
+ 900: '#581c87',
42
+ 950: '#3b0764',
43
+ }
44
+ },
45
+ fontFamily: {
46
+ 'sans': ['Inter', 'system-ui', 'sans-serif'],
47
+ 'display': ['Space Grotesk', 'system-ui', 'sans-serif'],
48
+ },
49
+ animation: {
50
+ 'pulse-glow': 'pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite',
51
+ 'float': 'float 6s ease-in-out infinite',
52
+ 'shimmer': 'shimmer 3s linear infinite',
53
+ },
54
+ keyframes: {
55
+ 'pulse-glow': {
56
+ '0%, 100%': { opacity: 1 },
57
+ '50%': { opacity: 0.5, transform: 'scale(1.05)' },
58
+ },
59
+ 'float': {
60
+ '0%, 100%': { transform: 'translateY(0px)' },
61
+ '50%': { transform: 'translateY(-20px)' },
62
+ },
63
+ 'shimmer': {
64
+ '0%': { backgroundPosition: '-1000px 0' },
65
+ '100%': { backgroundPosition: '1000px 0' },
66
+ }
67
+ }
68
+ }
69
+ }
70
+ }
71
+ </script>
72
+ <style>
73
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Space+Grotesk:wght@300;400;500;600;700&display=swap');
74
+
75
+ * {
76
+ scroll-behavior: smooth;
77
+ }
78
+
79
+ .bg-grid-pattern {
80
+ background-image:
81
+ radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 0);
82
+ background-size: 40px 40px;
83
+ }
84
+
85
+ .text-gradient-primary {
86
+ background: linear-gradient(135deg, #0ea5e9 0%, #a855f7 100%);
87
+ -webkit-background-clip: text;
88
+ -webkit-text-fill-color: transparent;
89
+ background-clip: text;
90
+ }
91
+
92
+ .text-gradient-secondary {
93
+ background: linear-gradient(135deg, #a855f7 0%, #ec4899 100%);
94
+ -webkit-background-clip: text;
95
+ -webkit-text-fill-color: transparent;
96
+ background-clip: text;
97
+ }
98
+
99
+ .glass-effect {
100
+ background: rgba(15, 23, 42, 0.7);
101
+ backdrop-filter: blur(12px);
102
+ -webkit-backdrop-filter: blur(12px);
103
+ border: 1px solid rgba(148, 163, 184, 0.1);
104
+ }
105
+
106
+ .gradient-border {
107
+ position: relative;
108
+ border: 2px solid transparent;
109
+ background: linear-gradient(#0f172a, #0f172a) padding-box,
110
+ linear-gradient(135deg, #0ea5e9, #a855f7) border-box;
111
+ }
112
+
113
+ .hover-lift {
114
+ transition: all 0.3s ease;
115
+ }
116
+
117
+ .hover-lift:hover {
118
+ transform: translateY(-4px);
119
+ box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
120
+ }
121
+
122
+ .stat-card {
123
+ background: linear-gradient(145deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6));
124
+ border: 1px solid rgba(148, 163, 184, 0.1);
125
+ }
126
+
127
+ .router-node {
128
+ animation: pulse 2s infinite;
129
+ }
130
+
131
+ @keyframes pulse {
132
+ 0%, 100% { opacity: 1; }
133
+ 50% { opacity: 0.5; }
134
+ }
135
+
136
+ .typewriter {
137
+ overflow: hidden;
138
+ border-right: 3px solid #0ea5e9;
139
+ white-space: nowrap;
140
+ animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
141
+ }
142
+
143
+ @keyframes typing {
144
+ from { width: 0 }
145
+ to { width: 100% }
146
+ }
147
+
148
+ @keyframes blink-caret {
149
+ from, to { border-color: transparent }
150
+ 50% { border-color: #0ea5e9 }
151
+ }
152
+
153
+ #vanta-bg {
154
+ position: absolute;
155
+ top: 0;
156
+ left: 0;
157
+ width: 100%;
158
+ height: 100%;
159
+ z-index: 0;
160
+ }
161
+ </style>
162
+ </head>
163
+ <body class="dark:bg-gray-900 bg-gray-50 text-gray-900 dark:text-gray-100 font-sans overflow-x-hidden">
164
+
165
+ <!-- Vanta.js Background -->
166
+ <div id="vanta-bg"></div>
167
+
168
+ <!-- Navigation -->
169
+ <nav class="fixed w-full z-50 glass-effect py-4 px-6 md:px-12">
170
+ <div class="max-w-7xl mx-auto flex items-center justify-between">
171
+ <div class="flex items-center space-x-2">
172
+ <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center">
173
+ <i data-feather="share-2" class="text-white w-5 h-5"></i>
174
+ </div>
175
+ <span class="text-xl font-display font-bold text-gradient-primary">Refara</span>
176
+ </div>
177
+
178
+ <div class="hidden md:flex items-center space-x-8">
179
+ <a href="#home" class="text-gray-300 hover:text-primary-400 transition-colors duration-300">Home</a>
180
+ <a href="#how" class="text-gray-300 hover:text-primary-400 transition-colors duration-300">How It Works</a>
181
+ <a href="#stats" class="text-gray-300 hover:text-primary-400 transition-colors duration-300">Live Stats</a>
182
+ <a href="#submit" class="text-gray-300 hover:text-primary-400 transition-colors duration-300">Submit</a>
183
+ <button class="px-6 py-2 bg-gradient-to-r from-primary-600 to-secondary-600 text-white rounded-full hover-lift font-semibold">
184
+ Get Referral
185
+ </button>
186
+ </div>
187
+
188
+ <button class="md:hidden text-gray-300">
189
+ <i data-feather="menu" class="w-6 h-6"></i>
190
+ </button>
191
+ </div>
192
+ </nav>
193
+
194
+ <!-- Hero Section -->
195
+ <section id="home" class="relative min-h-screen pt-24 px-6 md:px-12 flex items-center">
196
+ <div class="max-w-7xl mx-auto relative z-10">
197
+ <div class="grid lg:grid-cols-2 gap-12 items-center">
198
+ <div class="space-y-8">
199
+ <div class="inline-flex items-center space-x-3 px-4 py-2 rounded-full bg-primary-900/30 border border-primary-500/20">
200
+ <div class="w-2 h-2 rounded-full bg-primary-500 animate-pulse-glow"></div>
201
+ <span class="text-sm font-medium text-primary-300">Live Routing Engine Active</span>
202
+ </div>
203
+
204
+ <h1 class="text-5xl md:text-7xl font-display font-bold leading-tight">
205
+ <span class="text-gradient-primary">Fair</span> Referrals,
206
+ <br>
207
+ <span class="text-gradient-secondary">Powered</span> by Community
208
+ </h1>
209
+
210
+ <p class="text-xl text-gray-400 max-w-2xl">
211
+ Refara is the transparent routing layer that gives every contributor an equal chance.
212
+ No algorithms. No bias. Just fair distribution of referral opportunities.
213
+ </p>
214
+
215
+ <div class="flex flex-col sm:flex-row gap-4">
216
+ <button class="px-8 py-4 bg-gradient-to-r from-primary-600 to-secondary-600 text-white rounded-xl hover-lift font-semibold text-lg flex items-center justify-center space-x-3">
217
+ <i data-feather="play" class="w-5 h-5"></i>
218
+ <span>Request Referral</span>
219
+ </button>
220
+ <button class="px-8 py-4 glass-effect rounded-xl hover-lift font-semibold text-lg flex items-center justify-center space-x-3">
221
+ <i data-feather="info" class="w-5 h-5"></i>
222
+ <span>Learn More</span>
223
+ </button>
224
+ </div>
225
+ </div>
226
+
227
+ <div class="relative">
228
+ <div class="absolute -inset-4 bg-gradient-to-r from-primary-500/20 to-secondary-500/20 rounded-3xl blur-3xl"></div>
229
+ <div class="relative glass-effect rounded-2xl p-8">
230
+ <div class="flex items-center justify-between mb-8">
231
+ <h3 class="text-xl font-display font-bold">Live Router Visualization</h3>
232
+ <div class="flex items-center space-x-2">
233
+ <div class="w-2 h-2 rounded-full bg-green-500 animate-pulse"></div>
234
+ <span class="text-sm text-green-400">Active</span>
235
+ </div>
236
+ </div>
237
+
238
+ <div class="relative h-64 bg-gray-800/50 rounded-xl overflow-hidden">
239
+ <!-- Animated router visualization -->
240
+ <div class="absolute inset-0 flex items-center justify-center">
241
+ <div class="w-16 h-16 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center animate-float">
242
+ <i data-feather="cpu" class="text-white w-8 h-8"></i>
243
+ </div>
244
+ </div>
245
+
246
+ <!-- Animated nodes -->
247
+ <div class="router-node absolute top-1/4 left-1/4 w-8 h-8 rounded-full bg-primary-500/30 border-2 border-primary-500"></div>
248
+ <div class="router-node absolute top-1/4 right-1/4 w-8 h-8 rounded-full bg-secondary-500/30 border-2 border-secondary-500" style="animation-delay: 0.5s"></div>
249
+ <div class="router-node absolute bottom-1/4 left-1/3 w-8 h-8 rounded-full bg-primary-500/30 border-2 border-primary-500" style="animation-delay: 1s"></div>
250
+ <div class="router-node absolute bottom-1/4 right-1/3 w-8 h-8 rounded-full bg-secondary-500/30 border-2 border-secondary-500" style="animation-delay: 1.5s"></div>
251
+
252
+ <!-- Connection lines -->
253
+ <svg class="absolute inset-0 w-full h-full">
254
+ <line x1="25%" y1="25%" x2="50%" y2="50%" stroke="rgba(14, 165, 233, 0.3)" stroke-width="2" />
255
+ <line x1="75%" y1="25%" x2="50%" y2="50%" stroke="rgba(168, 85, 247, 0.3)" stroke-width="2" />
256
+ <line x1="33%" y1="75%" x2="50%" y2="50%" stroke="rgba(14, 165, 233, 0.3)" stroke-width="2" />
257
+ <line x1="67%" y1="75%" x2="50%" y2="50%" stroke="rgba(168, 85, 247, 0.3)" stroke-width="2" />
258
+ </svg>
259
+ </div>
260
+
261
+ <div class="mt-6 grid grid-cols-3 gap-4">
262
+ <div class="stat-card p-4 rounded-lg text-center">
263
+ <div class="text-2xl font-bold text-primary-400">128</div>
264
+ <div class="text-sm text-gray-400">Active Nodes</div>
265
+ </div>
266
+ <div class="stat-card p-4 rounded-lg text-center">
267
+ <div class="text-2xl font-bold text-secondary-400">642</div>
268
+ <div class="text-sm text-gray-400">Routes Today</div>
269
+ </div>
270
+ <div class="stat-card p-4 rounded-lg text-center">
271
+ <div class="text-2xl font-bold text-green-400">99.8%</div>
272
+ <div class="text-sm text-gray-400">Uptime</div>
273
+ </div>
274
+ </div>
275
+ </div>
276
+ </div>
277
+ </div>
278
+ </div>
279
+ </section>
280
+
281
+ <!-- How It Works Section -->
282
+ <section id="how" class="py-20 px-6 md:px-12 bg-grid-pattern">
283
+ <div class="max-w-7xl mx-auto">
284
+ <div class="text-center mb-16">
285
+ <h2 class="text-4xl md:text-5xl font-display font-bold mb-4">
286
+ How <span class="text-gradient-primary">Refara</span> Works
287
+ </h2>
288
+ <p class="text-xl text-gray-400 max-w-3xl mx-auto">
289
+ A simple, transparent process that ensures fairness for both seekers and contributors
290
+ </p>
291
+ </div>
292
+
293
+ <div class="grid md:grid-cols-2 lg:grid-cols-4 gap-8">
294
+ <div class="glass-effect p-8 rounded-2xl hover-lift">
295
+ <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-primary-500 to-primary-700 flex items-center justify-center mb-6">
296
+ <i data-feather="search" class="text-white w-8 h-8"></i>
297
+ </div>
298
+ <h3 class="text-xl font-display font-bold mb-3">Choose Platform</h3>
299
+ <p class="text-gray-400">
300
+ Select from our growing list of supported platforms for referral links.
301
+ </p>
302
+ </div>
303
+
304
+ <div class="glass-effect p-8 rounded-2xl hover-lift">
305
+ <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-secondary-500 to-secondary-700 flex items-center justify-center mb-6">
306
+ <i data-feather="refresh-cw" class="text-white w-8 h-8"></i>
307
+ </div>
308
+ <h3 class="text-xl font-display font-bold mb-3">Fair Routing</h3>
309
+ <p class="text-gray-400">
310
+ Our engine randomly selects from all active contributors with equal probability.
311
+ </p>
312
+ </div>
313
+
314
+ <div class="glass-effect p-8 rounded-2xl hover-lift">
315
+ <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center mb-6">
316
+ <i data-feather="link" class="text-white w-8 h-8"></i>
317
+ </div>
318
+ <h3 class="text-xl font-display font-bold mb-3">Get Redirected</h3>
319
+ <p class="text-gray-400">
320
+ Seamlessly redirected to the selected contributor's referral link.
321
+ </p>
322
+ </div>
323
+
324
+ <div class="glass-effect p-8 rounded-2xl hover-lift">
325
+ <div class="w-16 h-16 rounded-xl bg-gradient-to-br from-green-500 to-emerald-600 flex items-center justify-center mb-6">
326
+ <i data-feather="users" class="text-white w-8 h-8"></i>
327
+ </div>
328
+ <h3 class="text-xl font-display font-bold mb-3">Community Grows</h3>
329
+ <p class="text-gray-400">
330
+ Contributors gain exposure, community thrives, and the cycle continues.
331
+ </p>
332
+ </div>
333
+ </div>
334
+ </div>
335
+ </section>
336
+
337
+ <!-- Live Stats Section -->
338
+ <section id="stats" class="py-20 px-6 md:px-12">
339
+ <div class="max-w-7xl mx-auto">
340
+ <div class="gradient-border rounded-3xl p-8 md:p-12">
341
+ <div class="flex flex-col lg:flex-row items-center justify-between mb-12">
342
+ <div>
343
+ <h2 class="text-4xl md:text-5xl font-display font-bold mb-4">
344
+ Live <span class="text-gradient-secondary">Routing</span> Statistics
345
+ </h2>
346
+ <p class="text-gray-400">
347
+ Real-time data from our fair routing engine
348
+ </p>
349
+ </div>
350
+ <div class="flex items-center space-x-2 mt-4 lg:mt-0">
351
+ <div class="w-3 h-3 rounded-full bg-green-500 animate-pulse"></div>
352
+ <span class="text-green-400 font-medium">Live Updates</span>
353
+ </div>
354
+ </div>
355
+
356
+ <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
357
+ <div class="stat-card p-6 rounded-xl">
358
+ <div class="flex items-center justify-between mb-4">
359
+ <i data-feather="users" class="w-6 h-6 text-primary-400"></i>
360
+ <span class="text-sm text-green-400">+12 today</span>
361
+ </div>
362
+ <div class="text-3xl font-bold mb-1" id="contributorCount">142</div>
363
+ <div class="text-gray-400">Active Contributors</div>
364
+ </div>
365
+
366
+ <div class="stat-card p-6 rounded-xl">
367
+ <div class="flex items-center justify-between mb-4">
368
+ <i data-feather="refresh-cw" class="w-6 h-6 text-secondary-400"></i>
369
+ <span class="text-sm text-green-400">+48 last hour</span>
370
+ </div>
371
+ <div class="text-3xl font-bold mb-1" id="routeCount">690</div>
372
+ <div class="text-gray-400">Successful Routes</div>
373
+ </div>
374
+
375
+ <div class="stat-card p-6 rounded-xl">
376
+ <div class="flex items-center justify-between mb-4">
377
+ <i data-feather="clock" class="w-6 h-6 text-primary-400"></i>
378
+ <span class="text-sm text-green-400">Real-time</span>
379
+ </div>
380
+ <div class="text-3xl font-bold mb-1">1.2s</div>
381
+ <div class="text-gray-400">Avg. Routing Time</div>
382
+ </div>
383
+
384
+ <div class="stat-card p-6 rounded-xl">
385
+ <div class="flex items-center justify-between mb-4">
386
+ <i data-feather="heart" class="w-6 h-6 text-red-400"></i>
387
+ <span class="text-sm text-green-400">Stable</span>
388
+ </div>
389
+ <div class="text-3xl font-bold mb-1">99.8%</div>
390
+ <div class="text-gray-400">User Satisfaction</div>
391
+ </div>
392
+ </div>
393
+
394
+ <!-- Live Activity Feed -->
395
+ <div class="mt-12">
396
+ <h3 class="text-2xl font-display font-bold mb-6">Live Activity Feed</h3>
397
+ <div class="space-y-3">
398
+ <div class="glass-effect p-4 rounded-xl flex items-center space-x-4">
399
+ <div class="w-10 h-10 rounded-lg bg-primary-500/20 flex items-center justify-center">
400
+ <i data-feather="user" class="w-5 h-5 text-primary-400"></i>
401
+ </div>
402
+ <div class="flex-1">
403
+ <div class="font-medium">New contributor joined</div>
404
+ <div class="text-sm text-gray-400">@crypto_trader_42 • 2 minutes ago</div>
405
+ </div>
406
+ <div class="px-3 py-1 rounded-full bg-primary-500/20 text-primary-400 text-sm">
407
+ Stake.us
408
+ </div>
409
+ </div>
410
+
411
+ <div class="glass-effect p-4 rounded-xl flex items-center space-x-4">
412
+ <div class="w-10 h-10 rounded-lg bg-secondary-500/20 flex items-center justify-center">
413
+ <i data-feather="refresh-cw" class="w-5 h-5 text-secondary-400"></i>
414
+ </div>
415
+ <div class="flex-1">
416
+ <div class="font-medium">Referral routed successfully</div>
417
+ <div class="text-sm text-gray-400">To @digital_nomad_7 • 5 minutes ago</div>
418
+ </div>
419
+ <div class="px-3 py-1 rounded-full bg-secondary-500/20 text-secondary-400 text-sm">
420
+ Route #689
421
+ </div>
422
+ </div>
423
+ </div>
424
+ </div>
425
+ </div>
426
+ </div>
427
+ </section>
428
+
429
+ <!-- Submit Section -->
430
+ <section id="submit" class="py-20 px-6 md:px-12 bg-grid-pattern">
431
+ <div class="max-w-4xl mx-auto">
432
+ <div class="text-center mb-12">
433
+ <h2 class="text-4xl md:text-5xl font-display font-bold mb-4">
434
+ Contribute Your <span class="text-gradient-primary">Link</span>
435
+ </h2>
436
+ <p class="text-xl text-gray-400">
437
+ Join the fair routing pool. Every submission helps the community find better referrals.
438
+ </p>
439
+ </div>
440
+
441
+ <div class="glass-effect rounded-2xl p-8">
442
+ <form id="referralForm" class="space-y-6">
443
+ <div>
444
+ <label class="block text-sm font-medium text-gray-300 mb-2">Platform</label>
445
+ <select class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-3 text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent">
446
+ <option>Stake.us</option>
447
+ <option>Binance</option>
448
+ <option>Coinbase</option>
449
+ <option>Kraken</option>
450
+ <option>Other Platform</option>
451
+ </select>
452
+ </div>
453
+
454
+ <div>
455
+ <label class="block text-sm font-medium text-gray-300 mb-2">Your Referral URL</label>
456
+ <input type="url"
457
+ class="w-full bg-gray-800/50 border border-gray-700 rounded-lg px-4 py-3 text-white focus:ring-2 focus:ring-primary-500 focus:border-transparent"
458
+ placeholder="https://stake.us/?c=yourcode"
459
+ required>
460
+ </div>
461
+
462
+ <div class="flex items-center space-x-3 text-sm text-gray-400">
463
+ <i data-feather="shield" class="w-4 h-4"></i>
464
+ <span>Your link is stored securely and used only for fair routing</span>
465
+ </div>
466
+
467
+ <button type="submit"
468
+ class="w-full py-4 bg-gradient-to-r from-primary-600 to-secondary-600 text-white rounded-xl hover-lift font-semibold text-lg flex items-center justify-center space-x-3">
469
+ <i data-feather="upload" class="w-5 h-5"></i>
470
+ <span>Submit to Routing Pool</span>
471
+ </button>
472
+ </form>
473
+
474
+ <div class="mt-8 p-4 bg-gradient-to-r from-primary-900/20 to-secondary-900/20 rounded-xl border border-primary-500/20">
475
+ <div class="flex items-start space-x-3">
476
+ <i data-feather="info" class="w-5 h-5 text-primary-400 mt-0.5"></i>
477
+ <div>
478
+ <h4 class="font-semibold mb-1">How Submission Works</h4>
479
+ <p class="text-sm text-gray-400">
480
+ Your link enters our fair rotation pool. When someone requests a referral for your platform,
481
+ our system randomly selects from all active links with equal probability. No ranking, no favoritism.
482
+ </p>
483
+ </div>
484
+ </div>
485
+ </div>
486
+ </div>
487
+ </div>
488
+ </section>
489
+
490
+ <!-- Footer -->
491
+ <footer class="py-12 px-6 md:px-12 border-t border-gray-800">
492
+ <div class="max-w-7xl mx-auto">
493
+ <div class="flex flex-col md:flex-row items-center justify-between">
494
+ <div class="flex items-center space-x-2 mb-6 md:mb-0">
495
+ <div class="w-8 h-8 rounded-full bg-gradient-to-br from-primary-500 to-secondary-500 flex items-center justify-center">
496
+ <i data-feather="share-2" class="text-white w-4 h-4"></i>
497
+ </div>
498
+ <span class="text-xl font-display font-bold">Refara</span>
499
+ </div>
500
+
501
+ <div class="flex items-center space-x-6">
502
+ <a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Privacy</a>
503
+ <a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Terms</a>
504
+ <a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">API</a>
505
+ <a href="#" class="text-gray-400 hover:text-primary-400 transition-colors">Contact</a>
506
+ </div>
507
+ </div>
508
+
509
+ <div class="mt-8 pt-8 border-t border-gray-800 text-center text-gray-500 text-sm">
510
+ <p>© 2024 Refara - The Fair Referral Router. All rights reserved.</p>
511
+ <p class="mt-2">Making referral distribution fair, one route at a time.</p>
512
+ </div>
513
+ </div>
514
+ </footer>
515
+
516
+ <script>
517
+ // Initialize Vanta.js background
518
+ VANTA.GLOBE({
519
+ el: "#vanta-bg",
520
+ mouseControls: true,
521
+ touchControls: true,
522
+ gyroControls: false,
523
+ minHeight: 200.00,
524
+ minWidth: 200.00,
525
+ scale: 1.00,
526
+ scaleMobile: 1.00,
527
+ color: 0x0ea5e9,
528
+ color2: 0xa855f7,
529
+ backgroundColor: 0x0f172a,
530
+ size: 0.8
531
+ });
532
+
533
+ // Initialize Feather Icons
534
+ feather.replace();
535
+
536
+ // Animated stats counter
537
+ function animateCounter(elementId, targetValue, duration = 2000) {
538
+ const element = document.getElementById(elementId);
539
+ const startValue = parseInt(element.textContent);
540
+ const increment = (targetValue - startValue) / (duration / 16);
541
+ let current = startValue;
542
+
543
+ const timer = setInterval(() => {
544
+ current += increment;
545
+ element.textContent = Math.floor(current);
546
+
547
+ if ((increment > 0 && current >= targetValue) ||
548
+ (increment < 0 && current <= targetValue)) {
549
+ element.textContent = targetValue;
550
+ clearInterval(timer);
551
+ }
552
+ }, 16);
553
+ }
554
+
555
+ // Simulate live stats updates
556
+ setInterval(() => {
557
+ const currentRoutes = parseInt(document.getElementById('routeCount').textContent);
558
+ const newRoutes = currentRoutes + Math.floor(Math.random() * 3) + 1;
559
+ animateCounter('routeCount', newRoutes, 1000);
560
+ }, 5000);
561
+
562
+ // Form submission
563
+ document.getElementById('referralForm').addEventListener('submit', function(e) {
564
+ e.preventDefault();
565
+
566
+ // Simulate submission
567
+ const submitBtn = this.querySelector('button[type="submit"]');
568
+ const originalText = submitBtn.innerHTML;
569
+
570
+ submitBtn.innerHTML = '<i data-feather="loader" class="w-5 h-5 animate-spin"></i><span>Submitting...</span>';
571
+ feather.replace();
572
+
573
+ setTimeout(() => {
574
+ submitBtn.innerHTML = originalText;
575
+ feather.replace();
576
+
577
+ // Show success message
578
+ const successMsg = document.createElement('div');
579
+ successMsg.className = 'mt-4 p-4 bg-green-900/20 border border-green-500/30 rounded-xl text-green-400';
580
+ successMsg.innerHTML = `
581
+ <div class="flex items-center space-x-3">
582
+ <i data-feather="check-circle" class="w-5 h-5"></i>
583
+ <span>Your referral link has been added to the routing pool!</span>
584
+ </div>
585
+ `;
586
+
587
+ document.getElementById('referralForm').appendChild(successMsg);
588
+ feather.replace();
589
+
590
+ // Remove message after 5 seconds
591
+ setTimeout(() => successMsg.remove(), 5000);
592
+ }, 1500);
593
+ });
594
+
595
+ // Smooth scroll for navigation links
596
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
597
+ anchor.addEventListener('click', function (e) {
598
+ e.preventDefault();
599
+ const targetId = this.getAttribute('href');
600
+ if(targetId === '#') return;
601
+
602
+ const targetElement = document.querySelector(targetId);
603
+ if(targetElement) {
604
+ window.scrollTo({
605
+ top: targetElement.offsetTop - 80,
606
+ behavior: 'smooth'
607
+ });
608
+ }
609
+ });
610
+ });
611
+
612
+ // Update contributor count randomly
613
+ setInterval(() => {
614
+ const currentContributors = parseInt(document.getElementById('contributorCount').textContent);
615
+ const shouldAdd = Math.random() > 0.7;
616
+
617
+ if(shouldAdd && currentContributors < 200) {
618
+ const newCount = currentContributors + 1;
619
+ animateCounter('contributorCount', newCount, 800);
620
+ }
621
+ }, 10000);
622
+ </script>
623
+ </body>
624
  </html>