Skip to content

Commit 38934ad

Browse files
mikepsinnmikepsinn
committed
Add new DFDA component sections and UI enhancements
Introduced various new sections including CitizenScienceSection, GoodNewsSection, MissionSection, and others. Added NeoBrutalistButton UI component and replaced existing buttons for consistency and improved design. Took 51 minutes
1 parent 19536ee commit 38934ad

21 files changed

+633
-116
lines changed

‎app/dfda/components/CitizenScienceSection.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
'use client'
2+
3+
import { motion } from 'framer-motion'
4+
import Image from 'next/image'
5+
import Link from 'next/link'
6+
import { ArrowRight } from 'lucide-react'
7+
8+
export default function CitizenScienceSection() {
9+
return (
10+
<section className="relative overflow-visible rounded-xl border-4 border-black bg-gradient-to-r from-purple-400 to-indigo-400 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
11+
<h2 className="mb-6 text-4xl font-black uppercase">Citizen Science</h2>
12+
13+
<motion.div
14+
initial={{ opacity: 0, y: 20 }}
15+
animate={{ opacity: 1, y: 0 }}
16+
className="space-y-8"
17+
>
18+
<div className="rounded-lg p-6">
19+
<h3 className="text-2xl font-bold mb-4">Create Your Own Studies</h3>
20+
<p className="text-xl mb-4">
21+
Anyone can create a study, become a prestigious scientist, get a link, and invite all their friends to join!
22+
</p>
23+
<Image
24+
src="https://fdai.earth/wp-content/uploads/2024/03/create-study.gif"
25+
alt="Create study demonstration"
26+
width={1024}
27+
height={899}
28+
className="rounded-lg mb-4"
29+
/>
30+
<Link
31+
href="https://safe.fdai.earth/app/public/#/app/study-creation"
32+
className="group inline-flex w-fit items-center gap-2 rounded-xl border-4 border-black bg-white px-6 py-3 font-bold shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-none"
33+
>
34+
Create Study
35+
<ArrowRight className="transition-transform group-hover:translate-x-1" />
36+
</Link>
37+
</div>
38+
39+
<div className="rounded-lg p-6">
40+
<h3 className="text-2xl font-bold mb-4">Global Scale Studies</h3>
41+
<p className="text-xl mb-4">
42+
Studies are published in a Wikipedia for clinical research based on everyone's data, listing the likely effects of every food and drug.
43+
</p>
44+
<Image
45+
src="https://fdai.earth/wp-content/uploads/2024/03/clinipedia-landing.gif"
46+
alt="Clinipedia interface"
47+
width={800}
48+
height={400}
49+
className="rounded-lg mb-4"
50+
/>
51+
<Link
52+
href="https://studies.fdai.earth/"
53+
className="group inline-flex w-fit items-center gap-2 rounded-xl border-4 border-black bg-white px-6 py-3 font-bold shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-none"
54+
>
55+
Current Studies
56+
<ArrowRight className="transition-transform group-hover:translate-x-1" />
57+
</Link>
58+
</div>
59+
60+
<div className="rounded-lg p-6">
61+
<h3 className="text-2xl font-bold mb-4">Mega-Studies</h3>
62+
<p className="text-xl mb-4">
63+
Look up your condition and see how different foods, drugs and supplements tend to improve or worsen your condition.
64+
</p>
65+
<Image
66+
src="https://fdai.earth/wp-content/uploads/2024/03/clinipedia-inflammatory-pain-small.gif"
67+
alt="Mega-study example"
68+
width={800}
69+
height={400}
70+
className="rounded-lg mb-4"
71+
/>
72+
<Link
73+
href="https://studies.fdai.earth/variables/Overall_Mood"
74+
className="group inline-flex w-fit items-center gap-2 rounded-xl border-4 border-black bg-white px-6 py-3 font-bold shadow-[4px_4px_0px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-none"
75+
>
76+
Example Mega-Study
77+
<ArrowRight className="transition-transform group-hover:translate-x-1" />
78+
</Link>
79+
</div>
80+
</motion.div>
81+
</section>
82+
)
83+
}

‎app/dfda/components/CostSavingsTable.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,7 @@ export default function CostSavingsTable() {
6464
initial={{ opacity: 0, y: -20 }}
6565
animate={{ opacity: 1, y: 0 }}
6666
>
67-
Clinical Trial Cost Savings 💰
67+
Savings from a Decentralized Autonomous FDA 💰
6868
</motion.h2>
6969

7070
<div className="-mx-6 sm:mx-0">

‎app/dfda/components/FeatureBox.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ interface FeatureBoxProps {
88
desc: string
99
color: string
1010
icon: React.ElementType
11-
media: string
11+
media?: string
1212
index: number
1313
onClick: () => void
1414
}
@@ -76,7 +76,7 @@ export const FeatureBox: React.FC<FeatureBoxProps> = ({ title, desc, color, icon
7676
className={`group relative overflow-hidden rounded-xl border-4 border-black ${color} p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)] transition-all hover:translate-x-1 hover:translate-y-1 hover:shadow-none block w-full text-left`}
7777
>
7878
<div className="absolute inset-0 bg-black opacity-0 transition-opacity group-hover:opacity-10" />
79-
<MediaContent media={media} />
79+
{media && <MediaContent media={media} />}
8080
<Icon className="mb-4 h-12 w-12" />
8181
<h3 className="mb-2 text-2xl font-black">{title}</h3>
8282
<p className="font-bold">{desc}</p>

‎app/dfda/components/GoodNewsSection.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
'use client'
2+
3+
import { motion } from 'framer-motion'
4+
import Image from 'next/image'
5+
6+
export default function GoodNewsSection() {
7+
return (
8+
<section className="relative overflow-visible rounded-xl border-4 border-black bg-gradient-to-r from-yellow-400 to-amber-400 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
9+
<motion.div
10+
initial={{ opacity: 0, scale: 0.95 }}
11+
animate={{ opacity: 1, scale: 1 }}
12+
className="space-y-6"
13+
>
14+
<h2 className="text-4xl font-black uppercase">The Good News!</h2>
15+
<p className="text-2xl font-bold">There could be billions of cures we don't even know about yet!</p>
16+
17+
<div className="rounded-lg p-6">
18+
<p className="text-xl mb-4">
19+
There are over 166 billion possible medicinal molecules, and we've only tested 0.00001% so far.
20+
</p>
21+
<Image
22+
src="https://fdai.earth/wp-content/uploads/2024/03/studied-molecules-chart-no-background.png"
23+
alt="Studied molecules chart"
24+
width={800}
25+
height={400}
26+
className="rounded-lg"
27+
/>
28+
</div>
29+
30+
<div className="rounded-lg p-6">
31+
<h3 className="text-2xl font-bold mb-4">Clinical Research Cost Trends</h3>
32+
<Image
33+
src="https://fdai.earth/wp-content/uploads/2024/03/Cost-to-Develop-A-New-Drug-no-arrows-e1710115343651-1024x742.png"
34+
alt="Cost trends"
35+
width={1024}
36+
height={742}
37+
className="rounded-lg"
38+
/>
39+
<p className="text-xl mt-4">
40+
With automation, we could dramatically reduce these costs and accelerate discovery.
41+
</p>
42+
</div>
43+
</motion.div>
44+
</section>
45+
)
46+
}

‎app/dfda/components/MissionSection.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
'use client'
2+
3+
import { motion } from 'framer-motion'
4+
5+
export default function MissionSection() {
6+
return (
7+
<section className="relative overflow-visible rounded-xl border-4 border-black bg-gradient-to-r from-blue-400 to-indigo-400 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
8+
<motion.div
9+
initial={{ opacity: 0, y: 20 }}
10+
animate={{ opacity: 1, y: 0 }}
11+
className="space-y-6"
12+
>
13+
<h2 className="text-4xl font-black">The Decentralized FDA</h2>
14+
<p className="text-2xl font-bold">
15+
Our mandate is to promote human health and safety by determining the comprehensive positive and negative effects of all foods and drugs.
16+
</p>
17+
18+
<div className="rounded-lg p-6">
19+
<h3 className="text-2xl font-bold mb-4">Key Problems We're Solving:</h3>
20+
<ul className="list-disc ml-6 space-y-2 text-xl">
21+
<li>No data on unpatentable molecules and natural compounds</li>
22+
<li>Lack of incentive to discover new applications for off-patent treatments</li>
23+
<li>Missing long-term outcome data</li>
24+
<li>Negative results aren't published</li>
25+
<li>Clinical trials exclude most of the population</li>
26+
</ul>
27+
</div>
28+
</motion.div>
29+
</section>
30+
)
31+
}

‎app/dfda/components/ProblemSection.tsx‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
'use client'
2+
3+
import { motion } from 'framer-motion'
4+
import Image from 'next/image'
5+
6+
export default function ProblemSection() {
7+
return (
8+
<section className="space-y-8">
9+
<div className="relative overflow-visible rounded-xl border-4 border-black bg-gradient-to-r from-red-400 to-orange-400 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
10+
<h2 className="mb-6 text-4xl font-black uppercase">The Growing Crisis</h2>
11+
12+
<motion.div
13+
initial={{ opacity: 0, y: 20 }}
14+
animate={{ opacity: 1, y: 0 }}
15+
className="space-y-6"
16+
>
17+
<div className="rounded-lg p-6">
18+
<h3 className="text-2xl font-bold mb-4">Chronic Disease Epidemic</h3>
19+
<p className="text-xl mb-4">2 Billion People are SUFFERING from chronic diseases like depression, fibromyalgia, Crohn's disease, and multiple sclerosis.</p>
20+
<Image
21+
src="https://fdai.earth/wp-content/uploads/2024/03/correlates-of-disease-incidence-no-title-1024x514.png"
22+
alt="Disease incidence trends"
23+
width={1024}
24+
height={514}
25+
className="rounded-lg"
26+
/>
27+
</div>
28+
29+
<div className="rounded-lg p-6">
30+
<h3 className="text-2xl font-bold mb-4">Chemical Exposure</h3>
31+
<p className="text-xl mb-4">We only have long-term toxicology data on 2 of over 7000 preservatives, flavorings, emulsifiers, sweeteners, pesticides, contaminants, and herbicides.</p>
32+
<Image
33+
src="https://fdai.earth/wp-content/uploads/2024/03/chemicals-in-our-diet.png"
34+
alt="Chemicals in diet"
35+
width={800}
36+
height={400}
37+
className="rounded-lg"
38+
/>
39+
</div>
40+
41+
<div className="rounded-lg p-6">
42+
<h3 className="text-2xl font-bold mb-4">Research Bottleneck</h3>
43+
<ul className="list-disc ml-6 space-y-2 text-xl">
44+
<li>$2.6 billion and 12 years to bring a new drug to market</li>
45+
<li>Only 30 drugs approved per year</li>
46+
<li>80% of trials fail due to insufficient participants</li>
47+
<li>Less than 1% of chronic disease patients participate in research</li>
48+
</ul>
49+
</div>
50+
</motion.div>
51+
</div>
52+
</section>
53+
)
54+
}

‎app/dfda/components/SolutionSection.tsx‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
'use client'
2+
3+
import { motion } from 'framer-motion'
4+
import Image from 'next/image'
5+
6+
export default function SolutionSection() {
7+
return (
8+
<section className="relative overflow-visible rounded-xl border-4 border-black bg-gradient-to-r from-green-400 to-teal-400 p-6 shadow-[8px_8px_0px_0px_rgba(0,0,0,1)]">
9+
<h2 className="mb-6 text-4xl font-black uppercase">The Solution: Automated Clinical Research</h2>
10+
11+
<motion.div
12+
initial={{ opacity: 0, y: 20 }}
13+
animate={{ opacity: 1, y: 0 }}
14+
className="space-y-8"
15+
>
16+
<div className="rounded-lg p-6">
17+
<h3 className="text-2xl font-bold mb-4">Automated Data Collection</h3>
18+
<div className="grid md:grid-cols-2 gap-6">
19+
<div>
20+
<h4 className="text-xl font-semibold mb-2">Import from Wearables & Apps</h4>
21+
<Image
22+
src="https://fdai.earth/wp-content/uploads/2024/03/import.gif"
23+
alt="Data import demonstration"
24+
width={400}
25+
height={300}
26+
className="rounded-lg"
27+
/>
28+
</div>
29+
<div>
30+
<h4 className="text-xl font-semibold mb-2">AI-Powered Data Collection</h4>
31+
<Image
32+
src="https://fdai.earth/wp-content/uploads/2024/03/autonomous-data-collection.gif"
33+
alt="AI data collection"
34+
width={400}
35+
height={300}
36+
className="rounded-lg"
37+
/>
38+
</div>
39+
</div>
40+
</div>
41+
42+
<div className="rounded-lg p-6">
43+
<h3 className="text-2xl font-bold mb-4">Automated Analysis</h3>
44+
<Image
45+
src="https://fdai.earth/wp-content/uploads/2024/03/root-cause-analysis-4x-small.gif"
46+
alt="Root cause analysis"
47+
width={800}
48+
height={400}
49+
className="rounded-lg"
50+
/>
51+
</div>
52+
53+
<div className="rounded-lg p-6">
54+
<h3 className="text-2xl font-bold mb-4">Real-Time Decision Support</h3>
55+
<Image
56+
src="https://fdai.earth/wp-content/uploads/2024/03/real-time-decision-support-notifications-personalized-app-image.png"
57+
alt="Decision support interface"
58+
width={800}
59+
height={400}
60+
className="rounded-lg"
61+
/>
62+
</div>
63+
</motion.div>
64+
</section>
65+
)
66+
}

0 commit comments

Comments
 (0)