Merge pull request #42 from sd012gfhkhhvh/prod

added cover image in the wing page
Phoenix-NSEC · Apr 22, 2024 · 13e38c7 · 13e38c7
2 parents b0e5b53 + 07342bd
commit 13e38c7
Show file tree

Hide file tree

Showing 3 changed files with 37 additions and 16 deletions.
diff --git a/src/components/GalleryGrid.jsx b/src/components/GalleryGrid.jsx
@@ -51,11 +51,11 @@ const GridCard = ({ image, mb, grow }) => {
     console.log(image);
     return (
         <>
-            <a href="ve" className={`group relative flex flex-col overflow-hidden rounded-lg px-4 pb-4 pt-40 ${mb ? "mb-4" : ""} ${grow ? "flex-grow" : ""}`}>
+            <div className={`group relative flex flex-col overflow-hidden rounded-lg px-4 pb-4 pt-40 ${mb ? "mb-4" : ""} ${grow ? "flex-grow" : ""}`}>
                 <img src={image.url} alt="img" className="absolute inset-0 h-full w-full object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out" />
                 <div className="absolute inset-0 bg-gradient-to-b from-gray-900/25 to-gray-900/5"></div>
                 <h5 className="z-10 text-lg font-medium text-white absolute bottom-0 left-0 p-2 md:text-xl">{image.caption}</h5>
-            </a>
+            </div>
         </>
     )
 }
diff --git a/src/data/wingData.js b/src/data/wingData.js
@@ -1,3 +1,8 @@
+import robonixImg from '../static/img/RobotEvolution.jpg'
+import eloquenseImg from '../static/img/speaking-e1513074001193.jpeg'
+import cybernixImg from '../static/img/cybernix.jpg'
+import nirmanImg from '../static/img/civil.jpg'
+
 const img1 = "https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
 const img2 = "https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
 const img3 = "https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?q=80&w=2940&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
@@ -6,6 +11,7 @@ const img4 = "https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?q=80&
 export const wingData = {
     cybernix: {
         name: 'cybernix',
+        coverImage: cybernixImg,
         aboutBrief: "The official Coding Club under Phoenix – The Official Tech Club of Netaji Subhash Engineering College. A vibrant community for cyber enthusiasts, fostering learning, collaboration, and innovation in the realm of cybersecurity and technology.",
         aboutExtended: "Cybernix Club serves as a dynamic hub for coding and cybersecurity enthusiasts, offering a platform where members can engage in learning, collaboration, and innovation within the cybersecurity and technology spheres. Through workshops, seminars, real-time projects and hands-on activities, participants hone their skills and stay updated on the latest trends and developments in the ever-evolving cyber landscape. The club fosters a supportive community where members share insights, exchange ideas, and work together on projects to tackle real-world cybersecurity challenges. With a focus on fostering curiosity, creativity, and excellence, Cybernix Club empowers its members to thrive in the fast-paced and critical field of cybersecurity.",
         members: [
@@ -66,6 +72,7 @@ export const wingData = {
     },
     robonix: {
         name: 'robonix',
+        coverImage: robonixImg,
         aboutBrief: "Robonix is the robotics wing of Phoenix – The official Tech Club of Netaji Subhash Engineering College. Innovating robotics, fostering creativity. Explore the future of technology with hands-on projects and collaborative learning experiences with Robonix.",
         aboutExtended: "The Robonix Club is a student community dedicated to advancing skills and knowledge in utilizing modern technology for scientific endeavors. The club focuses on automation, artificial intelligence, and robotics. It provides a platform for students to explore these fields, turning innovative ideas into reality. The club organizes workshops, events, and technical sessions to enhance students’ understanding and practical experience in robotics, mechatronics, and related areas, fostering creativity and passion for technological advancements.",
         members: [

diff --git a/src/pages/Clubs/Wing.jsx b/src/pages/Clubs/Wing.jsx
@@ -10,7 +10,7 @@ import { FaGithub, FaLinkedinIn } from "react-icons/fa";
 const Wing = () => {
     const location = useLocation()
 
-    const { name, aboutExtended, members, gallery } = location.state;
+    const { name, aboutExtended, coverImage, members, gallery } = location.state;
 
     return (
         <div>
@@ -20,7 +20,16 @@ const Wing = () => {
                 </div>
             </div>
 
-            <div className="wing-body px-10 md:px-72">
+            {/* cover image */}
+            <div className='mt-4 md:px-60'>
+                <div
+                    className="w-full h-56 relative group overflow-hidden flex rounded-lg"
+                > <img src={coverImage} alt="img" className="absolute w-full h-full inset-0 object-cover object-center group-hover:scale-105 transition-transform duration-500 ease-in-out" />
+                    <div className="absolute inset-0 bg-gradient-to-b from-gray-900/25 to-gray-900/5"></div>
+                </div>
+            </div>
+
+            <div className="wing-body px-10 md:px-60">
                 {/* about */}
                 <div className='about py-8'>
                     <h2 className='text-2xl md:text-3xl font-extrabold mb-4'>About</h2>
@@ -30,15 +39,19 @@ const Wing = () => {
                 {/* wing members */}
                 <div className='wing-members py-8'>
                     <h2 className='text-2xl md:text-3xl font-extrabold mb-4'>Wing Members</h2>
-                    <div className='wing-lead flex justify-center'>
+
+                    {/* ---for hierarchy --- */}
+                    {/* <div className='wing-lead flex justify-center'>
                         <MemberCard
                             name={members[0].name}
                             designation={members[0].designation}
                             socials={members[0].socials}
                         />
-                    </div>
-                    <div className='flex gap-4 flex-wrap justify-between'>
-                        {members.slice(1).map((item, index) => {
+                    </div> */}
+                    {/* --- hierarchy --- */}
+
+                    <div className='flex gap-6 flex-wrap justify-center'>
+                        {members.slice(0).map((item, index) => {
                             return (<>
                                 <MemberCard
                                     key={index}
@@ -68,7 +81,7 @@ const MemberCard = ({ name, designation, socials }) => {
         <style>
             {`
             .our-team {
-            padding: 20px 0 55px;
+            padding: 30px 0 60px;
             margin-bottom: 20px;
             background-color: #f7f5ec;
             text-align: center;
@@ -78,9 +91,9 @@ const MemberCard = ({ name, designation, socials }) => {
 
             .our-team .picture {
             display: inline-block;
-            height: 130px;
-            width: 130px;
-            margin-bottom: 20px;
+            height: 150px;
+            width: 150px;
+            margin-bottom: 30px;
             z-index: 1;
             position: relative;
             }
@@ -132,6 +145,7 @@ const MemberCard = ({ name, designation, socials }) => {
             .our-team .social {
             display: flex;
             justify-content: center;
+            align-items: center;
             gap: 1rem;
             width: 100%;
             background-color: #1369ce;
@@ -161,7 +175,7 @@ const MemberCard = ({ name, designation, socials }) => {
         `}
         </style>
 
-        <div className="our-team rounded-xl w-full md:w-[15rem] flex-shrink-0 border-t-2 border-l-2 border-t-sky-300 border-l-sky-300 shadow-lg shadow-blue-300">
+        <div className="our-team rounded-lg w-[15rem] flex-shrink-0 border-t-2 border-l-2 border-t-sky-300 border-l-sky-300 shadow-lg shadow-blue-300">
             <div className="picture">
                 <img className="img-fluid" alt='img' src="https://picsum.photos/130/130?image=1027" />
             </div>
@@ -170,9 +184,9 @@ const MemberCard = ({ name, designation, socials }) => {
                 <h4 className="title text-[#4e5052]">{designation}</h4>
             </div>
             <ul className="social">
-                <li ><a href={socials.insta} aria-hidden="true"><AiFillInstagram height={"100%"} /></a></li>
-                <li><a href={socials.github} aria-hidden="true"><FaGithub /></a></li>
-                <li><a href={socials.linkedin} aria-hidden="true"><FaLinkedinIn /></a></li>
+                <li ><a href={socials.insta} aria-hidden="true"><AiFillInstagram size={"1.2rem"} /></a></li>
+                <li><a href={socials.github} aria-hidden="true"><FaGithub size={"1.2rem"} /></a></li>
+                <li><a href={socials.linkedin} aria-hidden="true"><FaLinkedinIn size={"1.2rem"} /></a></li>
             </ul>
         </div>
     </>)