Skip to content

What is NEFAC Home Page Section #37

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.

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

Merged
merged 3 commits into from
Apr 15, 2025
Merged

What is NEFAC Home Page Section #37

merged 3 commits into from
Apr 15, 2025

Conversation

piersolh
Copy link
Collaborator

@piersolh piersolh commented Apr 8, 2025

Closes #33
📝 Description

Created the "What is NEFAC?" section based on the figma design.

Briefly list the changes made to the code:

  1. Created overall structure for the "what is nefac" section
  2. Embedded the video in the figma
  3. Created a nefac flip card component for each of the subsections that change when clicked based on the figma design

✔️ Verification
Screenshot 2025-04-08 at 3 53 45 PM
Screenshot 2025-04-08 at 3 54 08 PM
Visually verified the component matches the figma. I clicked on the video and it loaded, clicked on the cards to make sure they were flipping correctly.
🏕️ (Optional) Future Work / Notes
The sublinks on the back of the cards all link back to the home page. I was not sure what to link to for the card sub links.

@maxn990 maxn990 self-requested a review April 8, 2025 20:57
Copy link
Member

@maxn990 maxn990 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks really good! Let's just create a component and change when the card flips (more details in the review) and this will be good to merge. Great job!

? "bg-nefacblue text-white"
: "bg-white text-black border-4 border-nefacblue"
}`}
onClick={() => setFlipped(!isFront)}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔧 I think we should use an onhover here, the idea being we see the second side of the card when the mouse is over the card, then we return to the original side

</video>
</div>
<div className="px-36 flex flex-row gap-7 w-full">
<NefacFlipCard
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😃 This is a great design!

<div className="px-36 pt-12 flex flex-row flex-wrap gap-4">
<div className="z-0 pb-20">
<CommentarySection />
<div className="flex flex-col">
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🔧 Could we add this to a component? Like how we have the commentary section

caption?: string;
imageBlue?: string;
imageWhite?: string;
links?: { text: string; url: string }[];
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

😃 I like the links design

@maxn990 maxn990 self-requested a review April 15, 2025 20:39
@maxn990 maxn990 merged commit 3a47e69 into main Apr 15, 2025
@maxn990 maxn990 deleted the hannah-what-is-nefac branch April 15, 2025 20:59
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

What is NEFAC
2 participants