UI Enhancements and Fixes

[213sanjana]

User description

🧩 Overview
This pull request implements major UI/UX improvements across the website to enhance design consistency, readability, and user experience. The updates address previous visual issues, improve navigation, and introduce new interactive features.

🔧 Changes Implemented
🧭 Navbar
-Improved icon visibility for better contrast.
-Added hover effects and smooth transitions for interactivity.
-Made the navbar fully responsive across all pages.
-Ensured the navbar design remains consistent throughout every page.
Before & After

📄 "How It Works" Section
-Enhanced text readability by adding a semi-transparent overlay on the gradient background.
-Improved color contrast for better visibility on all devices.
Before & After

🃏 Cards Section
-Extended testimonial card slides to reach the full width of the screen for a cleaner, modern layout.
Before & After

🦶 Footer
-Added a new, structured footer with:
-Navigation links
-Contact information
-Social media icons
-Ensured the footer remains consistent across all pages.

🖼️ Image Visibility Fix
-Fixed the issue where the image in the white tab was not visible.

✨ Additional Enhancements
-Added a “Back to Top” button for improved navigation.
-Implemented a dedicated Contact Page for user queries and support.
Back to Top Button

Contacts Page

Closes Issue - #58
Hacktoberfest25

---

PR Type

Enhancement, Bug fix

---

Description

• Resolved merge conflicts and consolidated duplicate code across API routes and utilities

• Improved TypeScript type safety by replacing any with unknown in error handling

• Added new Footer and Back-to-Top components for consistent site navigation

• Created dedicated Contact page with form submission and contact information

• Enhanced AI assignment generator with file upload support and improved image handling

• Fixed Supabase client initialization with fallback handling for missing environment variables

---

Diagram Walkthrough

flowchart LR
  A["Merge Conflicts"] -->|Resolve| B["Consolidated Code"]
  C["Type Safety Issues"] -->|Fix| D["Unknown Error Types"]
  E["Missing Components"] -->|Add| F["Footer & Back-to-Top"]
  G["New Features"] -->|Implement| H["Contact Page & File Upload"]
  B --> I["Enhanced Codebase"]
  D --> I
  F --> I
  H --> I

Loading

File Walkthrough

	Relevant files
Bug fix	5 files route.ts Improved error handling with proper TypeScript types          +2/-2      route.ts Enhanced error type safety in export endpoint                        +2/-2      route.ts Fixed error handling with unknown type casting                      +2/-2      route.ts Resolved merge conflicts and simplified image handling logic +20/-68  document-utils.ts Resolved merge conflicts in PDF and Word export functions +36/-80
Error handling	3 files supabaseclient.ts Added fallback handling for missing Supabase environment variables +6/-3      page.tsx Added Supabase client availability checks before database operations +8/-0      signup.tsx Added Supabase client availability checks and removed unused imports +11/-2
Configuration changes	1 files package.json Reordered dependencies for consistency                                      +3/-2
Enhancement	10 files page.tsx Resolved merge conflicts and integrated navbar and footer components +17/-188 page.tsx Created new dedicated contact page with form and contact information +283/-0  page.tsx Replaced inline footer with reusable Footer component        +2/-47    layout.tsx Added Back-to-Top button component to root layout                +6/-2      page.tsx Replaced inline footer with Footer component and updated hero image +12/-16  back-to-top.tsx Created new Back-to-Top button component with smooth scrolling +58/-0    footer.tsx Created comprehensive reusable footer with newsletter and social links +192/-0  mwrap.tsx Added testimonials and fixed marquee scrolling with duplicated content +37/-10  nav.tsx Updated navigation links and added Supabase client safety checks +14/-9    resizable-navbar.tsx Fixed navbar layout and styling for better responsiveness +3/-3
Miscellaneous	4 files page.tsx Removed unused Navbar component import                                      +0/-3      navbar1.tsx Removed unused Image import                                                            +0/-1      textarea.tsx Simplified TextareaProps type definition                                  +1/-2      usage-tracker.tsx Commented out unused updateUsage function                                +13/-13

---

[vercel]

@213sanjana 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
Codebase Duplication Compliance
⚪	Codebase context is not defined Follow the guide to enable codebase context checks.
Custom Compliance
🟢	Generic: Meaningful Naming and Self-Documenting Code Objective: Ensure all identifiers clearly express their purpose and intent, making code self-documenting Status: Passed
	Generic: Secure Error Handling Objective: To prevent the leakage of sensitive system information through error messages while providing sufficient detail for internal debugging. Status: Passed
⚪	Generic: Comprehensive Audit Trails Objective: To create a detailed and reliable record of critical system actions for security analysis and compliance. Status: Missing auditing: Newly added API behaviors (file ingestion, image fetching, content generation) do not add any audit logging of critical actions like who invoked the generation, uploaded files processed, or outcomes, which may be required for audit trails. Referred Code return NextResponse.json({ error: 'Topic and subject are required' }, { status: 400 }); } // Extract text from uploaded files let fileContent = ''; const files = Array.from(formData.entries()).filter(([key]) => key.startsWith('file_')); for (const [, file] of files) { if (file instanceof File) { const text = await file.text(); fileContent += `\n--- Content from ${file.name} ---\n${text}\n\n`; } } const model = genAI.getGenerativeModel({ model: 'gemini-2.0-flash-exp' }); const prompt = `Generate a comprehensive academic assignment on "${topic}" for ${subject} at ${level || 'undergraduate'} level. Target word count: ${wordCount || 1000} words. ${requirements ? `Additional requirements: ${requirements}` : ''} ${fileContent ? `\nReference materials:\n${fileContent}` : ''} ... (clipped 30 lines)
	Generic: Robust Error Handling and Edge Case Management Objective: Ensure comprehensive error handling that provides meaningful context and graceful degradation Status: Weak file errors: File reading errors are no longer caught/logged per-file and generic failures are handled at the top-level only, reducing context for debugging edge cases in uploaded file processing. Referred Code for (const [, file] of files) { if (file instanceof File) { const text = await file.text(); fileContent += `\n--- Content from ${file.name} ---\n${text}\n\n`; } }
	Generic: Secure Logging Practices Objective: To ensure logs are useful for debugging and auditing without exposing sensitive information like PII, PHI, or cardholder data. Status: Console errors: New console.error statements may log error objects that could include sensitive data from document content or image URLs without redaction. Referred Code // Check if we're in browser environment if (typeof window === 'undefined' || typeof document === 'undefined') { console.error('PDF export only works in browser environment'); return false; } const pdf = new jsPDF(); // Parse HTML and extract structured content const tempDiv = document.createElement('div'); tempDiv.innerHTML = content.replace(/<style[^>]*>[\s\S]*?<\/style>/gi, ''); let yPosition = 20; const pageHeight = pdf.internal.pageSize.height; const lineHeight = 6; const margin = 15; // Process each element including images const elements = tempDiv.querySelectorAll('h1, h2, h3, h4, h5, h6, p, div, li, img'); for (const element of Array.from(elements)) { ... (clipped 18 lines)
	Generic: Security-First Input Validation and Data Handling Objective: Ensure all data inputs are validated, sanitized, and handled securely to prevent vulnerabilities Status: Input sanitization: The API appends raw uploaded file text and image URLs into prompts/HTML without explicit validation or sanitization, which may risk injection or unsafe content rendering. Referred Code for (const [, file] of files) { if (file instanceof File) { const text = await file.text(); fileContent += `\n--- Content from ${file.name} ---\n${text}\n\n`; } } const model = genAI.getGenerativeModel({ model: 'gemini-2.0-flash-exp' }); const prompt = `Generate a comprehensive academic assignment on "${topic}" for ${subject} at ${level || 'undergraduate'} level. Target word count: ${wordCount || 1000} words. ${requirements ? `Additional requirements: ${requirements}` : ''} ${fileContent ? `\nReference materials:\n${fileContent}` : ''} Structure the assignment with: 1. Title 2. Introduction 3. Main content with proper headings 4. Conclusion 5. References (if applicable) ... (clipped 18 lines)
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	Resolve merge conflicts in multiple files The PR has unresolved merge conflicts in ai-generator/page.tsx, generate-assignment/route.ts, and document-utils.ts. These markers must be removed by properly resolving the conflicts to make the code valid. Examples: src/app/ai-generator/page.tsx [60-81] try { const formDataWithFiles = new FormData(); Object.entries(formData).forEach(([key, value]) => { formDataWithFiles.append(key, value.toString()); }); uploadedFiles.forEach((file, index) => { formDataWithFiles.append(`file_${index}`, file); }); const response = await fetch('/api/generate-assignment', { ... (clipped 12 lines) src/app/api/generate-assignment/route.ts [59-88] // Extract text from uploaded files let fileContent = ''; const files = Array.from(formData.entries()).filter(([key]) => key.startsWith('file_')); for (const [, file] of files) { if (file instanceof File) { const text = await file.text(); fileContent += `\n--- Content from ${file.name} ---\n${text}\n\n`; } } ... (clipped 20 lines) Solution Walkthrough: Before: // src/app/ai-generator/page.tsx const handleGenerate = async () => { // ... try { <<<<<<< HEAD const formDataWithFiles = new FormData(); // ... append files const response = await fetch('/api/generate-assignment', { method: 'POST', body: formDataWithFiles }); ======= const response = await fetch('/api/generate-assignment', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(formData) }); >>>>>>> 744373a (ai powered assignment generator added) // ... } // ... }; After: // src/app/ai-generator/page.tsx const handleGenerate = async () => { // ... try { const formDataWithFiles = new FormData(); Object.entries(formData).forEach(([key, value]) => { formDataWithFiles.append(key, value.toString()); }); uploadedFiles.forEach((file, index) => { formDataWithFiles.append(`file_${index}`, file); }); const response = await fetch('/api/generate-assignment', { method: 'POST', body: formDataWithFiles }); // ... } // ... }; Suggestion importance[1-10]: 10 __ Why: The suggestion correctly identifies unresolved merge conflict markers in multiple files, which is a critical blocking issue that renders the code unmergeable and non-functional.	High
	Implement backend logic for new forms The contact page and footer newsletter form use setTimeout to simulate submissions instead of sending data to a backend. This placeholder logic should be replaced with actual form submission functionality. Examples: src/app/contact/page.tsx [46-60] const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); setIsSubmitting(true); // Simulate form submission try { await new Promise(resolve => setTimeout(resolve, 2000)); setSubmitStatus("success"); setFormData({ name: "", email: "", subject: "", message: "" }); } catch (error) { ... (clipped 5 lines) src/components/footer.tsx [10-18] const handleNewsletterSubmit = (e: React.FormEvent) => { e.preventDefault(); if (email) { setIsSubscribed(true); setEmail(''); // Here you would typically send the email to your backend setTimeout(() => setIsSubscribed(false), 3000); } }; Solution Walkthrough: Before: // src/app/contact/page.tsx const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); setIsSubmitting(true); // Simulate form submission try { await new Promise(resolve => setTimeout(resolve, 2000)); setSubmitStatus("success"); } catch (error) { setSubmitStatus("error"); } finally { setIsSubmitting(false); } }; After: // src/app/contact/page.tsx const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); setIsSubmitting(true); try { const response = await fetch('/api/contact', { method: 'POST', body: JSON.stringify(formData), }); if (!response.ok) throw new Error('Submission failed'); setSubmitStatus("success"); } catch (error) { setSubmitStatus("error"); } finally { setIsSubmitting(false); } }; Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies that two new features, the contact form and newsletter subscription, are non-functional UI mockups, which is a significant omission for a feature-enhancing PR.	Medium
Possible issue	Restore image search fallback logic Restore the image search fallback logic by using the assignment topic as the search term when imageQuery is empty but includeImages is enabled. src/app/api/generate-assignment/route.ts [89-98] // Fetch image if requested let finalContent = content; -if (includeImages && imageQuery) { - const imageData = await fetchRelevantImage(imageQuery); - if (imageData) { - finalContent = `<div style="text-align: center; margin: 20px 0;"> - <img src="${imageData.url}" alt="${imageData.alt}" style="max-width: 100%; height: auto; border-radius: 8px;" /> - </div>\n${content}`; +if (includeImages) { + const searchTerm = imageQuery || topic; + if (searchTerm) { + const imageData = await fetchRelevantImage(searchTerm); + if (imageData) { + finalContent = `<div style="text-align: center; margin: 20px 0;"> + <img src="${imageData.url}" alt="${imageData.alt}" style="max-width: 100%; height: auto; border-radius: 8px;" /> + </div>\n${content}`; + } } } Apply / Chat Suggestion importance[1-10]: 7 __ Why: The suggestion correctly identifies a functional regression where the fallback to use the assignment topic for image searches was removed, and proposes a valid fix to restore it.	Medium
	Ensure unique keys in list Ensure unique React keys for the TestimonialCard components in the second marquee by offsetting the index with the length of the first row's items. src/components/mwrap.tsx [118-156] const TestimonialMarquee: React.FC = () => { // Duplicate testimonials to ensure continuous scrolling without empty slots const extendedTestimonials = [...testimonials, ...testimonials, ...testimonials]; const firstRow = extendedTestimonials.slice(0, Math.ceil(extendedTestimonials.length / 2)); const secondRow = extendedTestimonials.slice(Math.ceil(extendedTestimonials.length / 2)); return ( <div className="w-full bg-gradient-to-br #0A0F1F py-20 overflow-hidden"> <div className="w-full"> <div className="space-y-8"> {/* First row - left to right */} <Marquee gradient={false} speed={40} pauseOnHover={true} className="overflow-hidden" > {firstRow.map((testimonial, index) => ( <TestimonialCard key={`${testimonial.id}-${index}`} testimonial={testimonial} /> ))} </Marquee> {/* Second row - right to left */} <Marquee gradient={false} speed={40} direction="right" pauseOnHover={true} className="overflow-hidden" > {secondRow.map((testimonial, index) => ( - <TestimonialCard key={`${testimonial.id}-${index}`} testimonial={testimonial} /> + <TestimonialCard key={`${testimonial.id}-${index + firstRow.length}`} testimonial={testimonial} /> ))} </Marquee> </div> </div> </div> ); }; Apply / Chat Suggestion importance[1-10]: 5 __ Why: The suggestion correctly identifies a potential for non-unique React keys due to how the lists are mapped and proposes a simple, effective fix to ensure key uniqueness.	Low
	Fix unreachable form submission error Modify the simulated handleSubmit function to include a random failure chance, enabling the testing of the form's currently unreachable error state UI. src/app/contact/page.tsx [46-60] const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => { e.preventDefault(); setIsSubmitting(true); // Simulate form submission try { - await new Promise(resolve => setTimeout(resolve, 2000)); + await new Promise((resolve, reject) => { + setTimeout(() => { + // Simulate a 50% chance of failure + if (Math.random() > 0.5) { + resolve("Success"); + } else { + reject(new Error("Simulated submission error")); + } + }, 2000); + }); setSubmitStatus("success"); setFormData({ name: "", email: "", subject: "", message: "" }); } catch (error) { setSubmitStatus("error"); } finally { setIsSubmitting(false); } }; Apply / Chat Suggestion importance[1-10]: 4 __ Why: The suggestion correctly identifies that the error handling for the simulated form submission is unreachable and proposes a valid fix to allow testing the error state UI.	Low
General	✅ Log swallowed errors for debugging Suggestion Impact: The catch block was updated to capture the error and include its message in the assistant's response, partially addressing the suggestion to not swallow errors. While it doesn't log to console, it surfaces the error message. code diff: - } catch { - setChatMessages(prev => [...prev, { role: 'assistant', content: 'Sorry, I encountered an error. Please try again.' }]); + } catch (error) { + const errorMsg = (error as Error).message || 'Unknown error'; + setChatMessages(prev => [...prev, { role: 'assistant', content: `Sorry, I encountered an error: ${errorMsg}. Please try again.` }]); } finally { In handleChatSubmit, log the caught error to the console instead of swallowing it to aid in debugging potential API call failures. src/app/ai-generator/page.tsx [143-147] -} catch { +} catch (error) { + console.error("Chat submission failed:", error); setChatMessages(prev => [...prev, { role: 'assistant', content: 'Sorry, I encountered an error. Please try again.' }]); } finally { setIsChatting(false); } [Suggestion processed] Suggestion importance[1-10]: 6 __ Why: The suggestion correctly points out that an error is being swallowed. Adding logging, as proposed, is a crucial improvement for debugging and application maintainability.	Low
Update

[213sanjana]

@kris70lesgo Please check the PR

[kris70lesgo]

@213sanjana can u make a video about all the ui fixes running properly and also in video show npm run build command successfully running , nice work on pr btw

[213sanjana]

@213sanjana can u make a video about all the ui fixes running properly and also in video show npm run build command successfully running , nice work on pr btw

Sure I will make it today

[213sanjana]

Screen.Recording.2025-10-29.205742.mp4

Gihub doesnt support large videos so I shared the ss
@kris70lesgo

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
as-help	Error			Oct 30, 2025 8:23am

[kris70lesgo]

i wanna merge but there is an issue can u fix it ?

[213sanjana]

@kris70lesgo I think the approvement from your side is left now.

[kris70lesgo]

@213sanjana thanks for contributing to ashelp

[213sanjana]

@kris70lesgo Please add the hacktoberfest- accepted label or my PR wont be considered

[kris70lesgo]

@213sanjana btw it doesnt matter but i will add the labels so u dont stress over it