Feature/getstarted#82
Conversation
…rogress indicators
…d visual consistency
…, and improved styling
|
@sanjay-kv |
sanjay-kv
added
the
area:backend-sql
There was a problem hiding this comment.
Pull Request Overview
Introduces a dedicated “Get Started” link in the header, adds a new animated StatsSection component, and corrects metadata in the Google DeepMind blog post.
- Switch header’s “Get Started” button to the new
/get-started/route - Add
StatsSectioncomponent with accompanying CSS module and framer-motion animations - Clean up stray frontmatter entry and update commented
twitter:titlein the blog post
Reviewed Changes
Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/components/header/header.tsx | Update header button link to the Get Started page |
| src/components/StatsSection/styles.module.css | New styles for StatsSection, including layout and animations |
| src/components/StatsSection/index.tsx | Add StatsSection component with animated stat cards |
| blog/google-deepmind/index.md | Remove empty tag line and update commented twitter:title |
Comments suppressed due to low confidence (1)
src/components/StatsSection/index.tsx:1
- This new
StatsSectioncomponent currently has no associated tests; consider adding unit or integration tests to verify that each stat card renders correctly and animations trigger.
import React from 'react';
| }} | ||
| > | ||
| {stat.icon && ( | ||
| <div className={styles.statIcon}> |
There was a problem hiding this comment.
Add an accessibility attribute to the emoji icon (e.g., aria-hidden="true" or role="img" with an appropriate aria-label) so screen readers handle it correctly.
| <div className={styles.statIcon}> | |
| <div className={styles.statIcon} role="img" aria-label={stat.label}> |
There was a problem hiding this comment.
I have gone through your organization's README, and here's what I have understood so far.
There was a problem hiding this comment.
Hey @azad2003-ai can you clarify here as there is not reason to comment for an PR that, was closed almost 6 months ago!
| /* Animation keyframes */ | ||
| @keyframes float { | ||
| 0%, 100% { transform: translateY(0); } | ||
| 50% { transform: translateY(-10px); } | ||
| } | ||
|
|
||
| @keyframes pulse { | ||
| 0%, 100% { | ||
| transform: scale(1); | ||
| opacity: 1; | ||
| } | ||
| 50% { | ||
| transform: scale(1.05); | ||
| opacity: 0.8; | ||
| } | ||
| } | ||
|
|
||
| @keyframes glow { | ||
| 0% { | ||
| box-shadow: 0 0 5px rgba(79, 70, 229, 0.5); | ||
| } | ||
| 50% { | ||
| box-shadow: 0 0 20px rgba(79, 70, 229, 0.8); | ||
| } | ||
| 100% { | ||
| box-shadow: 0 0 5px rgba(79, 70, 229, 0.5); | ||
| } | ||
| } |
There was a problem hiding this comment.
The float, pulse, and glow keyframes are defined but not used anywhere in this module; consider removing them or applying them to relevant elements to avoid dead CSS.
| /* Animation keyframes */ | |
| @keyframes float { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| transform: scale(1); | |
| opacity: 1; | |
| } | |
| 50% { | |
| transform: scale(1.05); | |
| opacity: 0.8; | |
| } | |
| } | |
| @keyframes glow { | |
| 0% { | |
| box-shadow: 0 0 5px rgba(79, 70, 229, 0.5); | |
| } | |
| 50% { | |
| box-shadow: 0 0 20px rgba(79, 70, 229, 0.8); | |
| } | |
| 100% { | |
| box-shadow: 0 0 5px rgba(79, 70, 229, 0.5); | |
| } | |
| } | |
| /* Animation keyframes removed as they are unused */ |
@sanjay-kv
Solves :- #75
2025-06-06.19-38-52.mp4