Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix vision cards #52

Merged
merged 4 commits into from
Jul 30, 2024
Merged

fix vision cards #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7f3948f
fix vision cards
Efrain-Morales Jul 29, 2024
8f392db
fix card spacing
Efrain-Morales Jul 29, 2024
ae00022
fixed social media icons at top of About Us Page
Efrain-Morales Jul 29, 2024
6b42f0c
formatting
Efrain-Morales Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
74 changes: 28 additions & 46 deletions src/components/AboutFutureVisionSections.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,56 +6,38 @@ import {
} from "@ionic/react";
import React from "react";

const headers = [
"COLLABORATIVE CREATION",
"COMMUNITY ENGAGEMENT",
"NATIONAL LEADERSHIP",
];
const content = [
"Create opportunities for trainees in all disciplines to collaborate and develop content for the website and social media.",
"Design training toolkits to be used at schools and community-based organizations to engage with youth outside of the clinical setting and in the community.",
"BMC Department of Psychiatry: National go-to resource for mental health in diverse teens.",
];

export default function AboutFutureVisionSections() {
return (
<div className="future-vision-container">
<div className="future-vision-header">
<div className="flex flex-col items-center justify-center py-24 pb-36 bg-[#FFE2E2] text-center text-base text-[#101066]">
<div className="text-5xl font-bold mb-8">
<h1>FUTURE VISION</h1>
</div>
<div className="future-vision-cards">
<IonCard className="future-vision-card">
<IonCardHeader>
<IonCardTitle>COLLABORATIVE CREATION</IonCardTitle>
</IonCardHeader>
<IonCardContent>
<ul>
<li>
Opportunities for trainees in all disciplines to collaborate
</li>
<li>Create content for website and social media</li>
</ul>
</IonCardContent>
</IonCard>
<IonCard className="future-vision-card">
<IonCardHeader>
<IonCardTitle>COMMUNITY ENGAGEMENT</IonCardTitle>
</IonCardHeader>
<IonCardContent>
<ul>
<li>
Design training toolkits to be used at schools and
community-based organizations
</li>
<li>
Engage with youth outside of the clinical setting and in the
community
</li>
</ul>
</IonCardContent>
</IonCard>
<IonCard className="future-vision-card">
<IonCardHeader>
<IonCardTitle>NATIONAL LEADERSHIP</IonCardTitle>
</IonCardHeader>
<IonCardContent>
<ul>
<li>
BMC Department of Psychiatry: National "go-to" resource for
mental health in diverse teens
</li>
</ul>
</IonCardContent>
</IonCard>
<div className="container px-0 md:px-8 mx-auto flex flex-col gap-1 xl:gap-4 w-3/4 lg:w-full lg:flex-row">
{headers.map((header, index) => {
return (
<IonCard className="flex-1 bg-white text-[#100f66] rounded-lg shadow-md pl-0 py-16">
<IonCardHeader className="text-left text-center">
<IonCardTitle className="text-[#100f66] font-bold text-3xl">
{header}
</IonCardTitle>
</IonCardHeader>
<IonCardContent className="text-left text-xl text-center">
{content[index]}
</IonCardContent>
</IonCard>
);
})}
</div>
</div>
);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ const Footer = () => {
<>
<div
id="footer"
className="flex flex-col items-center"
className="flex flex-col items-center overflow-hidden"
style={{ background: bgColor }}
>
<IonAlert
Expand Down
17 changes: 6 additions & 11 deletions src/pages/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,17 +10,12 @@ import Footer from "../components/Footer";

const About: React.FC = () => {
return (
<IonPage>
<IonContent>
<div className="pt-36 md:pt-12 mb-48">
<PaddedHeaderText />
<AboutMissionSection />
<AboutTeamProfiles />
<AboutFutureVisionSections />
</div>
<Footer />
</IonContent>
</IonPage>
<div className="pt-36 md:pt-12 mb-48">
<PaddedHeaderText />
<AboutMissionSection />
<AboutTeamProfiles />
<AboutFutureVisionSections />
</div>
);
};

Expand Down
Loading