Skip to content

Changed font & color on contact page #2202

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
steam-bell-92 wants to merge 2 commits into
base: main
Choose a base branch
from
+74 −63
Open

Changed font & color on contact page #2202

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
dacdd15
Changed font & color on contact page
steam-bell-92 Sep 30, 2026
f4092f1
replaced questions on contact page
steam-bell-92 Sep 30, 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
73 changes: 48 additions & 25 deletions src/pages/contact-us/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
:root {
--help-ink: #0b1220;
--help-muted: #5f6b7a;
--help-ink: var(--ifm-font-color-base);
--help-muted: var(--ifm-color-emphasis-700);
--help-line: #e4e7eb;
--help-blue: #075cff;
--help-green: #20c96b;
--help-green: #16a34a;
}

.help-center {
min-height: 100vh;
background: #f5f5f4;
color: var(--help-ink);
font-family: "Manrope", "Avenir Next", sans-serif;
font-family: var(--font-family);
}

.help-center__content {
Expand All @@ -20,14 +19,14 @@
}

.help-center__header {
max-width: 650px;
max-width: none;
margin-bottom: 2rem;
}

.help-center__eyebrow,
.support-direct__eyebrow {
margin: 0 0 0.85rem;
color: var(--help-blue);
color: var(--help-green);
font-size: 0.68rem;
font-weight: 800;
letter-spacing: 0.16em;
Expand All @@ -38,18 +37,27 @@
.help-center h1 {
margin: 0;
color: var(--help-ink);
font-family:
"Space Grotesk",
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: clamp(2.15rem, 5vw, 3.2rem);
font-weight: 800;
letter-spacing: -0.045em;
font-weight: 700;
letter-spacing: -0.03em;
line-height: 1.05;
white-space: nowrap;
}

.help-center__intro {
max-width: 620px;
max-width: none;
margin: 1rem 0 0;
color: var(--help-muted);
font-size: 0.88rem;
line-height: 1.65;
white-space: nowrap;
}

.help-center__search {
Expand All @@ -66,8 +74,8 @@
}

.help-center__search:focus-within {
border-color: #8ab0ff;
box-shadow: 0 0 0 3px rgb(7 92 255 / 11%);
border-color: var(--help-green);
box-shadow: 0 0 0 3px rgb(22 163 74 / 11%);
}

.help-center__search input {
Expand Down Expand Up @@ -113,14 +121,14 @@

.help-center__categories button:hover,
.help-center__categories button:focus-visible {
border-color: #a8c2fa;
color: var(--help-blue);
border-color: #86efac;
color: var(--help-green);
outline: 0;
}

.help-center__categories button.is-active {
border-color: var(--help-blue);
background: var(--help-blue);
border-color: var(--help-green);
background: var(--help-green);
color: #fff;
}

Expand All @@ -141,7 +149,7 @@
}

.faq-item.is-open {
border-color: #b5caff;
border-color: #86efac;
}

.faq-item__trigger {
Expand All @@ -164,7 +172,7 @@
}

.faq-item__trigger > svg:first-child {
color: var(--help-blue);
color: var(--help-green);
}

.faq-item__trigger > svg:last-child {
Expand All @@ -177,7 +185,7 @@
}

.faq-item__trigger:focus-visible {
outline: 2px solid var(--help-blue);
outline: 2px solid var(--help-green);
outline-offset: -2px;
}

Expand Down Expand Up @@ -214,9 +222,16 @@
.support-direct h2 {
margin: 0;
color: var(--help-ink);
font-family:
"Space Grotesk",
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 1.2rem;
font-weight: 800;
letter-spacing: -0.025em;
font-weight: 700;
letter-spacing: -0.01em;
}

.support-form > p,
Expand Down Expand Up @@ -318,8 +333,8 @@
.form-input:focus,
.form-select:focus,
.form-textarea:focus {
border-color: #8ab0ff;
box-shadow: 0 0 0 3px rgb(7 92 255 / 11%);
border-color: var(--help-green);
box-shadow: 0 0 0 3px rgb(22 163 74 / 11%);
}

.submit-button {
Expand All @@ -328,7 +343,7 @@
padding: 0.65rem 1.05rem;
border: 0;
border-radius: 0.45rem;
background: var(--help-blue);
background: var(--help-green);
color: #fff;
cursor: pointer;
font: inherit;
Expand Down Expand Up @@ -363,13 +378,21 @@
align-items: flex-start;
gap: 0.55rem;
padding: 0.8rem 0;
color: var(--help-blue);
color: var(--help-green);
}

.form-success-message h3 {
margin: 0;
color: var(--help-ink);
font-family:
"Space Grotesk",
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
font-size: 1rem;
font-weight: 700;
}

.form-success-message p {
Expand Down
64 changes: 26 additions & 38 deletions src/pages/contact-us/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,58 +36,46 @@ const categories: Category[] = [

const questions: Question[] = [
{
question: "How do I update my learning plan?",
answer: "Open your account settings, choose Learning plan, and select the topics or pace you want to change.",
question: "What is the recode hive?",
answer: "recode hive is a platform that provides learning resources, data engineering tutorials, blogs, and opportunities for open-source contribution.",
category: "Account & learning plan",
icon: CircleHelp,
},
{
question: "Will my plan be saved if I explore before signing up?",
answer: "Your progress is saved once you create an account. You can explore the learning paths before signing up and continue from there afterward.",
category: "Account & learning plan",
icon: CircleHelp,
},
{
question: "What is included with Premium?",
answer: "Premium includes expanded course access, practice materials, and additional progress guidance.",
category: "Billing & premium",
icon: CreditCard,
},
{
question: "How do refunds work?",
answer: "Send us your order details through the form below and the team will review your refund request.",
category: "Billing & premium",
icon: CreditCard,
},
{
question: "Why is a completed lesson not reflected in my progress?",
answer: "Refresh the lesson and check your connection. If your progress still does not update, send us the lesson URL and account email.",
question: "What features do the recode hive provides?",
answer: "We provide tutorials, documentation, hands-on projects, open-source contribution opportunities, earning opportunities, and community support.",
category: "Courses & progress",
icon: BookOpen,
},
{
question: "Where can I review weak topics?",
answer: "Your progress view highlights topics that need another pass and links back to the related lessons.",
category: "Courses & progress",
icon: BookOpen,
question: "How can I contribute tutorials?",
answer: "Fork the recode hive repository, review the contribution guidelines, create your tutorial content, and submit a pull request.",
category: "Projects & proof",
icon: ExternalLink,
},
{
question: "Can I use coding problems on mobile?",
answer: "Yes. Coding exercises are available on mobile browsers, although a larger screen is recommended for longer problems.",
category: "Coding & DataLab",
question: "What all resources are available here?",
answer: "Available resources include SQL, GitHub, Postman API testing, and Next.js development guides, with more technologies coming soon.",
category: "Courses & progress",
icon: FileText,
},
{
question: "Is anonymous DataLab work saved?",
answer: "Anonymous work is kept for the current session. Sign in to keep it available across devices.",
category: "Coding & DataLab",
icon: FileText,
question: "How can I contribute as a beginner?",
answer: "Start with the GitHub Basics guide, join the Discord community, look for good first issues, and follow the contribution guide.",
category: "Account & learning plan",
icon: CircleHelp,
},
{
question: "How do I submit a portfolio project?",
answer: "Use the project submission flow from your learning area and include a public demo or repository link.",
category: "Projects & proof",
icon: ExternalLink,
question: "How can I earn from this recode hive organisation?",
answer: "You can earn through the GitHub sponsorship program by making meaningful contributions and following the contribution guidelines.",
category: "Billing & premium",
icon: CreditCard,
},
{
question: "How will I stay up to date with the latest news from this organisation?",
answer: "Subscribe to the newsletter and follow recode hive on Instagram, Twitter, LinkedIn, YouTube, and Discord for updates.",
category: "Account & learning plan",
icon: MessageCircle,
},
];

Expand Down Expand Up @@ -306,7 +294,7 @@ className={activeCategory === category ? "is-active" : ""}
<p className="support-direct__eyebrow">Faster for quick questions</p>
<h2>Chat on WhatsApp</h2>
<p>For account access or a quick clarification, message the team directly.</p>
<a href="https://chat.whatsapp.com/Izl2yfbFlmY8CExjnIpNkX?mode=ems_copy_t" target="_blank" rel="noreferrer">
<a href="https://chat.whatsapp.com/D1CZ7BrLMVw4OzwsdVNdos?mode=gi_t" target="_blank" rel="noreferrer">
<MessageCircle size={17} aria-hidden="true" /> Open WhatsApp
</a>
<p className="support-direct__note">Never share passwords, OTPs or payment card details with support.</p>
Expand Down
Loading