Skip to content

Commit 78983c0

Browse files
Alfagun74Alfagun74
committed
better colors
1 parent 260a959 commit 78983c0

File tree

5 files changed

+104
-82
lines changed

5 files changed

+104
-82
lines changed

‎src/components/DemoSection.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,7 @@ export function DemoSection() {
5151

5252
<div className="relative group">
5353
{/* Clean Tech Credential Box */}
54-
<div className="rounded-2xl border border-white/10 p-6 font-mono text-sm shadow-2xl backdrop-blur-sm relative overflow-hidden">
54+
<div className="rounded-2xl border border-white/10 p-6 font-mono text-sm shadow-2xl backdrop-blur-sm relative overflow-hidden ring-1 ring-primary-default">
5555
{/* Subtle Tech Grid Overlay */}
5656
<div className="absolute inset-0 opacity-[0.015] pointer-events-none bg-[linear-gradient(to_right,#fff_1px,transparent_1px),linear-gradient(to_bottom,#fff_1px,transparent_1px)] bg-[size:8px_8px]" />
5757

‎src/components/DropdownButton.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const Dropdown = ({ className, options, ...props }) => {
2727

2828
{isOpen && (
2929
<div
30-
className="absolute right-0 z-20 mt-2 w-full origin-top-right rounded-xl bg-background-dark shadow-2xl ring-1 ring-text-default/10 backdrop-blur-xl"
30+
className="absolute right-0 z-20 mt-2 w-full origin-top-right rounded-xl bg-background-dark shadow-2xl ring-1 ring-pri backdrop-blur-xl"
3131
role="menu"
3232
aria-orientation="vertical"
3333
>

‎src/components/Faqs.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export function Faqs() {
9595
{column.map((faq, faqIndex) => (
9696
<div
9797
key={faqIndex}
98-
className="rounded-xl bg-background-dark p-8 ring-1 ring-text-default/10 shadow-sm transition-all duration-300 hover:bg-background-dark/80"
98+
className="rounded-xl bg-background-dark p-8 ring-1 ring-primary-default shadow-sm transition-all duration-300 hover:bg-background-dark/80"
9999
>
100100
<h3 className="text-lg font-bold leading-7 text-text-default">
101101
{faq.question}

‎src/components/Features.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,7 +82,7 @@ export function PrimaryFeatures() {
8282
{features.map((feature, index) => (
8383
<div
8484
key={index}
85-
className="group relative flex h-full flex-col overflow-hidden rounded-3xl bg-background-dark/50 shadow-2xl ring-1 ring-text-default/10 transition-all duration-500 hover:ring-primary-default/50 hover:-translate-y-2 backdrop-blur-sm"
85+
className="group relative flex h-full flex-col overflow-hidden rounded-3xl bg-background-dark/50 shadow-2xl ring-1 ring-primary-default transition-all duration-500 hover:ring-primary-default hover:-translate-y-2 backdrop-blur-sm"
8686
>
8787
<div className="relative h-64">
8888
<img

‎src/components/Hero.jsx‎

Lines changed: 100 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -20,101 +20,123 @@ export function Hero() {
2020
return (
2121
<div className="relative isolate overflow-hidden bg-background-default">
2222
{/* Background Grid Pattern */}
23-
<div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#80808008_1px,transparent_1px),linear-gradient(to_bottom,#80808008_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
23+
<div className="absolute inset-0 -z-10 h-full w-full bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:40px_40px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_0%,#000_70%,transparent_100%)]" />
2424

2525
{/* Background Glows */}
26-
<div className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" aria-hidden="true">
27-
<div className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-primary-default to-primary-light opacity-10 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]" style={{ clipPath: 'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)' }} />
26+
<div
27+
className="absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80"
28+
aria-hidden="true"
29+
>
30+
<div
31+
className="relative left-[calc(50%-11rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 rotate-[30deg] bg-gradient-to-tr from-primary-default to-primary-light opacity-10 sm:left-[calc(50%-30rem)] sm:w-[72.1875rem]"
32+
style={{
33+
clipPath:
34+
"polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)",
35+
}}
36+
/>
2837
</div>
2938

3039
<Container className="pb-16 pt-10 lg:pt-32">
3140
<div className="grid grid-cols-1 lg:grid-cols-12 gap-12 lg:gap-16 items-center">
3241
<div className="lg:col-span-7 text-center lg:text-left">
33-
<div className="mb-8 flex justify-center lg:justify-start">
34-
<a
35-
href="#demo"
36-
className="group relative inline-flex items-center gap-x-2 rounded-full bg-primary-default/10 px-4 py-1.5 text-sm font-medium leading-6 text-primary-light ring-1 ring-inset ring-primary-default/20 hover:ring-primary-default/40 transition-all duration-300 !no-underline"
42+
<div className="mb-8 flex justify-center lg:justify-start">
43+
<a
44+
href="#demo"
45+
className="group relative inline-flex items-center gap-x-2 rounded-full bg-primary-default/10 px-4 py-1.5 text-sm font-medium leading-6 text-primary-light transition-all duration-300 !no-underline"
46+
>
47+
<span className="relative flex h-2 w-2">
48+
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-default opacity-75"></span>
49+
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary-default"></span>
50+
</span>
51+
<span className="flex items-center gap-1.5">
52+
Explore the Live Demo
53+
<svg
54+
className="h-3 w-3 transition-transform group-hover:translate-y-0.5 translate-y-[0.5px]"
55+
fill="none"
56+
viewBox="0 0 24 24"
57+
stroke="currentColor"
58+
>
59+
<path
60+
strokeLinecap="round"
61+
strokeLinejoin="round"
62+
strokeWidth={2.5}
63+
d="M19 9l-7 7-7-7"
64+
/>
65+
</svg>
66+
</span>
67+
</a>
68+
</div>
69+
<h1 className="font-display text-5xl font-black tracking-tight text-text-default sm:text-8xl leading-[0.9] uppercase">
70+
Your Games.
71+
<br />
72+
<span className="text-transparent bg-clip-text bg-gradient-to-r from-primary-default via-primary-light to-primary-default drop-shadow-sm">
73+
Your Server.
74+
</span>
75+
<br />
76+
Your Rules.
77+
</h1>
78+
<p className="mt-8 text-lg sm:text-xl leading-8 text-text-light max-w-2xl mx-auto lg:mx-0">
79+
The self-hosted gaming platform for your DRM-free collection. Host
80+
your own library, track your stats, and share the experience with
81+
friends. It's like having your own personal Steam, but you're the
82+
one in control.
83+
</p>
84+
<div className="mt-12 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
85+
<Button
86+
href="/docs/intro"
87+
className="w-full sm:w-56 py-4 text-lg shadow-xl transition-all hover:scale-105 active:scale-95 hover:shadow-primary-default/20"
88+
>
89+
Get Started
90+
</Button>
91+
<div className="w-full sm:w-56">
92+
<Dropdown
93+
options={dropdownOptions}
94+
className="py-4 text-lg shadow-xl transition-all hover:scale-105 active:scale-95 hover:shadow-primary-default/20"
3795
>
38-
<span className="relative flex h-2 w-2">
39-
<span className="animate-ping absolute inline-flex h-full w-full rounded-full bg-primary-default opacity-75"></span>
40-
<span className="relative inline-flex rounded-full h-2 w-2 bg-primary-default"></span>
41-
</span>
42-
<span className="flex items-center gap-1.5">
43-
Explore the Live Demo
44-
<svg className="h-3 w-3 transition-transform group-hover:translate-y-0.5 translate-y-[0.5px]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
45-
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2.5} d="M19 9l-7 7-7-7" />
96+
<span className="flex items-center justify-center gap-2">
97+
Download
98+
<svg
99+
className="h-5 w-5"
100+
viewBox="0 0 20 20"
101+
fill="currentColor"
102+
aria-hidden="true"
103+
>
104+
<path
105+
fillRule="evenodd"
106+
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
107+
clipRule="evenodd"
108+
/>
46109
</svg>
47110
</span>
48-
</a>
49-
</div>
50-
<h1 className="font-display text-5xl font-black tracking-tight text-text-default sm:text-8xl leading-[0.9] uppercase">
51-
Your Games.<br />
52-
<span className="inline-block text-transparent bg-clip-text bg-gradient-to-r from-primary-default via-primary-light to-primary-default drop-shadow-sm pr-2">
53-
Your Server.
54-
</span><br />
55-
Your Rules.
56-
</h1>
57-
<p className="mt-8 text-lg sm:text-xl leading-8 text-text-light max-w-2xl mx-auto lg:mx-0">
58-
The self-hosted gaming platform for your DRM-free collection.
59-
Host your own library, track your stats, and share the experience with friends.
60-
It's like having your own personal Steam, but you're the one in control.
61-
</p>
62-
<div className="mt-12 flex flex-col sm:flex-row items-center justify-center lg:justify-start gap-4">
63-
<Button
64-
href="/docs/intro"
65-
className="w-full sm:w-56 py-4 text-lg shadow-xl transition-all hover:scale-105 active:scale-95 hover:shadow-primary-default/20"
66-
>
67-
Get Started
68-
</Button>
69-
<div className="w-full sm:w-56">
70-
<Dropdown
71-
options={dropdownOptions}
72-
className="py-4 text-lg shadow-xl transition-all hover:scale-105 active:scale-95 hover:shadow-primary-default/20"
73-
>
74-
<span className="flex items-center justify-center gap-2">
75-
Download
76-
<svg
77-
className="h-5 w-5"
78-
viewBox="0 0 20 20"
79-
fill="currentColor"
80-
aria-hidden="true"
81-
>
82-
<path
83-
fillRule="evenodd"
84-
d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z"
85-
clipRule="evenodd"
86-
/>
87-
</svg>
88-
</span>
89-
</Dropdown>
90-
</div>
111+
</Dropdown>
91112
</div>
92113
</div>
114+
</div>
93115

94-
{/* Desktop Logo */}
95-
<div className="hidden lg:flex lg:col-span-5 justify-center items-center relative">
96-
<div className="absolute inset-0 bg-primary-default/10 blur-[100px] rounded-full" />
97-
<img
98-
src="/img/logo.png"
99-
className="max-h-[24rem] w-full object-contain animate-float drop-shadow-[0_35px_35px_rgba(0,0,0,0.3)] nozoom relative z-10"
100-
alt="GameVault Logo"
101-
/>
102-
</div>
116+
{/* Desktop Logo */}
117+
<div className="hidden lg:flex lg:col-span-5 justify-center items-center relative">
118+
<div className="absolute inset-0 bg-primary-default/10 blur-[100px] rounded-full" />
119+
<img
120+
src="/img/logo.png"
121+
className="max-h-[24rem] w-full object-contain animate-float drop-shadow-[0_35px_35px_rgba(0,0,0,0.3)] nozoom relative z-10"
122+
alt="GameVault Logo"
123+
/>
103124
</div>
125+
</div>
104126

105-
<div className="mt-20 flow-root sm:mt-28 relative">
106-
<div className="rounded-2xl bg-background-dark/50 p-2 ring-1 ring-inset ring-text-default/10 lg:rounded-3xl lg:p-4 backdrop-blur-sm">
107-
<div className="relative rounded-xl shadow-2xl ring-1 ring-text-default/10 group">
108-
<img
109-
src={ImgLibrary}
110-
alt="GameVault Library Screenshot"
111-
data-zoomable
112-
className="zoomable cursor-zoom-in w-full rounded-xl bg-background-default shadow-2xl"
113-
/>
114-
<div className="absolute inset-0 bg-gradient-to-t from-background-dark/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none rounded-xl" />
115-
</div>
127+
<div className="mt-20 flow-root sm:mt-28 relative">
128+
<div className="rounded-2xl bg-background-dark/50 p-2 lg:rounded-3xl lg:p-4 backdrop-blur-sm">
129+
<div className="relative rounded-xl shadow-2xl group">
130+
<img
131+
src={ImgLibrary}
132+
alt="GameVault Library Screenshot"
133+
data-zoomable
134+
className="zoomable cursor-zoom-in w-full rounded-xl bg-background-default shadow-2xl"
135+
/>
136+
<div className="absolute inset-0 bg-gradient-to-t from-background-dark/40 to-transparent opacity-0 group-hover:opacity-100 transition-opacity duration-500 pointer-events-none rounded-xl" />
116137
</div>
117138
</div>
139+
</div>
118140
</Container>
119141
</div>
120142
);

0 commit comments

Comments
 (0)