feat(dev-utilities): add CSS Wave & SVG Shape Divider Generator (#387)

[erikurt9]

🌊 Add CSS Wave & SVG Shape Divider Generator

Closes #387

📌 Summary

Adds a new offline, client-side utility to the Dev Utilities sandbox that lets developers visually design SVG section dividers (waves, curves, spikes, steps, jagged peaks) and instantly export the result as raw SVG, an HTML/CSS snippet, or a downloadable .svg file.

✨ Features

• 5 divider styles: Waves, Smooth Curve, Triangle Spikes, Steps, and Jagged Peaks — each with its own path-generation algorithm.
• Dimension controls: height slider (20–300px) and number of waves/peaks slider (1–10).
• Customization: Flip (horizontal mirror), Invert (vertical mirror), and Asymmetrical toggles.
• Color pickers for the divider color and the preview canvas background.
• Live two-section preview showing the divider seamlessly applied between two stacked blocks.
• Export options:
  • Copy raw SVG markup
  • Copy an HTML/CSS boilerplate snippet (positioned wrapper, ready to paste)
  • Download as a standalone .svg file
• 100% offline — no external requests, no dependencies beyond React.

🗂️ Changes

• New: src/pages/DevUtilities/devutilities/ShapeDividerGenerator.jsx
• Modified: src/App.jsx — registers the /devutilities/shape-divider route
• Modified: src/config/sidebarSections.js — adds the sidebar navigation entry
• Modified: src/pages/DevUtilities/DevUtilities.jsx — adds the searchable overview card

🧪 How to test

1. Run the app locally and navigate to /devutilities/shape-divider (or find it via the Dev Utilities search bar / sidebar).
2. Switch between the 5 divider types and confirm the preview updates in real time.
3. Adjust height, peak count, flip, invert, and asymmetric options.
4. Change the divider and canvas colors.
5. Test Copy Code on both the SVG and HTML/CSS tabs.
6. Test Download SVG and confirm the file opens correctly.
7. Confirm the tool works with network disabled (fully offline).

📸 Screenshots

(add before/after screenshots or a short GIF of the tool here)

✅ Checklist

• Follows project conventions (functional components + hooks, Tailwind CSS)
• Registered in route, sidebar, and Dev Utilities overview card
• Fully offline / no external calls
• Screenshots added
• Tested locally

[vercel]

@erikurt9 is attempting to deploy a commit to the shamilahmdt's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Hello, @erikurt9!

Thank you for your contribution to DevTasks.

The maintainer has been notified and will review your pull request shortly. If any changes are needed, we will let you know in the comments below.