Skip to content

Add “Didn’t Find Your Answer?” Redirect CTA Card on FAQ Page #891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Aarya-Chaudhari wants to merge 10 commits into
base: main
Choose a base branch
from
Open

Add “Didn’t Find Your Answer?” Redirect CTA Card on FAQ Page #891

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
6c18e09
Removing duplicate programs
Aarya-Chaudhari Feb 18, 2026
3f93b52
Adding feedback card
Aarya-Chaudhari Feb 18, 2026
b446e4c
Adding tips
Aarya-Chaudhari Feb 18, 2026
143a080
Fixing dark mode
Aarya-Chaudhari Feb 18, 2026
461c4dd
Adding dark toggle
Aarya-Chaudhari Feb 19, 2026
8e20a4c
Stucturing faqs
Aarya-Chaudhari Feb 19, 2026
5637ff6
Search bar
Aarya-Chaudhari Feb 19, 2026
3de1cde
Structuring top contributors
Aarya-Chaudhari Feb 19, 2026
5b580bd
Adding didn't find answer
Aarya-Chaudhari Feb 19, 2026
6305ed6
Merge branch 'main' into answer
Aarya-Chaudhari Feb 19, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
218 changes: 208 additions & 10 deletions frontend/css/contributors.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -923,6 +923,90 @@ body.dark-mode .contributors-section p {
align-items: center;
}

/* ===== Contributors Controls (Search + Toggle) ===== */
.contributors-controls {
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
margin: 30px auto 20px;
max-width: 900px;
flex-wrap: wrap;
}

/* Search Wrapper */
.search-wrapper {
position: relative;
flex: 1;
min-width: 280px;
}

/* Search Icon */
.search-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #9ca3af;
font-size: 15px;
pointer-events: none;
}

/* Search Input Styling */
#contributor-search {
width: 100%;
padding: 14px 16px 14px 42px;
border-radius: 12px;
border: 1.5px solid #e5e7eb;
font-size: 16px;
font-family: "Inter", sans-serif;
background: #ffffff;
transition: all 0.25s ease;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);
}

/* Hover Effect */
#contributor-search:hover {
border-color: #d1d5db;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* Focus Effect (Important for UX) */
#contributor-search:focus {
outline: none;
border-color: var(--primary-gold, #d4af37);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
background: #ffffff;
}

/* Bot Toggle Styling */
.bot-toggle {
display: flex;
align-items: center;
gap: 8px;
font-weight: 500;
color: #374151;
background: #ffffff;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid #e5e7eb;
transition: all 0.2s ease;
cursor: pointer;
}

.bot-toggle:hover {
border-color: #d1d5db;
background: #f9fafb;
}

.bot-toggle input {
accent-color: var(--primary-gold, #d4af37);
cursor: pointer;
}

/* Mobile Responsiveness */
@media (max-width: 640px) {
.contributors-controls {
/* Animation trigger */
.contributor-card.is-visible {
opacity: 1;
Expand Down Expand Up @@ -1020,7 +1104,6 @@ body.dark-mode .contributors-section p {

/* =========================================
SKELETON LOADING ANIMATION
========================================= */
.contributor-skeleton {
background: #fff;
border: 1px solid #eee;
Expand Down Expand Up @@ -1064,7 +1147,6 @@ body.dark-mode .contributors-section p {

/* =========================================
DARK MODE OVERRIDES (The Fix)
========================================= */
body.dark-mode .contributor-card {
background-color: #1e1e1e !important;
border-color: #333 !important;
Expand Down Expand Up @@ -1112,7 +1194,6 @@ body.dark-mode .sk {

/* =========================================
CONTRIBUTORS STATS
========================================= */

.contributors-stats {
display: flex;
Expand Down Expand Up @@ -1173,7 +1254,6 @@ body.dark-mode .sk {

/* =========================================
TOP CONTRIBUTOR – ENHANCED
========================================= */

.stat-pill.stat-top {
background: linear-gradient(180deg, #e6c453, #fdeeb5);
Expand All @@ -1196,7 +1276,6 @@ body.dark-mode .sk {

/* =========================================
CONTRIBUTORS CONTROLS
========================================= */

.contributors-controls {
display: flex;
Expand Down Expand Up @@ -1238,7 +1317,6 @@ body.dark-mode .sk {

/* =========================================
RESPONSIVE
========================================= */

@media (max-width: 768px) {
.contributors-stats {
Expand All @@ -1257,6 +1335,129 @@ body.dark-mode .sk {
align-items: stretch;
}

.bot-toggle {
justify-content: center;
}
}

.contributors-section {
padding-top: 40px;
}

.contributors-section h3 {
text-align: center;
margin-bottom: 10px;
}

.contributors-section p {
text-align: center;
margin-bottom: 20px;
color: #6b7280;
}

/* ===== Top Contributors Highlight Section ===== */
.top-contributors-section {
max-width: 1100px;
margin: 40px auto 20px;
padding: 30px 24px;
background: linear-gradient(135deg, #fffaf0, #fff7e6);
border-radius: 20px;
border: 1px solid #f1e3b0;
box-shadow: 0 12px 35px rgba(212, 175, 55, 0.15);
text-align: center;
}


.top-title {
text-align: center;
font-size: 22px;
font-weight: 700;
margin-bottom: 20px;
color: #b8860b;
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
}

.top-title i {
color: #d4af37;
}

.top-contributors-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 20px;
}

/* Highlight Top Cards */
.top-contributors-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: stretch;
justify-content: center;
}

/* Rank Badge */
.top-contributors-grid .contributor-card::before {
content: "🏆 Top";
position: absolute;
top: 10px;
right: 10px;
background: #d4af37;
color: white;
font-size: 12px;
font-weight: 600;
padding: 4px 8px;
border-radius: 8px;
}

.top-contributors-grid .contributor-card {
width: 100%;
max-width: 320px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: center;
}


/* Hover Effect */
.top-contributors-grid .contributor-card:hover {
transform: scale(1.08) translateY(-5px);
box-shadow: 0 20px 45px rgba(212, 175, 55, 0.25);
}

/* Dark Mode Support */
body.dark-mode .top-contributors-section {
background: linear-gradient(135deg, #1f2937, #111827);
border: 1px solid #374151;
}

body.dark-mode .top-title {
color: #facc15;
}
.top-card {
transform: scale(1.05);
border: 2px solid #f0d98c;
box-shadow: 0 15px 35px rgba(212, 175, 55, 0.18);
position: relative;
}

.top-rank-badge {
position: absolute;
top: 10px;
right: 12px;
font-size: 20px;
}

.contributor-chip.is-top {
background: #fff3cd;
color: #856404;
font-weight: 600;
}

.stat-pill {
width: 100%;
justify-content: center;
Expand All @@ -1274,7 +1475,6 @@ body.dark-mode .sk {

/* =========================================
DARK MODE
========================================= */

body.dark-mode .stat-pill {
background: linear-gradient(180deg, #ffffff, #ffe9a9);
Expand Down Expand Up @@ -1311,7 +1511,6 @@ body.dark-mode #contributor-search {

/* =========================================
ANIMATION
========================================= */

@keyframes statFadeUp {
to {
Expand All @@ -1322,7 +1521,6 @@ body.dark-mode #contributor-search {

/* ==========================
Enhance contributors UI
========================== */

.dark-mode {
--contributors-bg: #0f172a;
Expand Down Expand Up @@ -1401,4 +1599,4 @@ body.dark-mode #contributor-search {
/* Divider lines */
.dark-mode hr {
border-color: var(--contributors-border);
}
}
76 changes: 73 additions & 3 deletions frontend/css/feedback.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
body {
margin: 0;
}

.feedback-header {
text-align: center;
padding: 80px 20px 40px;
padding: 40px 20px 0px; /* remove bottom gap */
margin-bottom: 0;
}



.feedback-header h1 {
font-size: 2.5rem;
color: var(--deep-navy);
Expand All @@ -15,10 +22,12 @@

.feedback-container {
max-width: 600px;
margin: auto;
padding: 30px;
margin: 0 auto 60px; /* removes top gap */
padding: 0 20px 40px;
}



form {
display: flex;
flex-direction: column;
Expand Down Expand Up @@ -61,3 +70,64 @@ button:hover {
margin-top: 10px;
font-weight: 600;
}

/* ===== Card Layout Enhancement ===== */

.feedback-container {
max-width: 700px;
margin: auto;
padding: 40px 20px 80px;
display: flex;
justify-content: center;
}

.feedback-card {
width: 100%;
background: #ffffff;
padding: 35px 30px;
border-radius: 14px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.05);
}

/* Hover effect for modern UI depth */
.feedback-card:hover {
transform: translateY(-4px);
box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12);
}

/* Improve input styling consistency */
.feedback-card input,
.feedback-card select,
.feedback-card textarea {
width: 100%;
padding: 12px;
border-radius: 8px;
border: 1px solid #dcdcdc;
font-size: 1rem;
transition: border 0.2s ease, box-shadow 0.2s ease;
}

/* Focus interaction */
.feedback-card input:focus,
.feedback-card select:focus,
.feedback-card textarea:focus {
outline: none;
border-color: var(--primary-gold);
box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

/* Better button polish */
.feedback-card button {
margin-top: 10px;
font-size: 1rem;
letter-spacing: 0.3px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feedback-card button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}

Loading
Loading