footeer

Author: tejasviverma

public/arambh.jpg

@@ -17,7 +17,7 @@ export default function Theme() {
 	];
 
 	return (
-		<div className="bg-[url('/bg.jpg')] bg-fixed bg-cover relative bg-center bg-opacity-25 w-full mb-20">
+		<div className="bg-[url('/bg.jpg')] bg-fixed bg-cover relative bg-center bg-opacity-25 w-full">
         <div id="features" className='abosule inset-0 bg-gradient-to-r from-[rgba(0,0,0,0.7)] to-[rgba(0,0,0,0.7)]'>
 			<div className='w-10/12 mx-auto'>
 				<div className='capitalize font-white  text-5xl md:text-6xl inline-block text-center mb-10'>

public/hitesh.jpg

@@ -4,46 +4,46 @@ import FCard from './TeamCard';
 const Footer = () => (
   <footer className="footer" id="contact">
     <div className="text-center">
-      <h1 className="text-white bg-black p-4 shadow-lg rounded-lg transition-all shadow-white hover:scale-105">
+      <h1 className="abosule inset-0 bg-gradient-to-r from-[rgba(0,0,0,0.7)] to-[rgba(0,0,0,0.7)] w-10/12 mx-auto capitalize font-white  text-5xl md:text-6xl inline-block text-left mb-10 text-white neon-green mt-8">
         Made by Team CyberSentinels
       </h1>
     </div>
     <div className="flex justify-center items-center h-screen">
-      <div className="grid grid-cols-1 sm:grid-cols-3 gap-8">
+      <div className="grid grid-cols-1 sm:grid-cols-3 gap-20">
         <FCard
-          image="/path-to-your-image.jpg"
-          title="Card 1"
+          image="/hitesh.jpg"
+          title="Hitesh Bajaj"
           description="This is the description for Card 1"
         />
         <FCard
-          image="/path-to-your-image.jpg"
-          title="Card 2"
+          image="/yogesh.jpg"
+          title="Yogesh Bajaj"
           description="This is the description for Card 2"
         />
         <FCard
-          image="/path-to-your-image.jpg"
-          title="Card 3"
+          image="/manasvi.jpg"
+          title="Manasvi"
           description="This is the description for Card 3"
         />
         <FCard
-          image="/path-to-your-image.jpg"
-          title="Card 4"
+          image="/tejasvi.png"
+          title="Tejasvi"
           description="This is the description for Card 4"
         />
         <FCard
-          image="/path-to-your-image.jpg"
-          title="Card 1"
+          image="/arambh.jpg"
+          title="Arambh"
           description="This is the description for Card 1"
         />
         <FCard
-          image="/path-to-your-image.jpg"
-          title="Card 1"
+          image="/piyush.jpg"
+          title="Piyush"
           description="This is the description for Card 1"
         />
 
       </div>
     </div>
-    <h1> Team CyberSentinels is a group of innovative thinkers and tech enthusiasts, building the future of secure web solutions.</h1>
+    <h1 className='text-white bg-black p-4 shadow-lg rounded-lg transition-all shadow-white hover:scale-105'> Team CyberSentinels is a group of innovative thinkers and tech enthusiasts, building the future of secure web solutions.</h1>
   </footer>
 );
 

public/manasvi.jpg

@@ -9,24 +9,24 @@ const FCard = ({ image, title, description }) => {
 
   return (
     <div 
-      className={`relative w-64 h-80 cursor-pointer transform transition-transform duration-500 ${
+      className={`relative w-64 h-80 cursor-pointer transform transition-transform duration-500 hover:shadow-[0_0_20px_10px_rgba(255,255,255,0.5)] ${
         isFlipped ? 'rotate-y-180' : ''
       }`}
       onClick={handleFlip}
     >
       {/* Front Side */}
       <div
-        className={`absolute w-full h-full bg-white shadow-lg rounded-lg p-4 flex flex-col justify-center items-center backface-hidden transform ${
+        className={`absolute w-60 h-60 bg-black shadow-lg rounded-3xl mt-8 p-4 flex flex-col justify-center items-center backface-hidden transform ${
           isFlipped ? 'rotate-y-180' : ''
         }`}
       >
-        <img src={image} alt={title} className="w-32 h-32 mb-4 rounded-full" />
-        <h3 className="text-xl font-bold">{title}</h3>
+        <img src={image} alt={title} className="w-50 h-50 rounded-2xl mb-8" />
+        <h3 className="text-xl font-bold text-white">{title}</h3>
       </div>
 
       {/* Back Side */}
       <div
-        className={`absolute w-full h-full bg-gray-200 shadow-lg rounded-lg p-4 flex justify-center items-center text-center backface-hidden transform rotate-y-180 ${
+        className={`absolute w-full h-full bg-gray-500 shadow-lg rounded-3xl p-4 flex justify-center items-center text-center  text-white backface-hidden transform rotate-y-180 ${
           isFlipped ? 'rotate-y-0' : 'rotate-y-180'
         }`}
       >