STNDP-149 New landing page touch#99
Conversation
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @hyukkwonepic, 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!
This pull request delivers a significant visual upgrade to the landing page by introducing a comprehensive animation system. My primary goal was to enhance user engagement and create a more modern, dynamic feel. I achieved this by integrating the 'motion' animation library and building a suite of custom, reusable animation components. These components have been applied throughout the landing page, bringing various sections and elements to life with subtle and engaging motion. This change also involved cleaning up older, unused landing page files and adding a new footer for improved site consistency.
Highlights
- Animation Library Integration: I've integrated the 'motion' (Framer Motion) animation library into the project, adding it as a core dependency. This enables advanced, declarative animations across the website.
- New Reusable Animation Components: I've developed several reusable animation components, including
BlurFadefor subtle entry effects,ScrollFadefor scroll-triggered animations and parallax,TextAnimatefor dynamic text reveals, andLineShadowTextfor unique text styling. These components abstract away animation logic, making it easy to apply consistent motion across the site. - Landing Page Visual Refresh: The existing landing page content has been completely refactored to leverage these new animation components. Key sections and elements now feature dynamic fade-in, blur, and subtle movement effects, enhancing the user experience and visual appeal.
- Codebase Cleanup and Refactoring: I've removed several older iterations of the landing page (
new-landing-content.tsx,new-landing-v2.astro, etc.), streamlining the codebase and ensuring only the latest, animated version is maintained. - New Footer Component: A new
Footercomponent has been added to the landing page, providing consistent navigation and information at the bottom of the site.
Using Gemini Code Assist
The 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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
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 .gemini/ folder in the base of the repository. Detailed instructions can be found here.
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 or fill out our survey to provide feedback.
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
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces several new animation components using motion/react to enhance the landing page, creating a more dynamic user experience. The new components are well-structured and reusable. The old landing page files have been correctly removed. My review focuses on improving the new components by removing unused code, fixing a minor bug, and cleaning up the main page component for better maintainability.
| const parallaxY = useTransform( | ||
| scrollYProgress, | ||
| [0, 0.5, 1], | ||
| [offset, 0, -offset] | ||
| ); |
There was a problem hiding this comment.
The parallaxIntensity prop is defined but not used. To make it functional, you could apply it to the useTransform hook like this. This would allow controlling the intensity of the parallax effect as described in the prop's comment. If this is not the intended behavior, the prop should be removed to avoid confusion.
const parallaxY = useTransform(
scrollYProgress,
[0, 0.5, 1],
[offset * parallaxIntensity, 0, -offset * parallaxIntensity]
);| function useStaggeredDelay(gap: number = 0.25, startDelay: number = 0) { | ||
| const indexRef = useRef(0); | ||
|
|
||
| const getNextDelay = () => { | ||
| const delay = startDelay + indexRef.current * gap; | ||
| indexRef.current++; | ||
| return delay; | ||
| }; | ||
|
|
||
| const reset = () => { | ||
| indexRef.current = 0; | ||
| }; | ||
|
|
||
| return { getNextDelay, reset }; | ||
| } |
There was a problem hiding this comment.
The useStaggeredDelay hook is defined but is not used anywhere in this file. This dead code should be removed to keep the codebase clean. The associated Korean comment should also be removed for consistency.
| } from "motion/react"; | ||
| import { useRef } from "react"; | ||
|
|
||
| // type MarginType = UseInViewOptions["margin"]; |
There was a problem hiding this comment.
This commented-out type definition and others in this file (lines 22, 27, 35) should be removed to keep the code clean and improve maintainability.
| <AnimatePresence> | ||
| <motion.div | ||
| ref={ref} | ||
| initial="hidden" | ||
| animate={isInView ? "visible" : "hidden"} | ||
| exit="hidden" | ||
| variants={combinedVariants} | ||
| transition={{ | ||
| delay: 0.04 + delay, | ||
| duration: 0.25, | ||
| ease: "easeOut", | ||
| }} | ||
| className={className} | ||
| {...props} | ||
| > | ||
| {children} | ||
| </motion.div> | ||
| </AnimatePresence> |
There was a problem hiding this comment.
The AnimatePresence component is not needed here. It's used to animate components when they are mounted or unmounted from the tree. In this case, the motion.div is always rendered, and its animation is controlled by the animate prop changing between "visible" and "hidden". The exit prop will not trigger in this setup. Removing AnimatePresence will make the component simpler and more aligned with its actual behavior.
<motion.div
ref={ref}
initial="hidden"
animate={isInView ? "visible" : "hidden"}
exit="hidden"
variants={combinedVariants}
transition={{
delay: 0.04 + delay,
duration: 0.25,
ease: "easeOut",
}}
className={className}
{...props}
>
{children}
</motion.div>| threshold?: number; | ||
| parallaxIntensity?: number; // How much the section follows scroll (0 = no parallax, 1 = full parallax) | ||
| enableParallax?: boolean; | ||
| // Note: Fade effects removed for better performance - now only provides parallax movement |
There was a problem hiding this comment.
This file contains several blocks of commented-out code (e.g., lines 24, 61-65, 67-80). This should be removed to improve readability and maintainability.
| className={cn( | ||
| by === "line" ? "block" : "inline-block whitespace-pre", | ||
| by === "character" && "", | ||
| segmentClassName | ||
| )} |
There was a problem hiding this comment.
The expression by === "character" && "" on line 400 results in an empty string being passed to cn when the condition is true. This is unnecessary and can be removed for cleaner code.
className={cn(
by === "line" ? "block" : "inline-block whitespace-pre",
segmentClassName
)}| gap="4" | ||
| > | ||
| <BlurFade | ||
| // delay={0.15} |
There was a problem hiding this comment.
This commented-out delay prop and others like it in this file (e.g., lines 740, 918, 998, 1043) should be removed for code cleanliness. It seems a different animation strategy was considered and then abandoned.
1 participant
/gemini review