Skip to content

Commit b94af9e

Browse files
gallaylgallayl
committed
landing page and logo updates
1 parent b46c306 commit b94af9e

File tree

4 files changed

+397
-132
lines changed

4 files changed

+397
-132
lines changed

‎src/components/icons/FuryStackLogo.astro‎

Lines changed: 98 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -16,137 +16,139 @@ const { size = 96 } = Astro.props;
1616
>
1717
<title>FuryStack</title>
1818
<defs>
19-
<linearGradient id="fs-silver" x1="0%" y1="0%" x2="100%" y2="100%">
20-
<stop offset="0%" stop-color="#FFFFFF"></stop>
21-
<stop offset="100%" stop-color="#94A3B8"></stop>
19+
<linearGradient id="fsn-g1" x1="0%" y1="100%" x2="100%" y2="0%">
20+
<stop offset="0%" stop-color="#0f172a"></stop>
21+
<stop offset="100%" stop-color="#1e3a8a"></stop>
2222
</linearGradient>
23-
24-
<linearGradient id="fs-blue" x1="0%" y1="0%" x2="100%" y2="100%">
25-
<stop offset="0%" stop-color="#60A5FA"></stop>
26-
<stop offset="100%" stop-color="#1D4ED8"></stop>
23+
<linearGradient id="fsn-g2" x1="0%" y1="100%" x2="100%" y2="0%">
24+
<stop offset="0%" stop-color="#1e3a8a"></stop>
25+
<stop offset="100%" stop-color="#2563eb"></stop>
2726
</linearGradient>
28-
29-
<linearGradient id="fs-dark" x1="0%" y1="0%" x2="100%" y2="100%">
30-
<stop offset="0%" stop-color="#475569"></stop>
31-
<stop offset="100%" stop-color="#0F172A"></stop>
27+
<linearGradient id="fsn-g3" x1="0%" y1="100%" x2="100%" y2="0%">
28+
<stop offset="0%" stop-color="#2563eb"></stop>
29+
<stop offset="100%" stop-color="#3b82f6"></stop>
3230
</linearGradient>
33-
34-
<filter id="fs-glow" x="-20%" y="-20%" width="140%" height="140%">
35-
<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur"></feGaussianBlur>
36-
<feOffset dx="0" dy="4" result="offsetBlur"></feOffset>
37-
<feFlood flood-color="#3B82F6" flood-opacity="0.2" result="glowColor"></feFlood>
38-
<feComposite in="glowColor" in2="offsetBlur" operator="in" result="shadow"></feComposite>
31+
<linearGradient id="fsn-g4" x1="0%" y1="100%" x2="100%" y2="0%">
32+
<stop offset="0%" stop-color="#3b82f6"></stop>
33+
<stop offset="100%" stop-color="#60a5fa"></stop>
34+
</linearGradient>
35+
<radialGradient id="fsn-core" cx="50%" cy="50%" r="50%">
36+
<stop offset="0%" stop-color="#ffffff"></stop>
37+
<stop offset="100%" stop-color="#93c5fd"></stop>
38+
</radialGradient>
39+
40+
<filter id="fsn-glow" x="-15%" y="-15%" width="130%" height="130%">
41+
<feGaussianBlur in="SourceAlpha" stdDeviation="10" result="blur"></feGaussianBlur>
42+
<feOffset dx="0" dy="3" result="offsetBlur"></feOffset>
43+
<feFlood flood-color="#3b82f6" flood-opacity="0.3" result="color"></feFlood>
44+
<feComposite in="color" in2="blur" operator="in" result="shadow"></feComposite>
3945
<feMerge>
4046
<feMergeNode in="shadow"></feMergeNode>
4147
<feMergeNode in="SourceGraphic"></feMergeNode>
4248
</feMerge>
4349
</filter>
4450
</defs>
4551

46-
<g filter="url(#fs-glow)">
47-
<!-- Left Pillar (Base) -->
48-
<path d="M40 80 L120 160 V440 A8 8 0 0 1 112 448 H48 A8 8 0 0 1 40 440 Z" fill="url(#fs-silver)"
49-
></path>
50-
51-
<!-- Connection Bridge -->
52-
<path d="M140 180 L220 260 L140 340 Z" fill="url(#fs-blue)"></path>
53-
54-
<!-- Stack Step 1 -->
55-
<path
56-
d="M230 320 L310 240 V440 A8 8 0 0 1 302 448 H238 A8 8 0 0 1 230 440 Z"
57-
fill="url(#fs-blue)"></path>
58-
59-
<!-- Stack Step 2 -->
60-
<path
61-
d="M330 220 L410 140 V440 A8 8 0 0 1 402 448 H338 A8 8 0 0 1 330 440 Z"
62-
fill="url(#fs-blue)"></path>
63-
64-
<!-- Stack Step 3 (Anchor) -->
65-
<path
66-
d="M430 120 L510 40 V440 A8 8 0 0 1 502 448 H438 A8 8 0 0 1 430 440 Z"
67-
fill="url(#fs-dark)"></path>
68-
69-
<!-- Top Accent (Floating Element) -->
70-
<path d="M180 120 H340 L260 200 Z" fill="url(#fs-silver)" opacity="0.9"></path>
71-
72-
<!-- Lower Detail (Alignment Piece) -->
73-
<path d="M140 448 H210 L140 378 Z" fill="url(#fs-silver)"></path>
52+
<g filter="url(#fsn-glow)">
53+
<rect
54+
class="fsn-layer fsn-l1"
55+
x="104"
56+
y="104"
57+
width="304"
58+
height="304"
59+
rx="24"
60+
fill="url(#fsn-g1)"
61+
stroke="#fff"
62+
stroke-opacity="0.06"
63+
stroke-width="1.5"></rect>
64+
65+
<g transform="rotate(15, 256, 256)">
66+
<rect
67+
class="fsn-layer fsn-l2"
68+
x="138"
69+
y="138"
70+
width="236"
71+
height="236"
72+
rx="18"
73+
fill="url(#fsn-g2)"
74+
stroke="#fff"
75+
stroke-opacity="0.08"
76+
stroke-width="1.5"></rect>
77+
</g>
78+
79+
<g transform="rotate(30, 256, 256)">
80+
<rect
81+
class="fsn-layer fsn-l3"
82+
x="172"
83+
y="172"
84+
width="168"
85+
height="168"
86+
rx="14"
87+
fill="url(#fsn-g3)"
88+
stroke="#fff"
89+
stroke-opacity="0.1"
90+
stroke-width="1.5"></rect>
91+
</g>
92+
93+
<g transform="rotate(45, 256, 256)">
94+
<rect
95+
class="fsn-layer fsn-l4"
96+
x="206"
97+
y="206"
98+
width="100"
99+
height="100"
100+
rx="10"
101+
fill="url(#fsn-g4)"
102+
stroke="#fff"
103+
stroke-opacity="0.12"
104+
stroke-width="1.5"></rect>
105+
</g>
106+
107+
<circle class="fsn-core" cx="256" cy="256" r="16" fill="url(#fsn-core)"></circle>
74108
</g>
75109
</svg>
110+
76111
<style>
77-
/* Base transitions for hover effects if needed later */
78112
.furystack-logo {
79-
overflow: visible; /* Allow glow to spill out */
113+
overflow: visible;
80114
}
81115

82-
/* Animations */
83116
@media (prefers-reduced-motion: no-preference) {
84-
.fs-shape {
85-
transform-box: fill-box;
86-
transform-origin: bottom center;
117+
.fsn-layer {
87118
opacity: 0;
88-
animation-duration: 0.8s;
89-
animation-timing-function: cubic-bezier(0.2, 0.8, 0.2, 1);
90-
animation-fill-mode: forwards;
91-
}
92-
93-
.fs-slide-right {
94-
animation-name: fs-slide-right;
95-
transform-origin: center center;
96-
}
97-
98-
.fs-fade-down {
99-
animation-name: fs-fade-down;
100-
transform-origin: top center;
119+
transform-box: fill-box;
120+
transform-origin: center;
121+
animation: fsn-appear 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
101122
}
102123

103-
.fs-grow-up {
104-
animation-name: fs-grow-up;
124+
.fsn-l1 {
125+
animation-delay: 0s;
105126
}
106-
107-
.fs-delay-1 {
127+
.fsn-l2 {
108128
animation-delay: 0.1s;
109129
}
110-
.fs-delay-2 {
130+
.fsn-l3 {
111131
animation-delay: 0.2s;
112132
}
113-
.fs-delay-3 {
133+
.fsn-l4 {
114134
animation-delay: 0.3s;
115135
}
116-
.fs-delay-4 {
117-
animation-delay: 0.4s;
118-
}
119-
120-
@keyframes fs-slide-right {
121-
from {
122-
opacity: 0;
123-
transform: translateX(-20px);
124-
}
125-
to {
126-
opacity: 1;
127-
transform: translateX(0);
128-
}
129-
}
130136

131-
@keyframes fs-fade-down {
132-
from {
133-
opacity: 0;
134-
transform: translateY(-20px);
135-
}
136-
to {
137-
opacity: 1;
138-
transform: translateY(0);
139-
}
137+
.fsn-core {
138+
opacity: 0;
139+
transform-box: fill-box;
140+
transform-origin: center;
141+
animation: fsn-appear 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) 0.4s forwards;
140142
}
141143

142-
@keyframes fs-grow-up {
144+
@keyframes fsn-appear {
143145
from {
144146
opacity: 0;
145-
transform: scaleY(0.4);
147+
transform: scale(0.85) translateY(12px);
146148
}
147149
to {
148150
opacity: 1;
149-
transform: scaleY(1);
151+
transform: scale(1) translateY(0);
150152
}
151153
}
152154
}

‎src/components/icons/FuryStackLogoClassic.astro‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,68 @@
1+
---
2+
interface Props {
3+
size?: number;
4+
}
5+
6+
const { size = 96 } = Astro.props;
7+
---
8+
9+
<svg
10+
xmlns="http://www.w3.org/2000/svg"
11+
viewBox="0 0 512 512"
12+
width={size}
13+
height={size}
14+
aria-hidden="true"
15+
class="furystack-logo-classic"
16+
>
17+
<title>FuryStack (Classic)</title>
18+
<defs>
19+
<linearGradient id="fsc-silver" x1="0%" y1="0%" x2="100%" y2="100%">
20+
<stop offset="0%" stop-color="#FFFFFF"></stop>
21+
<stop offset="100%" stop-color="#94A3B8"></stop>
22+
</linearGradient>
23+
24+
<linearGradient id="fsc-blue" x1="0%" y1="0%" x2="100%" y2="100%">
25+
<stop offset="0%" stop-color="#60A5FA"></stop>
26+
<stop offset="100%" stop-color="#1D4ED8"></stop>
27+
</linearGradient>
28+
29+
<linearGradient id="fsc-dark" x1="0%" y1="0%" x2="100%" y2="100%">
30+
<stop offset="0%" stop-color="#475569"></stop>
31+
<stop offset="100%" stop-color="#0F172A"></stop>
32+
</linearGradient>
33+
34+
<filter id="fsc-glow" x="-20%" y="-20%" width="140%" height="140%">
35+
<feGaussianBlur in="SourceAlpha" stdDeviation="8" result="blur"></feGaussianBlur>
36+
<feOffset dx="0" dy="4" result="offsetBlur"></feOffset>
37+
<feFlood flood-color="#3B82F6" flood-opacity="0.2" result="glowColor"></feFlood>
38+
<feComposite in="glowColor" in2="offsetBlur" operator="in" result="shadow"></feComposite>
39+
<feMerge>
40+
<feMergeNode in="shadow"></feMergeNode>
41+
<feMergeNode in="SourceGraphic"></feMergeNode>
42+
</feMerge>
43+
</filter>
44+
</defs>
45+
46+
<g filter="url(#fsc-glow)">
47+
<path
48+
d="M40 80 L120 160 V440 A8 8 0 0 1 112 448 H48 A8 8 0 0 1 40 440 Z"
49+
fill="url(#fsc-silver)"></path>
50+
<path d="M140 180 L220 260 L140 340 Z" fill="url(#fsc-blue)"></path>
51+
<path
52+
d="M230 320 L310 240 V440 A8 8 0 0 1 302 448 H238 A8 8 0 0 1 230 440 Z"
53+
fill="url(#fsc-blue)"></path>
54+
<path
55+
d="M330 220 L410 140 V440 A8 8 0 0 1 402 448 H338 A8 8 0 0 1 330 440 Z"
56+
fill="url(#fsc-blue)"></path>
57+
<path
58+
d="M430 120 L510 40 V440 A8 8 0 0 1 502 448 H438 A8 8 0 0 1 430 440 Z"
59+
fill="url(#fsc-dark)"></path>
60+
<path d="M180 120 H340 L260 200 Z" fill="url(#fsc-silver)" opacity="0.9"></path>
61+
<path d="M140 448 H210 L140 378 Z" fill="url(#fsc-silver)"></path>
62+
</g>
63+
</svg>
64+
<style>
65+
.furystack-logo-classic {
66+
overflow: visible;
67+
}
68+
</style>

0 commit comments

Comments
 (0)