UI/UX Enhancement: Hero Section Balancing + Expandable Editor Panel

[KD2303]

✨ UI/UX Enhancement: Balanced Hero Section + Expandable Editor Workspace

Description

This PR improves the overall UI/UX experience by redesigning the hero section layout and introducing expandable editor panels for a cleaner and more productive workflow.

The update focuses on visual balance, responsive behavior, smoother interactions, and distraction-free editing.

---

🚀 Changes Made

🎨 Hero Section Improvements

• Balanced typography, spacing, and layout structure
• Reduced oversized heading issues and overlap with decorative elements
• Improved alignment of floating UI elements
• Enhanced responsive behavior across screen sizes
• Refined CTA button placement and spacing
• Improved gradients, glow effects, and visual hierarchy
• Reduced visual clutter for a cleaner premium look

🖥️ Editor Workspace Improvements

• Added expandable/collapsible functionality for:
  • Form editor panel
  • Markdown preview panel
• Added fullscreen/focus editing mode
• Improved spacing and panel responsiveness
• Added smooth transition animations
• Improved usability on smaller devices
• Better split-pane balancing for editing workflow

---

🛠️ Tech Used

• CSS Grid & Flexbox
• Responsive breakpoints optimization
• Framer Motion / CSS transitions
• Dynamic panel resizing logic

---

✅ Expected Outcome

• Cleaner and more professional interface
• Better visual hierarchy
• Improved editing experience
• More focused and distraction-free workflow
• Fully responsive and balanced layout

---

📸 Screenshots

Before

After

---

🏷️ Labels

gssoc:approved level:intermediate quality:clean type:design type:feature

---

🔗 Related Issue

Closes #158

[netlify]

✅ Deploy Preview for makeareadme ready!

Name	Link
🔨 Latest commit	c1d7a50
🔍 Latest deploy log	https://app.netlify.com/projects/makeareadme/deploys/6a0de27cdf28e0000757808b
😎 Deploy Preview	https://deploy-preview-170--makeareadme.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
🤖 Make changes	Run an agent on this branch

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[KD2303]

@Mohit-368
I have made the requested changes. Please review them and let me know if anything else needs to be modified!

[Copilot]

Pull request overview

This PR enhances the landing page hero visuals and upgrades the README Maker workspace to support collapsible/expandable panels and a focus (fullscreen) editing mode.

Changes:

• Added new floating hero decorative elements (capsule + mini asterisk) with animations and responsive positioning.
• Introduced collapsible sidebar/editor/preview panels, preview expand mode, and focus/fullscreen mode controls.
• Updated workspace CSS to support panel transitions, resizing, and responsive behavior.

Reviewed changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
src/styles/index.css	Adds hero animations/elements and implements resizable + collapsible workspace panel styling.
src/pages/ReadmeMaker/Sidebar.jsx	Applies collapsed class based on new isCollapsed prop.
src/pages/ReadmeMaker/ReadmeMaker.jsx	Adds panel state management and header controls (collapse/expand + focus mode).
src/pages/ReadmeMaker/PreviewPanel.jsx	Adds collapsed/expanded panel states and preview header actions.
src/pages/ReadmeMaker/EditorPanel.jsx	Adds editor header with focus/collapse actions and collapsed state support.
src/pages/Landing/LandingPage.jsx	Adds new hero decorative DOM elements.
readmeforge.css	Mirrors hero animation/asset styling for the standalone preview stylesheet.

Comments suppressed due to low confidence (1)

src/pages/ReadmeMaker/ReadmeMaker.jsx:185

• These toggle controls indicate state visually via the active class, but they don’t expose the state to assistive tech. Add aria-pressed (and, if you keep emoji icons, ensure an accessible name via text/aria-label) so screen readers can announce whether Sidebar/Editor/Preview/Focus Mode is on or off.

            <button
              className={`hbtn-control ${sidebarCollapsed ? 'active' : ''}`}
              onClick={handleToggleSidebar}
              title={sidebarCollapsed ? "Expand Sidebar" : "Collapse Sidebar"}
            >
              📁 {sidebarCollapsed ? "Sidebar" : "Sidebar"}
            </button>
            <button
              className={`hbtn-control ${editorCollapsed ? 'active' : ''}`}
              onClick={handleToggleEditor}
              title={editorCollapsed ? "Expand Editor" : "Collapse Editor"}
            >
              ✍️ {editorCollapsed ? "Editor" : "Editor"}
            </button>
            <button
              className={`hbtn-control ${previewCollapsed ? 'active' : ''}`}
              onClick={handleTogglePreview}
              title={previewCollapsed ? "Expand Preview" : "Collapse Preview"}
            >
              👁️ {previewCollapsed ? "Preview" : "Preview"}
            </button>
            <button
              className={`hbtn-control primary-focus ${focusMode ? 'active' : ''}`}
              onClick={handleToggleFocusMode}
              title={focusMode ? "Exit Focus Mode" : "Focus Mode"}
            >
              ✨ Focus Mode
            </button>
          </div>

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Mohit-368]

@KD2303 you just changed the landing page but i want to enhance the full ui/ux you can see the below pr there is one shortcoming in that pr - its way too much laggy so u can fix it
#137

[KD2303]

Hi @Mohit-368, I didn't quite get your point. Could you please explain it in a bit more detail?

[sarvieka2407]

Hey @Mohit-368 , Could you review the changes and fixes I've made to the UI and merge the PR under GSSOC 26' if everything looks good?
Pull #137