feat: implement WebGL shader background with performance monitoring and add new static content pages.

Author: a3ro-dev

app/about/page.tsx

@@ -203,6 +203,7 @@ export default function About() {
           eyebrow="About"
           title={aboutContent.title}
           description={aboutContent.description}
+          className="pt-24 md:pt-32"
         >
           <ul className="grid grid-cols-1 grid-rows-none gap-4 md:grid-cols-12 md:grid-rows-2 lg:gap-4">
             {aboutContent.sections.map((section, index) => {

app/coc/page.tsx

@@ -98,7 +98,7 @@ export default function CodeOfConduct() {
   return (
     <>
       {/* Hero Section */}
-      <section className="relative min-h-[45vh] sm:min-h-[50vh] flex items-center justify-center overflow-hidden text-white">
+      <section className="relative min-h-[45vh] sm:min-h-[50vh] flex items-center justify-center overflow-hidden text-white pt-24 md:pt-32">
         <WebGLShader />
         <div className="relative z-10 w-full mx-auto max-w-5xl px-4 sm:px-6 py-8 sm:py-12 md:py-16">
           <GlassContainer className="px-6 py-12 md:py-20 sm:px-10 lg:px-16 text-center">

app/contact/page.tsx

@@ -77,7 +77,7 @@ export default function Contact() {
   return (
     <>
       {/* Hero Section */}
-      <section className="relative min-h-[50vh] md:min-h-[65vh] flex items-center justify-center overflow-hidden text-white">
+      <section className="relative min-h-[50vh] md:min-h-[65vh] flex items-center justify-center overflow-hidden text-white pt-24 md:pt-32">
         <WebGLShader />
         <div className="relative z-10 w-full mx-auto max-w-5xl px-4 sm:px-6 py-12 md:py-24">
           <GlassContainer className="px-6 py-12 md:py-20 sm:px-10 lg:px-16 text-center">

app/events/page.tsx

@@ -180,7 +180,7 @@ export default function Events() {
   return (
     <>
       {/* ── Hero ──────────────────────────────────────────────────────────── */}
-      <section className="relative min-h-[72vh] flex items-center justify-center overflow-hidden text-white">
+      <section className="relative min-h-[72vh] flex items-center justify-center overflow-hidden text-white pt-24 md:pt-32">
         <WebGLShader />
         <div className="relative z-10 w-full mx-auto max-w-5xl px-4 sm:px-6">
           <GlassContainer className="px-6 py-12 md:py-20 sm:px-10 lg:px-16 text-center">

app/faq/page.tsx

@@ -112,7 +112,7 @@ export default function FAQ() {
   return (
     <>
       {/* Hero Section */}
-      <section className="relative min-h-[40vh] sm:min-h-[45vh] flex items-center justify-center overflow-hidden text-white">
+      <section className="relative min-h-[40vh] sm:min-h-[45vh] flex items-center justify-center overflow-hidden text-white pt-24 md:pt-32">
         <WebGLShader />
         <div className="relative z-10 w-full mx-auto max-w-5xl px-4 sm:px-6 py-8 sm:py-12 md:py-20">
           <GlassContainer className="px-6 py-12 md:py-20 sm:px-10 lg:px-16 text-center">

app/impact/page.tsx

@@ -77,7 +77,7 @@ const culturePillars = [
 export default function Impact() {
   return (
     <>
-      <section className="relative min-h-[75vh] flex items-center justify-center overflow-hidden text-white">
+      <section className="relative min-h-[75vh] flex items-center justify-center overflow-hidden text-white pt-24 md:pt-32">
         <WebGLShader />
         <div className="relative z-10 w-full mx-auto max-w-5xl px-4 sm:px-6">
           <GlassContainer className="px-6 py-12 md:py-20 sm:px-10 lg:px-16 text-center">

app/join/page.tsx

@@ -93,7 +93,7 @@ export default function Join() {
       <Script src="https://tally.so/widgets/embed.js" strategy="lazyOnload" />
 
       {/* Hero Section */}
-      <section className="relative min-h-[40vh] sm:min-h-[50vh] flex items-center justify-center overflow-hidden text-white">
+      <section className="relative min-h-[40vh] sm:min-h-[50vh] flex items-center justify-center overflow-hidden text-white pt-24 md:pt-32">
         <WebGLShader />
         <div className="relative z-10 w-full mx-auto max-w-5xl px-4 sm:px-6 py-8 sm:py-12 md:py-24">
           <GlassContainer className="px-6 py-12 md:py-20 sm:px-10 lg:px-16 text-center">

app/projects/page.tsx

@@ -166,7 +166,7 @@ export default function Projects() {
   return (
     <>
       {/* Hero Section */}
-      <section className="relative min-h-[50vh] flex items-center justify-center overflow-hidden text-white">
+      <section className="relative min-h-[50vh] flex items-center justify-center overflow-hidden text-white pt-24 md:pt-32">
         <WebGLShader />
         <div className="relative z-10 w-full mx-auto max-w-5xl px-4 sm:px-6 py-12 md:py-24">
           <div className="relative border-2 border-[var(--brand-pink)]/30 rounded-[32px] md:rounded-[40px] p-1.5 md:p-2 backdrop-blur-sm bg-black/10">