page.tsx
1import { generateMeta } from '@/lib/generateMeta'
2import Layout from '@/components/Layout'
3
4export function generateMetadata() {
5 return generateMeta({
6 title: 'Trans Resources',
7 path: '/resources',
8 description: 'I made this page to help people like me find resources and information about transgender stuff. Read more here: https://bsky.app/profile/choco.rip/post/3lac3rncv432p'
9 })
10}
11
12export default function TransResourcesPage() {
13 return (
14 <Layout>
15 <div className="container mx-auto max-w-4xl px-4 py-12">
16 <h1 className="mb-8 text-4xl font-bold text-purple-400">Trans Resources</h1>
17
18 <div className="space-y-8">
19 {/* Important Notice */}
20 <div className="rounded-lg border border-yellow-500/50 bg-yellow-500/10 p-4">
21 <p className="text-yellow-200">
22 If you want to join a friendly trans community, you can join my <a href="https://discord.gg/x8A89TVJUv" className="text-yellow-400 hover:underline">Discord server</a>.
23 </p>
24 </div>
25
26 {/* Crisis Support - Moved to top */}
27 <section className="rounded-lg border border-red-500/50 bg-red-500/10 p-6">
28 <h2 className="mb-4 text-2xl font-semibold text-red-400">24/7 Crisis Support</h2>
29 <ul className="list-disc space-y-2 pl-6">
30 <li>Suicide and Crisis Lifeline: <a href="tel:988" className="text-red-400 hover:underline">988</a></li>
31 <li>Crisis Text Line: Text <span className="text-red-400">741741</span></li>
32 <li>Trans Lifeline: <a href="tel:877-565-8860" className="text-red-400 hover:underline">877-565-8860</a></li>
33 <li>LGBT National Hotline: <a href="tel:888-843-4564" className="text-red-400 hover:underline">888-843-4564</a></li>
34 </ul>
35 </section>
36
37 {/* Mental Health */}
38 <section className="rounded-lg border border-gray-800 bg-gray-900/50 p-6">
39 <h2 className="mb-4 text-2xl font-semibold text-purple-400">Mental Health Resources</h2>
40 <ul className="list-disc space-y-2 pl-6">
41 <li><a href="https://www.thetrevorproject.org" className="text-purple-400 hover:underline">The Trevor Project (24/7 Crisis Support)</a></li>
42 <li><a href="https://www.pridecounseling.com" className="text-purple-400 hover:underline">Pride Counseling</a></li>
43 <li>Trans Lifeline: <a href="tel:1-877-565-8860" className="text-purple-400 hover:underline">1-877-565-8860</a></li>
44 </ul>
45 </section>
46
47 {/* Medical Resources */}
48 <section className="rounded-lg border border-gray-800 bg-gray-900/50 p-6">
49 <h2 className="mb-4 text-2xl font-semibold text-purple-400">Medical Resources</h2>
50 <ul className="list-disc space-y-2 pl-6">
51 <li><a href="https://www.wpath.org" className="text-purple-400 hover:underline">WPATH - Standards of Care</a></li>
52 <li><a href="https://www.plannedparenthood.org/learn/gender-identity/transgender" className="text-purple-400 hover:underline">Planned Parenthood Gender Services</a></li>
53 </ul>
54 </section>
55
56 {/* Legal Resources */}
57 <section className="rounded-lg border border-gray-800 bg-gray-900/50 p-6">
58 <h2 className="mb-4 text-2xl font-semibold text-purple-400">Legal Resources</h2>
59 <ul className="list-disc space-y-2 pl-6">
60 <li><a href="https://transgenderlawcenter.org" className="text-purple-400 hover:underline">Transgender Law Center</a></li>
61 <li><a href="https://www.lambdalegal.org" className="text-purple-400 hover:underline">Lambda Legal</a></li>
62 </ul>
63 </section>
64
65 {/* Community Support */}
66 <section className="rounded-lg border border-gray-800 bg-gray-900/50 p-6">
67 <h2 className="mb-4 text-2xl font-semibold text-purple-400">Community Support</h2>
68 <ul className="list-disc space-y-2 pl-6">
69 <li><a href="https://www.reddit.com/r/asktransgender" className="text-purple-400 hover:underline">r/asktransgender Community</a></li>
70 <li><a href="https://pflag.org" className="text-purple-400 hover:underline">PFLAG</a></li>
71 </ul>
72 </section>
73
74 {/* Educational Resources */}
75 <section className="rounded-lg border border-gray-800 bg-gray-900/50 p-6">
76 <h2 className="mb-4 text-2xl font-semibold text-purple-400">Educational Resources</h2>
77 <ul className="list-disc space-y-2 pl-6">
78 <li><a href="https://genderdysphoria.fyi" className="text-purple-400 hover:underline">The Gender Dysphoria Bible</a></li>
79 <li><a href="https://www.transhub.org.au/101" className="text-purple-400 hover:underline">Trans 101</a></li>
80 </ul>
81 </section>
82
83 {/* Healthcare Access - New Section */}
84 <section className="rounded-lg border border-gray-800 bg-gray-900/50 p-6 mb-8">
85 <h2 className="mb-4 text-2xl font-semibold text-purple-400">Healthcare Access</h2>
86 <ul className="list-disc space-y-2 pl-6">
87 <li><a href="https://www.outcarehealth.org" className="text-purple-400 hover:underline">OutCare - LGBTQ+ Healthcare Provider Directory</a></li>
88 <li><a href="https://www.glma.org/providers" className="text-purple-400 hover:underline">GLMA Provider Directory</a></li>
89 <li><a href="https://www.folxhealth.com" className="text-purple-400 hover:underline">FOLX Health - Virtual Trans Healthcare</a></li>
90 <li><a href="https://getplume.co" className="text-purple-400 hover:underline">Plume - Telehealth HRT Services</a></li>
91 </ul>
92 </section>
93
94 <section className="rounded-lg border border-yellow-500/50 bg-yellow-500/10 p-6">
95 <h2 className="mb-4 text-2xl font-semibold text-yellow-400">DIY Resources (Do it at your own risk)</h2>
96 <ul className="list-disc space-y-2 pl-6">
97 <li>The DIY HRT Directory <a href="https://diyhrt.wiki/" className="text-red-400 hover:underline">https://diyhrt.wiki/</a></li>
98 <li>HRT Cafe <a href="https://hrtcafe.net/" className="text-red-400 hover:underline">https://hrtcafe.net/</a></li>
99 <li>Trans Fem HRT Guide <a href="https://diyhrt.market/transfem-hrt-guide" className="text-red-400 hover:underline">https://diyhrt.market/transfem-hrt-guide</a></li>
100 </ul>
101 </section>
102 </div>
103 </div>
104 </Layout>
105 )
106}