styling after the video upload

Author: Palash Patel

src/components/ProjectsShowcase.tsx

@@ -52,14 +52,15 @@ function ProjectsShowcase() {
         ____________________
       </h1>
       <Container className="py-4">
-        <Row gap={4}>
+        <Row gap={40}>
           {/* Left Column: Project Card */}
           <Col xs={12} md={8} lg={6}>
             <div
               style={cardHoverStyle}
               onMouseEnter={cardHoverEffect}
               onMouseLeave={cardHoverEffectOut}
             >
+
               <ProjectsShowcaseCard
                 imageSrc={"/cs-2340-team-website/moviesstore.png"}
                 imageAlt={"Screenshot of moviesstore project."}
@@ -69,9 +70,9 @@ function ProjectsShowcase() {
                 }
                 projectLink={"https://github.com/thatrobotdev/moviesstore"}
                 processLink={"https://thatrobotdev.pythonanywhere.com/"}
+                videoLink={"https://drive.google.com/file/d/1icCEcxxs61XWzocsz1eZnpGsZGa1Yd-f/preview"}
               />
             </div>
-
             <div
               style={{
                 border: "solid 2px #aaa",
@@ -81,8 +82,15 @@ function ProjectsShowcase() {
               onMouseEnter={cardHoverEffect}
               onMouseLeave={cardHoverEffectOut}
             >
-              <h2>Demo</h2>
-              <iframe src="https://drive.google.com/file/d/1icCEcxxs61XWzocsz1eZnpGsZGa1Yd-f/preview"></iframe>
+              
+              <u
+                  style={{ fontSize: "30px", paddingBottom: "30px"}}
+                  className="colored-underline fw-bold"
+                >
+                  <h3 className="black-text">DEMO</h3>
+                </u>
+                <div style={{padding: "10px"}}></div>
+              <iframe style={{width:"100%", height: "400px"}} src="https://drive.google.com/file/d/1icCEcxxs61XWzocsz1eZnpGsZGa1Yd-f/preview"></iframe>
             </div>
           </Col>
 

src/components/ProjectsShowcaseCard.tsx

@@ -7,6 +7,7 @@ interface ProjectsShowcaseCardProps {
   description?: string;
   projectLink?: string;
   processLink?: string;
+  videoLink?: string;
 }
 
 const ProjectsShowcaseCard: React.FC<ProjectsShowcaseCardProps> = ({
@@ -16,9 +17,10 @@ const ProjectsShowcaseCard: React.FC<ProjectsShowcaseCardProps> = ({
   description,
   projectLink,
   processLink,
+  videoLink,
 }) => {
   return (
-    <Card className="mx-auto project-card " style={cardStyle}>
+    <Card className="mx-auto project-card" style={cardStyle}>
       <Card.Img
         variant="top"
         src={imageSrc}
@@ -27,7 +29,7 @@ const ProjectsShowcaseCard: React.FC<ProjectsShowcaseCardProps> = ({
         className="project-card-img"
       />
       <Card.Body className="text-center">
-        {title && <u style={{fontSize:"30px"}} className="colored-underline fw-bold"><Card.Title className="black-text fw-bold fs-3">{title}</Card.Title></u>}
+        {title && <u style={{fontSize:"30px"}} className=" fw-bold"><Card.Title className="black-text fw-bold fs-3">{title}</Card.Title></u>}
         {description && <Card.Text className="project-description">{description}</Card.Text>}
         {projectLink && (
           <Card.Link
@@ -50,6 +52,17 @@ const ProjectsShowcaseCard: React.FC<ProjectsShowcaseCardProps> = ({
             View GitHub
           </Card.Link>
         )}
+
+        {videoLink && (
+          <Card.Link
+            href={videoLink}
+            className="text-link-style"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            View Video
+          </Card.Link>
+        )}
       </Card.Body>
     </Card>
   );