Optimization 3

src/app/layout.tsx

@@ -12,12 +12,35 @@ import Footer from '@components/Footer';
 import dynamic from 'next/dynamic';
 import { GeistSans } from 'geist/font/sans';
 
+import defaultLinkPreview from '@public/default-link-preview.png';
+
 const Navbar = dynamic(() => import('@components/Navbar'), { ssr: false });
 
 export const metadata: Metadata = {
   title: 'web3ssh',
-  description: 'Web 3.0 Summer School & Hackathon',
-};
+  description: 'Web 3.0 Summer School & Hackathon. Organized by IIIT SriCity. Learn Web3.0 technologies and build decentralized applications.',
+  metadataBase: new URL("https://web3ssh.dev/"),
+  openGraph: {
+    title: 'web3ssh',
+    description: 'Web 3.0 Summer School & Hackathon. Organized by IIIT SriCity. Learn Web3.0 technologies and build decentralized applications.',
+    type: 'website',
+    url: "https://web3ssh.dev/",
+    images: [
+      {
+        url: defaultLinkPreview.src,
+        width: 800,
+        height: 600,
+        alt: "web3ssh",
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'web3ssh',
+    description: 'Web 3.0 Summer School & Hackathon. Organized by IIIT SriCity. Learn Web3.0 technologies and build decentralized applications.',
+    images: [defaultLinkPreview.src],
+  },
+}
 
 gsap.registerPlugin(useGSAP, ScrollTrigger);
 

src/app/team/page.tsx

@@ -1,3 +1,4 @@
+import Link from 'next/link';
 import { GlareCard } from '@components/ui/glare-card';
 import teamData from '@data/team.json';
 
@@ -10,28 +11,34 @@ export default function Page() {
             <div key={index} className="container px-6 py-10 mx-auto">
               <h1
                 key={index}
-                className="text-2xl font-semibold text-center  capitalize lg:text-5xl text-white"
+                className="text-2xl font-sans font-normal text-center  capitalize lg:text-5xl text-white"
               >
                 {role.role}
               </h1>
-              <div className="grid grid-cols-1 gap-8 mt-8 xl:mt-16 md:grid-cols-2 xl:grid-cols-4 items-center">
+              <div key={index} className="grid grid-cols-1 gap-8 mt-8 xl:mt-16 md:grid-cols-2 xl:grid-cols-4 items-center">
                 {role.members.map((member, idx) => (
                   <>
+                    <Link href={member.link} key={`${member.name}-${idx}`}>
                     <GlareCard
                       key={`${member.name}-${idx}`}
-                      className="flex flex-col items-center p-8 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-purple-600 border-gray-700 "
+                      className="flex flex-col items-center p-4 transition-colors duration-300 transform border cursor-pointer rounded-xl hover:border-transparent group hover:bg-purple-600 border-gray-700 "
                     >
                       <img
-                        key={idx}
+                        key={`${member.name}-${idx}`}
                         className="object-cover w-[14rem] h-[14rem] rounded-full ring-4 ring-gray-300 mt-3"
                         src={member.profilePic}
                         alt="member profile pic"
                         // loading="lazy"
                       />
-                      <h1 className="mt-10 text-2xl font-semibold  capitalize text-white group-hover:text-white text-center">
+                      <h1 key={`${member.name}-${idx}`} className="mt-10 text-2xl font-thin  capitalize text-white group-hover:text-white text-center">
                         {member.name}
                       </h1>
+                      {member.link !== '#' && (
+                      <p key={`${member.name}-${idx}`} className="mt-2 text-lg font-bold text-white text-center">
+                       🔗 {member.link_title}
+                      </p>)}
                     </GlareCard>
+                    </Link>
                   </>
                 ))}
               </div>

src/components/Footer.jsx

@@ -23,9 +23,9 @@ export default function Footer() {
             {footerData.map((section, index) => (
               <ul
                 key={index}
-                className="text-gray-700 list-none p-0 font-sans font-thin flex flex-col text-left w-full px-5"
+                className="text-gray-700 list-none p-0 font-sans font-normal flex flex-col text-left w-full px-5"
               >
-                <li className="inline-block py-2 px-3 text-white uppercase font-thin text-xl tracking-wide ">
+                <li className="inline-block py-2 px-3 text-white uppercase font-normal text-xl tracking-wide ">
                   {section.sectionHead}
                 </li>
                 {section.sectionItems.map((item, idx) => (

src/components/Hackathon.jsx

@@ -44,7 +44,7 @@ export default function Hackathon() {
           className="w-[240px] absolute -right-5 -bottom-1 object-contain rounded-2xl"
         />
       </WobbleCard>
-      <WobbleCard containerClassName="col-span-1 lg:col-span-1 bg-blue-900 min-h-[500px] lg:min-h-[600px]">
+      <WobbleCard containerClassName="col-span-1 lg:col-span-1 bg-blue-900 min-h-[500px] lg:min-h-[550px]">
         <div className="">
           <h2 className="text-left text-balance text-4xl font-semibold tracking-[-0.015em] text-white mb-10">
             Day 0, August 2
@@ -64,7 +64,7 @@ export default function Hackathon() {
           className="w-[240px] absolute -right-5 -bottom-1 object-contain rounded-2xl"
         />
       </WobbleCard>
-      <WobbleCard containerClassName="col-span-1 lg:col-span-1 bg-blue-900 min-h-[500px] lg:min-h-[600px]">
+      <WobbleCard containerClassName="col-span-1 lg:col-span-1 bg-blue-900 min-h-[500px] lg:min-h-[550px]">
         <div className="max-w-sm">
           <h2 className="text-left text-balance text-4xl font-semibold tracking-[-0.015em] text-white mb-10">
             Day 1, August 3
@@ -83,7 +83,7 @@ export default function Hackathon() {
           className="w-[240px] absolute -right-5 -bottom-1 object-contain rounded-2xl"
         />
       </WobbleCard>
-      <WobbleCard containerClassName="col-span-1 lg:col-span-1 bg-blue-900 min-h-[550px] lg:min-h-[600px]">
+      <WobbleCard containerClassName="col-span-1 lg:col-span-1 bg-blue-900 min-h-[500px] lg:min-h-[550px]">
         <div className="max-w-sm">
           <h2 className="text-left text-balance text-4xl font-semibold tracking-[-0.015em] text-white mb-10">
             Day 2, August 4

src/components/HeroSection.jsx

@@ -31,8 +31,8 @@ const HeroSection = () => {
   return (
     <div
       className={clsx(
-        'flex flex-col items-center justify-start pt-5 h-herosection z-10 text-white',
-        'lg:justify-start lg:pt-20',
+        'flex flex-col items-center justify-start h-[calc(100vh-200px)] sm:h-fit z-10 text-white',
+        'lg:justify-start ',
         'pt-0',
       )}
     >

src/components/Navbar.jsx

@@ -40,8 +40,8 @@ export default function Navbar() {
   const containerStyle = {
     position: "fixed",
     top: topbarPosition,
-    width: 'calc(100vw - 64px)',
-    left: '32px',
+    width: 'calc(100vw - 100px)',
+    left: '50px',
     marginTop: '20px',
     display: "flex",
     justifyContent: "space-between",
@@ -63,9 +63,10 @@ export default function Navbar() {
     <div className="w-full h-[60px] top-0 flex z-50 text-2xl">
 
       <div style={containerStyle} className="z-50 text-white  border-none flex justify-between items-center">
-        <div className="min-w-fit h-[60px] w-full flex justify-center items-center" >
+        <div className="min-w-fit h-[60px] w-full pl-10 flex justify-start items-center" >
           <img src={web3sshLogo.src} alt="Web3SSH logo" style={{ height: '50px' }} onClick={()=>(window.location.href='/')}/>
         </div>
+
         <div className="hidden sm:flex justify-between gap-6 items-center">
           <ul className="flex lg:gap-6 sm:gap-2">
             {navData.map((item, index) => (

src/components/Partners.jsx

@@ -1,61 +1,75 @@
-import gdscLogo from '@public/partners/gdsc_iiitsc.webp';
-import iiitiansNetworkLogo from '@public/partners/iiitians_network.webp';
 import { AnimatedTooltip } from './ui/animated-tooltip';
 import iiitLogo from '@public/iiits.webp';
 import web3sshLogo from '@public/web3ssh.webp';
-import blockChainedLogo from '@public/partners/blockchained.webp';
+import gdscLogo from '@public/partners/gdsc-iiitsc-logo.webp';
+import iiitiansNetworkLogo from '@public/partners/iiitians-network-logo.webp';
+import blockChainedLogo from '@public/partners/blockchained-logo.webp';
+import fileCoinLogo from '@public/partners/filecoin-logo.webp';
 
 export default function Partners() {
   return (
-    <section className="mb-[120px] bg-white bg-opacity-0 w-full flex justify-center items-center p-2 lg:mb-[200px] font-sans font-medium">
+    <section className="mt-[50px] mb-[100px] bg-white bg-opacity-0 w-full flex justify-center items-center p-2 font-sans font-medium">
       <div className="max-w-screen-xl px-0  mx-auto  lg:pb-0">
-        {/* <AnimatedTooltip items={logos} /> */}
-        <div className="grid grid-cols-1 gap-14 sm:gap-5 sm:grid-cols-1 text-gray-400">
-          <h1 className="text-white text-4xl md:text-6xl mb-0  text-center">Organizer</h1>
-          <div className="grid grid-cols-1 gap-5 sm:gap-5 sm:grid-cols-1 text-gray-400">
-            <a
-              className="flex items-center justify-center transform transition duration-300 hover:scale-105 hover:translate-y-2 "
-              target="_blank"
-            >
-              <img src={iiitLogo.src} alt="IIIT Sri City" className="w-[40%] lg:w-[20%]" />
-            </a>
-            {/* <a
-              className="flex items-center justify-center transform transition duration-300 hover:scale-105 hover:translate-y-2 "
-              target="_blank"
-            >
-              <img src={web3sshLogo.src} alt="Web3ssh" className="w-[80%] lg:w-[30%]" />
-            </a> */}
+
+        <div className="h-fit grid grid-cols-1 gap-14 sm:grid-cols-2 sm:gap-5 md:grid-cols-3 text-gray-400">
+
+          <div className='h-fit m-5'>
+            <h1 className="text-white text-4xl  text-center mb-5">Organizer</h1>
+            <div className="flex w-full h-fit justify-center items-center">
+              <a
+                className="flex items-center justify-center transform transition duration-300 hover:scale-105 hover:translate-y-2 "
+                target="_blank"
+              >
+                <img src={iiitLogo.src} alt="IIIT Sri City" className="w-[200px] sm:w-[100px] md:w-[150px]" />
+              </a>
+            </div>
+          </div>
+
+          <div className='h-fit m-5'>
+            <h1 className="text-white text-4xl text-center mb-5">Sponsors</h1>
+            <div className="flex w-full h-fit justify-center items-center">
+              <a
+                className="flex items-center justify-center transform transition duration-300 hover:scale-105 hover:translate-y-2 "
+                target="_blank"
+              >
+                <img src={fileCoinLogo.src} alt="filecoin" className="w-[250px] lg:w-[250px]" />
+              </a>
+            </div>
           </div>
-          <h1 className="text-white text-4xl md:text-6xl text-center lg:mt-20">Partners</h1>
-          <div className="grid grid-cols-1 gap-5 sm:gap-5 sm:grid-cols-2 text-gray-400">
-            <a
-              className="flex items-center justify-center transform transition duration-300 hover:scale-105 hover:translate-y-2"
-              target="_blank"
-            >
-              <img
-                src={blockChainedLogo.src}
-                alt="Blockchained India"
-                className="w-[60%] lg:w-[80%] fill-gray-400 hover:fill-current"
-              />
+
+          <div className='h-fit m-5'>
+            <h1 className="text-white text-4xl text-center  mb-5">Partners</h1>
+            <div className="flex flex-wrap w-full h-fit justify-center items-center">
+              <a
+                className="flex items-center justify-center transform transition duration-300 hover:scale-105 hover:translate-y-2"
+                target="_blank"
+              >
+                <img
+                  src={blockChainedLogo.src}
+                  alt="Blockchained India"
+                  className="w-[250px] lg:w-[250px] fill-gray-400 hover:fill-current"
+                />
+              </a>
+              <a
+                className="flex items-center justify-center transform transition duration-300 hover:scale-105 hover:translate-y-2 "
+                target="_blank"
+              >
+                <img src={gdscLogo.src} alt="GDSC" className="w-[300px] lg:w-[200px]" />
               </a>
-            <a
-              className="flex items-center justify-center transform transition duration-300 hover:scale-105 hover:translate-y-2 "
-              target="_blank"
-            >
-              <img src={gdscLogo.src} alt="GDSC" className="w-[100%] lg:w-[100%]" />
-            </a>
 
-            <a
-              className="flex items-center justify-center transform transition duration-300 hover:scale-105 hover:translate-y-2"
-              target="_blank"
-            >
-              <img
-                src={iiitiansNetworkLogo.src}
-                alt="IIITians Network"
-                className="w-[60%] lg:w-[40%] fill-gray-400 hover:fill-current"
-              />
-            </a>
+              <a
+                className="flex items-center justify-center transform transition duration-300 hover:scale-105 hover:translate-y-2"
+                target="_blank"
+              >
+                <img
+                  src={iiitiansNetworkLogo.src}
+                  alt="IIITians Network"
+                  className="w-[200px] lg:w-[120px] fill-gray-400 hover:fill-current"
+                />
+              </a>
+            </div>
           </div>
+
         </div>
       </div>
     </section>

src/components/ui/flip-words.tsx

@@ -63,7 +63,7 @@ export const FlipWords = ({
           'z-10 inline-block relative text-left text-neutral-900px-2',
           className,
         )}
-        style={{color: 'black', textShadow: '0px 0px 1px white'}}
+        style={{color: 'black'}}
         key={currentWord}
       >
         {currentWord.split('').map((letter, index) => (