Re-Quest/frontend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add an orange chat icon and apply various UI and style refinements to the FAQ page.

Browse Source
This commit is contained in:
pradeepkumar
2026-03-08 00:47:29 +05:30
parent 037acd95c7
commit 08c0d94f5f
2 changed files with 26 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
public/assets/icons/chat-orange-icon.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21 15C21 15.5304 20.7893 16.0391 20.4142 16.4142C20.0391 16.7893 19.5304 17 19 17H7L3 21V5C3 4.46957 3.21071 3.96086 3.58579 3.58579C3.96086 3.21071 4.46957 3 5 3H19C19.5304 3 20.0391 3.21071 20.4142 3.58579C20.7893 3.96086 21 4.46957 21 5V15Z" stroke="#E58625" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
<line x1="8" y1="8" x2="16" y2="8" stroke="#E58625" stroke-width="1.5" stroke-linecap="round"/>
<line x1="8" y1="11" x2="16" y2="11" stroke="#E58625" stroke-width="1.5" stroke-linecap="round"/>
<line x1="8" y1="14" x2="12" y2="14" stroke="#E58625" stroke-width="1.5" stroke-linecap="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 741 B

40
src/app/faq/page.tsx
View File

@@ -144,18 +144,18 @@ export default function FAQPage() {
</div>
{/* Category Items */}
<div className="py-2">
<div className="p-2">
{categories.map((category) => (
<button
key={category.id}
onClick={() => setActiveCategory(category.id)}
className={`w-full px-6 py-3 flex items-center justify-between text-left transition-colors ${
className={`w-full px-4 py-3 flex items-center justify-between text-left transition-colors rounded-[7px] ${
activeCategory === category.id
? 'bg-[#e58625] text-white'
: 'text-[#00293d] hover:bg-gray-50'
}`}
>
<span className={`${activeCategory === category.id ? 'font-fractul font-semibold' : 'font-serif'} text-[14px]`}>
<span className={`${activeCategory === category.id ? 'font-fractul font-bold' : 'font-serif'} text-[14px]`}>
{category.label}
</span>
{activeCategory === category.id && (
@@ -198,28 +198,28 @@ export default function FAQPage() {
<Image
src={faq.icon}
alt=""
width={28}
height={28}
width={32}
height={32}
/>
) : (
<img
src={faq.icon}
alt=""
width={28}
height={28}
className="w-7 h-7 object-contain"
width={32}
height={32}
className="w-8 h-8 object-contain"
/>
)
)}
<span className="flex-1 font-fractul font-semibold text-[18px] text-[#00293d]">
<span className="flex-1 font-fractul font-semibold text-[20px] text-[#00293d]">
{faq.question}
</span>
<Image
src="/assets/icons/chevron-down-icon.svg"
alt=""
width={16}
height={16}
className={`transition-transform duration-200 ${
width={20}
height={20}
className={`transition-transform duration-200 flex-shrink-0 ${
expandedFaq === faq.id ? 'rotate-180' : ''
}`}
/>
@@ -227,7 +227,7 @@ export default function FAQPage() {
{expandedFaq === faq.id && (
<div className="px-6 pb-5">
<p className="font-serif text-[16px] text-[#00293d] leading-relaxed pl-11">
<p className="font-serif text-[20px] text-[#00293d] leading-relaxed pl-12">
{faq.answer}
</p>
</div>
@@ -243,7 +243,7 @@ export default function FAQPage() {
<h3 className="font-fractul font-bold text-[20px] text-[#00293d] mb-2">
{supportTitle}
</h3>
<p className="font-serif text-[16px] text-[#00293d] whitespace-pre-line">
<p className="font-serif text-[20px] text-[#00293d] whitespace-pre-line">
{supportDescription}
</p>
</div>
@@ -254,10 +254,10 @@ export default function FAQPage() {
className="flex items-center justify-center gap-2 w-[174px] h-[51px] border border-[#00293d] rounded-[7px] font-fractul text-[16px] text-[#00293d] hover:bg-gray-50 transition-colors"
>
<Image
src="/assets/icons/chat-icon.svg"
src="/assets/icons/chat-orange-icon.svg"
alt=""
width={20}
height={20}
width={22}
height={22}
/>
Start Live Chat
</Link>
@@ -266,10 +266,10 @@ export default function FAQPage() {
className="flex items-center justify-center gap-2 w-[174px] h-[51px] border border-[#00293d] rounded-[7px] font-fractul text-[16px] text-[#00293d] hover:bg-gray-50 transition-colors"
>
<Image
src="/assets/icons/email-icon.svg"
src="/assets/icons/email-orange-icon.svg"
alt=""
width={20}
height={20}
width={22}
height={22}
/>
Email Support
</a>