[HACKTOBERFEST] Landing Page UI Revamp – CanonForces Branding

[aviralsaxena16]

🎨 [HACKTOBERFEST] Landing Page UI Revamp – CanonForces Branding

📌 Description

The current landing page is functional but needs a modern, branded UI aligned with CanonForces’ identity.
This issue focuses on improving visual balance, typography, and overall polish of the landing and feature sections.

Basically dont want a full revamp just refining the current one with the modern looks and fixing ambiguities

---

🚀 Goals

• Replace heading with CanonForces and that as a tagline:
  “Learn and code.”
• Enhance hero section design and regenerated mascot image by Gemini nano banana (same pose just quality enhanced) quality.
• Improve responsiveness, visual hierarchy, and user engagement.

---

Since this is UI based issue so preferred to share the mockups to me on linkedin or below the issue thread

🧩 Tasks

1️⃣ Hero Section

• Replace "LEARN & CODE" with “CanonForces” (same bold font).
• Add tagline below: “LEARN & CODE".”
• Center-align hero section (text + mascot).
• Replace it with same mascot with a higher-quality version (same pose, regenerated via Gemini/DALL·E):

2️⃣ Buttons

• Remove Explore and Dashboard buttons instead add canonforces logo
• Add hover effect (scale(1.05), transition: all 0.2s ease-in).

3️⃣ Features Grid

• Add hover shadow + animation on feature cards.
• Improve section title styling:
  • Add a thin divider below “Why Choose CanonForces?”
  • Use subtle fade-in animation for cards.
• Ensure icons use the brand color palette.
• Buttons over there are not working either
• Add Github link as well for the repository

4️⃣ Footer

• Add a clean footer section:

  ⚡ Maintained by Aviral Saxena | © 2025 CanonForces
  

[github-actions]

🚀 Thanks for Helping Improve CanonForces!

We'll review it as soon as possible. We truly appreciate your contributions to CanonForces! ⚔️✨

✅ Before working on a PR, please:

• Read our README.md, CONTRIBUTING.md.
• Wait until the issue is assigned to you before starting a PR.
• Discuss your approach if you're unsure, we're happy to help!

💬 Need quick support or want to discuss ideas?
Join our Discord 👉 CanonForces Discord

Thanks again, @aviralsaxena16! 🎉

[Pratyush2240]

Hello!!! Can you assign this issue to me. I would be glad to work on this.

[aviralsaxena16]

@Pratyush2240 Yes sure assigned, But as this is a UI based issue , so I want you to connect with me and discuss about the UI and more better if you can share mockups (optional though)

[Pratyush2240]

Hi @aviralsaxena16!
Thanks for assigning this to me!
For the UI issues, I will check with what the tasks are and then will work on that. or do you have some specific preference for refining or changing the mascot or anything?

[aviralsaxena16]

@Pratyush2240 Sure, most of the details are already mentioned in the issue. Only minimal changes are needed, please remove the non-functional buttons, and update the mascot with a high-quality image while retaining the same character.
Also, share a screenshot on LinkedIn before raising the PR.
You can proceed now. All the best!