feat: add aurora animation and enhance homepage card styles#70
Conversation
- 在global.css中添加极光动画效果 - 优化主页安装和注解使用卡片样式，增加视觉效果 - 重构社区和功能卡片，添加极光背景和交互效果 - 更新.gitignore文件，添加.trae/skills忽略项
在文档页面中新增显示文件最后修改时间的功能，并添加直接跳转到GitHub编辑页面的按钮。同时优化了GitHub链接的生成方式。
Summary of ChangesHello, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed! 此拉取请求通过为关键信息卡片引入动态极光背景动画，显著提升了首页的视觉吸引力和用户体验。它还优化了这些卡片的样式和布局，使其更具吸引力和现代感，从而提供更丰富的用户交互体验。 Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. Changelog
Using Gemini Code AssistThe full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips. Invoking Gemini You can request assistance from Gemini at any point by creating a comment using either
Customization To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a Limitations & Feedback Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for GitHub and other Google products, sign up here. You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension. Footnotes
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a visually appealing aurora animation and refines the styling of homepage cards, significantly enhancing the user interface. My review focuses on improving code cleanliness by removing an unused import and suggests applying the new aurora animation consistently across all relevant cards for a more unified design. The changes are otherwise well-implemented.
| import { Accordions, Accordion } from '@/components/accordion'; | ||
| import { Tabs, TabsList, TabsTrigger, TabsContent } from '@/components/tabs'; | ||
| import { CodeBlock, Pre } from 'fumadocs-ui/components/codeblock'; | ||
| import { Steps, Step } from 'fumadocs-ui/components/steps'; |
There was a problem hiding this comment.
The Steps and Step components are imported but are not used within this file. To maintain code clarity and reduce bundle size, it's recommended to remove unused imports.
| <div className="relative overflow-hidden bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-200 dark:border-gray-700 p-8 shadow-lg transition-all duration-300 group"> | ||
| <div className="absolute top-0 right-0 w-40 h-40 bg-amber-500/5 rounded-full blur-3xl group-hover:bg-amber-500/10 transition-all duration-500"></div> | ||
| <div className="absolute bottom-0 left-0 w-40 h-40 bg-orange-500/5 rounded-full blur-3xl group-hover:bg-orange-500/10 transition-all duration-500"></div> | ||
| <div className="relative"> |
There was a problem hiding this comment.
For a more consistent and dynamic user experience across the homepage, consider replacing the current group-hover effect on this card with the new 'aurora' animation, similar to the 'Community' and 'Features' cards. This will unify the visual language of the interactive elements.
<div className="relative overflow-hidden bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-200 dark:border-gray-700 p-8 shadow-lg">
{/* Aurora Background */}
<div className="absolute inset-0 overflow-hidden rounded-2xl">
<div className="absolute -inset-[10px] opacity-30 dark:opacity-20">
<div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-r from-amber-200 via-orange-200 to-amber-200 rounded-full blur-3xl animate-aurora-1"></div>
<div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-r from-orange-200 via-amber-200 to-orange-200 rounded-full blur-3xl animate-aurora-2"></div>
</div>
</div>
<div className="relative z-10">
| <div className="relative overflow-hidden bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-200 dark:border-gray-700 p-8 shadow-lg transition-all duration-300 group"> | ||
| <div className="absolute top-0 right-0 w-40 h-40 bg-rose-500/5 rounded-full blur-3xl group-hover:bg-rose-500/10 transition-all duration-500"></div> | ||
| <div className="absolute bottom-0 left-0 w-40 h-40 bg-pink-500/5 rounded-full blur-3xl group-hover:bg-pink-500/10 transition-all duration-500"></div> | ||
| <div className="relative"> |
There was a problem hiding this comment.
Similar to the 'Quick Installation' card, applying the aurora animation here would create a more consistent and visually appealing design across the page. Consider replacing the group-hover effect with the continuous aurora animation.
<div className="relative overflow-hidden bg-white/80 dark:bg-gray-800/80 backdrop-blur-sm rounded-2xl border border-gray-200 dark:border-gray-700 p-8 shadow-lg">
{/* Aurora Background */}
<div className="absolute inset-0 overflow-hidden rounded-2xl">
<div className="absolute -inset-[10px] opacity-30 dark:opacity-20">
<div className="absolute top-0 right-0 w-96 h-96 bg-gradient-to-r from-rose-200 via-pink-200 to-rose-200 rounded-full blur-3xl animate-aurora-1"></div>
<div className="absolute bottom-0 left-0 w-96 h-96 bg-gradient-to-r from-pink-200 via-rose-200 to-pink-200 rounded-full blur-3xl animate-aurora-2"></div>
</div>
</div>
<div className="relative z-10">
1 participant
Rpamis-Security Version
[The version of Rpamis-Security you are working on, e.g. 1.1.0, check your pom.xml dependency version]
Description
[Please describe the background, purpose, changes made, and how to test this PR]
Checklist
Please check the following items before code is ready to be reviewed.
mvn spring-javaformat:applymvn test)