some styling changes to the cards and navbar

Author: Palash Patel

src/components/Cards.jsx

@@ -1,3 +1,4 @@
+// Updated Cards Component
 import React from "react";
 import { Card, Row, Col, Container } from "react-bootstrap";
 import Image from "next/image";
@@ -6,27 +7,42 @@ const Cards = ({ members }) => {
   return (
     <Container className="py-5">
       <h2 className="text-center mb-5" style={headingStyle}>
-        Meet Our Team
+        MEET OUR TEAM!
       </h2>
       <Row className="g-4 justify-content-center">
         {members.map((member, index) => (
-          <Col key={index} xs={12} sm={6} md={4} lg={3} className="d-flex justify-content-center">
-            <Card className="h-100 shadow-sm border-0" style={cardStyle}>
-              <Card.Body className="text-center">
-                <div className="d-flex justify-content-center mb-3">
+          <Col
+            key={index}
+            xs={12}
+            sm={6}
+            md={4}
+            lg={3}
+            className="d-flex justify-content-center"
+          >
+            <Card
+              className="h-100 shadow-lg border-0 card-hover"
+              style={cardStyle}
+            >
+              <Card.Body className="">
+                <div className="d-flex mb-3">
                   <Image
                     src={member.imageSrc}
                     alt={`${member.name} profile`}
-                    width={100}
-                    height={100}
-                    className="rounded-circle"
+                    width={250}
+                    height={250}
+                    //border-radius={15}
+                    //className="rounded-circle"
+                    style={{borderRadius:"15px"}}
                   />
                 </div>
                 <Card.Title style={cardTitleStyle}>{member.name}</Card.Title>
                 <Card.Text className="text-muted" style={cardTextStyle}>
-                  {member.description || "Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
+                  {member.description ||
+                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit."}
                 </Card.Text>
-                <p className="text-primary fw-bold">{member.role || "Team Member"}</p>
+                <p className="text-primary fw-bold">
+                  {member.role || "Team Member"}
+                </p>
                 <div>
                   {member.github && (
                     <a
@@ -77,16 +93,19 @@ const headingStyle = {
 
 const cardStyle = {
   borderRadius: "15px",
+  background: "linear-gradient(145deg, #ffffff, #e6e6e6)",
+  transition: "all 0.3s ease-in-out",
 };
 
 const cardTitleStyle = {
   fontSize: "1.25rem",
   fontWeight: "bold",
+  color: "#6A8EAE",
 };
 
 const cardTextStyle = {
   fontSize: "0.9rem",
   lineHeight: "1.5",
 };
 
-export default Cards;
+export default Cards;

src/components/Footer.tsx

@@ -2,12 +2,23 @@ import { HeartFill } from "react-bootstrap-icons";
 
 const Footer: React.FC = () => {
   return (
-    <footer>
+    <footer className="footer-gradient py-4 text-center">
       <hr className="mt-5 mb-4" />
       <p className="text-muted">
-        Built with <a href="https://getbootstrap.com/">Bootstrap 5</a>, <a href="https://react.dev">React</a>, <a href="https://react-bootstrap.github.io/">React Bootstrap</a>, <a href="https://nextjs.org/">Next.js</a>, and <HeartFill title="heart icon" aria-label="love" color="red"/> in Atlanta, GA.
+        Built with <a href="https://getbootstrap.com/">Bootstrap 5</a>, <a href="https://react.dev">React</a>, <a href="https://react-bootstrap.github.io/">React Bootstrap</a>, <a href="https://nextjs.org/">Next.js</a>, and <HeartFill title="heart icon" aria-label="love" color="red" /> in Atlanta, GA.
         Created and open sourced by the CS 2340 project team. Licensed MIT.
       </p>
+      <div className="social-icons mt-3">
+        <a href="https://github.com/" target="_blank" rel="noopener noreferrer" className="mx-2">
+          <i className="bi bi-github text-light"></i>
+        </a>
+        <a href="https://linkedin.com/" target="_blank" rel="noopener noreferrer" className="mx-2">
+          <i className="bi bi-linkedin text-light"></i>
+        </a>
+        <a href="https://twitter.com/" target="_blank" rel="noopener noreferrer" className="mx-2">
+          <i className="bi bi-twitter text-light"></i>
+        </a>
+      </div>
     </footer>
   );
 };

src/components/Header.tsx

@@ -3,7 +3,7 @@ import { Navbar, Nav, Container } from "react-bootstrap";
 
 const Header: React.FC = () => {
   return (
-    <Navbar expand="lg" className="px-3" style={navbarStyle}>
+    <Navbar expand="lg" className="px-3 sticky-header" style={navbarStyle}>
       <Container>
         {/* Brand / Logo */}
         <Navbar.Brand>
@@ -49,9 +49,11 @@ const Header: React.FC = () => {
 
 // Inline Styles
 const navbarStyle: React.CSSProperties = {
-  backgroundColor: "#222",
+  backgroundColor: "rgba(34, 34, 34, 0.9)",
+  backdropFilter: "blur(10px)",
   padding: "1rem",
   boxShadow: "0px 4px 6px rgba(0, 0, 0, 0.1)",
+  zIndex: 10,
 };
 
 const githubLinkStyle: React.CSSProperties = {
@@ -62,6 +64,7 @@ const githubLinkStyle: React.CSSProperties = {
   transition: "all 0.3s ease-in-out",
   color: "#6A8EAE",
   textDecoration: "none",
+  cursor: "pointer",
 };
 
 export default Header;

src/components/ProjectsShowcaseCard.tsx

@@ -19,27 +19,46 @@ const ProjectsShowcaseCard: React.FC<ProjectsShowcaseCardProps> = ({
   learnMoreLink,
 }) => {
   return (
-    <Card className="mx-auto" style={{ maxWidth: "500px" }}>
+    <Card className="mx-auto project-card" style={cardStyle}>
       <Card.Img
         variant="top"
         src={imageSrc}
         alt={imageAlt}
         style={{ objectFit: "cover", width: "100%", height: "auto" }}
+        className="project-card-img"
       />
-      <Card.Body>
-        {title && <Card.Title>{title}</Card.Title>}
-        {description && <Card.Text>{description}</Card.Text>}
+      <Card.Body className="text-center">
+        {title && <Card.Title className="project-title">{title}</Card.Title>}
+        {description && <Card.Text className="project-description">{description}</Card.Text>}
         {projectLink && (
-          <Card.Link className="link-underline-primary" href={projectLink}>
+          <Card.Link
+            className="link-underline-primary project-link"
+            href={projectLink}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
             View Project
           </Card.Link>
         )}
         {learnMoreLink && (
-          <Card.Link href={learnMoreLink}>View Source</Card.Link>
+          <Card.Link
+            href={learnMoreLink}
+            className="project-link"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View Source
+          </Card.Link>
         )}
       </Card.Body>
     </Card>
   );
 };
 
+const cardStyle: React.CSSProperties = {
+  borderRadius: "15px",
+  boxShadow: "0px 4px 8px rgba(0, 0, 0, 0.1)",
+  transition: "transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out",
+};
+
 export default ProjectsShowcaseCard;

src/pages/_document.tsx

@@ -2,12 +2,14 @@ import { Html, Head, Main, NextScript } from "next/document";
 
 export default function Document() {
   return (
+
     <Html lang="en">
       <Head />
       <body>
         <Main />
         <NextScript />
       </body>
     </Html>
+
   );
 }

src/pages/index.tsx

@@ -8,37 +8,40 @@ import Cards from "@/components/Cards"
 export default function Home() {
 
   const members = [
+    {
+      name: "Palash Patel",
+      imageSrc: "/cs-2340-team-website/avatars/palashpatel.jpg",
+      role: "Scrum Master",
+      description: "Hello! My name is Palash Patel. I am a 1st year " +
+      "computer science student and have taken the role of scrum master " +
+      "and front end developer for this project. ",
+      linkedin: "palash-patel-1b001a210",
+    },
     {
       name: "Aryamann Sheoran",
       imageSrc: "/cs-2340-team-website/avatars/aryamannsheoran.png",
-      role: "Creative Leader",
+      role: "Product Owner",
       github: "aryamannsheoran",
       linkedin: "aryamannsheoran",
     },
     {
       name: "James Kerrane",
       imageSrc: "/cs-2340-team-website/avatars/jameskerrane.jpg",
-      role: "Sales Manager",
+      role: "Developer",
       github: "thatrobotdev",
       linkedin: "jameskerrane",
       twitter: "jameskerrane",
     },
     {
       name: "Michael Wittland Jr.",
       imageSrc: "https://placehold.co/100",
-      role: "Web Developer",
+      role: "Developer",
       linkedin: "michael-wittland-323081295/",
     },
-    {
-      name: "Palash Patel",
-      imageSrc: "/cs-2340-team-website/avatars/palashpatel.jpg",
-      role: "Web Designer",
-      linkedin: "palash-patel-1b001a210",
-    },
     {
       name: "Shane Hanley",
       imageSrc: "https://placehold.co/100",
-      role: "Web Designer",
+      role: "Developer",
     },
     {
       name: "Emmanuel Munoz",

src/styles/styles.scss

@@ -13,4 +13,8 @@ $theme-colors: map-merge($theme-colors, $mycolors);
 
 body {
   padding: 1.5rem;
+}
+
+.nav-link:hover {
+  color: #6A8EAE !important;
 }