Skip to content

Commit a986ceb

Browse files
DavidthecodeDavidthecode
committed
chore: updated flagix home
1 parent 4fa8387 commit a986ceb

5 files changed

Lines changed: 62 additions & 52 deletions

File tree

‎apps/web/app/layout.tsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@ import type { Metadata } from "next";
22
import localFont from "next/font/local";
33
import "@flagix/ui/styles/globals.css";
44
import "./globals.css";
5-
import { Raleway } from "next/font/google";
5+
import { Geist, Geist_Mono, Raleway } from "next/font/google";
66
import { SITE_CONFIG } from "@/utils/site";
77
import Providers from "./providers";
88

9-
const geistSans = localFont({
10-
src: "./fonts/GeistVF.woff",
9+
const geistSans = Geist({
10+
subsets: ["latin"],
1111
variable: "--font-geist-sans",
1212
});
1313

14-
const geistMono = localFont({
15-
src: "./fonts/GeistMonoVF.woff",
14+
const geistMono = Geist_Mono({
15+
subsets: ["latin"],
1616
variable: "--font-geist-mono",
1717
});
1818

‎apps/web/app/page.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { HeroSection } from "@/components/home/hero";
66

77
const Page = () => (
88
<div className="flex w-full items-center justify-center">
9-
<div className="flex min-h-screen w-full flex-col bg-[#F5F6F5]">
9+
<div className="dark flex min-h-screen w-full flex-col bg-background">
1010
<Header />
1111
<main>
1212
<HeroSection />

‎apps/web/components/home/footer.tsx‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ export const Footer = () => {
77
const currentYear = new Date().getFullYear();
88

99
return (
10-
<footer className="relative overflow-hidden border-black/5 border-t bg-[#F4F4F5] py-16">
10+
<footer className="relative overflow-hidden border-white/10 border-t bg-black py-16">
1111
<div className="container-landing mx-auto px-6">
1212
<div className="grid grid-cols-1 gap-12 md:grid-cols-4 lg:gap-24">
1313
<div className="col-span-1 md:col-span-2">
@@ -19,11 +19,11 @@ export const Footer = () => {
1919
src={FlagixLogo}
2020
width={24}
2121
/>
22-
<span className="font-bold text-gray-900 text-xl tracking-tight">
22+
<span className="font-bold text-white text-xl tracking-tight">
2323
Flagix
2424
</span>
2525
</div>
26-
<p className="mt-4 max-w-xs font-medium text-gray-500 text-sm leading-relaxed">
26+
<p className="mt-4 max-w-xs font-medium text-gray-400 text-sm leading-relaxed">
2727
Ship faster and safer with real-time feature management
2828
</p>
2929

@@ -36,12 +36,12 @@ export const Footer = () => {
3636
},
3737
].map((social) => (
3838
<a
39-
className="border-black/10 p-2 transition-all hover:-translate-y-0.5 hover:bg-black/10"
39+
className="border-white/10 p-2 transition-all hover:-translate-y-0.5 hover:bg-white/10"
4040
href={social.href}
4141
key={social.href}
4242
target="_blank"
4343
>
44-
<social.icon className="h-4 w-4 text-gray-700" />
44+
<social.icon className="h-4 w-4 text-gray-300" />
4545
</a>
4646
))}
4747

@@ -52,13 +52,13 @@ export const Footer = () => {
5252
</div>
5353

5454
<div className="text-sm md:col-start-4">
55-
<h4 className="mb-4 font-bold text-gray-900 text-xs uppercase tracking-[0.15em]">
55+
<h4 className="mb-4 font-bold text-white text-xs uppercase tracking-[0.15em]">
5656
Product
5757
</h4>
58-
<ul className="space-y-3 font-medium text-gray-500">
58+
<ul className="space-y-3 font-medium text-gray-400">
5959
<li>
6060
<Link
61-
className="transition-colors hover:text-gray-900"
61+
className="transition-colors hover:text-white"
6262
href="#features"
6363
>
6464
Features
@@ -67,7 +67,7 @@ export const Footer = () => {
6767

6868
<li>
6969
<Link
70-
className="transition-colors hover:text-gray-900"
70+
className="transition-colors hover:text-white"
7171
href="https://docs.flagix.com"
7272
rel="noopener"
7373
target="_blank"
@@ -77,7 +77,7 @@ export const Footer = () => {
7777
</li>
7878
<li>
7979
<Link
80-
className="transition-colors hover:text-gray-900"
80+
className="transition-colors hover:text-white"
8181
href="https://github.com/Davidthecode/flagix/releases"
8282
rel="noopener"
8383
target="_blank"

‎apps/web/components/home/header.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export const Header = () => {
1313
const mobileNavLinkClasses = "transition-colors hover:text-gray-900 py-1";
1414

1515
return (
16-
<header className="sticky top-0 z-50 w-full border-white/10 border-b bg-[#F4F4F5] backdrop-blur-xl dark:bg-black/70">
16+
<header className="sticky top-0 z-50 w-full bg-[#F4F4F5] backdrop-blur-xl dark:bg-black/70">
1717
<div className="container-landing mx-auto flex h-16 items-center justify-between px-6">
1818
<div className="flex items-center space-x-3">
1919
<Image

‎apps/web/components/home/hero.tsx‎

Lines changed: 45 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -34,15 +34,15 @@ export const HeroSection = () => {
3434

3535
return (
3636
<section className="container-landing group relative py-12 md:py-12">
37-
<div className="border border-gray-400/70">
38-
<div className="grid h-32 grid-cols-12 border-gray-300/90 border-b">
37+
<div className="border border-white/10">
38+
<div className="grid h-32 grid-cols-12 border-white/10 border-b">
3939
{/* Top Left: Fan/Perspective Pattern */}
40-
<div className="relative col-span-3 overflow-hidden border-gray-300/90 border-r">
40+
<div className="relative col-span-3 overflow-hidden border-gray-300/10 border-r">
4141
<div
4242
className="absolute inset-0 opacity-[0.4]"
4343
style={{
4444
backgroundImage:
45-
"repeating-conic-gradient(from 0deg at 0% 0%, transparent 0deg, transparent 1deg, #e5e7eb 1deg, #e5e7eb 2deg)",
45+
"repeating-conic-gradient(from 0deg at 0% 0%, transparent 0deg, transparent 1deg, #333 1deg, #333 2deg)",
4646
}}
4747
/>
4848
{/* Animated Fan Overlay */}
@@ -57,34 +57,44 @@ export const HeroSection = () => {
5757
/>
5858
</div>
5959

60-
<div className="relative col-span-3 border-gray-300/90 border-r" />
61-
<div className="relative col-span-3 border-gray-300/90 border-r" />
60+
<div className="relative col-span-3 border-white/10 border-r" />
61+
<div className="relative col-span-3 border-white/10 border-r" />
6262
<div className="relative col-span-3" />
6363
</div>
6464

65-
<div className="grid w-full grid-cols-12 border-gray-300/90 border-b">
65+
<div className="grid w-full grid-cols-12 border-white/10 border-b">
6666
{/* Left Side: Content */}
67-
<div className="relative col-span-12 px-8 py-24 lg:col-span-9 lg:border-gray-300/90 lg:border-r">
68-
<div className="max-w-3xl">
69-
<h1 className="font-extrabold text-4xl text-gray-900 leading-[1.1] tracking-tighter sm:text-7xl lg:text-8xl">
67+
<div className="relative col-span-12 px-8 py-24 lg:col-span-9 lg:border-white/10 lg:border-r">
68+
{/* Sponge/Glow Effect */}
69+
<div
70+
className="absolute top-1/2 left-1/2 h-[500px] w-[800px] -translate-x-1/2 -translate-y-1/2 opacity-40 blur-[90px]"
71+
style={{
72+
background:
73+
"radial-gradient(circle at 50% 50%, rgba(255,255,255,0.12), transparent 70%)",
74+
}}
75+
/>
76+
<div className="relative z-10 max-w-3xl">
77+
<h1 className="font-extrabold text-4xl text-white leading-[1.1] tracking-tighter sm:text-7xl">
7078
Ship faster with <br className="hidden sm:block" />
71-
<span className="text-gray-900">Flagix control</span>
79+
<span className="text-white">Flagix control</span>
7280
</h1>
7381

74-
<p className="mt-6 max-w-xl font-medium text-base text-gray-500 leading-relaxed sm:mt-8 sm:text-lg lg:text-xl">
75-
Unlock gradual rollouts, A/B testing, and dynamic targeting
76-
without redeploying code.
82+
<p className="mt-6 max-w-xl font-medium text-base text-white/60 leading-relaxed sm:mt-8 sm:text-lg lg:text-xl">
83+
Unlock <span className="text-white">gradual rollouts</span>,{" "}
84+
<span className="text-white">A/B testing</span>, and{" "}
85+
<span className="text-white">dynamic targeting</span> without{" "}
86+
<span className="text-white">redeploying code</span>.
7787
</p>
7888

7989
<div className="mt-10 flex flex-col gap-4 sm:mt-12 sm:flex-row">
8090
<Link
81-
className="rounded-full bg-gray-900 px-8 py-4 text-center font-bold text-white transition hover:bg-black sm:px-10"
91+
className="rounded-full bg-white px-8 py-4 text-center font-bold text-black transition hover:bg-white/90 sm:px-10"
8292
href="/login"
8393
>
8494
Start Building Free
8595
</Link>
8696
<Link
87-
className="flex items-center justify-center rounded-full border border-gray-300/90 bg-white px-8 py-4 font-semibold text-gray-600 transition hover:bg-gray-50 sm:px-10"
97+
className="flex items-center justify-center rounded-full border border-white/10 bg-black px-8 py-4 font-semibold text-gray-300 transition hover:bg-white/5 sm:px-10"
8898
href="https://docs.flagix.com"
8999
target="_blank"
90100
>
@@ -96,9 +106,9 @@ export const HeroSection = () => {
96106

97107
{/* Right Side: Vertical Grid */}
98108
<div className="relative col-span-3 hidden grid-cols-4 lg:grid">
99-
{/* Column 1 */}
109+
{/* Column 1 */}
100110
<div className="relative h-full">
101-
<div className="absolute top-0 right-0 bottom-0 w-px overflow-hidden bg-gray-300/50">
111+
<div className="absolute top-0 right-0 bottom-0 w-px overflow-hidden bg-white/10">
102112
<motion.div
103113
animate={{ top: ["-30%", "100%"] }}
104114
className="absolute top-0 left-0 h-[30%] w-full bg-linear-to-b from-transparent via-gray-500 to-transparent opacity-50"
@@ -112,7 +122,7 @@ export const HeroSection = () => {
112122
</div>
113123

114124
{/* Horizontal Lines */}
115-
<div className="absolute top-[15%] h-px w-full overflow-hidden bg-gray-300/50">
125+
<div className="absolute top-[15%] h-px w-full overflow-hidden bg-white/10">
116126
<motion.div
117127
animate={{ left: ["-30%", "100%"] }}
118128
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
@@ -125,7 +135,7 @@ export const HeroSection = () => {
125135
}}
126136
/>
127137
</div>
128-
<div className="absolute top-[85%] h-px w-full overflow-hidden bg-gray-300/50">
138+
<div className="absolute top-[85%] h-px w-full overflow-hidden bg-white/10">
129139
<motion.div
130140
animate={{ left: ["-30%", "100%"] }}
131141
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
@@ -142,7 +152,7 @@ export const HeroSection = () => {
142152

143153
{/* Column 2 */}
144154
<div className="relative h-full">
145-
<div className="absolute top-0 right-0 bottom-0 w-px overflow-hidden bg-gray-300/50">
155+
<div className="absolute top-0 right-0 bottom-0 w-px overflow-hidden bg-white/10">
146156
<motion.div
147157
animate={{ top: ["-30%", "100%"] }}
148158
className="absolute top-0 left-0 h-[30%] w-full bg-linear-to-b from-transparent via-gray-500 to-transparent opacity-50"
@@ -155,7 +165,7 @@ export const HeroSection = () => {
155165
}}
156166
/>
157167
</div>
158-
<div className="absolute top-[40%] h-px w-full overflow-hidden bg-gray-300/50">
168+
<div className="absolute top-[40%] h-px w-full overflow-hidden bg-white/10">
159169
<motion.div
160170
animate={{ left: ["-30%", "100%"] }}
161171
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
@@ -172,7 +182,7 @@ export const HeroSection = () => {
172182

173183
{/* Column 3 */}
174184
<div className="relative h-full">
175-
<div className="absolute top-0 right-0 bottom-0 w-px overflow-hidden bg-gray-300/50">
185+
<div className="absolute top-0 right-0 bottom-0 w-px overflow-hidden bg-white/10">
176186
<motion.div
177187
animate={{ top: ["-30%", "100%"] }}
178188
className="absolute top-0 left-0 h-[30%] w-full bg-linear-to-b from-transparent via-gray-500 to-transparent opacity-50"
@@ -185,7 +195,7 @@ export const HeroSection = () => {
185195
}}
186196
/>
187197
</div>
188-
<div className="absolute top-[10%] h-px w-full overflow-hidden bg-gray-300/50">
198+
<div className="absolute top-[10%] h-px w-full overflow-hidden bg-white/10">
189199
<motion.div
190200
animate={{ left: ["-30%", "100%"] }}
191201
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
@@ -198,7 +208,7 @@ export const HeroSection = () => {
198208
}}
199209
/>
200210
</div>
201-
<div className="absolute top-[60%] h-px w-full overflow-hidden bg-gray-300/50">
211+
<div className="absolute top-[60%] h-px w-full overflow-hidden bg-white/10">
202212
<motion.div
203213
animate={{ left: ["-30%", "100%"] }}
204214
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
@@ -215,7 +225,7 @@ export const HeroSection = () => {
215225

216226
{/* Column 4 */}
217227
<div className="relative h-full">
218-
<div className="absolute top-1/2 h-px w-full overflow-hidden bg-gray-300/50">
228+
<div className="absolute top-1/2 h-px w-full overflow-hidden bg-white/10">
219229
<motion.div
220230
animate={{ left: ["-30%", "100%"] }}
221231
className="absolute top-0 left-0 h-full w-[30%] bg-linear-to-r from-transparent via-gray-500 to-transparent opacity-50"
@@ -233,9 +243,9 @@ export const HeroSection = () => {
233243
</div>
234244

235245
<div className="grid min-h-[220px] grid-cols-1 md:grid-cols-3">
236-
<div className="relative border-gray-300/90 border-b p-10 transition-colors hover:bg-gray-50/50 md:border-r md:border-b-0">
246+
<div className="relative border-white/10 border-b p-10 transition-colors hover:bg-white/5 md:border-r md:border-b-0">
237247
<div className="flex items-center gap-3">
238-
<span className="font-bold text-gray-400 text-xs uppercase tracking-widest">
248+
<span className="font-bold text-gray-500 text-xs uppercase tracking-widest">
239249
Precision
240250
</span>
241251
<div
@@ -246,15 +256,15 @@ export const HeroSection = () => {
246256
}}
247257
/>
248258
</div>
249-
<p className="mt-4 font-medium text-gray-600 text-lg leading-snug">
259+
<p className="mt-4 font-medium text-white text-lg leading-snug">
250260
Detailed targeting rules for specific user segments and
251261
environments.
252262
</p>
253263
</div>
254264

255-
<div className="relative border-gray-300/90 border-b p-10 transition-colors hover:bg-gray-50/50 md:border-r md:border-b-0">
265+
<div className="relative border-white/10 border-b p-10 transition-colors hover:bg-white/5 md:border-r md:border-b-0">
256266
<div className="flex items-center gap-3">
257-
<span className="font-bold text-gray-400 text-xs uppercase tracking-widest">
267+
<span className="font-bold text-gray-500 text-xs uppercase tracking-widest">
258268
Velocity
259269
</span>
260270
<div
@@ -265,15 +275,15 @@ export const HeroSection = () => {
265275
}}
266276
/>
267277
</div>
268-
<p className="mt-4 font-medium text-gray-600 text-lg leading-snug">
278+
<p className="mt-4 font-medium text-white text-lg leading-snug">
269279
Decouple deploy from release. Ship code to production safely and
270280
instantly.
271281
</p>
272282
</div>
273283

274-
<div className="relative p-10 transition-colors hover:bg-gray-50/50">
284+
<div className="relative p-10 transition-colors hover:bg-white/5">
275285
<div className="flex items-center gap-3">
276-
<span className="font-bold text-gray-400 text-xs uppercase tracking-widest">
286+
<span className="font-bold text-gray-500 text-xs uppercase tracking-widest">
277287
Insight
278288
</span>
279289
<div
@@ -284,7 +294,7 @@ export const HeroSection = () => {
284294
}}
285295
/>
286296
</div>
287-
<p className="mt-4 font-medium text-gray-600 text-lg leading-snug">
297+
<p className="mt-4 font-medium text-white text-lg leading-snug">
288298
Real-time analytics and A/B testing results directly in your
289299
dashboard.
290300
</p>

0 commit comments

Comments
 (0)