Website Version 2 with latest team section, events and better SEO

Author: TheSuranaverse

app/about/page.tsx

@@ -1,14 +1,42 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import { Users, GraduationCap, MapPin, Calendar, ExternalLink, Github, Twitter, Linkedin, Globe, Award, Heart, Zap } from 'lucide-react';
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
 import { Badge } from '@/components/ui/badge';
 import { Button } from '@/components/ui/button';
 import Navigation from '@/components/Navigation';
 import { motion } from 'framer-motion';
 import Link from 'next/link';
+import Image from 'next/image';
 
 export default function Community() {
+
+  const [isLoading, setIsLoading] = useState(true);
+    const [imageErrors, setImageErrors] = useState(new Set());
+  
+    useEffect(() => {
+      // Preload critical images
+      const criticalImages = [
+        '/Asset 1 21.png',
+        '/Web3 JharkhandHomePage.png',
+        '/avax_rnc1.webp'
+      ];
+  
+      const imagePromises = criticalImages.map(src => {
+        return new Promise((resolve, reject) => {
+          const img = new window.Image();
+          img.onload = resolve;
+          img.onerror = reject;
+          img.src = src;
+        });
+      });
+  
+      Promise.allSettled(imagePromises).then(() => {
+        setIsLoading(false);
+      });
+    }, []);
+
   const colleges = [
     { 
       name: 'BIT Mesra', 
@@ -36,35 +64,35 @@ export default function Community() {
       location: 'Ranchi', 
       members: '70+', 
       status: 'Active',
-      description: 'Interdisciplinary approach to blockchain applications'
+      description: 'Established in 2017, SBU Ranchi aims to create new benchmarks for quality education in various fields viz. Technical, Professional, etc.'
     },
     { 
-      name: 'BIT Mesra, Lalpur', 
+      name: 'BIT Lalpur', 
       location: 'Lalpur', 
       members: '80+', 
       status: 'Active',
-      description: 'Strong focus on DeFi and smart contract development'
+      description: 'Established in 1998, BIT Lalpur focus on developing innovative thinking among students and nurturing next-generation leaders on industry-driven curriculum '
     },
     { 
       name: 'Arka Jain University', 
       location: 'Jamshedpur', 
       members: '100+', 
       status: 'Growing',
-      description: 'Strong focus on DeFi and smart contract development'
+      description: 'Established in 2017, AJU aims to develop human capital - creating spirited learning environment by empowering the students with knowledge and skills'
     },
     { 
       name: 'BIT Sindri', 
       location: 'Dhanbad', 
       members: '50+', 
       status: 'Growing',
-      description: 'Strong focus on DeFi and smart contract development'
+      description: 'Established in 1950, BIT Sindri aim to provide the valuable human resources for the industry and society through the excellence in technical education'
     },
     { 
       name: 'Amity University', 
       location: 'Ranchi', 
       members: '25+', 
       status: 'New',
-      description: 'Bringing Web3 education to rural areas of Jharkhand'
+      description: 'Established in 2016, AUJ Ranchi aims to disseminate and advance knowledge and skill by providing instructional, research, and extension facilities'
     }
   ];
 
@@ -142,34 +170,38 @@ export default function Community() {
 
   const communityStats = [
     { label: 'Total Members', value: '1,000+' },
-    { label: 'College Chapters', value: '6' },
-    { label: 'Cities Covered', value: '4' },
+    { label: 'College Chapters', value: '8' },
+    { label: 'Cities Covered', value: '5+' },
     { label: 'Total Events', value: '25+' },
     { label: 'Industry Partners', value: '10+' },
     { label: 'Projects Completed', value: '5+' }
   ];
 
-  const images = [
-    "/foundership_logo.png",
-    "/solanaLogo 1.png",
-    "/tezos-india-logo 1.png",
-    "/AvalancheLogo_Horizontal_4C_Primary_KO.png",
-    "/ascendex_logo.png",
-    "/Shardeum-768x432-PhotoRoom 1.png",
-    "/dapps 1.png",
-    "/Group-4-7-1024x248.png",
-    "/trans. (white)(horizontal).png",
-    "/bg_black_small-removebg-preview 1.png",
-    "/20230810_173627_0001-removebg-preview 1.png",
-    "/White H.png",
-    "/image 9.png"
+  const partnerImages  = [
+    { src: "/foundership_logo.png", alt: "Foundership"},
+    { src: "/solanaLogo 1.png", alt: "Solana" },
+    { src: "/tezos-india-logo 1.png", alt: "Tezos India" },
+    { src: "/AvalancheLogo_Horizontal_4C_Primary_KO.png", alt: "Avalanche" },
+    { src: "/ascendex.png", alt: "AscendEx - Crypto Exchange Partner" },
+    { src: "/Shardeum-768x432-PhotoRoom 1.png", alt: "Shardeum - Blockchain Partner" },
+    { src: "/dapps 1.png", alt: "DApps.co - Decentralized Applications Partner" },
+    { src: "/Group-4-7-1024x248.png", alt: "NomoEx" },
+    { src: "/trans. (white)(horizontal).png", alt: "Paycoin Capital" },
+    { src: "/bg_black_small-removebg-preview 1.png", alt: "DEVs Dungeon - Developer Community" },
+    { src: "/20230810_173627_0001-removebg-preview 1.png", alt: "Techavtar" },
+    { src: "/White H.png", alt: "Strix media" },
+    { src: "/image 9.png", alt: "Zuraverse" }
   ];
 
   const slideWidth = 350;
   const gap = 30;
 
-  const trainImages = [...images, ...images];
-  const totalWidth = images.length * (slideWidth + gap);
+  const trainImages = [...partnerImages , ...partnerImages ];
+  const totalWidth = partnerImages.length * (slideWidth + gap);
+
+  const handleImageError = (src: string) => {
+    setImageErrors(prev => new Set(prev).add(src));
+  };
 
   return (
     <div className="min-h-screen bg-gradient-to-br from-slate-50 to-blue-50">
@@ -248,9 +280,9 @@ export default function Community() {
                       <span>Led by {college.lead}</span>
                     </div> */}
                   </div>
-                  <Button className="w-full mt-4" variant="outline">
+                  {/* <Button className="w-full mt-4" variant="outline">
                     Join Chapter
-                  </Button>
+                  </Button> */}
                 </CardContent>
               </Card>
             ))}
@@ -291,12 +323,15 @@ export default function Community() {
           </div>
           <div className="bg-gray-50 rounded-3xl shadow-xl border border-gray-100 p-8 md:p-12 max-w-6xl mx-auto">
               <div className="overflow-hidden relative h-56">
-                <motion.div
+                <div
                   className="flex absolute"
                   style={{ 
                     width: totalWidth * 2,
                     gap: `${gap}px`
                   }}
+                >
+                  <motion.div
+                  className="flex absolute"
                   animate={{ x: [0, -totalWidth] }}
                   transition={{
                     x: {
@@ -307,20 +342,20 @@ export default function Community() {
                     }
                   }}
                 >
-                  {trainImages.map((src, idx) => (
+                  {trainImages.map((partner, idx) => (
                     <div
-                      key={`${src}-${idx}`}
-                      className="flex items-center justify-center rounded-3xl"
+                      key={`${partner.src}-${idx}`}
+                      className="flex items-center justify-center rounded-3xl bg-gray-800 border-2 border-gray-700"
                       style={{
                         width: slideWidth,
                         height: '200px',
-                        background: '#181818',
-                        border: '3px solid #222',
+                        // background: '#181818',
+                        // border: '3px solid #222',
                         boxShadow: '0 6px 30px rgba(46,143,255,0.15), 0 2px 6px rgba(0,0,0,0.1)',
                         transition: 'box-shadow 0.3s'
                       }}
                     >
-                      <img
+                      {/* <img
                         src={src}
                         alt={`Partner ${idx % images.length + 1}`}
                         style={{
@@ -330,10 +365,31 @@ export default function Community() {
                           borderRadius: '1rem',
                           background: '#222'
                         }}
-                      />
+                      /> */}
+                      {!imageErrors.has(partner.src) ? (
+                          <Image
+                            src={partner.src}
+                            alt={partner.alt}
+                            width={320}
+                            height={170}
+                            className="object-contain rounded-xl bg-gray-900"
+                            style={{
+                              width: '95%',
+                              height: '85%',
+                            }}
+                            loading="lazy"
+                            onError={() => handleImageError(partner.src)}
+                          />
+                        ) : (
+                          <div className="text-white text-center p-4">
+                            <div className="text-gray-400">Partner Logo</div>
+                          </div>
+                        )}
                     </div>
                   ))}
                 </motion.div> 
+                </div>
+                
               </div>
             </div>
 
@@ -366,7 +422,7 @@ export default function Community() {
             Connect with passionate developers, learn from industry experts, and build the future of Web3 in Jharkhand.
           </p>
           <div className="flex flex-col sm:flex-row gap-4 justify-center">
-            <Link href="https://nas.io/web3jh">
+            <Link href="https://chat.whatsapp.com/D1sSYDN7Lxn7ZUvfxoBAUi">
               <Button size="lg" className="bg-gradient-to-r from-orange-200 to-yellow-200 text-yellow-700 font-bold border border-white/20 text-lg rounded-xl shadow-2xl hover:shadow-2xl transition-all duration-300 hover:scale-105 hover:from-orange-300 hover:to-yellow-200 ring-1 ring-white/10 backdrop-blur-md text-center">
                 Join Our Community
                 <ExternalLink className="w-4 h-4 ml-2" />

app/community/page.tsx

@@ -98,7 +98,7 @@ export default function Contact() {
       hoverColor: 'hover:from-green-600 hover:to-green-700',
       textColor: 'text-green-600',
       bgColor: 'bg-green-100',
-      url: 'https://nas.io/web3jh',
+      url: 'https://chat.whatsapp.com/D1sSYDN7Lxn7ZUvfxoBAUi',
       icon: (
         <svg className="w-6 h-6" fill="currentColor" viewBox="0 0 24 24">
           <path d="M17.472 14.382c-.297-.149-1.758-.867-2.03-.967-.273-.099-.471-.148-.67.15-.197.297-.767.966-.94 1.164-.173.199-.347.223-.644.075-.297-.15-1.255-.463-2.39-1.475-.883-.788-1.48-1.761-1.653-2.059-.173-.297-.018-.458.13-.606.134-.133.298-.347.446-.52.149-.174.198-.298.298-.497.099-.198.05-.371-.025-.52-.075-.149-.669-1.612-.916-2.207-.242-.579-.487-.5-.669-.51-.173-.008-.371-.01-.57-.01-.198 0-.52.074-.792.372-.272.297-1.04 1.016-1.04 2.479 0 1.462 1.065 2.875 1.213 3.074.149.198 2.096 3.2 5.077 4.487.709.306 1.262.489 1.694.625.712.227 1.36.195 1.871.118.571-.085 1.758-.719 2.006-1.413.248-.694.248-1.289.173-1.413-.074-.124-.272-.198-.57-.347m-5.421 7.403h-.004a9.87 9.87 0 01-5.031-1.378l-.361-.214-3.741.982.998-3.648-.235-.374a9.86 9.86 0 01-1.51-5.26c.001-5.45 4.436-9.884 9.888-9.884 2.64 0 5.122 1.03 6.988 2.898a9.825 9.825 0 012.893 6.994c-.003 5.45-4.437 9.884-9.885 9.884m8.413-18.297A11.815 11.815 0 0012.05 0C5.495 0 .16 5.335.157 11.892c0 2.096.547 4.142 1.588 5.945L.057 24l6.305-1.654a11.882 11.882 0 005.683 1.448h.005c6.554 0 11.89-5.335 11.893-11.893A11.821 11.821 0 0020.465 3.488"/>
@@ -110,18 +110,18 @@ export default function Contact() {
   const faqs = [
     {
       question: 'How can I join the Web3JH community?',
-      answer: 'You can join our Community on WhatsApp, attend our Events, or reach out to the Chapter Lead at your college. All students and professionals interested in Web3 are welcome!'
+      answer: 'You can join our Community on WhatsApp and Telegram, attend our Events, or reach out to the Chapter Lead at your college. All students and professionals interested in Web3 are welcome!'
     },
     {
-      question: 'Are the events free to attend?',
+      question: 'Are the events organized by Web3JH free to attend?',
       answer: 'Yes all our events, meetups and conferences are completely free. We have never charged the participants for any registration fees for our events.'
     },
     {
-      question: 'Do I need prior blockchain experience?',
+      question: 'Do I need prior blockchain experience to join Web3JH events?',
       answer: 'Not at all! We have events for all skill levels, from complete beginners to advanced developers.'
     },
     {
-      question: 'Can I start a chapter at my college?',
+      question: 'Can I start a Web3JH Chapter at my college?',
       answer: 'Absolutely! We\'re always looking to expand. Contact us with details about your college and we\'ll help you set up a new chapter.'
     },
     {
@@ -136,6 +136,40 @@ const toggleFAQ = (index: number) => {
   setOpenFAQ(openFAQ === index ? null : index);
 };
 
+const faqStructuredData = {
+  "@context": "https://schema.org",
+  "@type": "FAQPage",
+  "mainEntity": faqs.map(faq => ({
+    "@type": "Question",
+    "name": faq.question,
+    "acceptedAnswer": {
+      "@type": "Answer",
+      "text": faq.answer
+    }
+  }))
+};
+
+const contactStructuredData = {
+  "@context": "https://schema.org",
+  "@type": "ContactPage",
+  "mainEntity": {
+    "@type": "Organization",
+    "name": "Web3 Jharkhand",
+    "contactPoint": [
+      {
+        "@type": "ContactPoint",
+        "telephone": "+91 78966 76119",
+        "contactType": "customer service",
+        "availableLanguage": ["English", "Hindi"]
+      },
+      {
+        "@type": "ContactPoint",
+        "email": "web3jh@gmail.com",
+        "contactType": "customer service"
+      }
+    ]
+  }
+};
   // const teamContacts = [
   //   {
   //     name: 'Rahul Kumar',