Skip to content

Lock Hacklytics Notify me to the portal, sharp cyan CTA #368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
aamoghS wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Lock Hacklytics Notify me to the portal, sharp cyan CTA #368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 18 additions & 6 deletions sites/hacklytics2027/app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -190,20 +190,32 @@ body {
.pixel-lime:hover { --pixel-edge: rgba(200, 255, 0, 0.9); --pixel-glow: rgba(200, 255, 0, 0.4); }
.pixel-purple:hover { --pixel-edge: rgba(155, 0, 255, 0.95); --pixel-glow: rgba(155, 0, 255, 0.45); }

/* Solid neon slab button — chunky, no radius, steps() so it feels 8-bit */
/* Solid cyan slab — sharp rectangle, hard pixel edge, no bloom.
Glow stays on the brightest sprites, not on every CTA. */
.pixel-btn {
position: relative;
border: 0;
border-radius: 0;
background: var(--btn-bg, #00e5ff);
color: #04040a;
font-weight: 700;
text-decoration: none;
box-shadow:
0 -4px 0 0 rgba(255, 255, 255, 0.35),
0 4px 0 0 rgba(0, 0, 0, 0.6),
0 0 28px var(--btn-glow, rgba(0, 229, 255, 0.5));
0 -3px 0 0 rgba(255, 255, 255, 0.28),
0 3px 0 0 rgba(0, 0, 0, 0.75);
transition: transform 120ms steps(2), box-shadow 160ms steps(2), filter 160ms linear;
}
.pixel-btn:hover { transform: translateY(-2px); filter: brightness(1.12); }
.pixel-btn:active { transform: translateY(2px); }
.pixel-btn:hover { transform: translateY(-2px); filter: brightness(1.08); }
.pixel-btn:active {
transform: translateY(2px);
box-shadow:
0 -1px 0 0 rgba(255, 255, 255, 0.2),
0 1px 0 0 rgba(0, 0, 0, 0.8);
}
.pixel-btn:focus-visible {
outline: 2px solid #f0f0f2;
outline-offset: 3px;
}

/* Neon text glow, tuned per accent */
.neon-cyan { color: #00e5ff; text-shadow: 0 0 8px rgba(0, 229, 255, 0.65), 0 0 22px rgba(0, 229, 255, 0.35); }
Expand Down
32 changes: 18 additions & 14 deletions sites/hacklytics2027/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import HomeSections from "@/components/HomeSections";
import PixelGarden, { PixelGround } from "@/components/pixel/PixelGarden";
import PixelSprite from "@/components/pixel/PixelSprite";
import { BLOOM, DAISY, SPROUT, TULIP } from "@/components/pixel/sprites";
import { INTEREST_URL } from "@/lib/links";
import { INTEREST_HINT, INTEREST_URL } from "@/lib/links";

// ─── Elegant Floral Background ─────────────────────────────────────────────
const FloralBackground = () => (
Expand Down Expand Up @@ -171,21 +171,25 @@ export default function HomePage() {
Join 1,000+ hackers in Atlanta, GA.
</p>

{/* Framer-style CTA Buttons */}
{/* Notify me hands off to the portal. No on-site form. */}
<div className="flex flex-col sm:flex-row items-center justify-center gap-5 w-full sm:w-auto">
<a
href={INTEREST_URL}
target="_blank"
rel="noopener noreferrer"
className="pixel-btn relative inline-flex items-center justify-center px-10 py-4 font-pixel text-xs overflow-hidden group w-full sm:w-auto"
>
<span className="relative flex items-center gap-3">
NOTIFY ME
<svg className="w-4 h-4 group-hover:translate-x-1 transition-transform duration-500" fill="none" viewBox="0 0 24 24" stroke="currentColor" strokeWidth={2}>
<path strokeLinecap="round" strokeLinejoin="round" d="M14 5l7 7m0 0l-7 7m7-7H3" />
</svg>
<span className="flex flex-col items-center sm:items-stretch gap-2.5 w-full sm:w-auto">
<a
href={INTEREST_URL}
target="_blank"
rel="noopener noreferrer"
aria-describedby="notify-handoff-hint"
className="pixel-btn relative inline-flex items-center justify-center px-10 py-4 font-pixel text-xs w-full sm:w-auto"
>
NOTIFY ME →
</a>
<span
id="notify-handoff-hint"
className="font-sans text-[11px] leading-snug text-white/40 max-w-[18rem] text-center sm:text-left"
>
{INTEREST_HINT}
</span>
</a>
</span>

<a
href="#about"
Expand Down
4 changes: 3 additions & 1 deletion sites/hacklytics2027/components/Navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import Link from "next/link";
import Image from "next/image";
import PixelSprite from "./pixel/PixelSprite";
import { SPROUT } from "./pixel/sprites";
import { INTEREST_URL } from "@/lib/links";
import { INTEREST_HINT, INTEREST_URL } from "@/lib/links";

const navItems = [
{ name: "About", href: "/#about" },
Expand Down Expand Up @@ -109,6 +109,7 @@ export default function Navbar() {
href={INTEREST_URL}
target="_blank"
rel="noopener noreferrer"
aria-label={`Notify me. ${INTEREST_HINT}`}
className="pixel-btn hidden md:inline-flex items-center justify-center px-6 py-2.5 font-pixel text-[10px] shrink-0"
>
NOTIFY ME
Expand Down Expand Up @@ -157,6 +158,7 @@ export default function Navbar() {
target="_blank"
rel="noopener noreferrer"
onClick={() => setOpen(false)}
aria-label={`Notify me. ${INTEREST_HINT}`}
className="pixel-btn flex items-center justify-center w-full font-pixel text-xs px-8 py-4"
>
NOTIFY ME
Expand Down
4 changes: 4 additions & 0 deletions sites/hacklytics2027/lib/links.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,3 +29,7 @@ const INTEREST_PATH = "/hacklytics";
export const INTEREST_URL = `${PORTAL_ORIGIN}/login?callbackUrl=${encodeURIComponent(
INTEREST_PATH,
)}`;

/** Caption next to Notify me. This marketing site has no form. */
export const INTEREST_HINT =
"Opens the DS@GT portal. We don't collect emails here.";
Loading