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> </div>
{/* Category Items */} {/* Category Items */}
<div className="py-2"> <div className="p-2">
{categories.map((category) => ( {categories.map((category) => (
<button <button
key={category.id} key={category.id}
onClick={() => setActiveCategory(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 activeCategory === category.id
? 'bg-[#e58625] text-white' ? 'bg-[#e58625] text-white'
: 'text-[#00293d] hover:bg-gray-50' : '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} {category.label}
</span> </span>
{activeCategory === category.id && ( {activeCategory === category.id && (
@@ -198,28 +198,28 @@ export default function FAQPage() {
<Image <Image
src={faq.icon} src={faq.icon}
alt="" alt=""
width={28} width={32}
height={28} height={32}
/> />
) : ( ) : (
<img <img
src={faq.icon} src={faq.icon}
alt="" alt=""
width={28} width={32}
height={28} height={32}
className="w-7 h-7 object-contain" 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} {faq.question}
</span> </span>
<Image <Image
src="/assets/icons/chevron-down-icon.svg" src="/assets/icons/chevron-down-icon.svg"
alt="" alt=""
width={16} width={20}
height={16} height={20}
className={`transition-transform duration-200 ${ className={`transition-transform duration-200 flex-shrink-0 ${
expandedFaq === faq.id ? 'rotate-180' : '' expandedFaq === faq.id ? 'rotate-180' : ''
}`} }`}
/> />
@@ -227,7 +227,7 @@ export default function FAQPage() {
{expandedFaq === faq.id && ( {expandedFaq === faq.id && (
<div className="px-6 pb-5"> <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} {faq.answer}
</p> </p>
</div> </div>
@@ -243,7 +243,7 @@ export default function FAQPage() {
<h3 className="font-fractul font-bold text-[20px] text-[#00293d] mb-2"> <h3 className="font-fractul font-bold text-[20px] text-[#00293d] mb-2">
{supportTitle} {supportTitle}
</h3> </h3>
<p className="font-serif text-[16px] text-[#00293d] whitespace-pre-line"> <p className="font-serif text-[20px] text-[#00293d] whitespace-pre-line">
{supportDescription} {supportDescription}
</p> </p>
</div> </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" 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 <Image
src="/assets/icons/chat-icon.svg" src="/assets/icons/chat-orange-icon.svg"
alt="" alt=""
width={20} width={22}
height={20} height={22}
/> />
Start Live Chat Start Live Chat
</Link> </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" 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 <Image
src="/assets/icons/email-icon.svg" src="/assets/icons/email-orange-icon.svg"
alt="" alt=""
width={20} width={22}
height={20} height={22}
/> />
Email Support Email Support
</a> </a>