Skip to content

Commit

Permalink
Merge pull request #470 from dev129/feat-Stories&Achievements
Browse files Browse the repository at this point in the history 
Stories and Achievements section
  • Loading branch information
@rishicds
rishicds authored Nov 8, 2024
2 parents 11f8a31 + 5b6cef0 commit 8febeda
Show file tree
Hide file tree
Showing 3 changed files with 197 additions and 209 deletions.
221 changes: 12 additions & 209 deletions src/app/(pages)/Stories-Achievements/page.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,211 +1,14 @@
"use client";
import React, { useEffect, useState } from 'react';
import styled from 'styled-components';
import { motion } from 'framer-motion';
import { FaLinkedin } from 'react-icons/fa';
import Link from 'next/link';

const fadeInUp = {
hidden: { opacity: 0, y: 20 },
visible: { opacity: 1, y: 0 },
};

const cardHover = {
hover: { scale: 1.05 },
};

const Container = styled.div`
padding: 40px;
width: 100%;
margin: 0 auto;
font-family: Arial, sans-serif;
`;

const SectionTitle = styled.h1`
font-size: 2.5rem;
margin-bottom: 20px;
text-align: center;
color: #333;
`;

const Subtitle = styled.p`
font-size: 1.2rem;
text-align: center;
color: #666;
margin-bottom: 40px;
`;

const CardGrid = styled.div`
display: flex;
gap: 20px;
justify-content: center;
flex-wrap: wrap;
width: 100%;
`;

const Card = styled.div`
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: #fff;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
padding: 20px;
width: 100%;
max-width: 280px;
height: 100%;
text-align: center;
transition: transform 0.3s;
&:hover {
transform: translateY(-10px);
}
`;

const CardImage = styled.img`
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 8px 8px 0 0;
margin-bottom: 15px;
`;

const CardTitle = styled.h2`
font-size: 1.5rem;
color: #0070f3;
margin-bottom: 10px;
`;

const CardContent = styled.p`
color: #555;
margin-bottom: 10px;
justify-content: space-between;
text-align: center;
`;

const ReadMoreButton = styled.div`
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 20px;
background-color: #0070f3;
color: white;
border: none;
border-radius: 5px;
font-size: 0.9rem;
cursor: pointer;
margin-top: 15px;
&:hover {
background-color: #005bb5;
}
`;

const ConnectOnLinkedInButton = styled.div`
padding: 10px 20px;
background-color: #0070f3;
color: white;
border: none;
border-radius: 5px;
font-size: 0.9rem;
cursor: pointer;
margin-top: 15px;
display: inline-flex; /* Align items inline */
justify-content: center; /* Centers items horizontally */
align-items: center; /* Center items vertically */
gap: 8px; /* Space between text and icon */
text-decoration: none; /* Remove underline from Link */
&:hover {
background-color: #005bb5;
}
`;

const ConnectButton = styled.button`
padding: 12px 20px;
background-color: #0070f3;
color: white;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
display: block;
margin: 30px auto 0;
&:hover {
background-color: #005bb5;
}
`;

const LinkedinIcon = styled(FaLinkedin)`
font-size: 1.2rem;
`;

const Mentorship = () => {
const [achievements, setAchievements] = useState([]);
const [mentors, setMentors] = useState([]);

useEffect(() => {
fetch('http://localhost:5000/achievements')
.then((response) => response.json())
.then((data) => setAchievements(data))
.catch((error) => console.error("Error fetching achievements:", error));

fetch('http://localhost:5000/mentors')
.then((response) => response.json())
.then((data) => setMentors(data))
.catch((error) => console.error("Error fetching mentors:", error));
}, []);
import Stories from '@/components/ui/stories'
import Achievements from '@/components/ui/achievements'
import React from 'react'

const page = () => {
return (
<Container>
<motion.div initial="hidden" animate="visible" variants={fadeInUp} transition={{ duration: 0.5 }}>
<SectionTitle>Stories from the Community</SectionTitle>
<Subtitle>Get inspired by the clever ways people are using Google technology.</Subtitle>
<CardGrid>
{achievements.map((achieve, index) => (
<motion.div key={index} variants={cardHover} whileHover="hover" initial="hidden" animate="visible" transition={{ duration: 0.3, ease: "easeInOut" }}>
<Card>
<CardImage src={achieve.imageUrl} alt={`${achieve.name} photo`} />
<CardTitle>{achieve.name}</CardTitle>
<CardContent><strong>Job:</strong> {achieve.job}</CardContent>
<CardContent><strong>Project:</strong> {achieve.project}</CardContent>
<CardContent><strong>Testimonial:</strong> "{achieve.testimonial}"</CardContent>
<Link key={achieve.id} href={`/Stories-Achievements/${achieve.id}`}>
<ReadMoreButton>Read now</ReadMoreButton>
</Link>
</Card>
</motion.div>
))}
</CardGrid>
</motion.div>

<motion.div initial="hidden" animate="visible" variants={fadeInUp} transition={{ duration: 0.5, delay: 0.3 }} style={{ marginTop: "50px" }}>
<SectionTitle>Meet the Mentors</SectionTitle>
<Subtitle>Our mentors are here to guide GDSC members in various fields.</Subtitle>
<CardGrid>
{mentors.map((mentor, index) => (
<motion.div key={mentor.id} variants={cardHover} whileHover="hover" initial="hidden" animate="visible" transition={{ duration: 0.3, ease: "easeInOut" }}>
<Card>
<CardImage src={mentor.imageUrl} alt={`${mentor.name} photo`} />
<CardTitle>{mentor.name}</CardTitle>
<CardContent><strong>Position:</strong> {mentor.position}</CardContent>
<CardContent>{mentor.bio}</CardContent>
<ConnectOnLinkedInButton>
<Link key={mentor.id} href={`${mentor.linkedinProfile}`} style={{display: 'flex', gap: '4px', fontSize: '16px'}} passHref>
Connect on LinkedIn <LinkedinIcon />
</Link>
</ConnectOnLinkedInButton>
</Card>
</motion.div>
))}
</CardGrid>
</motion.div>

<motion.div initial="hidden" animate="visible" variants={fadeInUp} transition={{ duration: 0.5, delay: 0.6 }} style={{ marginTop: "50px" }}>
<SectionTitle>Connect with GDSC Alumni</SectionTitle>
<Subtitle>Our GDSC members can connect with alumni for advice and career guidance.</Subtitle>
<ConnectButton>Connect with Alumni</ConnectButton>
</motion.div>
</Container>
);
};

export default Mentorship;
<>
<Achievements/>
<Stories/>
</>
)
}

export default page
96 changes: 96 additions & 0 deletions src/components/ui/achievements.jsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,96 @@
import React from 'react';
import { FaGithub,FaInstagram, FaLinkedin } from 'react-icons/fa';
import { FaXTwitter } from 'react-icons/fa6';

const TeamMembers = () => {
// Array of team member data with Bengali names in English
const teamMembers = [
{
name: "Sahil Banerjee",
role: "Community Lead & Full-Stack Developer",
description: "Sahil is the visionary behind GDSC RCCIIT, fostering innovation and collaboration within the tech community. Currently interning at Google, he leads efforts in cloud infrastructure and scalable solutions.",
avatar: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/bonnie-green.png",
socialLinks: [
{ icon: <FaGithub />, href: "#" },
{ icon: <FaInstagram />, href: "#" },
{ icon: <FaXTwitter />, href: "#" },
{ icon: <FaLinkedin />, href: "#" }
]
},
{
name: "Subhash Ghosh",
role: "Machine Learning Specialist",
description: "Subhash pioneers machine learning projects and research at GDSC. A Meta intern, he's focused on developing AI-driven tools for enhanced user engagement and automated content moderation.",
avatar: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/jese-leos.png",
socialLinks: [
{ icon: <FaGithub />, href: "#" },
{ icon: <FaInstagram />, href: "#" },
{ icon: <FaXTwitter />, href: "#" },
{ icon: <FaLinkedin />, href: "#" }
]
},
{
name: "Arjun Mukherjee",
role: "UI/UX Designer",
description: "Arjun designs intuitive and engaging interfaces for GDSC projects. He interned at Amazon, where he crafted user-centered designs for e-commerce platforms, emphasizing accessibility and visual appeal.",
avatar: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/michael-gouch.png",
socialLinks: [
{ icon: <FaGithub />, href: "#" },
{ icon: <FaInstagram />, href: "#" },
{ icon: <FaXTwitter />, href: "#" },
{ icon: <FaLinkedin />, href: "#" }
]
},
{
name: "Riya Das",
role: "Backend Developer & Data Engineer",
description: "Riya is skilled in backend development and data engineering, building robust systems for GDSC. As an intern at Netflix, she contributed to scalable data pipelines and streaming data analysis.",
avatar: "https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/sofia-mcguire.png",
socialLinks: [
{ icon: <FaGithub />, href: "#" },
{ icon: <FaInstagram />, href: "#" },
{ icon: <FaXTwitter />, href: "#" },
{ icon: <FaLinkedin />, href: "#" }
]
}
];


return (
<section className="bg-white dark:bg-gray-900">
<div className="py-8 px-4 mx-auto max-w-screen-xl lg:py-16 lg:px-6">
<div className="mx-auto max-w-screen-sm text-center mb-8 lg:mb-16">
<h2 className="mb-4 text-4xl tracking-tight font-extrabold text-gray-900 dark:text-white">Achievemnts</h2>
<p className="font-light text-gray-500 lg:mb-16 sm:text-xl dark:text-gray-400">The notable alumni of our past GDSC members who are now in MAANG companies</p>
</div>
<div className="grid gap-8 mb-6 lg:mb-16 md:grid-cols-2">
{teamMembers.map((member, index) => (
<div key={index} className="items-center bg-gray-50 rounded-lg shadow sm:flex dark:bg-gray-800 dark:border-gray-700">
<a href="#">
<img className="w-full h-full rounded-lg sm:rounded-none sm:rounded-l-lg" src={member.avatar} alt={`${member.name} Avatar`} />
</a>
<div className="p-5">
<h3 className="text-xl font-bold tracking-tight text-gray-900 dark:text-white">
<a href="#">{member.name}</a>
</h3>
<span className="text-gray-500 dark:text-gray-400">{member.role}</span>
<p className="mt-3 mb-4 font-light text-gray-500 dark:text-gray-400">{member.description}</p>
<ul className="flex space-x-4 sm:mt-0">
{member.socialLinks.map((social, socialIndex) => (
<li key={socialIndex}>
<a href={social.href} className="text-gray-500 hover:text-gray-900 dark:hover:text-white">
{social.icon}
</a>
</li>
))}
</ul>
</div>
</div>
))}
</div>
</div>
</section>
);
};

export default TeamMembers;
Loading

0 comments on commit 8febeda

Please sign in to comment.