Merge pull request #238 from Shariq2003/AddedSuccessStories

Added Success Stories | Issue #186
GDSC-RCCIIT · Oct 27, 2024 · c5af14f · c5af14f
2 parents fd71088 + 14e9de6
commit c5af14f
Show file tree

Hide file tree

Showing 8 changed files with 221 additions and 7 deletions.
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "react-resizable-panels": "^2.1.4",
     "react-toastify": "^10.0.6",
     "sonner": "^1.5.0",
+    "styled-components": "^6.1.13",
     "tailwind-merge": "^2.5.3",
     "tailwindcss-animate": "^1.0.7",
     "vaul": "^1.0.0"

diff --git a/public/Mentor 1.jpeg b/public/Mentor 1.jpeg
diff --git a/public/Mentor 2.jpeg b/public/Mentor 2.jpeg
diff --git a/public/Mentor 3.png b/public/Mentor 3.png
diff --git a/src/app/(pages)/Stories-Achievements/achievements.js b/src/app/(pages)/Stories-Achievements/achievements.js
@@ -0,0 +1,32 @@
+const achievements = [
+    {
+        name: 'John Doe',
+        job: 'Software Engineer at Google',
+        project: 'Developed an AI-based chatbot',
+        testimonial: 'GDSC gave me the platform to grow and showcase my skills.',
+        imageUrl: '/Mentor 1.jpeg',
+    },
+    {
+        name: 'Jane Smith',
+        job: 'Product Manager at Microsoft',
+        project: 'Led a successful product launch',
+        testimonial: 'I gained hands-on experience and met incredible people.',
+        imageUrl: '/Mentor 2.jpeg',
+    },
+    {
+        name: 'Alex Lee',
+        job: 'Data Scientist at Amazon',
+        project: 'Created a recommendation engine for e-commerce',
+        testimonial: 'Being part of GDSC taught me valuable technical and collaboration skills.',
+        imageUrl: '/Mentor 3.png',
+    },
+    {
+        name: 'Lisa Wong',
+        job: 'Frontend Developer at Adobe',
+        project: 'Built a responsive UI for a flagship product',
+        testimonial: 'GDSC provided me with a platform to learn and connect with amazing tech enthusiasts.',
+        imageUrl: '/Mentor 1.jpeg',
+    },
+];
+
+export default achievements;
diff --git a/src/app/(pages)/Stories-Achievements/mentors.js b/src/app/(pages)/Stories-Achievements/mentors.js
@@ -0,0 +1,28 @@
+const mentors = [
+    {
+        name: 'Mark Johnson',
+        position: 'Senior Developer at Meta',
+        bio: 'I am excited to mentor students interested in software engineering and AI.',
+        imageUrl: '/Mentor 3.png',
+    },
+    {
+        name: 'Emily Davis',
+        position: 'UX Designer at Spotify',
+        bio: 'Happy to guide GDSC members in design thinking and user research.',
+        imageUrl: '/Mentor 1.jpeg',
+    },
+    {
+        name: 'Sarah Lee',
+        position: 'Data Scientist at Google',
+        bio: 'Passionate about helping others understand data analysis and machine learning.',
+        imageUrl: '/Mentor 2.jpeg',
+    },
+    {
+        name: 'James Smith',
+        position: 'Frontend Engineer at Amazon',
+        bio: 'Eager to share my knowledge in React and modern web development practices.',
+        imageUrl: '/Mentor 3.png',
+    },
+];
+
+export default mentors;
diff --git a/src/app/(pages)/Stories-Achievements/page.jsx b/src/app/(pages)/Stories-Achievements/page.jsx
@@ -0,0 +1,137 @@
+"use client";
+import React from 'react';
+import styled from 'styled-components';
+import achievements from "./achievements"
+import mentors from "./mentors"
+
+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`
+  background-color: #fff;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 20px;
+  width: 100%;
+  max-width: 280px;
+  transition: transform 0.3s;
+  text-align: center;
+  &: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;
+`;
+
+const ReadMoreButton = styled.button`
+  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 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 Mentorship = () => {
+    return (
+        <Container>
+            <SectionTitle>Stories from the Community</SectionTitle>
+            <Subtitle>Get inspired by the clever ways people are using Google technology.</Subtitle>
+            <CardGrid>
+                {achievements.map((achieve, index) => (
+                    <Card key={index}>
+                        <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>
+                        <ReadMoreButton>Read now</ReadMoreButton>
+                    </Card>
+                ))}
+            </CardGrid>
+
+            <SectionTitle style={{marginTop:"50px"}}>Meet the Mentors</SectionTitle>
+            <Subtitle>Our mentors are here to guide GDSC members in various fields.</Subtitle>
+            <CardGrid>
+                {mentors.map((mentor, index) => (
+                    <Card key={index}>
+                        <CardImage src={mentor.imageUrl} alt={`${mentor.name} photo`} />
+                        <CardTitle>{mentor.name}</CardTitle>
+                        <CardContent><strong>Position:</strong> {mentor.position}</CardContent>
+                        <CardContent>{mentor.bio}</CardContent>
+                        <ReadMoreButton>Read now</ReadMoreButton>
+                    </Card>
+                ))}
+            </CardGrid>
+
+            <SectionTitle style={{ marginTop: "50px" }}>Connect with GDSC Alumni</SectionTitle>
+            <Subtitle>Our GDSC members can connect with alumni for advice and career guidance.</Subtitle>
+            <ConnectButton>Connect with Alumni</ConnectButton>
+        </Container>
+    );
+};
+
+export default Mentorship;
diff --git a/src/components/Global/Header.jsx b/src/components/Global/Header.jsx
@@ -208,13 +208,29 @@ export function NavigationMenu() {
                 </Link>
               </NavigationMenuItem>
 
-              <NavigationMenuItem>
-                <Link href="/careers" legacyBehavior passHref>
-                  <NavigationMenuLink className={navigationMenuTriggerStyle()}>
-                    Careers
-                  </NavigationMenuLink>
-                </Link>
-              </NavigationMenuItem>
+              <DropdownMenu className="mr-4">
+                <DropdownMenuTrigger asChild>
+                  <Button variant="outline">Career And Support</Button>
+                </DropdownMenuTrigger>
+                <DropdownMenuContent className="w-56">
+                  <DropdownMenuGroup>
+                    <DropdownMenuItem asChild>
+                      <Link href="/careers" legacyBehavior passHref>
+                        <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                          Career
+                        </NavigationMenuLink>
+                      </Link>
+                    </DropdownMenuItem>
+                    <DropdownMenuItem asChild>
+                      <Link href="/Stories-Achievements" legacyBehavior passHref>
+                        <NavigationMenuLink className={navigationMenuTriggerStyle()}>
+                          Stories and Achievements
+                        </NavigationMenuLink>
+                      </Link>
+                    </DropdownMenuItem>
+                  </DropdownMenuGroup>
+                </DropdownMenuContent>
+              </DropdownMenu>
               <NavigationMenuItem>
                 <Link href="/GeminiAI" legacyBehavior passHref>
                   <NavigationMenuLink className={navigationMenuTriggerStyle()}>