Correct flipped text alignment issue in page.tsx

[Namitanaik07]

User description

Description

Please provide a clear and concise description of what this pull request does.

---

Related Issue

Fixes # (issue number if applicable)

---

Type of Change

• 🐛 Bug fix
• 🚀 New feature
• 🧹 Code refactor
• 📝 Documentation update
• ✅ Test addition or update
• ⚙️ Other (please describe):

---

How Has This Been Tested?

Please describe the tests that you ran to verify your changes.

---

Screenshots (if applicable)

Add screenshots or recordings to help reviewers understand the change.

---

Additional Context

Add any other relevant information or context here.

---

PR Type

Enhancement

---

Description

• Fixed text alignment and styling in hero section heading

• Updated font sizes and colors for better visual hierarchy

• Improved "How It Works" section styling and typography

• Refactored step cards with consistent text color scheme

---

Diagram Walkthrough

flowchart LR
  A["Hero Section"] -->|"Update font sizes<br/>and alignment"| B["Improved Typography"]
  C["Steps Section"] -->|"Enhance styling<br/>and colors"| D["Better Visual Hierarchy"]
  B --> E["Enhanced UI"]
  D --> E

Loading

File Walkthrough

Relevant files

Enhancement

page.tsx Refactor typography and styling across hero and steps sections src/app/page.tsx Fixed hero heading alignment by adjusting indentation and font sizes (text-2xl to text-xl base, xs:text-4xl to xs:text-2xl) Updated ContainerTextFlip component styling with new font sizes (text-lg to text-xl base, md:text-4xl to md:text-6xl) and changed text color from white to black Changed "Termwork" to "TermWork" for consistency Enhanced "How It Works" section header with larger font (text-sm to text-2xl sm:text-3xl), bolder weight, and red-400 color Refactored step cards (1, 2, 3) with improved formatting and consistent text color scheme (changed gray-600 dark:text-gray-300 to text-white/90) Removed dark mode class references for cleaner styling +51/-38

---

[vercel]

@Namitanaik07 is attempting to deploy a commit to the agastya's projects Team on Vercel.

A member of the Team first needs to authorize it.

[qodo-free-for-open-source-projects]

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 <!-- /create_ticket --create_ticket=true --> </details></td></tr>
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
⚪	No custom compliance provided Follow the guide to enable custom compliance check.
Update

Compliance status legend

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

[qodo-free-for-open-source-projects]

PR Code Suggestions ✨

Explore these optional code suggestions:

Category	Suggestion	Impact
High-level	Adopt a systematic theming approach The suggestion recommends replacing hardcoded Tailwind utility classes for colors and font sizes with a systematic theming approach. This involves using Tailwind's theme configuration and creating component variants to improve maintainability and reusability. Examples: src/app/page.tsx [137-139] <div className="mb-4 text-center text-2xl sm:text-3xl font-bold font-mono text-red-400 tracking-[0.25em]"> HOW IT WORKS </div> src/app/page.tsx [149-151] <p className="text-white/90 text-base"> Simply upload your data to our secure platform. We support various file formats and data types to ensure a seamless integration with your existing systems. </p> Solution Walkthrough: Before: // src/app/page.tsx // ... <div className="mb-4 text-center text-2xl sm:text-3xl font-bold font-mono text-red-400 tracking-[0.25em]"> HOW IT WORKS </div> <h2 className="text-3xl sm:text-5xl font-bold text-white ... mb-12 text-center"> Just 3 steps to get started </h2> // ... <div> <h3 className="text-lg font-bold text-white mb-1">1. Upload Your Data</h3> <p className="text-white/90 text-base"> Simply upload your data to our secure platform... </p> </div> // ... After: // tailwind.config.js (conceptual) theme: { extend: { colors: { brand: { primary: '#f87171' }, // red-400 }, letterSpacing: { 'wide-mono': '0.25em', } } } // src/app/page.tsx (after applying suggestion) // Using semantic classes or component variants <div className="section-eyebrow"> HOW IT WORKS </div> <h2 className="section-heading"> Just 3 steps to get started </h2> <StepCard title="1. Upload Your Data"> Simply upload your data to our secure platform... </StepCard> Suggestion importance[1-10]: 8 __ Why: The suggestion correctly identifies that the PR adds hardcoded styles and removes dark mode variants, proposing a more systematic theming approach which would significantly improve code maintainability and scalability.	Medium
Possible issue	Fix typo in copyright notice In the copyright notice, replace the typo "asshelp" with "TermWork" to match the project name used elsewhere. src/app/page.tsx [188] -<div className="mt-1">Copyright &copy; {new Date().getFullYear()} asshelp All rights reserved.</div> +<div className="mt-1">Copyright &copy; {new Date().getFullYear()} TermWork All rights reserved.</div> [To ensure code accuracy, apply this suggestion manually] Suggestion importance[1-10]: 6 __ Why: The suggestion correctly identifies a significant typo (asshelp) in the copyright notice and proposes a sensible correction (TermWork) based on other content in the file, improving the page's professionalism.	Low
Update

[Namitanaik07]

I’ve successfully made the pull request with the latest changes.
Kindly review it and, if everything looks good, please add the hacktoberfest-accepted label.
Thank you! 🙌

[kris70lesgo]

@Namitanaik07 kindly use the pr template and also add a video of the fixed component

[Namitanaik07]

Can u please tell from where I can get it and where to add it..

…

On Fri, 24 Oct, 2025, 10:07 am Agastya Khati, ***@***.***> wrote: *kris70lesgo* left a comment (kris70lesgo/asHelp#83) <#83 (comment)> @Namitanaik07 <https://github.com/Namitanaik07> kindly use the pr template and also add a video of the fixed component — Reply to this email directly, view it on GitHub <#83 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/BE6U75WALKZVF2RSN5YM2PD3ZGUJJAVCNFSM6AAAAACKBHRGZKVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZTINBRGAZDIMBRGQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>

[kris70lesgo]

@Namitanaik07 the pr template is already applied as u can see above u just didnt have write the details about pr like description and etc