sync

.env.example

@@ -0,0 +1,2 @@
+OPENAI_API_KEY='your-open-ai-api-key'
+API_KEY_HC='your-hc-api-key'

.gitignore

@@ -17,7 +17,8 @@ yarn-error.log*
 .pnpm-debug.log*
 
 # env files
-.env*
+**/.env*
+!**/.env.example
 
 # vercel
 .vercel

app/about/page.tsx

@@ -138,9 +138,8 @@ const coreTeam = [
 const volunteers = [
   {
     id: 11,
-    name: "Oviyaa",
-    image: "/team/oviyaa.jpeg",
-    linkedin: "https://www.linkedin.com/in/oviyaa-singh-3a183a370/",
+    name: "Jaagruti",
+    image: "/team/jaagruti.jpeg",
   },
   {
     id: 5,
@@ -171,6 +170,12 @@ const volunteers = [
     name: "Kavan",
     image: "/team/kavan.jpg",
   },
+  {
+    id: 12,
+    name: "Srishti",
+    image: "/team/srishti.jpeg",
+    linkedin: "https://www.linkedin.com/in/srishti-singh-ab6a1b391",
+  },
 ];
 
 export default function About() {

app/faq/page.tsx

@@ -94,6 +94,8 @@ const faqs: FAQItem[] = [
   },
 ];
 
+import { GlassContainer } from "@/components/ui/glass-container";
+
 export default function FAQ() {
   const [openItems, setOpenItems] = useState<Set<number>>(new Set());
 
@@ -113,99 +115,100 @@ export default function FAQ() {
       <section className="relative min-h-[40vh] sm:min-h-[45vh] flex items-center justify-center overflow-hidden text-white">
         <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">
-          <div className="relative border-2 border-[var(--brand-pink)]/30 rounded-2xl sm:rounded-[32px] md:rounded-[40px] p-1 sm:p-1.5 md:p-2 backdrop-blur-sm bg-black/10">
-            <div className="relative border-2 border-[var(--brand-pink)]/50 rounded-xl sm:rounded-[28px] md:rounded-[36px] py-6 sm:py-8 px-4 sm:px-10 overflow-hidden bg-black/40 backdrop-blur-xl">
-              <div className="absolute inset-0 bg-[var(--brand-purple)]/20" />
-              <div className="relative z-10 space-y-3 sm:space-y-4 text-center">
-                <p className="text-[10px] md:text-xs uppercase tracking-[0.35em] text-white/70">
-                  FAQ
-                </p>
-                <h1 className="font-display text-2xl sm:text-3xl md:text-4xl lg:text-5xl leading-tight font-extrabold text-white">
-                  Frequently Asked Questions
-                </h1>
-                <p className="text-sm sm:text-base md:text-lg text-white/80 max-w-2xl mx-auto">
-                  Everything you need to know about Bits and Bytes and how to
-                  participate.
-                </p>
-              </div>
+          <GlassContainer className="px-6 py-12 md:py-20 sm:px-10 lg:px-16 text-center">
+            <div className="flex flex-col items-center gap-6">
+              <p className="text-[10px] md:text-xs uppercase tracking-[0.35em] text-white/70 font-bold">
+                FAQ
+              </p>
+              <h1 className="font-display text-4xl sm:text-5xl md:text-6xl leading-tight font-black text-white tracking-tighter drop-shadow-2xl">
+                Frequently Asked <br className="hidden sm:block" /> Questions
+              </h1>
+              <p className="text-base sm:text-lg md:text-xl text-white/80 max-w-2xl mx-auto leading-relaxed font-medium">
+                Everything you need to know about Bits and Bytes and how to
+                participate.
+              </p>
             </div>
-          </div>
+          </GlassContainer>
         </div>
       </section>
 
       <main className="relative z-10 bg-transparent">
         {/* FAQ Accordion */}
         <PageSection>
-          <div className="mx-auto max-w-3xl space-y-3 sm:space-y-4">
+          <div className="mx-auto max-w-4xl space-y-4 md:space-y-6">
             {faqs.map((faq, index) => {
               const isOpen = openItems.has(index);
 
               return (
-                <div
+                <GlassContainer
                   key={index}
-                  className="glass-card relative isolate overflow-hidden shadow-xl transition-all duration-300 hover:shadow-[var(--glow-strong)]"
+                  className="p-0"
+                  glowColor="none"
+                  containerClassName="rounded-[2rem]"
                 >
                   <button
                     onClick={() => toggleItem(index)}
-                    className="flex w-full items-start justify-between gap-3 sm:gap-4 p-4 sm:p-6 text-left"
+                    className="flex w-full items-center justify-between gap-4 p-6 md:p-8 text-left transition-colors hover:bg-white/5"
                   >
-                    <h3 className="font-display text-sm sm:text-base md:text-lg font-bold text-foreground dark:text-white pr-2">
+                    <h3 className="font-display text-lg md:text-xl font-black text-white pr-4 leading-tight">
                       {faq.question}
                     </h3>
-                    <ChevronDown
-                      className={cn(
-                        "h-5 w-5 shrink-0 text-[var(--brand-pink)] transition-transform duration-300 mt-0.5",
-                        isOpen && "rotate-180",
-                      )}
-                    />
+                    <div className={cn(
+                      "flex h-10 w-10 shrink-0 items-center justify-center rounded-full border border-white/10 bg-white/5 text-(--brand-pink) transition-all duration-300",
+                      isOpen && "rotate-180 bg-(--brand-pink) text-white border-(--brand-pink)/50"
+                    )}>
+                      <ChevronDown className="h-6 w-6" />
+                    </div>
                   </button>
                   <div
                     className={cn(
                       "grid transition-all duration-300 ease-in-out",
-                      isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+                      isOpen ? "grid-rows-[1fr] opacity-100" : "grid-rows-[0fr] opacity-0",
                     )}
                   >
                     <div className="overflow-hidden">
-                      <p className="px-4 sm:px-6 pb-4 sm:pb-6 text-xs sm:text-sm text-muted-foreground leading-relaxed">
-                        {faq.answer}
-                      </p>
+                      <div className="px-6 md:px-8 pb-6 md:pb-8 border-t border-white/5 mt-2 pt-6">
+                        <p className="text-base md:text-lg text-white/70 font-medium leading-relaxed">
+                          {faq.answer}
+                        </p>
+                      </div>
                     </div>
                   </div>
-                </div>
+                </GlassContainer>
               );
             })}
           </div>
         </PageSection>
 
         {/* Still have questions CTA */}
         <PageSection align="center">
-          <div className="glass-card p-6 sm:p-8 md:p-12 text-center">
-            <h2 className="font-display text-xl sm:text-2xl md:text-3xl font-bold text-foreground dark:text-white">
+          <GlassContainer className="p-10 md:p-20 text-center" glowColor="both">
+            <h2 className="font-display text-3xl md:text-5xl font-black text-white tracking-tighter drop-shadow-2xl">
               Still have questions?
             </h2>
-            <p className="mt-2 sm:mt-3 text-sm sm:text-base text-muted-foreground max-w-xl mx-auto">
+            <p className="mt-4 text-lg md:text-xl text-white/70 max-w-2xl mx-auto font-medium leading-relaxed">
               Can't find what you're looking for? Reach out to us directly and
               we'll get back to you as soon as possible.
             </p>
-            <div className="mt-4 sm:mt-6 flex flex-col sm:flex-row items-center justify-center gap-3 sm:gap-4">
+            <div className="mt-10 flex flex-col sm:flex-row items-center justify-center gap-4">
               <Button
                 asChild
-                className="rounded-full bg-[var(--brand-pink)] px-6 sm:px-8 py-5 sm:py-6 text-sm sm:text-base font-semibold text-white shadow-[var(--glow-strong)] w-full sm:w-auto"
+                className="group rounded-full bg-(--brand-pink) px-10 py-7 text-lg font-black text-white shadow-[0_0_30px_rgba(228,90,146,0.5)] transition-all hover:scale-105 hover:shadow-[0_0_50px_rgba(228,90,146,0.7)] w-full sm:w-auto"
               >
                 <Link href="/contact">
                   Contact Us
-                  <ArrowRight className="ml-2 h-4 w-4 sm:h-5 sm:w-5" />
+                  <ArrowRight className="ml-2 h-5 w-5 transition-transform group-hover:translate-x-1" />
                 </Link>
               </Button>
               <Button
                 asChild
                 variant="outline"
-                className="rounded-full border-white/40 bg-white/10 px-6 sm:px-8 py-5 sm:py-6 text-sm sm:text-base hover:bg-white/20 w-full sm:w-auto"
+                className="rounded-full border-white/20 bg-white/5 px-10 py-7 text-lg font-bold text-white backdrop-blur-md hover:bg-white/10 w-full sm:w-auto transition-all"
               >
                 <Link href="/join">Apply to Join</Link>
               </Button>
             </div>
-          </div>
+          </GlassContainer>
         </PageSection>
       </main>
     </>

app/globals.css

@@ -34,9 +34,9 @@
     --ring: rgba(228, 90, 146, 0.4);
     --radius: 18px;
 
-    --glow-strong: 0 25px 80px rgba(228, 90, 146, 0.35);
-    --glow-soft: 0 12px 45px rgba(62, 30, 104, 0.18);
-    --shadow-card: 0 25px 70px rgba(17, 8, 31, 0.08);
+    --glow-strong: 0 15px 50px rgba(228, 90, 146, 0.25);
+    --glow-soft: 0 8px 30px rgba(62, 30, 104, 0.12);
+    --shadow-card: 0 15px 45px rgba(17, 8, 31, 0.05);
 
     --chart-1: oklch(0.646 0.222 41.116);
     --chart-2: oklch(0.6 0.118 184.704);
@@ -77,9 +77,9 @@
 
     --ring: rgba(255, 172, 172, 0.45);
 
-    --glow-strong: 0 35px 120px rgba(228, 90, 146, 0.45);
-    --glow-soft: 0 18px 60px rgba(9, 0, 25, 0.75);
-    --shadow-card: 0 35px 90px rgba(1, 0, 8, 0.8);
+    --glow-strong: 0 25px 90px rgba(228, 90, 146, 0.35);
+    --glow-soft: 0 12px 40px rgba(9, 0, 25, 0.6);
+    --shadow-card: 0 25px 70px rgba(1, 0, 8, 0.7);
 
     --sidebar: rgba(5, 2, 10, 0.78);
     --sidebar-foreground: #f8f0ff;
@@ -161,6 +161,9 @@
     .section-shell {
         @apply relative mx-auto w-full max-w-6xl px-4 py-16 sm:px-6 lg:px-8 overflow-x-hidden;
         max-width: min(72rem, 100vw);
+        /* Performance optimizations for off-screen rendering */
+        content-visibility: auto;
+        contain-intrinsic-size: auto 1000px;
     }
 
     .section-eyebrow {
@@ -171,14 +174,17 @@
         background: hsla(0, 0%, 100%, 0.18);
         box-shadow: 0 0 0 0.1em hsla(0, 0%, 100%, 0.3) inset;
         @apply rounded-3xl dark:bg-white/10;
+        /* Hardware acceleration */
+        transform: translateZ(0);
+        backface-visibility: hidden;
     }
 
     /* Only apply backdrop-filter on devices that handle it well */
-    @supports (backdrop-filter: blur(12px)) {
-        @media (prefers-reduced-motion: no-preference) {
+    @supports (backdrop-filter: blur(8px)) {
+        @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
             .glass-panel {
-                backdrop-filter: blur(12px);
-                -webkit-backdrop-filter: blur(12px);
+                backdrop-filter: blur(8px);
+                -webkit-backdrop-filter: blur(8px);
             }
         }
     }
@@ -193,24 +199,26 @@
             transform 0.2s ease-out,
             box-shadow 0.2s ease-out;
         will-change: transform;
+        backface-visibility: hidden;
     }
 
     .glass-card:hover {
         transform: translateY(-4px) translateZ(0);
     }
 
-    /* Only apply backdrop-filter on devices that handle it well */
-    @supports (backdrop-filter: blur(12px)) {
-        @media (prefers-reduced-motion: no-preference) {
+    /* Only apply backdrop-filter on devices that handle it well and not on mobile for battery saving */
+    @supports (backdrop-filter: blur(8px)) {
+        @media (prefers-reduced-motion: no-preference) and (min-width: 768px) {
             .glass-card {
-                backdrop-filter: blur(12px);
-                -webkit-backdrop-filter: blur(12px);
+                backdrop-filter: blur(8px);
+                -webkit-backdrop-filter: blur(8px);
             }
         }
     }
 
     .card-surface {
         @apply rounded-3xl border border-white/10 bg-card/80 p-6 shadow-[var(--shadow-card)] transition-transform duration-300 hover:-translate-y-1 hover:shadow-[var(--glow-soft)];
+        transform: translateZ(0);
     }
 
     .tag-chip {