Skip to content

Commit 61e80df

Browse files
taichan03taichan03
authored
Merge pull request #362 from StubberG3/balancer/357/about
Balancer/357/about
2 parents eecf921 + 08656ba commit 61e80df

File tree

2 files changed

+49
-87
lines changed

2 files changed

+49
-87
lines changed

‎frontend/src/App.css‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,11 @@ This is the wording logo in the nav bar
130130
@apply bg-gradient-to-r from-blue-600 via-blue-700 to-blue-600 bg-clip-text text-transparent;
131131
}
132132

133+
/* Using logo-like styles outside of the header */
134+
.body_logo {
135+
@apply bg-gradient-to-r from-blue-500 via-blue-700 to-blue-300 bg-clip-text font-quicksand font-bold text-transparent
136+
}
137+
133138
/* Tailwind Styles */
134139

135140
/*

‎frontend/src/pages/About/About.tsx‎

Lines changed: 44 additions & 87 deletions
Original file line numberDiff line numberDiff line change
@@ -6,110 +6,67 @@ import image from "./OIP2.png";
66
function About() {
77
return (
88
<Layout>
9-
<div className=" font_body mt-48 flex w-full flex-col items-center justify-center rounded-md border bg-white p-4 px-8 ring-1 hover:ring-slate-300 md:max-w-6xl">
10-
{/* Top section */}
11-
<div className="flex flex-row">
12-
<div className="top-section mr-10 mt-10 flex max-w-6xl flex-col justify-center md:w-full">
13-
<div className="mt-5 text-3xl font-bold">
14-
A tool that makes it easier to research medications for bipolar
15-
disorder.
16-
</div>
17-
<div className="mt-5 text-lg text-gray-500">
18-
It can take two to 10 years—and three to 30 medications—for people
19-
with bipolar disorder to find the right medication combination.
20-
Balancer is designed to help physicians shorten this journey for
21-
their patients.
22-
</div>
23-
</div>
24-
<img
25-
src={image}
26-
alt="about image"
27-
className="hidden md:mt-10 md:block md:h-64 md:rounded-2xl"
28-
></img>
29-
</div>
30-
31-
{/* Middle section */}
32-
<div className="mission-section flex w-full flex-row justify-center md:mt-28 md:max-w-6xl">
33-
<div>
34-
<div className="text-3xl font-bold">
35-
Get accurate, helpful information on bipolar medications fast
36-
</div>
37-
<div className="mt-5 text-lg text-gray-500">
38-
Powered by innovative AI technology, Balancer is a tool that aids
39-
in providing personalized medication recommendations for patients
40-
with bipolar disorder in any state, including mania, depression,
41-
hypomania and mixed. Our platform utilizes machine learning to
42-
give you the latest, most up-to-date information on medications
43-
and active clinical trials to treat bipolar disorder.{" "}
44-
</div>
45-
<div className="mt-5 text-lg text-gray-500">
46-
Balancer automates medication decision support by offering
47-
tailored medication recommendations and comprehensive risk-benefit
48-
assessments based on a patient's diagnosis, symptom severity,
49-
treatment goals and individual characteristics.{" "}
50-
</div>
51-
<div className="mt-20 text-3xl font-bold">Our mission</div>
52-
<div className="flex w-full flex-col justify-between">
53-
<div className="mt-8 text-lg text-gray-500">
54-
Bipolar disorder affects approximately 5.7 million adult
55-
Americans{" "}
56-
<a
57-
href="https://www.dbsalliance.org/education/bipolar-disorder/bipolar-disorder-statistics/"
58-
className="underline"
59-
target="_blank"
60-
>
61-
every year
62-
</a>
63-
. Delays in the correct diagnosis and proper treatment of
64-
bipolar disorder may result in social, occupational, and
65-
economic burdens, as well as{" "}
66-
<a
67-
href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2796048/"
68-
className="underline"
69-
target="_blank"
70-
>
71-
an increase in completed suicides
72-
</a>
73-
.
9+
<div className="font_body mt-48 flex w-full flex-col items-center justify-center rounded-md border bg-white p-4 px-8 ring-1 hover:ring-slate-300 md:max-w-6xl">
10+
{/* Making it easier to research bipolar medications */}
11+
<div className="flex w-full flex-col justify-center mb-20 md:mb-0">
12+
<div className="flex flex-row">
13+
<div className="flex flex-col justify-center md:w-full mr-10">
14+
<div className="mt-5 text-3xl font-bold">
15+
Making it easier to research bipolar medications
7416
</div>
75-
<div className="mt-5 text-lg text-gray-500">
76-
The team behind Balancer believes that building a searchable,
77-
interactive and user-friendly research tool for bipolar
78-
medications has the potential to improve the health and
79-
well-being of people with bipolar disorder.
17+
<div className="mt-5 text-lg text-gray-600">
18+
It can take two to 10 years—and three to 30 medications—for people with bipolar disorder to find the right medication combination. <span className="body_logo">Balancer</span> is designed to help prescribers speed up that process by making research faster and more accessible.
8019
</div>
8120
</div>
21+
<img src={image} alt="about image" className="hidden md:mt-10 md:block md:h-64 md:rounded-2xl"></img>
8222
</div>
83-
{/* <div className="flex w-full flex-col items-center">
84-
<div>
85-
<div className="mt-8 text-4xl font-bold">44 million</div>
86-
<div className="text-lg">Transactions every 24 hours</div>
87-
<div className="mt-5 text-4xl font-bold">$119 million</div>
88-
<div className="text-lg">Assets under holding</div>
89-
<div className="mt-5 text-4xl font-bold">46,000</div>
90-
<div className="text-lg">New users annually</div>
91-
</div>
92-
</div> */}
9323
</div>
94-
24+
{/* How Balancer works */}
25+
<div className="flex w-full flex-col justify-center md:mt-20 md:max-w-6xl mb-20 md:mb-0">
26+
<div className="mb-5 text-3xl font-bold">
27+
How <span>Balancer</span> works
28+
</div>
29+
<ul className="list-disc pl-5">
30+
<li className="mb-5">
31+
<span className="text-md font-bold">Medication Suggestions (rules-based):</span>
32+
<p className="text-gray-600 mt-2">When you enter patient characteristics, Balancer suggests first-line, second-line, and third-line options. The recommendations follow a consistent framework developed from interviews with psychiatrists, psychiatry residents, nurse practitioners, and other prescribers. This part is not powered by AI.</p>
33+
</li>
34+
<li className="mb-5">
35+
<span className="text-md font-bold">Explanations & Research (AI-assisted):</span>
36+
<p className="text-gray-600 mt-2">For each suggestion, you can click to see supporting journal articles. Here, Balancer uses AI to search our database of medical research and highlight relevant sources for further reading.</p>
37+
</li>
38+
</ul>
39+
<p className="text-gray-600 text-lg">Together, these features help prescribers get reliable starting points quickly—without replacing professional judgment.</p>
40+
</div>
41+
{/* Important disclaimer */}
42+
<div className="flex w-full flex-col justify-center md:mt-20 md:max-w-6xl mb-20 md:mb-0">
43+
<div className="text-3xl font-bold mb-5">
44+
Important disclaimer
45+
</div>
46+
<p className="text-gray-600">Balancer is a free, open-source research tool built by volunteers at Code for Philly. It is for licensed U.S. prescribers and researchers only.</p>
47+
<ul className="list-disc pl-5 mt-2">
48+
<li><p className="mt-2 text-gray-600">Balancer does <em>not</em> provide medical advice.</p></li>
49+
<li><p className="mt-2 text-gray-600">It does <em>not</em> determine treatment or replace clinical judgment.</p></li>
50+
<li><p className="mt-2 text-gray-600">Clinical decisions should always be based on the prescriber's expertise, knowledge of the patient, and official medical guidelines.</p></li>
51+
</ul>
52+
</div>
9553
{/* Support Us section */}
96-
<div className=" flex w-full flex-col items-center justify-center md:mt-28">
54+
<div className="flex w-full flex-col items-center justify-center md:mt-28 md:max-w-6xl">
9755
<div className="text-3xl font-bold">Support Us</div>
98-
<div className="mt-5 flex flex-col items-center justify-center text-center text-lg text-gray-500 md:pl-48 md:pr-48">
99-
<div className="text-xl font-bold">
100-
Balancer is a not-for-profit, civic-minded, open-source project
56+
<div className="mt-5 flex flex-col items-center justify-center text-center text-lg text-gray-600 md:pl-48 md:pr-48">
57+
<div className="text-xl">
58+
<span className="body_logo">Balancer</span> is a not-for-profit, civic-minded, open-source project
10159
sponsored by{" "}
10260
<a
10361
href="https://codeforphilly.org/"
104-
className="underline"
62+
className="underline hover:text-blue-600 hover:no-underline"
10563
target="_blank"
10664
>
10765
Code for Philly
10866
</a>
10967
.
11068
</div>
11169
</div>
112-
11370
<div className="mb-20 mt-5 flex flex-row flex-wrap justify-center gap-4">
11471
<a href="https://www.flipcause.com/secure/cause_pdetails/MjMyMTIw" target="_blank">
11572
<button className="btnBlue transition-transform focus:outline-none focus:ring focus:ring-blue-200">

0 commit comments

Comments
 (0)