Skip to content

Balancer/357/about #362

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

Merged
taichan03 merged 2 commits into from
Aug 19, 2025
Merged

Balancer/357/about #362

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
986498a
feat: #358 - Add legal disclaimer to medication suggestion and footer
StubberG3 Aug 17, 2025
08656ba
feat: #357 - Content updates to About page
StubberG3 Aug 17, 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
5 changes: 5 additions & 0 deletions frontend/src/App.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,11 @@ This is the wording logo in the nav bar
@apply bg-gradient-to-r from-blue-600 via-blue-700 to-blue-600 bg-clip-text text-transparent;
}

/* Using logo-like styles outside of the header */
.body_logo {
@apply bg-gradient-to-r from-blue-500 via-blue-700 to-blue-300 bg-clip-text font-quicksand font-bold text-transparent
}

/* Tailwind Styles */

/*
Expand Down
10 changes: 8 additions & 2 deletions frontend/src/components/Footer/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,8 +107,14 @@ function Footer() {
</button>
</div>
</div>
<div className="flex justify-center rounded px-4 py-2 ">
© 2025 Balancer. All rights reserved. V1 2-04-2025
<div className="flex justify-center rounded px-4 py-2 ">
<p>© 2025 Balancer. All rights reserved. V1 2-04-2025</p>
</div>
<div className="flex justify-center rounded px-4 py-2 ">
<p className="text-gray-600 text-sm font-light italic">
Balancer is an educational resource designed to support{" "}
—never replace— the judgment of licensed U.S. clinicians. Final prescribing decisions must always be made by the treating clinician.
</p>
</div>
</footer>
</div>
Expand Down
131 changes: 44 additions & 87 deletions frontend/src/pages/About/About.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,110 +6,67 @@ import image from "./OIP2.png";
function About() {
return (
<Layout>
<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">
{/* Top section */}
<div className="flex flex-row">
<div className="top-section mr-10 mt-10 flex max-w-6xl flex-col justify-center md:w-full">
<div className="mt-5 text-3xl font-bold">
A tool that makes it easier to research medications for bipolar
disorder.
</div>
<div className="mt-5 text-lg text-gray-500">
It can take two to 10 years—and three to 30 medications—for people
with bipolar disorder to find the right medication combination.
Balancer is designed to help physicians shorten this journey for
their patients.
</div>
</div>
<img
src={image}
alt="about image"
className="hidden md:mt-10 md:block md:h-64 md:rounded-2xl"
></img>
</div>

{/* Middle section */}
<div className="mission-section flex w-full flex-row justify-center md:mt-28 md:max-w-6xl">
<div>
<div className="text-3xl font-bold">
Get accurate, helpful information on bipolar medications fast
</div>
<div className="mt-5 text-lg text-gray-500">
Powered by innovative AI technology, Balancer is a tool that aids
in providing personalized medication recommendations for patients
with bipolar disorder in any state, including mania, depression,
hypomania and mixed. Our platform utilizes machine learning to
give you the latest, most up-to-date information on medications
and active clinical trials to treat bipolar disorder.{" "}
</div>
<div className="mt-5 text-lg text-gray-500">
Balancer automates medication decision support by offering
tailored medication recommendations and comprehensive risk-benefit
assessments based on a patient's diagnosis, symptom severity,
treatment goals and individual characteristics.{" "}
</div>
<div className="mt-20 text-3xl font-bold">Our mission</div>
<div className="flex w-full flex-col justify-between">
<div className="mt-8 text-lg text-gray-500">
Bipolar disorder affects approximately 5.7 million adult
Americans{" "}
<a
href="https://www.dbsalliance.org/education/bipolar-disorder/bipolar-disorder-statistics/"
className="underline"
target="_blank"
>
every year
</a>
. Delays in the correct diagnosis and proper treatment of
bipolar disorder may result in social, occupational, and
economic burdens, as well as{" "}
<a
href="https://www.ncbi.nlm.nih.gov/pmc/articles/PMC2796048/"
className="underline"
target="_blank"
>
an increase in completed suicides
</a>
.
<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">
{/* Making it easier to research bipolar medications */}
<div className="flex w-full flex-col justify-center mb-20 md:mb-0">
<div className="flex flex-row">
<div className="flex flex-col justify-center md:w-full mr-10">
<div className="mt-5 text-3xl font-bold">
Making it easier to research bipolar medications
</div>
<div className="mt-5 text-lg text-gray-500">
The team behind Balancer believes that building a searchable,
interactive and user-friendly research tool for bipolar
medications has the potential to improve the health and
well-being of people with bipolar disorder.
<div className="mt-5 text-lg text-gray-600">
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.
</div>
</div>
<img src={image} alt="about image" className="hidden md:mt-10 md:block md:h-64 md:rounded-2xl"></img>
</div>
{/* <div className="flex w-full flex-col items-center">
<div>
<div className="mt-8 text-4xl font-bold">44 million</div>
<div className="text-lg">Transactions every 24 hours</div>
<div className="mt-5 text-4xl font-bold">$119 million</div>
<div className="text-lg">Assets under holding</div>
<div className="mt-5 text-4xl font-bold">46,000</div>
<div className="text-lg">New users annually</div>
</div>
</div> */}
</div>

{/* How Balancer works */}
<div className="flex w-full flex-col justify-center md:mt-20 md:max-w-6xl mb-20 md:mb-0">
<div className="mb-5 text-3xl font-bold">
How <span>Balancer</span> works
</div>
<ul className="list-disc pl-5">
<li className="mb-5">
<span className="text-md font-bold">Medication Suggestions (rules-based):</span>
<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>
</li>
<li className="mb-5">
<span className="text-md font-bold">Explanations & Research (AI-assisted):</span>
<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>
</li>
</ul>
<p className="text-gray-600 text-lg">Together, these features help prescribers get reliable starting points quickly—without replacing professional judgment.</p>
</div>
{/* Important disclaimer */}
<div className="flex w-full flex-col justify-center md:mt-20 md:max-w-6xl mb-20 md:mb-0">
<div className="text-3xl font-bold mb-5">
Important disclaimer
</div>
<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>
<ul className="list-disc pl-5 mt-2">
<li><p className="mt-2 text-gray-600">Balancer does <em>not</em> provide medical advice.</p></li>
<li><p className="mt-2 text-gray-600">It does <em>not</em> determine treatment or replace clinical judgment.</p></li>
<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>
</ul>
</div>
{/* Support Us section */}
<div className=" flex w-full flex-col items-center justify-center md:mt-28">
<div className="flex w-full flex-col items-center justify-center md:mt-28 md:max-w-6xl">
<div className="text-3xl font-bold">Support Us</div>
<div className="mt-5 flex flex-col items-center justify-center text-center text-lg text-gray-500 md:pl-48 md:pr-48">
<div className="text-xl font-bold">
Balancer is a not-for-profit, civic-minded, open-source project
<div className="mt-5 flex flex-col items-center justify-center text-center text-lg text-gray-600 md:pl-48 md:pr-48">
<div className="text-xl">
<span className="body_logo">Balancer</span> is a not-for-profit, civic-minded, open-source project
sponsored by{" "}
<a
href="https://codeforphilly.org/"
className="underline"
className="underline hover:text-blue-600 hover:no-underline"
target="_blank"
>
Code for Philly
</a>
.
</div>
</div>

<div className="mb-20 mt-5 flex flex-row flex-wrap justify-center gap-4">
<a href="https://www.flipcause.com/secure/cause_pdetails/MjMyMTIw" target="_blank">
<button className="btnBlue transition-transform focus:outline-none focus:ring focus:ring-blue-200">
Expand Down
19 changes: 11 additions & 8 deletions frontend/src/pages/PatientManager/PatientManager.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,14 +87,17 @@ const PatientManager = () => {

const descriptionEl = (
<div className="md:mt-10">
Use our tool to get medication suggestions for bipolar disorder based on
patient characteristics.{" "}
<Link
to="/data-sources"
className="mr-5 underline hover:border-blue-600 hover:text-blue-600 hover:no-underline"
>
Read about where we get our data.
</Link>
<p>Use our tool to explore medication options for bipolar disorder based on patient characteristics.</p>
<p>
<Link
to="/data-sources"
className="mr-5 underline hover:border-blue-600 hover:text-blue-600 hover:no-underline"
>
Read about where we get our data.
</Link>
</p>
<p className="text-gray-600 mt-4 text-sm font-light italic">Balancer is an educational resource designed to support —never replace— the judgment of licensed U.S. clinicians.</p>
<p className="text-gray-600 text-sm font-light italic">Final prescribing decisions must always be made by the treating clinician.</p>
</div>
);

Expand Down