Skip to content

new conf design — faq #14

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

Closed
wants to merge 3 commits into from
Closed

new conf design — faq #14

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
97075cb
Add .typography-link utility
hasparus May 7, 2025
f02232e
Add FrequentlyAskedQuestions section
hasparus May 7, 2025
f37ec2c
Tweak spacing
hasparus May 7, 2025
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
19 changes: 12 additions & 7 deletions src/app/conf/2025/components/call-for-proposals.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,14 +102,14 @@ function NotesTab() {
<li>
All speakers are required to adhere to our{" "}
<Link
className="text-neu-800 underline hover:no-underline dark:text-neu-50"
className="typography-link dark:text-neu-50"
href="/conf/2025/resources/#code-of-conduct"
>
Code of Conduct
</Link>
. We also highly recommend that speakers take our online{" "}
<a
className="text-neu-800 underline hover:no-underline dark:text-neu-50"
className="typography-link dark:text-neu-50"
target="_blank"
href="https://training.linuxfoundation.org/linux-courses/open-source-compliance-courses/inclusive-speaker-orientation"
>
Expand Down Expand Up @@ -169,7 +169,7 @@ function NotesTab() {
<a
href="https://youtu.be/2I5fYBLCfUA"
target="_blank"
className="text-neu-800 underline hover:no-underline dark:text-neu-50"
className="typography-link dark:text-neu-50"
>
Getting Over Your Imposter Syndrome to Become a Conference Speaker
</a>
Expand All @@ -183,8 +183,13 @@ function NotesTab() {
community and share your ideas and the work that you are doing and we
strongly encourage first-time speakers to submit talks for our events.
In the instance that you aren't sure about your abstract,{" "}
<a href="mailto:[email protected]">reach out to us</a> and we will
be more than happy to work with you on your proposal.
<a
href="mailto:[email protected]"
className="typography-link dark:text-neu-50"
>
reach out to us
</a>{" "}
and we will be more than happy to work with you on your proposal.
</p>
</div>
)
Expand Down Expand Up @@ -337,7 +342,7 @@ export function CallForProposals() {
For any questions regarding the CFP process, please email{" "}
<a
href="mailto:[email protected]"
className="text-neu-800 underline hover:no-underline dark:text-neu-50"
className="typography-link dark:text-neu-50"
>
[email protected]
</a>
Expand All @@ -351,7 +356,7 @@ export function CallForProposals() {
<a
target="_blank"
href="https://sessionize.com/playbook/submit-your-session-for-an-event"
className="text-neu-800 underline hover:no-underline dark:text-neu-50"
className="typography-link dark:text-neu-50"
>
how to submit your session
</a>{" "}
Expand Down
4 changes: 2 additions & 2 deletions src/app/conf/2025/components/register-section/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
email. If you did not, please contact us for more details:{" "}
<a
href="mailto:[email protected]"
className="gql-focus-visible text-neu-800 underline hover:no-underline"
className="typography-link"
>
[email protected]
</a>
Expand All @@ -57,7 +57,7 @@ export function RegisterSection({ className, ...props }: RegisterSectionProps) {
register as a Sponsor. For further questions, please email us:{" "}
<a
href="mailto:[email protected]"
className="gql-focus-visible text-neu-800 underline hover:no-underline"
className="typography-link"
>
[email protected]
</a>
Expand Down
254 changes: 195 additions & 59 deletions src/app/conf/2025/faq.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,101 +1,237 @@
import { ArrowRight } from "lucide-react"

import styles from "./index.module.css"
import clsx from "clsx"
import ArrowDown from "./pixelarticons/arrow-down.svg?svgr"

const FAQS = [
{
question: "When will speakers and the agenda be announced?",
answer:
"Stay tuned to our social media channels and website for updates on speakers and the agenda.",
answer: (
<>
Stay tuned to our social media channels and website for updates on
speakers and the agenda.
</>
),
},
{
question: "Can I sponsor the event?",
answer:
'Yes! We offer various sponsorship packages. See <a href="#sponsors">this</a> section for more information.',
answer: (
<>
Yes! We offer various sponsorship packages. See the{" "}
<a className="typography-link" href="#sponsors">
Sponsors
</a>{" "}
section for more information.
</>
),
},
{
question: "Are there group discounts for teams?",
answer:
'If you have a group of 5 or more people, you can receive a 10% discount on all passes. All pass types must be the same, and all registrations must be processed under one group registration and must be paid with the same credit card. To create a group, select “Add Another Person” to your registration. When 5 or more people are added the 10% discount will be automatically applied. <a href="mailto:[email protected]">[email protected]</a> for any questions.',
answer: (
<>
If you have a group of 5 or more people, you can receive a 10% discount
on all passes. All pass types must be the same, and all registrations
must be processed under one group registration and must be paid with the
same credit card.
<br />
<br />
To create a group, select “Add Another Person” to your registration.
When 5 or more people are added the 10% discount will be automatically
applied.{" "}
<a
className="typography-link"
href="mailto:[email protected]"
>
[email protected]
</a>{" "}
for any questions.
</>
),
},
{
question: "What is the refund and cancellation policy?",
answer: `If you must cancel for any reason, please sign back into your registration, click the “Register/Modify” button and select “Unregister.” If you need further assistance, please contact <a href="mailto:[email protected]">[email protected]</a>.<br/><br/>Refunds will only be issued for cancellations received two weeks prior to the event start date, including bulk ticket request refunds, and will appear as a credit on the card's statement 7-10 business days after cancellation. Individual refund requests for late cancellations due to sickness or emergency will be considered on a case by case basis - <a href="mailto:[email protected]">[email protected]</a>.<br/><br/>Refunds can only be issued on the card the original payment was made.`,
answer: (
<>
If you must cancel for any reason, please sign back into your
registration, click the “Register/Modify” button and select
“Unregister.” If you need further assistance, please contact{" "}
<a
className="typography-link"
href="mailto:[email protected]"
>
[email protected]
</a>
.<br />
<br />
Refunds will only be issued for cancellations received two weeks prior
to the event start date, including bulk ticket request refunds, and will
appear as a credit on the card's statement 7-10 business days after
cancellation. Individual refund requests for late cancellations due to
sickness or emergency will be considered on a case by case basis -{" "}
<a
className="typography-link"
href="mailto:[email protected]"
>
[email protected]
</a>
.<br />
<br />
Refunds can only be issued on the card the original payment was made.
</>
),
},
{
question: "Can I transfer my registration?",
answer:
"If you are unable to attend, you may substitute another attendee in lieu of cancellation. To substitute an attendee, sign back into your registration, click the “Register/Modify”, and select “Transfer Registration” on your confirmation page.",
answer: (
<>
If you are unable to attend, you may substitute another attendee in lieu
of cancellation. To substitute an attendee, sign back into your
registration, click the “Register/Modify”, and select “Transfer
Registration” on your confirmation page.
</>
),
},
{
question: "Can I get certificate of attendance?",
answer: `You can download your Certificate of Attendance directly from your <a target="_blank" href="https://openprofile.dev/myevents">LFX dashboard</a> by navigating to the "Past Events" section in the LF Events column. Please Note: We verify attendance through the registration system, and certificates will only be available for download after the event is completed.`,
answer: (
<>
You can download your Certificate of Attendance directly from your{" "}
<a
className="typography-link"
target="_blank"
href="https://openprofile.dev/myevents"
>
LFX dashboard
</a>{" "}
by navigating to the "Past Events" section in the LF Events column.
<br />
<br />
Please Note: We verify attendance through the registration system, and
certificates will only be available for download after the event is
completed.
</>
),
},
{
question: "How do I request a visa letter?",
answer: `You must be registered for the event before requesting a visa letter. Please note: it can take up to an hour for our registration system and visa letter system to sync. <a target="_blank" href="https://events.linuxfoundation.org/about/visa-request/">Request a visa letter</a>.`,
answer: (
<>
You must be registered for the event before requesting a visa letter.
Please note: it can take up to an hour for our registration system and
visa letter system to sync.{" "}
<a
className="typography-link"
target="_blank"
href="https://events.linuxfoundation.org/about/visa-request/"
>
Request a visa letter
</a>
.
</>
),
},
{
question: "Where can I find health and safety information for the event?",
answer:
'Your well-being is our top priority. We continuously update our health and safety guidelines based on local regulations. Information about food allergies, medical resources, emergency contacts, and safety services can be found on <a href="/conf/2025/resources#onsite-resources">this</a> page.',
answer: (
<>
Your well-being is our top priority. We continuously update our health
and safety guidelines based on local regulations. Information about food
allergies, medical resources, emergency contacts, and safety services
can be found on{" "}
<a
className="typography-link"
href="/conf/2025/resources#onsite-resources"
>
this
</a>{" "}
page.
</>
),
},
{
question: "What accessibility and onsite resources are available?",
answer:
'We are committed to providing a comfortable and accessible experience for all attendees. Onsite resources include a private nursing room, venue accessibility support, reserved seating, a quiet room, communication and pronoun stickers, all-gender restrooms, first aid assistance, and a process for handling harassment reports. For full details on these resources, please visit <a href="/conf/2025/resources#health--safety">this</a> page.',
answer: (
<>
We are committed to providing a comfortable and accessible experience
for all attendees. Onsite resources include a private nursing room,
venue accessibility support, reserved seating, a quiet room,
communication and pronoun stickers, all-gender restrooms, first aid
assistance, and a process for handling harassment reports. For full
details on these resources, please visit{" "}
<a
className="typography-link"
href="/conf/2025/resources#health--safety"
>
this
</a>{" "}
page.
</>
),
},
{
question: "Looking for more?",
answer: "Checkout our <a href='/conf/2025/resources'>Resources</a> page.",
answer: (
<>
Check out our{" "}
<a className="typography-link" href="/conf/2025/resources">
Resources
</a>{" "}
page.
</>
),
},
{
question: "Cannot find the answer to your question?",
answer:
'You are welcome to email us <a href="mailto:[email protected] ">[email protected]</a>.',
answer: (
<>
You are welcome to email us{" "}
<a
className="typography-link"
href="mailto:[email protected] "
>
[email protected]
</a>
.
</>
),
},
]

export function FAQ() {
export function FAQ({ className }: { className?: string }) {
return (
<div id="faq" className={styles.faq}>
<div className="mx-auto grid max-w-7xl gap-12 md:grid-cols-2">
<div>
<h2 className="mb-4 select-none text-4xl font-bold md:text-5xl">
Frequently
<br />
Asked Questions
</h2>
<p className="select-none text-sm">
You can find much more information on our{" "}
<a
href="/conf/2025/resources"
className="select-text text-primary hover:underline"
>
Resources
</a>{" "}
page.
</p>
</div>
<section
id="faq"
className={clsx(
"gql-conf-section flex gap-10 max-md:flex-col xl:gap-24 2xl:gap-36",
className,
)}
>
<div>
<h2 className="typography-h2">Frequently Asked Questions</h2>
<p className="mt-6 typography-body-md">
You can find much more information on our{" "}
<a href="/conf/2025/resources" className="typography-link">
Resources
</a>{" "}
page.
</p>
</div>

<div>
{FAQS.map((faq, index) => (
<details
key={index}
className="group border-b border-dashed border-white/10"
>
<summary className="flex cursor-pointer list-none items-center justify-start gap-2 py-6 text-left focus:outline-none">
<ArrowRight className="size-5 shrink-0 transition-transform duration-200 group-open:rotate-90" />
<span className="select-none text-lg">{faq.question}</span>
</summary>
<p
className="-mt-4 ml-7 whitespace-pre-wrap pb-6 text-gray-300 [&>a]:underline"
dangerouslySetInnerHTML={{ __html: faq.answer }}
/>
</details>
))}
</div>
<div className="grow space-y-4 md:space-y-6">
{FAQS.map((faq, index) => (
<details
open={index === 0}
key={index}
className="group/q w-full border border-neu-400 @container"
>
<summary className="flex cursor-pointer list-none items-center justify-between gap-2 border-neu-400 p-2 px-3 focus:outline-none group-open/q:border-b [&::-webkit-details-marker]:hidden">
<span className="select-none typography-body-lg">
{faq.question}
</span>
<ArrowDown className="size-10 text-sec-darker group-open/q:rotate-180" />
</summary>
<div className="p-3 typography-body-md">{faq.answer}</div>
</details>
))}
</div>
</div>
</section>
)
}
6 changes: 0 additions & 6 deletions src/app/conf/2025/index.module.css
View file
Open in desktop

This file was deleted.

2 changes: 2 additions & 0 deletions src/app/conf/2025/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ export default function Page() {
<Sponsor />
<Register />
<Venue />
</div>
<div className="gql-conf-container text-neu-900">
<FAQ />
</div>
</main>
Expand Down
Loading
Loading