feat: Refine UI animations, improve code structure, update documentat…

[igun997]

User description

…ion, and add Lighthouse CI configuration.

---

PR Type

Enhancement

---

Description

• Optimize landing page performance by removing JavaScript animations and replacing with CSS-only solutions

• Add Lighthouse CI configuration for automated performance monitoring and quality assurance

• Reduce animation complexity and transition durations for faster page load and better accessibility

• Improve code structure by extracting FAQ data to constants and simplifying component logic

• Add Node.js 20.x requirement documentation and enhance smart contract setup instructions

---

Diagram Walkthrough

flowchart LR
  A["Landing Page Components"] -->|Remove JS Animations| B["CSS-only Animations"]
  A -->|Simplify Transitions| C["Reduced Duration 0.4s"]
  D["Lighthouse CI Config"] -->|Monitor Performance| E["Automated Quality Checks"]
  F["Documentation"] -->|Add Requirements| G["Node.js 20.x LTS"]
  B --> H["Improved Performance"]
  C --> H
  E --> H

Loading

File Walkthrough

	Relevant files
Enhancement	7 files globals.css Add reduced motion support and GPU acceleration hints        +21/-0    page.tsx Remove Framer Motion animations, use static CSS backgrounds +3/-30    Hero.tsx Reduce animation durations and remove backdrop blur effects +14/-22  CTA.tsx Replace animated backgrounds with static divs, optimize transitions +4/-17    Features.tsx Reduce animation distances and durations, remove list item animations +27/-43  FAQ.tsx Extract FAQ data to constant, optimize animation timing    +23/-21  Industries.tsx Replace MotionDiv with static divs, remove backdrop blur  +11/-22
Configuration changes	2 files ci.yml Add Lighthouse CI job for performance monitoring                  +28/-0    lighthouserc.json Create Lighthouse CI configuration file                                    +30/-0
Documentation	1 files CLAUDE.md Document Node.js requirement and contract commands              +10/-1

---

[qodo-code-review]

PR Compliance Guide 🔍

Below is a summary of compliance checks for this PR:

Security Compliance
🟢	No security concerns identified No security vulnerabilities detected by AI analysis. Human verification advised for critical code.
Ticket Compliance
⚪	🎫 No ticket provided Create ticket/issue
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Passed Learn more about managing compliance generic rules or creating your own custom rules
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: No audit scope: The PR adds UI/CSS changes and CI Lighthouse checks with no new critical actions introduced, so there is no evidence in the diff to assess or require audit logging for security-sensitive operations. Referred Code lighthouse: name: Lighthouse runs-on: ubuntu-latest needs: [build] steps: - uses: actions/checkout@v4 - name: Use Node.js uses: actions/setup-node@v4 with: node-version: '20' cache: 'npm' - name: Install dependencies run: npm ci - name: Build run: npm run build env: NEXT_TELEMETRY_DISABLED: 1 ... (clipped 6 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: No error paths: The new code modifies styling and animations without introducing logic that would require error handling, so robustness against errors cannot be evaluated from this diff alone. Referred Code /* Reduced motion support for older devices and accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* GPU acceleration hints for smoother animations */ .blur-xl, .blur-2xl, .blur-3xl, .blur-\[80px\] { will-change: auto; transform: translateZ(0); } Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: No user errors: The changes are UI/animation related and do not surface errors to end users, so secure error messaging cannot be assessed from the provided changes. Referred Code <MotionDiv className="relative hidden lg:block" initial={{ opacity: 0, x: 50 }} animate={{ opacity: 1, x: 0 }} transition={{ duration: 0.5, delay: 0.3 }} > <div className="relative w-full max-w-[480px] mx-auto"> {/* Background Glow - reduced blur */} <div className="absolute inset-0 bg-linear-to-br from-[#2B4C7E]/10 to-[#1E3A5F]/5 rounded-full blur-2xl" /> {/* Hero Image - no animation, CSS hover only */} <div className="relative z-10 transition-transform duration-500 hover:scale-[1.02]"> <Image src="/hero-illustration.png" alt="Blockchain Product Authentication" width={600} height={600} className="w-full h-auto drop-shadow-xl" priority /> </div> ... (clipped 4 lines) Learn more about managing compliance generic rules or creating your own custom rules
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Static content only: The added code introduces static FAQ data and UI transitions without external input handling, so input validation and data handling security cannot be fully evaluated from this diff. Referred Code const faqItems = [ { q: 'Apakah saya perlu crypto untuk menggunakan Etags?', a: 'Tidak. Kami mengabstraksikan semua kompleksitas blockchain. Anda membayar dalam fiat, kami menangani biaya gas dan manajemen wallet.', }, { q: 'Bisakah QR code disalin?', a: 'Meskipun penyalinan fisik dimungkinkan, sistem kami mendeteksi scan duplikat dan anomali lokasi/waktu, menandai potensi pemalsuan segera.', }, { q: 'Berapa lama proses integrasi?', a: 'Anda dapat mulai menandai produk secara manual dalam hitungan menit. Integrasi API untuk lini manufaktur otomatis biasanya memakan waktu 1-2 minggu.', }, { q: 'Apakah data saya publik?', a: 'Hanya hash verifikasi yang publik. Intelijen bisnis sensitif dan data rantai pasokan Anda tetap pribadi dan terenkripsi.', }, ]; Learn more about managing compliance generic rules or creating your own custom rules
Update

Compliance status legend

🟢 - Fully Compliant
🟡 - Partial Compliant
🔴 - Not Compliant
⚪ - Requires Further Human Verification
🏷️ - Compliance label

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Consider removing Framer Motion dependency To further improve performance and reduce bundle size, replace the remaining framer-motion whileInView effects with a lighter library like react-intersection-observer. This change would complete the transition away from JavaScript-based animations. Examples: src/components/landing/Features.tsx [15-21] <MotionDiv className="order-2 lg:order-1 relative" initial={{ opacity: 0, x: -30 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.4 }} > src/components/landing/CTA.tsx [13-19] <MotionDiv className="relative overflow-hidden rounded-3xl bg-linear-to-br from-[#0C2340] via-[#1E3A5F] to-[#2B4C7E] px-6 py-16 sm:px-16 sm:py-24 text-center shadow-2xl" initial={{ opacity: 0, scale: 0.95 }} whileInView={{ opacity: 1, scale: 1 }} viewport={{ once: true }} transition={{ duration: 0.4 }} > Solution Walkthrough: Before: // src/components/landing/Features.tsx import { motion } from 'framer-motion'; const MotionDiv = motion.div; export function Features() { return ( // ... <MotionDiv initial={{ opacity: 0, x: -30 }} whileInView={{ opacity: 1, x: 0 }} viewport={{ once: true }} transition={{ duration: 0.4 }} > {/* ... content ... */} </MotionDiv> // ... ); } After: // src/components/landing/Features.tsx import { useInView } from 'react-intersection-observer'; export function Features() { const { ref, inView } = useInView({ triggerOnce: true, threshold: 0.1, }); return ( // ... <div ref={ref} className={`transition-all duration-500 ${inView ? 'opacity-100 translate-x-0' : 'opacity-0 -translate-x-8'}`} > {/* ... content ... */} </div> // ... ); } Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies that framer-motion is now only used for simple scroll-triggered animations and proposes a valid, high-impact optimization to completely remove the dependency, which aligns perfectly with the PR's performance goals.	Medium
General	Optimize CI by using build artifacts Optimize the lighthouse CI job by downloading build and dependency artifacts from the build job instead of re-installing and re-building the project. .github/workflows/ci.yml [106-112] -- name: Install dependencies - run: npm ci +- name: Download build artifacts + uses: actions/download-artifact@v4 + with: + name: build-artifacts + path: . -- name: Build - run: npm run build - env: - NEXT_TELEMETRY_DISABLED: 1 +- name: Download dependencies + uses: actions/download-artifact@v4 + with: + name: node-modules + path: node_modules Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a redundant and inefficient step in the new lighthouse CI job and proposes a standard best-practice solution using artifacts to improve speed and reliability.	Medium
	Remove ineffective CSS performance hint Remove the redundant will-change: auto; CSS rule, as auto is the default value and provides no performance benefit. src/app/globals.css [138-144] .blur-xl, .blur-2xl, .blur-3xl, .blur-\[80px\] { - will-change: auto; transform: translateZ(0); } Apply / Chat Suggestion importance[1-10]: 3 __ Why: The suggestion correctly identifies that will-change: auto is the default value and has no effect, so removing it is a valid, albeit minor, code cleanup.	Low
Update