Overall design changes - aman (#28)

* style: update banner colors

* style: update cta, other colors

* style: mobile checks, conf edits

* style: text edits

* chore: image updates

* style: update card styles, closes #19

* feat: confetti, cta changes, mousepointer fix

* style: updates styles

package.json

@@ -22,14 +22,12 @@
 		"@tinacms/cli": "^1.8.4",
 		"@types/node": "^22.13.1",
 		"d3": "^7.9.0",
-		"lucide-svelte": "^0.475.0",
 		"mdsvex": "^0.12.3",
 		"partykit": "0.0.111",
 		"partysocket": "1.0.3",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
 		"prettier-plugin-tailwindcss": "^0.6.11",
-		"simplex-noise": "^4.0.3",
 		"svelte": "^5.0.0",
 		"svelte-check": "^4.0.0",
 		"tailwindcss": "^4.0.0",

src/app.css

@@ -30,6 +30,8 @@
 	--color-viz-blue-dark: #718bd1;
     --color-viz-orange-dark: #d46637;
     --color-viz-pink-dark: #c94b7f; */
+
+
 }
 
 :root {
@@ -66,10 +68,6 @@ p {
 	line-height: 1.5;
 }
 
-a {
-	color: var(--color-theme-1);
-	text-decoration: none;
-}
 
 a:hover {
 	text-decoration: underline;

src/lib/assets/images/MousePointer.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+	export let size = 24;
+	export let color = '#4c4c4c';
+	let className = '';
+	export { className as class };
+</script>
+
+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	width={size}
+	height={size}
+	viewBox="0 0 24 24"
+	fill="none"
+	stroke={color}
+	stroke-width="2"
+	stroke-linecap="round"
+	stroke-linejoin="round"
+	class="lucide lucide-mouse-pointer-2 {className}"
+>
+	<path
+		d="M4.037 4.688a.495.495 0 0 1 .651-.651l16 6.5a.5.5 0 0 1-.063.947l-6.124 1.58a2 2 0 0 0-1.438 1.435l-1.579 6.126a.5.5 0 0 1-.947.063z"
+	/>
+</svg>

src/lib/components/BannerPolygon.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
 	import { scaleLinear, Delaunay } from 'd3';
-	import { MousePointer2 } from 'lucide-svelte';
 	import { onMount, onDestroy } from 'svelte';
 	import PartySocket from 'partysocket';
 	import { browser } from '$app/environment';
 	import { getFlagEmoji, getLocationLabel } from '$lib/utils/utils';
+	import MousePointer from '../assets/images/MousePointer.svelte';
 
 	interface Point {
 		x: number;
@@ -25,21 +25,12 @@
 	}
 
 	const POINT_COUNT = 150;
-	const MOBILE_POINT_COUNT = 50;
+
 	const CURSOR_SIZE = 24;
 	const CURSOR_TIMEOUT = 10000;
 	const UPDATE_INTERVAL = 16;
-	const MOBILE_BREAKPOINT = 768;
-	const colors = [
-		'#ee88b3', // pink
-		'#a8bdf0', // light blue
-		'#88e0d8', // light green
-		'#ffd485', // yellow
-		'#f89f72' // light salmon
-	];
-
-	const getPointCount = () =>
-		window.innerWidth < MOBILE_BREAKPOINT ? MOBILE_POINT_COUNT : POINT_COUNT;
+
+	const colors = ['#ffd485', '#97e4dd', '#a8bdf0', '#f89f72', '#ee88b3'];
 
 	const staticPoints: Point[] = Array.from({ length: POINT_COUNT }, () => ({
 		x: Math.random() * (typeof window !== 'undefined' ? window.innerWidth : 1000),
@@ -180,8 +171,8 @@
 				}
 				ctx.closePath();
 				ctx.strokeStyle = getColor(i);
-				ctx.globalAlpha = 0.4;
-				ctx.lineWidth = 3;
+				ctx.globalAlpha = 0.8;
+				ctx.lineWidth = 2;
 				ctx.stroke();
 			}
 
@@ -303,7 +294,7 @@
 		class="custom-cursor"
 		style="transform: translate3d({cursorX - CURSOR_SIZE / 2}px, {cursorY - CURSOR_SIZE / 2}px, 0)"
 	>
-		<MousePointer2 size={CURSOR_SIZE} class="cursor-icon" />
+		<MousePointer size={CURSOR_SIZE} />
 	</div>
 
 	<!-- Other cursors -->
@@ -313,7 +304,7 @@
 			style="transform: translate3d({cursor.x * width - CURSOR_SIZE / 2}px, {cursor.y * height -
 				CURSOR_SIZE / 2}px, 0)"
 		>
-			<MousePointer2 size={CURSOR_SIZE / 1.5} class="cursor-icon other" />
+			<MousePointer size={CURSOR_SIZE / 1.5} class="cursor-icon other" />
 			{#if isCursorActive(cursor) && cursor.location}
 				<div class="cursor-info" class:active={isCursorActive(cursor)}>
 					{#if cursor.location?.country}

src/lib/components/CallToAction.svelte

@@ -1,14 +1,19 @@
 <script lang="ts">
-	import communityBanner from '$lib/assets/images/call-to-action/community-banner.png';
-	import conferenceBanner from '$lib/assets/images/call-to-action/conference-banner.png';
-	import launchPartyBanner from '$lib/assets/images/call-to-action/launch-party-banner.png';
+	import communityBanner from '$lib/assets/images/call-to-action/community-banner.webp';
+	import conferenceBanner from '$lib/assets/images/call-to-action/conference-banner.webp';
+	import launchPartyBanner from '$lib/assets/images/call-to-action/launch-party-banner.webp';
+	import { confetti } from '@neoconfetti/svelte';
+	import { tick } from 'svelte';
+
+	let isVisible = false;
+	let hasShownConfetti = false;
 
 	const cards = [
 		{
 			image: communityBanner,
 			alt: 'Join the community banner',
 			title: 'Join the community',
-			description: 'The good side of data viz is here',
+			description: 'Join our 600+ growing member community on WhatsApp',
 			link: 'https://chat.whatsapp.com/CbIu7z6ITmGFvwfw0BjDdL',
 			buttonText: 'Connect',
 			isAnimated: false
@@ -17,7 +22,8 @@
 			image: launchPartyBanner,
 			alt: 'launch party banner',
 			title: 'Launch Party',
-			description: 'Connect with the data viz community in India',
+			description:
+				'Connect with the data viz community in India, virtually on 21 Feb 2025, 5pm IST',
 			link: 'https://hasgeek.com/VizChitra/launch-party/',
 			buttonText: 'Registrations open',
 			isAnimated: true
@@ -32,48 +38,70 @@
 			isAnimated: false
 		}
 	];
+
+	function handleCardMouseLeave() {
+		isVisible = false;
+		hasShownConfetti = false;
+	}
+
+	async function handleCardMouseOver(card: (typeof cards)[number]) {
+		if (card.isAnimated && !hasShownConfetti) {
+			isVisible = false;
+			await tick();
+			isVisible = true;
+			hasShownConfetti = true;
+		}
+	}
 </script>
 
 <div
-	class="z-12 -mt-[15%] grid grid-cols-1 gap-4 rounded-2xl bg-white px-4 py-4 shadow-lg sm:grid-cols-2 sm:px-6 lg:grid-cols-3 lg:px-4"
+	class="z-12 -mt-[15%] grid grid-cols-1 gap-4 rounded-2xl bg-white px-4 py-4 sm:grid-cols-2 sm:px-6 lg:grid-cols-3 lg:px-4"
 >
 	{#each cards as card}
 		<div
-			class="group relative overflow-hidden rounded-lg border border-slate-100 transition-all duration-300 hover:shadow-lg"
-			class:animated-border={card.isAnimated}
+			role="button"
+			tabindex="0"
+			class:shadow-viz-pink={card.isAnimated}
+			class="group relative flex flex-col overflow-hidden rounded-sm border border-slate-200 shadow-lg transition-all duration-300"
+			on:mouseleave={handleCardMouseLeave}
 		>
-			<div class="aspect-[16/9] overflow-hidden">
+			<div class="aspect-[3/2] overflow-hidden">
 				<img
 					src={card.image}
 					alt={card.alt}
 					class="h-full w-full object-cover transition-transform duration-300 group-hover:scale-105"
 				/>
 			</div>
-			<div class="p-6">
+			<div class="flex flex-1 flex-col p-6">
 				<h3 class="mb-2 text-xl font-bold tracking-tight">{card.title}</h3>
 				<p class="mb-4 text-slate-600">{card.description}</p>
-				<a
-					href={card.link}
-					target="_blank"
-					class="inline-flex items-center font-semibold text-[#FF4A11] transition-colors hover:text-[#FF6B11]"
-				>
-					{card.buttonText}
-					<span class="ml-1 text-lg">↗</span>
-				</a>
+				<div class="mt-auto">
+					{#if card.isAnimated}
+						{#if isVisible}
+							<div class="pointer-events-none absolute bottom-10 left-0 z-10">
+								<div
+									use:confetti={{ colors: ['#ffd485', '#97e4dd', '#a8bdf0', '#f89f72', '#ee88b3'] }}
+								></div>
+							</div>
+						{/if}
+					{/if}
+					<a
+						href={card.link}
+						on:mouseover={() => handleCardMouseOver(card)}
+						on:focus={() => handleCardMouseOver(card)}
+						target="_blank"
+						class="text-viz-pink-dark inline-flex items-center font-semibold transition-colors"
+					>
+						{card.buttonText}
+						<span class="ml-1 text-lg">↗</span>
+					</a>
+				</div>
 			</div>
 		</div>
 	{/each}
 </div>
 
 <style>
-	.animated-border {
-		background: linear-gradient(90deg, #ffd485, #97e4dd, #a8bdf0, #f89f72, #ee88b3);
-		background-size: 300% 300%;
-		animation: borderAnimation 10s linear infinite;
-		position: relative;
-		z-index: 1;
-	}
-
 	@keyframes borderAnimation {
 		0% {
 			background-position: 0% 50%;
@@ -85,23 +113,4 @@
 			background-position: 0% 50%;
 		}
 	}
-
-	.group:not(.animated-border) {
-		background: #fff;
-		transition: background 0.3s ease;
-	}
-
-	.group:not(.animated-border):hover {
-		background: linear-gradient(to right bottom, #fff, #f8f8f8);
-	}
-
-	.group {
-		transition: box-shadow 0.3s ease;
-	}
-
-	.group:hover {
-		box-shadow:
-			0 10px 15px -3px rgb(0 0 0 / 0.1),
-			0 4px 6px -4px rgb(0 0 0 / 0.1);
-	}
 </style>

src/lib/components/HeaderCallToAction.svelte

@@ -2,13 +2,13 @@
 	import horn from '$lib/assets/images/horn.svg?raw';
 </script>
 
-<div class="flex items-center justify-center gap-4 bg-[#FFE5B7] p-2">
+<div class="bg-viz-yellow-light text-viz flex items-center justify-center gap-4 p-2">
 	<div class="svg-horn">{@html horn}</div>
 	<div>
-		<p class="text-xl">
+		<p class="w-fit text-xl">
 			Register for <a
 				href="https://hasgeek.com/VizChitra/launch-party/"
-				class="inline-block"
+				class="text-viz-pink-dark inline-block underline"
 				target="_blank">VizChitra Launch Party &#8599;</a
 			>
 		</p>

src/lib/components/PolygonDivider.svelte

@@ -1,11 +1,10 @@
-<script>
-	import { color } from 'd3';
+<script lang="ts">
 	import { onMount } from 'svelte';
 
 	let width = null;
 	let height = 80;
 
-	const colors = ['#FFD485', '#97E4DD', '#A8BDF0', '#F89F72', '#EE88B3'];
+	const colors = ['#ffd485', '#97e4dd', '#a8bdf0', '#f89f72', '#ee88b3'];
 
 	const NUM_POINTS = 3;