Updated UI and added some sections

[samarthyaveer]

User description

just updated the homepage a bit;

---

PR Type

Enhancement, Documentation

---

Description

• Major homepage redesign with new sections and enhanced UI

  • Added "How It Works", "Technology & Benefits", "What's In It For You", FAQ, and Visual Showcase sections
  • Enhanced features section with detailed bullet points
  • Reimagined CTA section with clearer calls to action and feature highlights

• Improved content structure and clarity

  • Updated headings, descriptions, and visual hierarchy for better user engagement

• Expanded iconography and visual elements for modern Web3/AI branding

---

Changes walkthrough 📝

Relevant files

Enhancement

page.tsx Major homepage UI/UX overhaul with new sections and improved clarity app/page.tsx Added multiple new homepage sections: "How It Works", "Technology & Benefits", "What's In It For You", FAQ, and Visual Showcase Enhanced existing features section with bullet points and clearer value propositions Updated hero section text and branding to emphasize Web3 content marketplace Reimagined CTA section with detailed feature list and improved user flow Expanded use of icons and visual elements for a modern, engaging UI +590/-98

---

Need help?

Type /help how to ... in the comments thread for any questions about Qodo Merge usage.

Check out the documentation for more information.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
learn-ex	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	May 2, 2025 7:12pm

[qodo-code-review]

Qodo Merge was enabled for this repository. To continue using it, please link your Git account with your Qodo account here.

CI Feedback 🧐

A test triggered by this PR failed. Here is an AI-generated analysis of the failure:

Action: build

Failed stage: Set up job [❌]

Failure summary: The action failed because it was unable to download the required action package actions/upload-artifact@v3. The error message "Missing download info for actions/upload-artifact@v3" indicates that the workflow is trying to use this action but the GitHub Actions runner couldn't find or access the necessary information to download it.

Relevant error logs: 1: ##[group]Operating System 2: Ubuntu ... 25: Version: 3.6.0 26: Digest: sha256:942562b9c7d4b1f2557f1da21f4d3eb4eb4fd01f2ad78b2a6e187d1b193e0a0f 27: Source commit SHA: f43a0e5ff2bd294095638e18286ca9a3d1956744 28: ##[endgroup] 29: ##[group]Download immutable action package 'actions/setup-node@v3' 30: Version: 3.9.1 31: Digest: sha256:d8c8dbd6e63927801f9de42620f961a361b03be6034dcc11e83ca01f50cb9f40 32: Source commit SHA: 3235b876344d2a9aa001b8d1453c930bba69e610 33: ##[endgroup] 34: ##[group]Download immutable action package 'actions/upload-pages-artifact@v2' 35: Version: 2.0.0 36: Digest: sha256:b875eb6b56e475d239a98defe901bdd43d37e06bea7970260555b9d68ea3aa49 37: Source commit SHA: a753861a5debcf57bf8b404356158c8e1e33150c 38: ##[endgroup] 39: Getting action download info 40: ##[error]Missing download info for actions/upload-artifact@v3

[qodo-code-review]

PR Reviewer Guide 🔍

Here are some key observations to aid the review process:

⏱️ Estimated effort to review: 4 🔵🔵🔵🔵⚪

🧪 No relevant tests

🔒 No security concerns identified

⚡ Recommended focus areas for review Performance Concerns The homepage has numerous animation elements using Framer Motion that could impact performance, especially on lower-end devices. The multiple blur effects, gradients, and animations might cause rendering issues. <motion.div className="absolute -right-24 top-1/3 w-96 h-96 rounded-full bg-purple-500/10 blur-3xl z-0" animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.5, 0.3] }} transition={{ duration: 8, repeat: Infinity, repeatType: "reverse" }} /> <motion.div className="absolute -left-24 bottom-1/3 w-64 h-64 rounded-full bg-blue-500/10 blur-3xl z-0" animate={{ scale: [1.2, 1, 1.2], opacity: [0.3, 0.5, 0.3] }} transition={{ duration: 8, repeat: Infinity, repeatType: "reverse" }} /> Accessibility Issues Several UI elements may have insufficient color contrast ratios, particularly text on gradient backgrounds. Additionally, some interactive elements might lack proper ARIA attributes for screen readers. <p className="text-slate-300 leading-relaxed"> Share your academic knowledge with the community and receive compensation through smart contracts. Your contributions are securely stored with: </p> <ul className="mt-4 text-slate-300 space-y-2"> <li className="flex items-start"> <span className="mr-2 text-purple-400">•</span> Smart contract royalties on each download </li> <li className="flex items-start"> <span className="mr-2 text-purple-400">•</span> Immutable proof of authorship </li> <li className="flex items-start"> <span className="mr-2 text-purple-400">•</span> Decentralized, permanent storage </li> </ul> Code Duplication There are repeated patterns throughout the page that could be extracted into reusable components, such as feature cards, FAQ items, and section headers. This would improve maintainability. <div className="max-w-3xl mx-auto"> {/* FAQ Item 1 */} <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5 }} className="group relative mb-6 rounded-xl glass-card p-6 backdrop-blur-sm hover:shadow-xl hover:shadow-purple-500/10 transition-all duration-500 border border-white/5 overflow-hidden" > <div className="absolute -inset-0.5 -z-10 rounded-xl bg-gradient-to-r from-purple-600 via-indigo-500 to-blue-500 opacity-0 blur transition duration-500 group-hover:opacity-20"></div> <div className="absolute top-0 left-0 h-full w-1 bg-gradient-to-b from-purple-500 to-indigo-500 opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div> <h3 className="text-xl font-bold text-white mb-3 group-hover:translate-x-1 transition-transform duration-300 font-space">What makes LearnEX different from traditional learning platforms?</h3> <p className="text-slate-300 leading-relaxed">LearnEX leverages blockchain technology to provide immutable proof of authorship, fair compensation through smart contracts, and truly decentralized ownership of educational content. Combined with AI-powered personalization, it creates a more secure, fair, and effective learning ecosystem.</p> </motion.div> {/* FAQ Item 2 */} <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.1 }} className="group relative mb-6 rounded-xl glass-card p-6 backdrop-blur-sm hover:shadow-xl hover:shadow-blue-500/10 transition-all duration-500 border border-white/5 overflow-hidden" > <div className="absolute -inset-0.5 -z-10 rounded-xl bg-gradient-to-r from-blue-500 via-indigo-500 to-purple-600 opacity-0 blur transition duration-500 group-hover:opacity-20"></div> <div className="absolute top-0 left-0 h-full w-1 bg-gradient-to-b from-blue-500 to-indigo-500 opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div> <h3 className="text-xl font-bold text-white mb-3 group-hover:translate-x-1 transition-transform duration-300 font-space">Do I need cryptocurrency to use LearnEX?</h3> <p className="text-slate-300 leading-relaxed">While our platform utilizes blockchain technology, we've designed it to be accessible to everyone. You can browse and access many resources without cryptocurrency, but a digital wallet is recommended for full platform benefits, including content ownership and creator rewards.</p> </motion.div> {/* FAQ Item 3 */} <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.2 }} className="group relative mb-6 rounded-xl glass-card p-6 backdrop-blur-sm hover:shadow-xl hover:shadow-cyan-500/10 transition-all duration-500 border border-white/5 overflow-hidden" > <div className="absolute -inset-0.5 -z-10 rounded-xl bg-gradient-to-r from-cyan-500 via-blue-500 to-indigo-600 opacity-0 blur transition duration-500 group-hover:opacity-20"></div> <div className="absolute top-0 left-0 h-full w-1 bg-gradient-to-b from-cyan-500 to-blue-500 opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div> <h3 className="text-xl font-bold text-white mb-3 group-hover:translate-x-1 transition-transform duration-300 font-space">How is content quality maintained?</h3> <p className="text-slate-300 leading-relaxed">LearnEX employs a multi-layered verification system combining AI analysis, peer reviews from subject matter experts, and community ratings. This ensures all educational materials meet high standards of accuracy, clarity, and educational value.</p> </motion.div> {/* FAQ Item 4 */} <motion.div initial={{ opacity: 0, y: 20 }} whileInView={{ opacity: 1, y: 0 }} viewport={{ once: true }} transition={{ duration: 0.5, delay: 0.3 }} className="group relative rounded-xl glass-card p-6 backdrop-blur-sm hover:shadow-xl hover:shadow-indigo-500/10 transition-all duration-500 border border-white/5 overflow-hidden" > <div className="absolute -inset-0.5 -z-10 rounded-xl bg-gradient-to-r from-indigo-500 via-purple-600 to-pink-500 opacity-0 blur transition duration-500 group-hover:opacity-20"></div> <div className="absolute top-0 left-0 h-full w-1 bg-gradient-to-b from-indigo-500 to-purple-500 opacity-0 group-hover:opacity-70 transition-opacity duration-300"></div> <h3 className="text-xl font-bold text-white mb-3 group-hover:translate-x-1 transition-transform duration-300 font-space">Can I earn by contributing educational content?</h3> <p className="text-slate-300 leading-relaxed">Absolutely! LearnEX rewards content creators through our tokenized ecosystem. When you share high-quality educational materials, you receive compensation both from direct purchases and ongoing usage royalties, all secured and automated through smart contracts.</p> </motion.div>

[qodo-code-review]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
Possible issue	Fix animation transition property The repeatType property in Framer Motion should be "mirror" instead of "reverse" for smooth animation transitions. The "reverse" value is not a valid option for repeatType, which accepts "loop", "mirror", or "reverse" (in older versions, but now deprecated in favor of "mirror"). app/page.tsx [741-752] <motion.div className="absolute -right-24 top-1/3 w-96 h-96 rounded-full bg-purple-500/10 blur-3xl z-0" animate={{ scale: [1, 1.2, 1], opacity: [0.3, 0.5, 0.3] }} transition={{ duration: 8, repeat: Infinity, - repeatType: "reverse" + repeatType: "mirror" }} /> Apply this suggestion Suggestion importance[1-10]: 4 __ Why: The suggestion correctly identifies that repeatType: "mirror" is generally preferred over "reverse" in Framer Motion for back-and-forth animations, aligning with current best practices. While "reverse" might still function, using "mirror" enhances clarity and future compatibility.	Low
More