Remove outdated elements (#170)

* swapped position of FAQ and recruitment form, and removed issues from blog being commented out

* added goose 5 to past geese, replaced text to show that goose 6 exists, need to update features and images, as well as getting goose 5 blurb

* changed FAQ link to a button for consistency and removed contact us hyperlink

* added team descriptions to website, adding circular images right now for profile of team leads

* polished for merge to main

---------

Co-authored-by: Jessica Y. <[email protected]>

Author: jackfogerty

src/components/NavBar/NavbarDesktop.tsx

@@ -9,6 +9,7 @@ import Team from '../../pages/Team';
 import Sponsors from '../../pages/Sponsors';
 // import Blog from '../../pages/Blog/Blog'; // Commented out March 21st 2025
 
+
 import Link from './Link';
 
 const NavbarContainer = styled.div`

src/components/OurTeam/OurTeam.tsx

@@ -39,6 +39,9 @@ const OurTeam: React.FC = () => (
       provide an effective mentorship experience for all new team members.
     </p>
     <TeamPhoto src={Team} alt="some team photo" />
+    <p>
+      Curious how you can help? Here is a list of our teams, what they do, as well as the team leads.
+    </p>
     <div className="centerDiv">
       <Button
         backgroundColor="yellow"

src/components/PastGeeseTimeline/hooks/geese-images.ts

@@ -4,6 +4,7 @@ import goose1 from '../../../static/img/pgimgs/goose1.png';
 import goose2 from '../../../static/img/pgimgs/goose2.png';
 import goose3 from '../../../static/img/pgimgs/goose3.png';
 import goose4 from '../../../static/img/pgimgs/goose4.png';
+import goose5 from '../../../static/img/pgimgs/goose5.png';
 
 interface Image {
   imgFile: string;
@@ -49,6 +50,12 @@ const imgs: Image[] = [
     desc:
       'By the fourth competition, we had realized that, despite wheeled propulsion posting record-breaking speeds in the SpaceX Hyperloop tube, there was no way of scaling those systems to transcontinental scale—wheels spinning at Mach 1 simply cannot last. We pivoted to designing a contactless linear induction motor from scratch, and simplified the rest of the pod to allow us to devote the majority of our time on the most difficult research.',
   },
+  {
+    imgFile: goose5,
+    name: 'Goose V',
+    desc:
+      'With Goose V, we continued to refine the wheel-less propulsion methods, by implementing a system to convert constant power into three-phase power to maximize thrust and speed.'
+  }
 ];
 
 const useGeeseImages: 

src/components/Sponsor/SponsorPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+ import React from 'react';
 import styled from 'styled-components';
 import Grid from '@material-ui/core/Grid';
 import SponsorComponent from './Sponsor';

src/components/SponsorsLanding/index.ts

@@ -1,2 +1,2 @@
 export * from './SponsorsLanding';
-export { default as Sponsors } from './SponsorsLanding';
+export { default as SponsorsLanding } from './SponsorsLanding';

src/components/TextWithImage/TextWithImage.tsx

@@ -7,6 +7,8 @@ export type MyProps = {
   text: string;
   link?: string;
   linkText?: string;
+  wideImage?: boolean;
+  largeImage?: boolean;
 };
 
 interface Props {
@@ -48,7 +50,7 @@ export class TextWithImage extends React.Component<Props> {
             </div>
           </div>
           <img
-            className="Img-TextWithImage"
+            className={`Img-TextWithImage ${entry.largeImage ? 'Img-TextWithImage--large' : ''} ${entry.wideImage ? 'Img-TextWithImage--wide' : ''}`}
             src={this.props.imgData[key]}
             alt="waterloop"
           ></img>

src/components/TextWithProfileImage/README.md

@@ -0,0 +1,33 @@
+# Text with Image Component ReadMe
+
+## Purpose:
+
+Displays text, along with an circular image beside it. Can be configured to also display a title and a button that redirects the user to a link. Used to display the team leads under the "teams" section.
+
+## How to create:
+
+Pass in **list of JSON data** into the prop parameter _**data**_, with each JSON entry containing the following parameters:
+
+```JSON
+{
+    "title": "The title to display (optional)",
+    "text": "The descriptive text (required)",
+    "link": "Link to redirect user to when they click the 'VIEW MORE' button (optional - button hidden when parameter not provided)"
+}
+```
+### IMPORTANT NOTE:
+
+Because of the way images are stored, **you also have to manually import the images into the parent component using TextWithImage** from the `static/img` folder and pass them into a `string[]` type variable in the same order as the corresponding JSON entries.
+
+
+Additionally, you can change the layout to only display text on the **left** or on the **right** by passing either value into the prop parameter _**textPos**_. By default, this is set to **alternate** the text position between left and right. 
+
+## Notes:
+
+1. Please don't use too many words in the title and description.
+
+2. Responsive design for (mobile) devices under **500px** width.
+
+3. Left and right border padding of the components is assumed to be done by the parent component for the mobile view.
+   
+4. If you have any questions, contact Jeff at [[email protected]]([email protected]) or [[email protected]]([email protected])

src/components/TextWithProfileImage/TextWithProfileImage.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { Button } from 'components/Button';
+import 'theme/styles.scss';
+
+export type MyCircularProps = {
+  title?: string;
+  text: string;
+  link?: string;
+  linkText?: string;
+};
+
+interface Props {
+  data: MyCircularProps[];
+  imgData: string[];
+  textPos?: string;
+}
+
+export class TextWithProfileImage extends React.Component<Props> {
+  renderChildren = (data: MyCircularProps[]): React.ReactElement[] => {
+    let isRightLeft = true; // Alternate between right-left and left-right layout.
+    let key = -1;
+    return data.map((entry: MyCircularProps) => {
+      isRightLeft = !isRightLeft;
+      key += 1;
+
+      // Determine if image should be displayed first or after text:
+      let posClass = '';
+      switch (this.props.textPos) {
+        case 'left':
+          posClass = 'left-right-variant';
+          break;
+        case 'right':
+          posClass = 'right-left-variant';
+          break;
+
+        default:
+          // The "alternate" case
+          posClass = isRightLeft ? 'right-left-variant' : 'left-right-variant';
+      }
+
+      return (
+        <div key={key} className={`Block-TextWithProfileImage ${posClass}`}>
+          <div className="TextBlock-TextWithProfileImage">
+            {entry.title !== undefined ? <h3>{entry.title}</h3> : <b></b>}
+            <p>{entry.text}</p>
+            <div className="ButtonBlock-TextWithProfileImage">
+              {this.renderButton(entry.link, entry.linkText)}
+            </div>
+          </div>
+          <img
+            className="Img-TextWithProfileImage"
+            src={this.props.imgData[key]}
+            alt="waterloop"
+          ></img>
+          <div className="text-w-profile-image-btn-mobile">
+            {this.renderButton(entry.link, entry.linkText)}
+          </div>
+        </div>
+      );
+    });
+  };
+
+  renderButton = (
+    link: string | undefined,
+    linkText: string | undefined,
+  ): React.ReactElement => {
+    if (link !== undefined && linkText !== undefined) {
+      return (
+        <Button
+          backgroundColor="yellow"
+          textColor="black"
+          text={linkText}
+          onClick={(): Window | null => window.open(link, '_self')}
+        />
+      );
+    }
+    return <></>;
+  };
+
+  render() {
+    return <div>{this.renderChildren(this.props.data)}</div>;
+  }
+}

src/components/TextWithProfileImage/index.ts

@@ -0,0 +1 @@
+export * from './TextWithProfileImage'; // This will take all the named exports

src/components/index.ts

@@ -13,6 +13,8 @@ export * from './SimpleFeatures';
 export * from './Hero';
 export * from './TeamsDisplayer';
 export * from './TextWithImage';
+export * from './TextWithProfileImage';
+export * from './TextWithProfileImage';
 export * from './ColumnBlock';
 export * from './Postings';
 export * from './NewsletterSignUpForm';