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(about-section): fixes the alignments and content of the about page #54

Merged
merged 2 commits into from
Feb 11, 2025
Merged

fix(about-section): fixes the alignments and content of the about page #54

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5597492
fix(about-section): fixes the alignments and content of the about page
Navindu-Ashen Feb 11, 2025
6f70f6d
fix(about-section-links): adds social media links
Navindu-Ashen Feb 11, 2025
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: 44 additions & 30 deletions src/app/about-us/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import CSLogo from "@/assets/ieee-cs-colored-black.png";
import SBLogo from "@/assets/ieee-sb-new-colored.png";
import JoinUsImage from "@/assets/join-us.png";
import WIELogo from "@/assets/wie-colored.png";
import AboutSection from "@/components/about-us/about-section";
import { Button } from "@/components/ui/button";
import Image from "next/image";

export default function About() {
return (
Expand All @@ -15,25 +18,19 @@ export default function About() {
socialLinks={[
{
platform: "facebook",
link: "https://facebook.com/ieeesbNSBM",
link: "https://www.facebook.com/ieeensbm",
},
{
platform: "linkedin",
link: "https://linkedin.com/company/ieee-sb-nsbm",
link: "https://www.linkedin.com/company/ieeesbnsbm/",
},
{
platform: "instagram",
link: "https://instagram.com/ieeesbnsbm",
link: "https://www.instagram.com/ieee_nsbm",
},
]}
description={`IEEE Computer Society (sometimes abbreviated as the Computer Society or CS) is a professional
society of the Institute of Electrical and Electronics Engineers (IEEE). Its purpose and scope are "to advance the theory,
practice, and application of computer and information processing science and technology" and the "professional standing of its members".
The CS is the largest of 39 technical societies organized under the IEEE Technical Activities Board.<br><br>
The IEEE Computer Society sponsors workshops and conferences, publishes a variety of peer-reviewed literature,
operates technical committees, and develops IEEE computing standards. It supports more than 200 chapters worldwide and participates
in educational activities at all levels of the profession, including distance learning, accreditation of higher education programs
in computer science, and professional certification in software engineering.`}
description={`stablished in 2015, the IEEE Student Branch at NSBM Green University is part of the global IEEE community, bringing together members from the Faculty of Computing and the Faculty of Engineering of NSBM. This branch offers students the chance to enhance their knowledge and skills in electrical engineering, electronics, computing, and related fields, all while encouraging personal and professional growth.
As part of IEEE’s extensive network, the IEEE Student Branch of NSBM connects students to valuable resources, including workshops, conferences, and networking opportunities. We aim to support students in developing their leadership skills, advancing technology, and making meaningful contributions to their communities.`}
/>
</div>
<div className="w-full">
Expand All @@ -43,24 +40,23 @@ export default function About() {
firstTitleColor="#702f8a"
subtitle="WOMEN IN ENGINEERING AFFINITY GROUP OF NSBM"
imageSrc={WIELogo}
imagePosition="left"
socialLinks={[
{
platform: "facebook",
link: "https://facebook.com/ieeesbNSBM",
link: "https://www.facebook.com/nsbmwie",
},
{
platform: "linkedin",
link: "https://linkedin.com/company/ieee-sb-nsbm",
link: "https://www.linkedin.com/company/ieee-women-in-engineering-nsbm/",
},
{
platform: "instagram",
link: "https://instagram.com/ieeesbnsbm",
link: "https://www.instagram.com/ieeewie_nsbm",
},
]}
description={`IEEE Women in Engineering (WIE) is a global platform of IEEE members and volunteers dedicated to advancing
women engineers and scientists and empowering young girls throughout the world to pursue academic interests in engineering
and scientific professions. Women in Engineering Affinity Group of NSBM (WIE NSBM) is one of the student branch chapters
of the global network which uplifts the women in leadership roles in industry as well as international platforms.`}
description={`IEEE Women in Engineering (WIE) is a global platform of IEEE members and volunteers dedicated to advancing women engineers and scientists and empowering young girls throughout the world to pursue academic interests in engineering and scientific professions.
Women in Engineering Affinity Group of NSBM (WIE NSBM) is one of the student branch chapters of the global network which uplifts the women in leadership roles in industry as well as international platforms.`}
/>
</div>
<div className="w-full">
Expand All @@ -73,28 +69,46 @@ export default function About() {
socialLinks={[
{
platform: "facebook",
link: "https://facebook.com/ieeesbNSBM",
link: "https://www.facebook.com/ieeecsnsbm",
},
{
platform: "linkedin",
link: "https://linkedin.com/company/ieee-sb-nsbm",
link: "https://www.linkedin.com/company/ieee-computer-society-nsbm/",
},
{
platform: "instagram",
link: "https://instagram.com/ieeesbnsbm",
link: "https://www.instagram.com/ieeecs_nsbm",
},
]}
description={`IEEE Computer Society (sometimes abbreviated as the Computer Society or CS) is a professional society of the Institute
of Electrical and Electronics Engineers (IEEE). Its purpose and scope are "to advance the theory, practice, and application of computer
and information processing science and technology" and the "professional standing of its members". The CS is the largest of 39 technical
societies organized under the IEEE Technical Activities Board.
The IEEE Computer Society sponsors workshops and conferences,
publishes a variety of peer-reviewed literature, operates technical committees, and develops IEEE computing standards.
It supports more than 200 chapters worldwide and participates in educational activities at all levels of the profession,
including distance learning, accreditation of higher education programs in computer science, and professional certification in software
engineering.`}
description={`IEEE Computer Society (often abbreviated as the Computer Society or CS) is a professional society of the Institute of Electrical and Electronics Engineers (IEEE). Its purpose is "to advance the theory, practice, and application of computer and information processing science and technology" and the "professional standing of its members". The CS is the largest of 39 technical societies organised under the IEEE Technical Activities Board.
The IEEE Computer Society sponsors workshops and conferences, publishes a variety of peer-reviewed literature, operates technical committees, and develops IEEE computing standards. It supports more than 200 chapters worldwide and participates in educational activities at all levels of the profession, including distance learning, accreditation of higher education programs in computer science, and professional certification in software engineering.`}
/>
</div>
<div className="flex m-auto max-w-[1170px] lg:flex-row flex-col justify-between w-full px-4 lg:px-0 gap-10">
<Image
width={600}
height={123}
src={JoinUsImage}
alt="ieee-footer-logo"
className="min-h-[300] flex m-auto"
/>

<div className="flex flex-col m-auto space-y-2 max-w-[520px]">
<h2 className="font-bold md:text-[2.653rem] text-[2.253rem] text-opacity-85 ">
SHAPE THE FUTURE WITH US
</h2>

<p className="text-lg text-opacity-85 ">
Creating isn’t just what we do; it’s how we think. We’re a community
of creators, problem-solvers, and innovators, all eager to explore
new ideas together. Ready to make your mark with us?
</p>

<Button className="mt-4 px-12 py-2 bg-blue-600 text-white bg-[#00629b] rounded hover:bg-blue-700 transition-colors ">
Join us
</Button>
</div>
</div>
</div>
);
}
70 changes: 44 additions & 26 deletions src/components/about-us/about-section.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,9 @@ interface AboutSectionProps {
description: string;
imageSrc: StaticImageData;
firstTitleColor?: string;
secondTitleColor?: string;
socialLinks: SocialLink[];
imagePosition?: "left" | "right";
}

function AboutSection({
Expand All @@ -25,7 +27,9 @@ function AboutSection({
description,
imageSrc,
firstTitleColor = "#00629b",
secondTitleColor = "#000000",
socialLinks,
imagePosition = "right",
}: AboutSectionProps) {
const getIcon = (platform: string) => {
switch (platform) {
Expand All @@ -42,42 +46,56 @@ function AboutSection({

return (
<div className="flex flex-col m-auto w-full max-w-[1170px] px-4 mb-8 md:px-4 lg:px-0">
<p className="text-6xl mb-4 w-full text-center font-bold">
<span style={{ color: firstTitleColor }}>{firstTitle}</span>{" "}
<span style={{ color: secondTitleColor }}>{secondTitle}</span>
</p>
<p className="text-2xl text-center mb-6 font-medium text-gray-600x">
{subtitle}
</p>
<div className="flex flex-col m-auto w-full md:flex-row">
<div className="md:w-3/4 md:pr-8">
<div className="flex flex-wrap gap-2 w-full">
<p
className="text-6xl w-full text-center font-bold md:text-left"
style={{ color: firstTitleColor }}
>
{firstTitle}
</p>
<p className="text-6xl w-full mb-2 text-center font-bold md:text-left">
{secondTitle}
</p>
{imagePosition === "left" && (
<div className="order-last md:order-first relative w-full md:w-1/4 min-h-[200px] md:mr-4">
<Image
src={imageSrc}
alt="about section image"
fill
priority
className="object-contain"
/>
</div>
<p className="text-2xl text-center mb-6 font-medium text-gray-600 md:text-left">
{subtitle}
</p>
<p className="text-lg font-normal text-center md:text-left">
)}
<div className="md:w-3/4">
<p className="text-lg font-normal text-center md:text-justify">
{description}
</p>
</div>
<div className="relative w-full md:w-1/4 min-h-[200px]">
<Image
src={imageSrc}
alt="about section image"
fill
priority
className="object-contain"
/>
</div>
{imagePosition === "right" && (
<div className="order-last relative w-full md:w-1/4 min-h-[200px] md:ml-4">
<Image
src={imageSrc}
alt="about section image"
fill
priority
className="object-contain"
/>
</div>
)}
</div>
<div className="flex p-2 my-4 justify-center text-[20px] gap-2">
<div
className={`flex my-4 text-[20px] gap-2 ${
imagePosition === "left"
? "justify-center md:justify-end"
: "justify-center md:justify-start"
}`}
>
{socialLinks.map((link, index) => (
<Link
key={index}
href={link.link}
className="w-10 h-10 flex items-center justify-center rounded-full bg-opacity-0 hover:bg-opacity-10 bg-[#000000] duration-500"
target="_blank"
rel="noopener noreferrer"
className="w-10 h-10 flex items-center justify-center rounded-full bg-opacity-0 hover:bg-opacity-10 bg-[#00629b] text-[#00629b] duration-500"
>
{getIcon(link.platform)}
</Link>
Expand Down
2 changes: 1 addition & 1 deletion src/components/index/fellowship.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ function fellowship() {
</div>
</div>
</div>
<div className="flex md:flex-row flex-col justify-center gap-10 ">
<div className="flex md:flex-row flex-col justify-center gap-10">
<Image
width={600}
height={123}
Expand Down