feat: faq-section

[arnav30kulkarni]

📌 Description

Added a new FAQ accordion section at the bottom of the page using semantic <details> and <summary> elements.

The FAQ answers common user questions regarding:

• Video privacy
• Supported formats
• Processing performance
• Offline support

Changes Made

• Created reusable FAQ.tsx component
• Added 4 FAQ items
• Used semantic HTML for accessibility and keyboard navigation
• Styled component to match existing Reframe UI/theme
• Integrated FAQ section into VideoEditor.tsx

UI Notes

• Uses existing design tokens:

  • var(--surface)
  • var(--border)
  • var(--text)

• Includes smooth fade-in animation

• Responsive and visually consistent with current layout

Tested

• FAQ expands/collapses correctly
• Keyboard accessible
• Works alongside existing layout without affecting export flow
• Also consistent with the dark theme

Closes #198

[vercel]

@arnav30kulkarni is attempting to deploy a commit to the magic-peach1's projects Team on Vercel.

A member of the Team first needs to authorize it.

[github-actions]

👋 Thanks for your PR, @arnav30kulkarni!

Welcome to Reframe — a browser-based video editor built for everyone 🎬

What happens next

1. 🤖 Automated checks — build & TypeScript typecheck will run automatically
2. ✅ Vercel preview — a preview deployment will be created (requires maintainer authorization for fork PRs)
3. 👀 Code review — a maintainer will review your changes
4. 🚀 Merge — once approved, your PR will be merged!

Quick checklist

• PR title follows Conventional Commits (e.g. feat: add dark mode)
• Linked the issue this PR closes (e.g. Closes #123)
• Tested the changes locally (bun run dev)
• Build passes (bun run build)

Useful links

• 📖 CONTRIBUTING.md
• 🐛 Open Issues
• ⭐ Star the repo to support the project!

Happy coding! 🎉

[github-actions]

✅ PR Format Check Passed — @arnav30kulkarni

Basic format checks passed. A maintainer will review your code changes.

This does not mean the PR is approved — it just means the format is correct.

[arnav30kulkarni]

@magic-peach Please review for required changes. Also if any other additional information or POC is required for this PR to be merged let me know.

[magic-peach]

Hey @arnav30kulkarni! The FAQ section concept is solid and the code uses CSS variables correctly. Before merging, please fix these content issues:

1. Grammar: "No your video is not uploaded anywhere." → "No, your video is not uploaded anywhere." (missing comma)

2. Wrong word: "softwares" is not a valid English word — use "software" (uncountable noun)

3. Sentence structure: "...including MP4, MOV, AVI, and WEBM, if you have a video..." — this run-on sentence should be split: "...including MP4, MOV, AVI, and WEBM. If your video is in a different format..."

4. Offline answer needs accuracy: The app is fully client-side and works offline after the FFmpeg engine (~30MB) is downloaded on first use. A more accurate answer: "Once loaded, Reframe works fully offline — your browser needs to download the FFmpeg engine (~30MB) the first time, but after that no internet connection is needed."

These are quick fixes — once updated, this is ready to merge!

[arnav30kulkarni]

@magic-peach I have made the necessary changes, please verify and let me know if any other changes are needed.

[magic-peach]

Hey @arnav30kulkarni! The FAQ section is a useful addition. Lint and typecheck have not run on this PR. Please rebase on main to trigger full CI:

git fetch origin
git rebase origin/main
git push --force-with-lease

Once all CI checks pass, this can be merged.

[arnav30kulkarni]

Thanks for the review! I fixed the FAQ content issues, rebased on main, ran lint and typecheck locally, and force-pushed the updated branch. Waiting for CI/workflow approval now.

[magic-peach]

Hey @arnav30kulkarni! This PR needs a rebase on the latest main to trigger fresh CI checks. Please run:

git fetch origin
git rebase origin/main
git push --force-with-lease

Once CI (build/lint/typecheck) passes, we'll review and merge!

[arnav30kulkarni]

@magic-peach Rebased my PR with the main

[magic-peach]

Hey @arnav30kulkarni! This PR looks good in terms of code structure, but the build/lint/typecheck CI hasn't run yet. Please rebase onto the latest main to trigger fresh checks:

git fetch upstream
git rebase upstream/main
git push --force-with-lease

Once CI passes, we'll review and merge!

[magic-peach]

Hey @arnav30kulkarni! 👋

We've added a new requirement for all PRs: a screen recording showing your changes working on your local machine must be attached before a PR can be merged.

Please add a recording to this PR that shows:

1. bun run dev running at http://localhost:3000
2. The full working flow of your change (demonstrate the feature/fix end-to-end)
3. Any tests passing — if your change touches logic with tests, show bun run lint and bunx tsc --noEmit completing without errors in the terminal

How to record:

• macOS: Cmd + Shift + 5 → Record Selected Portion, or QuickTime Player
• Windows: Win + G → Xbox Game Bar → Capture
• Linux: OBS Studio, GNOME Screenshot, or kazam
• Any OS: Loom (free, easy to share)

Once you have the recording, drag the file directly into a comment on this PR, or paste a Loom link. This is now a hard requirement — see CONTRIBUTING.md for full details.

Thanks for contributing to Reframe! 🎬

[arnav30kulkarni]

Added a screen recording demonstrating:

• bun run dev running locally
• FAQ section working end-to-end
• live reload behavior
• bun run lint passing
• bunx tsc --noEmit passing

Reframe.Resize.trim.and.export.videos.in.your.browser.localhost_3000.-.reframe.-.Visual.Studio.Code.2026-05-23.15-56-27.1.mp4

[magic-peach]

Hey @arnav30kulkarni! The FAQ section looks good in concept — the content is accurate and the details/summary approach is a nice native HTML choice. The validate CI failure is a systemic infrastructure issue (GitHub Actions auth token error), not caused by your code.

A few minor things to fix before we can merge:

1. text-md is not a valid Tailwind class

Use text-base (or text-sm) instead of text-md in the two <summary> and <p> elements:

-className= "text-md text-[var(--text)] ..."
+className= "text-base text-[var(--text)] ..."

2. Missing newline at end of file

FAQ.tsx is missing a trailing newline — please add one.

3. Extra whitespace in class names

className= "..." has a space after the = — not a blocking issue but worth cleaning up for consistency.

4. The bun.lock diff

The lockfile changes look fine (minor dependency resolution updates). These are acceptable.

Please push a quick fix for the text-md → text-base swap and the trailing newline, and we'll get this merged!

[arnav30kulkarni]

"Hey @magic-peach, I've made the requested changes and rebased the branch on top of the latest main.
Please verify and let me know.

[magic-peach]

@arnav30kulkarni The FAQ section is a solid addition and the code looks clean — it uses CSS variables correctly, semantic <details>/<summary> HTML, and the content is accurate.

However, full CI (build/lint/typecheck) has not run on this PR yet. Please rebase on main to trigger a fresh CI run:

git fetch origin
git rebase origin/main
git push --force-with-lease

Once build/lint/typecheck pass, we can merge this!

[arnav30kulkarni]

@magic-peach I’ve rebased the PR branch with the latest main and resolved the merge conflicts. The branch should now be up to date and ready for fresh CI checks, could you approve the workflows so the CI build can run? . Please let me know if anything else is needed.

[arnav30kulkarni]

Hi @magic-peach , just a follow-up on this PR
I’ve rebased with the latest main, resolved conflicts, and pushed the updated changes. Please let me know if anything else is needed from my side. Thanks!