Skip to content

Added the animated-card component #6570

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

Jump to bottom
Open
wants to merge 13 commits into
base: master
Choose a base branch
from
Open

Added the animated-card component #6570

wants to merge 13 commits into from
+1,266 −1

Conversation

oseniabdulhaleem
Copy link

Description

This PR adds the Animation Card Component #6521

Notes for Reviewers

  • Added the animation card component as provided in the html file

Signed commits

  • Yes, I signed my commits.

A video of how it renders

https://drive.google.com/file/d/1ihandK3cI0CSe6Gp3y6gh3bp5wTu0JH-/view?usp=sharing

@l5io
Copy link
Contributor

l5io commented Jun 22, 2025

🚀 Preview for commit af797bc at: https://68581aa39e5549db716d36a9--layer5.netlify.app

@vishalvivekm
Copy link

@oseniabdulhaleem
Thank you for your contribution!
Let's discuss this during the website call today at 5:30 PM IST | 7 AM CT

Add it as an agenda item to the meeting minutes, if you would :)

@github-actions github-actions bot added the area/blog New posts or new blog functionality label Jun 23, 2025
@l5io
Copy link
Contributor

l5io commented Jun 23, 2025

🚀 Preview for commit 6d74525 at: https://6859539eafb3acd94911ea9e--layer5.netlify.app

@l5io
Copy link
Contributor

l5io commented Jun 23, 2025

🚀 Preview for commit f23d3d2 at: https://68595a17579051c7f5a2a327--layer5.netlify.app

vishalvivekm
vishalvivekm suggested changes Jun 28, 2025
View reviewed changes
Copy link

@vishalvivekm vishalvivekm left a comment

Choose a reason for hiding this comment

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

needs improvements, as discussed in sites call.

  1. theme friendliness
  2. responsiveness
  3. can be incorporated on cards on homepage?

@oseniabdulhaleem
Copy link
Author

oseniabdulhaleem commented Jun 30, 2025 •
edited
Loading

@vishalvivekm I just made an update for theme friendliness

@l5io
Copy link
Contributor

l5io commented Jun 30, 2025

🚀 Preview for commit 8424297 at: https://686224c18482fc4e1631497b--layer5.netlify.app

@LibenHailu
Copy link
Contributor

Hi @oseniabdulhaleem , Thank you for your contribution These are the high-level issues I came across,
image
The animation wave is not there on light mode, please remove everything that says Test, if the change is approved, it will be merged so make sure your code is ready to be merged when raising a PR.
image
The animation is covering blogs, Please test it thoroughly. The DCO check is also failing.

@oseniabdulhaleem
Copy link
Author

oseniabdulhaleem commented Jun 30, 2025 •
edited
Loading

@LibenHailu İ will look into those updates

Thanks for the feedback

@vr-varad
Copy link
Contributor

@oseniabdulhaleem
Thank you for your contribution!
Let's discuss this during the website call today at 7 AM CT

Add it as an agenda item to the meeting minutes, if you would :)

@oseniabdulhaleem
Copy link
Author

@LibenHailu Thanks for the feedback! I should clarify - the HTML and CSS code didn't include specifications for the wavy animation in light mode, which is why I didn't implement it initially. I can certainly develop something if you'd like.

@vr-varad Unfortunately, I have a work meeting conflict at 7 AM CT today. Would it be possible to discuss this during our next website meeting instead? I can add it to the agenda and continue working on the implementation in the meantime.

@l5io
Copy link
Contributor

l5io commented Jul 1, 2025

🚀 Preview for commit 6974230 at: https://6863d3cab8966db613e2f207--layer5.netlify.app

@l5io
Copy link
Contributor

l5io commented Jul 1, 2025

🚀 Preview for commit 137e6b9 at: https://6863e6152de5e5324ff680a5--layer5.netlify.app

@oseniabdulhaleem
Copy link
Author

@vishalvivekm @vr-varad Any update?

@oseniabdulhaleem
Copy link
Author

@vishalvivekm @LibenHailu @vr-varad any update?

@leecalcote
Copy link
Member

If this work is complete, this is a good item to add to the weekly Websites meeting agenda. You can add this item in the doc, attend, and present it. Meeting details at https://meet.layer5.io.

vr-varad
vr-varad reviewed Jul 7, 2025
View reviewed changes
vr-varad
vr-varad reviewed Jul 7, 2025
View reviewed changes
src/components/AnimatedCard/AnimatedCard.style.js Outdated
.gradient-border {
position: relative;
background: ${props => props.$isDark
? 'linear-gradient(135deg, rgba(0, 179, 159, 0.1), rgba(59, 130, 246, 0.1), rgba(0, 211, 169, 0.1))'
Copy link
Contributor

Choose a reason for hiding this comment

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

use theme colors

vr-varad
vr-varad reviewed Jul 7, 2025
View reviewed changes
src/components/AnimatedCard/AnimatedCard.style.js Outdated
/* Inner glow - Theme aware */
.inner-glow {
box-shadow: ${props => props.$isDark
? `inset 0 0 20px rgba(0, 179, 159, 0.3),
Copy link
Contributor

Choose a reason for hiding this comment

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

here as well

@vr-varad
Copy link
Contributor

vr-varad commented Jul 7, 2025

  1. Sign Off your commits
  2. The colors which u are using are not theme colors so would be good if u fix that.

@oseniabdulhaleem

@oseniabdulhaleem
Copy link
Author

Thanks for the feedback @vr-varad, I will look into it

@l5io
Copy link
Contributor

l5io commented Jul 9, 2025

🚀 Preview for commit 45412ff at: https://686e9e9740d57b1cea961367--layer5.netlify.app

@vr-varad
Copy link
Contributor

vr-varad commented Jul 10, 2025 •
edited
Loading

Your dco is still failing, we won't accept the pr if the dco is failing.
and there are few bugs
image
the learn more btn becomes invisible when hovered.
@oseniabdulhaleem

@oseniabdulhaleem
Copy link
Author

I will look into that, Thanks for the heads up @vr-varad

@vr-varad
Copy link
Contributor

After all the suggested changes make sure u remove the redundant commented code and test-animation-card @oseniabdulhaleem

@oseniabdulhaleem oseniabdulhaleem force-pushed the animated-card branch 2 times, most recently from eac6b63 to 82819a4 Compare July 11, 2025 18:08
@oseniabdulhaleem
Added the animated-card component
1eb6e93 
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
@oseniabdulhaleem
testing the animated card on the blogpage
d3e9a1f 
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
oseniabdulhaleem and others added 8 commits July 11, 2025 18:13
@oseniabdulhaleem
startign test
0835893 
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
@vishalvivekm @oseniabdulhaleem
add meshery models training session
565bb77 
Signed-off-by: Vivek Vishal <vishalvivek488@gmail.com>
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
@oseniabdulhaleem
testing animated card 2
aea8bfd 
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
@oseniabdulhaleem
updated the animated card to respond to both dark theme and light theme
d03aea4 
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
@oseniabdulhaleem
final test
478a302 
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
@oseniabdulhaleem
Fixed the Animated-card-component
ad595aa 
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
@oseniabdulhaleem
made some update to test the theme feature
6405cd3 
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
@oseniabdulhaleem
made update to the animated card styling to use theme
37d6c41 
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
@oseniabdulhaleem
Copy link
Author

@vr-varad I just made an update, please check, before i make the final commit.

@l5io
Copy link
Contributor

l5io commented Jul 11, 2025

🚀 Preview for commit 37d6c41 at: https://6871574d684f29a96b312c38--layer5.netlify.app

@oseniabdulhaleem
removed the redundant code and made the animated card ready for use
eaabad7 
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
@l5io
Copy link
Contributor

l5io commented Jul 11, 2025

🚀 Preview for commit eaabad7 at: https://687177956c4744e60e29cebe--layer5.netlify.app

@oseniabdulhaleem
made update to the animatedcard.style.js to fix linting errors
60e26e1 
Signed-off-by: Oseni Abdulhaleem <oseniabdulhaleem@gmail.com>
@oseniabdulhaleem
Copy link
Author

@vr-varad Done!

@l5io
Copy link
Contributor

l5io commented Jul 12, 2025

🚀 Preview for commit 60e26e1 at: https://6871f01a022e4184adfb571d--layer5.netlify.app

@l5io
Copy link
Contributor

l5io commented Jul 12, 2025

🚀 Preview for commit 5d1bbc1 at: https://6872b98a433c6d51f1e1ef67--layer5.netlify.app

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@vr-varad vr-varad vr-varad left review comments

@vishalvivekm vishalvivekm vishalvivekm requested changes

Assignees
No one assigned
Labels
area/blog New posts or new blog functionality
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
6 participants
@oseniabdulhaleem @l5io @vishalvivekm @LibenHailu @vr-varad @leecalcote