Skip to content

Commit 1a1c32e

Browse files
deadlyjackdeadlyjack
authored
Merge pull request #18 from Acode-Foundation/biraj/improve-landing-page-ui
style: improve landing page UI
2 parents eaa3526 + 7f6696f commit 1a1c32e

6 files changed

Lines changed: 726 additions & 170 deletions

File tree

‎client/components/announcementBanner/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@ const BANNERS = [
1919
url: 'https://www.hangingpiece.com?utm_source=acode_announcement_banner',
2020
alt: 'Hanging Piece',
2121
badge: 'NEW',
22-
title: 'Hanging Piece - AI Chess Coach',
23-
subtitle: 'Understand WHY you blundered. Stop repeating mistakes!',
22+
title: 'Hanging Piece - Claude Code for Chess',
23+
subtitle: 'Understand WHY you blundered and HOW to improve!',
2424
cta: 'Try Now',
2525
theme: 'hangingpiece',
2626
},

‎client/lib/background.js‎

Lines changed: 48 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -7,22 +7,39 @@ class Particle {
77
* @param {number} dx
88
* @param {number} dy
99
* @param {string} color
10+
* @param {number} opacity
1011
*/
11-
constructor(canvas, radius, x, y, dx, dy, color) {
12+
constructor(canvas, radius, x, y, dx, dy, color, opacity) {
1213
this.radius = radius;
1314
this.x = x;
1415
this.y = y;
1516
this.dx = dx;
1617
this.dy = dy;
1718
this.color = color;
19+
this.opacity = opacity;
1820
this.canvas = canvas;
1921
}
2022

2123
draw(ctx) {
24+
// Draw glow effect
25+
const gradient = ctx.createRadialGradient(this.x, this.y, 0, this.x, this.y, this.radius * 3);
26+
gradient.addColorStop(0, this.color);
27+
gradient.addColorStop(0.5, `${this.color}40`); // Add transparency to hex
28+
gradient.addColorStop(1, `${this.color}00`);
29+
30+
ctx.globalAlpha = this.opacity * 0.3;
31+
ctx.fillStyle = gradient;
2232
ctx.beginPath();
23-
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
33+
ctx.arc(this.x, this.y, this.radius * 3, 0, 2 * Math.PI);
34+
ctx.fill();
35+
36+
// Draw main particle
37+
ctx.globalAlpha = this.opacity;
2438
ctx.fillStyle = this.color;
39+
ctx.beginPath();
40+
ctx.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
2541
ctx.fill();
42+
ctx.globalAlpha = 1;
2643
}
2744

2845
update() {
@@ -67,14 +84,26 @@ export default function background(canvas) {
6784

6885
particles = [];
6986

87+
// Dramatic color palette: electric blues, cyans, and deep purples
88+
const colors = [
89+
'#00d4ff', // Electric cyan
90+
'#0099ff', // Bright blue
91+
'#3366ff', // Deep blue
92+
'#6b5bff', // Purple-blue
93+
'#00ffcc', // Aqua
94+
'#1a8fff', // Ocean blue
95+
];
96+
7097
for (let i = 0; i < numParticles; ++i) {
71-
const r = Math.random() * 3 + 1;
98+
const r = Math.random() * 2.5 + 1.5; // Slightly larger particles
7299
const x = Math.random() * (canvas.width - r) + r;
73100
const y = Math.random() * (canvas.height - r) + r;
74-
const dx = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 1.5;
75-
const dy = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 1.5;
101+
const dx = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 1.2;
102+
const dy = (Math.random() > 0.5 ? 1 : -1) * Math.random() * 1.2;
103+
const color = colors[Math.floor(Math.random() * colors.length)];
104+
const opacity = Math.random() * 0.5 + 0.4; // 0.4 to 0.9 - more visible
76105

77-
particles.push(new Particle(canvas, r, x, y, dx, dy, '#606060'));
106+
particles.push(new Particle(canvas, r, x, y, dx, dy, color, opacity));
78107
}
79108

80109
if (reqId != null) cancelAnimationFrame(reqId);
@@ -106,13 +135,23 @@ export default function background(canvas) {
106135
for (const p2 of particles) {
107136
const distance = Math.sqrt((p2.x - p1.x) ** 2 + (p2.y - p1.y) ** 2);
108137

109-
if (distance < 100) {
138+
if (distance < 140) {
139+
// Create gradient line from p1 to p2
140+
const gradient = ctx.createLinearGradient(p1.x, p1.y, p2.x, p2.y);
141+
gradient.addColorStop(0, p1.color);
142+
gradient.addColorStop(0.5, '#00aaff'); // Electric blue middle
143+
gradient.addColorStop(1, p2.color);
144+
145+
ctx.strokeStyle = gradient;
146+
// More visible connections with better opacity curve
147+
const opacityFactor = 1 - distance / 140;
148+
ctx.globalAlpha = opacityFactor * opacityFactor * 0.5; // Quadratic falloff
149+
ctx.lineWidth = 1.5;
110150
ctx.beginPath();
111-
ctx.strokeStyle = '#606060';
112-
ctx.lineWidth = 1;
113151
ctx.moveTo(p1.x, p1.y);
114152
ctx.lineTo(p2.x, p2.y);
115153
ctx.stroke();
154+
ctx.globalAlpha = 1;
116155
}
117156
}
118157
}

‎client/main.scss‎

Lines changed: 200 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,14 @@ html {
1010
width: 100%;
1111
overflow: hidden;
1212
margin: 0;
13-
background: linear-gradient(to bottom right,
14-
var(--secondary-color),
15-
var(--primary-color),
16-
var(--primary-color),
17-
var(--primary-color));
13+
background: linear-gradient(
14+
135deg,
15+
#1a1f2e 0%,
16+
#2a2f3e 25%,
17+
var(--primary-color) 50%,
18+
#252a38 75%,
19+
var(--secondary-color) 100%
20+
);
1821
color: var(--primary-text-color);
1922
font-family: 'Montserrat', sans-serif;
2023
}
@@ -88,7 +91,7 @@ header {
8891
align-items: center;
8992
transition: all 1s ease-in-out;
9093

91-
>.icon {
94+
> .icon {
9295
height: 60px;
9396
width: 60px;
9497
display: flex;
@@ -118,7 +121,7 @@ header {
118121
justify-content: center;
119122
}
120123

121-
#menu-toggler~.mask {
124+
#menu-toggler ~ .mask {
122125
position: fixed;
123126
top: 0;
124127
left: 0;
@@ -129,11 +132,11 @@ header {
129132
transition: all 0.3s ease-in-out;
130133
}
131134

132-
#menu-toggler:checked~nav:nth-of-type(2) {
135+
#menu-toggler:checked ~ nav:nth-of-type(2) {
133136
transform: translateX(0);
134137
}
135138

136-
#menu-toggler:checked~.mask {
139+
#menu-toggler:checked ~ .mask {
137140
pointer-events: all;
138141
background-color: rgba($color: #000000, $alpha: 0.5);
139142
}
@@ -424,27 +427,199 @@ code {
424427
width: fit-content;
425428
}
426429

427-
.footer-nav {
428-
display: flex;
429-
gap: 14px;
430-
justify-content: center;
431-
padding: 10px;
432-
flex-wrap: wrap;
430+
footer {
431+
background: linear-gradient(
432+
180deg,
433+
rgba(0, 0, 0, 0.05) 0%,
434+
rgba(0, 0, 0, 0.3) 100%
435+
);
436+
backdrop-filter: blur(30px);
437+
border-top: 1px solid rgba(51, 153, 255, 0.15);
438+
position: relative;
439+
z-index: 0;
440+
padding: 60px 20px 40px;
441+
margin-top: 100px;
442+
443+
.footer-content {
444+
max-width: 1000px;
445+
margin: 0 auto;
446+
display: grid;
447+
grid-template-columns: 2fr 1fr 1fr 1.2fr;
448+
gap: 40px;
449+
margin-bottom: 40px;
450+
451+
@media screen and (max-width: 768px) {
452+
grid-template-columns: 1fr 1fr;
453+
gap: 32px;
454+
}
455+
456+
@media screen and (max-width: 480px) {
457+
grid-template-columns: 1fr;
458+
text-align: center;
459+
}
460+
}
433461

434-
a {
435-
color: white;
462+
.footer-section {
463+
display: flex;
464+
flex-direction: column;
465+
align-items: flex-start;
466+
467+
@media screen and (max-width: 480px) {
468+
align-items: center;
469+
}
470+
471+
h4 {
472+
font-family: 'Lexend', sans-serif;
473+
font-size: 0.8rem;
474+
font-weight: 600;
475+
text-transform: uppercase;
476+
letter-spacing: 0.1em;
477+
color: #fff;
478+
margin-bottom: 16px;
479+
}
480+
481+
&.footer-brand {
482+
.footer-description {
483+
font-size: 0.85rem;
484+
line-height: 1.5;
485+
color: rgba(255, 255, 255, 0.6);
486+
margin-bottom: 20px;
487+
max-width: 240px;
488+
489+
@media screen and (max-width: 480px) {
490+
margin-left: auto;
491+
margin-right: auto;
492+
}
493+
}
494+
495+
.footer-logo {
496+
display: flex;
497+
align-items: center;
498+
gap: 8px;
499+
margin-bottom: 16px;
500+
501+
@media screen and (max-width: 768px) {
502+
justify-content: center;
503+
}
504+
505+
img {
506+
height: 24px;
507+
}
508+
509+
span {
510+
font-family: 'Lexend', sans-serif;
511+
font-size: 1.2rem;
512+
font-weight: 700;
513+
background: linear-gradient(135deg, #3399ff, #66b3ff);
514+
-webkit-background-clip: text;
515+
-webkit-text-fill-color: transparent;
516+
background-clip: text;
517+
}
518+
}
519+
520+
.footer-social {
521+
display: flex;
522+
gap: 12px;
523+
524+
@media screen and (max-width: 768px) {
525+
justify-content: center;
526+
}
527+
528+
a {
529+
width: 32px;
530+
height: 32px;
531+
display: flex;
532+
align-items: center;
533+
justify-content: center;
534+
background: rgba(255, 255, 255, 0.03);
535+
border: 1px solid rgba(255, 255, 255, 0.1);
536+
border-radius: 8px;
537+
color: rgba(255, 255, 255, 0.6);
538+
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
539+
540+
&:hover {
541+
background: rgba(51, 153, 255, 0.1);
542+
border-color: rgba(51, 153, 255, 0.4);
543+
color: #3399ff;
544+
transform: translateY(-2px);
545+
}
546+
}
547+
}
548+
}
549+
}
550+
551+
.footer-links {
552+
display: flex;
553+
flex-direction: column;
554+
gap: 10px;
555+
556+
a {
557+
color: rgba(255, 255, 255, 0.5);
558+
text-decoration: none;
559+
font-size: 0.85rem;
560+
transition: all 0.2s ease;
561+
margin: 0;
562+
563+
&:hover {
564+
color: #fff;
565+
padding-left: 2px;
566+
}
567+
}
568+
}
569+
570+
.digitalocean-badge {
571+
display: inline-flex;
572+
align-items: center;
573+
gap: 8px;
574+
padding: 8px 12px;
575+
background: rgba(255, 255, 255, 0.03);
576+
border: 1px solid rgba(255, 255, 255, 0.1);
577+
border-radius: 8px;
578+
color: rgba(255, 255, 255, 0.7);
579+
text-decoration: none;
580+
transition: all 0.2s ease;
581+
font-size: 0.8rem;
436582
margin: 0;
437-
white-space: nowrap;
583+
584+
&:hover {
585+
background: rgba(255, 255, 255, 0.08);
586+
border-color: rgba(255, 255, 255, 0.2);
587+
color: #fff;
588+
}
589+
590+
img {
591+
opacity: 0.8;
592+
}
593+
594+
span {
595+
font-weight: 500;
596+
}
438597
}
439-
}
440598

441-
footer {
442-
background-color: rgba(0, 0, 0, 0.1);
443-
backdrop-filter: blur(20px);
444-
position: relative;
445-
z-index: 0;
599+
.footer-bottom {
600+
max-width: 1000px;
601+
margin: 0 auto;
602+
padding-top: 32px;
603+
border-top: 1px solid rgba(255, 255, 255, 0.05);
604+
display: flex;
605+
justify-content: space-between;
606+
align-items: center;
607+
gap: 12px;
608+
609+
@media screen and (max-width: 768px) {
610+
flex-direction: column;
611+
text-align: center;
612+
padding-top: 24px;
613+
}
614+
615+
p {
616+
color: rgba(255, 255, 255, 0.4);
617+
font-size: 0.8rem;
618+
margin: 0;
619+
}
620+
}
446621
}
447622

448623
.text-center {
449624
text-align: center;
450-
}
625+
}

0 commit comments

Comments
 (0)