Skip to content

added the animation in hero.tsx sectionnin your bussiness deserve a w… #94

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

Merged
hrx01-dev merged 3 commits into from
Jun 21, 2026
+58 −4
Merged

added the animation in hero.tsx sectionnin your bussiness deserve a w… #94

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6a0756a
added the animation in hero.tsx sectionnin your bussiness deserve a w…
Jun 21, 2026
9f37d09
add
Jun 21, 2026
315cd49
issues by coderabbit
Jun 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions src/app/components/Hero.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { Smartphone, Zap, TrendingUp, Sparkles } from 'lucide-react';
import { useState, useRef } from 'react';
import { useInView } from 'motion/react';
import { TypingText } from './TypingText';

Check warning on line 5 in src/app/components/Hero.tsx

View workflow job for this annotation

GitHub Actions / Type check, lint & build 

'TypingText' is defined but never used. Allowed unused vars must match /^_/u

const heroImage = "https://images.unsplash.com/photo-1551288049-bebda4e38f71?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w3Nzg4Nzd8MHwxfHNlYXJjaHwxfHxtb2Rlcm4lMjB3ZWJzaXRlJTIwZGFzaGJvYXJkJTIwZGVzaWdufGVufDF8fHx8MTc4MTcwMjY1OXww&ixlib=rb-4.1.0&q=80&w=1080&utm_source=figma&utm_medium=referral";

Expand Down Expand Up @@ -63,10 +63,12 @@
<span className="text-sm text-gray-700 dark:text-gray-200">Available for new projects</span>
</motion.div>

<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold text-gray-900 dark:text-white mb-6">
Your Business Deserves a Website That{' '}
<span className="bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
<TypingText text="Converts" delay={1200} triggerOnView={false} cursorColor="bg-indigo-600" />
<h1 className="text-4xl sm:text-5xl lg:text-6xl font-bold mb-6">
<span className="hero-shimmer">
Your Business Deserves a Website That{' '}
</span>
<span className="converts-glow bg-gradient-to-r from-indigo-600 to-purple-600 bg-clip-text text-transparent">
Converts
</span>
Comment on lines +66 to 72

@coderabbitai coderabbitai Bot Jun 21, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

#!/bin/bash
# Description: Fetch issue `#89` details to confirm requirements

gh issue view 89 --json title,body,labels

Repository: hrx01-dev/Servio

Length of output: 353

🏁 Script executed:

# Check for hero-shimmer and converts-glow CSS definitions
rg "hero-shimmer|converts-glow" --type css --type scss --type ts --type tsx -A 5 -B 2

Repository: hrx01-dev/Servio

Length of output: 89

🏁 Script executed:

# Check git history to see what Hero component looked like before and if TypingText was used
git log --oneline -n 20 src/app/components/Hero.tsx

Repository: hrx01-dev/Servio

Length of output: 157

🏁 Script executed:

# Search for TypingText component usage in the codebase
rg "TypingText" --type ts --type tsx

Repository: hrx01-dev/Servio

Length of output: 88

🏁 Script executed:

# Fix the command - search for hero-shimmer and converts-glow CSS definitions
rg "hero-shimmer|converts-glow" -A 5 -B 2

Repository: hrx01-dev/Servio

Length of output: 1917

🏁 Script executed:

# Check the git diff to see what was replaced in this commit
git diff HEAD~1 HEAD src/app/components/Hero.tsx

Repository: hrx01-dev/Servio

Length of output: 249

🏁 Script executed:

# Search for TypingText component usage
rg "TypingText" -A 2 -B 2

Repository: hrx01-dev/Servio

Length of output: 5400

🏁 Script executed:

# Check if hero-shimmer and converts-glow animations respect prefers-reduced-motion
rg "prefers-reduced-motion" src/styles/theme.css -A 10 -B 2

Repository: hrx01-dev/Servio

Length of output: 1087

🏁 Script executed:

# Look at the full animation definitions for shimmer-sweep and glow-pulse
rg "`@keyframes` (shimmer-sweep|glow-pulse)" src/styles/theme.css -A 10

Repository: hrx01-dev/Servio

Length of output: 653

🏁 Script executed:

# Check the current Hero.tsx to see if TypingText is still imported but unused
cat -n src/app/components/Hero.tsx | head -30

Repository: hrx01-dev/Servio

Length of output: 1772

PR removes typing animation but issue #89 explicitly requests it.

Issue #89 states: "Add Typing Animation in the given ref" for better visual consistency and UX. However, this PR replaces the typing animation with shimmer/glow CSS effects instead. The TypingText component is imported but not used in the headline, and issue #89's explicit requirement contradicts the current implementation.

Clarify the intended approach:

  • Should issue #89 be updated to reflect the shimmer/glow approach?
  • Or should the typing animation be implemented as the issue requests?

Also remove the unused TypingText import from line 5.

🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/app/components/Hero.tsx` around lines 66 - 72, The Hero component has a
TypingText component imported but unused, and the current implementation uses
shimmer/glow effects instead of the typing animation requested in issue `#89`.
Replace the static text content in the h1 heading with the TypingText component
to implement the typing animation effect as specified in the issue. Wrap the
text that should animate with the TypingText component, and remove the unused
TypingText import from line 5 if it ends up not being needed after the changes.

</h1>

Expand Down
52 changes: 52 additions & 0 deletions src/styles/theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,57 @@
@custom-variant dark (&:is(.dark *));

/* ── Hero headline shimmer sweep ─────────────────────────────────────────── */
@keyframes shimmer-sweep {
0% { background-position: -200% center; }
100% { background-position: 200% center; }
}
.hero-shimmer {
background: linear-gradient(
90deg,
#1e1b4b 0%,
#4338ca 35%,
#e0e7ff 49%,
#c4b5fd 51%,
#4338ca 65%,
#1e1b4b 100%
);
background-size: 200% auto;
color: #4338ca; /* fallback color */
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
Comment thread
coderabbitai[bot] marked this conversation as resolved.
animation: shimmer-sweep 6s linear infinite;
}
.dark .hero-shimmer {
background: linear-gradient(
90deg,
#818cf8 0%,
#a5b4fc 35%,
#ddd6fe 49%,
#c4b5fd 51%,
#a5b4fc 65%,
#818cf8 100%
);
background-size: 200% auto;
color: #818cf8; /* fallback color */
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: shimmer-sweep 6s linear infinite;
}
Comment on lines +3 to +41

@coderabbitai coderabbitai Bot Jun 21, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add prefers-reduced-motion support for accessibility.

The shimmer animation runs infinitely for all users, including those who have indicated a preference for reduced motion. This can cause discomfort for users with vestibular disorders. The Hero component already uses useReducedMotion() for other animations, but these CSS animations ignore that preference.

♿ Proposed fix to respect motion preferences 
+@media (prefers-reduced-motion: reduce) {
+  .hero-shimmer {
+    animation: none;
+  }
+}
+
 .dark .hero-shimmer {
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/styles/theme.css` around lines 3 - 39, Add a media query using `@media`
(prefers-reduced-motion: reduce) at the end of the theme.css file to respect
user motion preferences for accessibility. Within this media query, override the
animation property for both the .hero-shimmer class and the .dark .hero-shimmer
class to disable the shimmer-sweep animation by setting animation to none,
ensuring users who prefer reduced motion are not exposed to the continuous
animation effect.


/* ── Hero "Converts" glow pulse ──────────────────────────────────────────── */
@keyframes glow-pulse {
0%, 100% { filter: drop-shadow(0 0 2px rgba(99,102,241,0.2)) drop-shadow(0 0 1px rgba(167,139,250,0.15)); }
50% { filter: drop-shadow(0 0 8px rgba(99,102,241,0.5)) drop-shadow(0 0 4px rgba(167,139,250,0.35)); }
}
.converts-glow {
animation: glow-pulse 2.5s ease-in-out infinite;
display: inline-block;
}



Comment on lines +43 to +54

@coderabbitai coderabbitai Bot Jun 21, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

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

⚠️ Potential issue | 🟠 Major | ⚡ Quick win

Add prefers-reduced-motion support for the glow animation.

Like the shimmer animation, the glow pulse runs infinitely without checking user motion preferences.

♿ Proposed fix 
 .converts-glow {
   animation: glow-pulse 2.5s ease-in-out infinite;
   display: inline-block;
 }
+
+@media (prefers-reduced-motion: reduce) {
+  .converts-glow {
+    animation: none;
+  }
+}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
/* ── Hero "Converts" glow pulse ──────────────────────────────────────────── */
@keyframes glow-pulse {
0%, 100% { filter: drop-shadow(0 0 2px rgba(99,102,241,0.2)) drop-shadow(0 0 1px rgba(167,139,250,0.15)); }
50% { filter: drop-shadow(0 0 8px rgba(99,102,241,0.5)) drop-shadow(0 0 4px rgba(167,139,250,0.35)); }
}
.converts-glow {
animation: glow-pulse 2.5s ease-in-out infinite;
display: inline-block;
}
/* ── Hero "Converts" glow pulse ──────────────────────────────────────────── */
`@keyframes` glow-pulse {
0%, 100% { filter: drop-shadow(0 0 2px rgba(99,102,241,0.2)) drop-shadow(0 0 1px rgba(167,139,250,0.15)); }
50% { filter: drop-shadow(0 0 8px rgba(99,102,241,0.5)) drop-shadow(0 0 4px rgba(167,139,250,0.35)); }
}
.converts-glow {
animation: glow-pulse 2.5s ease-in-out infinite;
display: inline-block;
}
`@media` (prefers-reduced-motion: reduce) {
.converts-glow {
animation: none;
}
}
🤖 Prompt for AI Agents 
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In `@src/styles/theme.css` around lines 41 - 52, The glow-pulse animation applied
to the .converts-glow class runs infinitely without respecting user motion
preferences. Add a media query using prefers-reduced-motion: reduce to disable
the animation when users have reduced motion enabled. Within this media query,
set the animation property on the .converts-glow class to none to respect
accessibility preferences, similar to how the shimmer animation is handled
elsewhere in the stylesheet.

:root {
--font-size: 16px;
--background: #ffffff;
Expand Down
Loading