Skip to content

Commit c3bbdbf

Browse files
committed
additions from copy, fixed styling, add bios
1 parent 794e081 commit c3bbdbf

File tree

11 files changed

+118
-79
lines changed

11 files changed

+118
-79
lines changed
-2.25 MB
Loading

public/img/science.svg

Lines changed: 1 addition & 1 deletion
Loading

src/components/Hero.astro

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ const { title, text, imgSrc } = Astro.props;
33
---
44

55
<section
6-
class="bg-[#F6F4EA] bg-cover bg-center min-h-[60vh] md:min-h-[700px] h-auto flex items-end justify-start relative"
6+
class="bg-[#F6F4EA] bg-cover bg-center min-h-[60vh] md:min-h-[700px] h-auto flex items-start justify-start relative"
77
style={`background-image: url(${imgSrc}); background-size: cover; background-repeat: no-repeat;`}
88
>
9-
<div class="pb-16 pl-8 sm:pb-24 sm:pl-16 w-full max-w-screen-xl">
9+
<div class="pt-12 pl-8 sm:pt-20 sm:pl-16 w-full max-w-screen-xl">
1010
<slot />
1111
</div>
1212
</section>

src/components/LearnSection.astro

Lines changed: 31 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,36 @@ const { id, title } = Astro.props;
66
<div class="mx-auto max-w-screen-xl w-full">
77
<h2 class="text-4xl font-bold font-chivo text-gray-800 mb-12 text-center">{title}</h2>
88

9+
<!-- Content Blurbs -->
10+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-12 mb-12">
11+
<!-- What We're Learning -->
12+
<div class="space-y-6">
13+
<div class="bg-white rounded-lg p-6 shadow-sm">
14+
<h3 class="text-2xl font-bold font-chivo text-gray-800 mb-4">What We're Learning</h3>
15+
<p class="text-lg font-chivo text-gray-800 mb-4 italic">
16+
Science is revealing just how powerful these foods can be
17+
</p>
18+
<p class="text-gray-700 font-chivo leading-relaxed">
19+
We study the microbial communities inside fermented foods and how they interact with the human body. Our research is focused on mapping the connections between microbes, metabolites, and human biology—and uncover their impact on inflammation, digestion, and beyond.
20+
</p>
21+
</div>
22+
</div>
23+
24+
<!-- Sharing What We Know -->
25+
<div class="space-y-6">
26+
<div class="bg-white rounded-lg p-6 shadow-sm">
27+
<h3 class="text-2xl font-bold font-chivo text-gray-800 mb-4">Sharing What We Know</h3>
28+
<p class="text-lg font-chivo text-gray-800 mb-4 italic">
29+
Bringing fermentation science to more people
30+
</p>
31+
<p class="text-gray-700 font-chivo leading-relaxed">
32+
We believe knowledge should be as accessible as food. Through public talks, creative storytelling, and collaborations with chefs, educators, and journalists, we're making the science of fermentation easier to understand—and more exciting to explore.
33+
</p>
34+
</div>
35+
</div>
36+
</div>
37+
38+
<!-- Three Cards -->
939
<div class="grid grid-cols-1 md:grid-cols-3 gap-8">
1040
<!-- Data Pane -->
1141
<div class="bg-[#E1E5A8] rounded-lg p-4 sm:p-6 shadow-sm hover:shadow-md transition-shadow">
@@ -23,7 +53,7 @@ const { id, title } = Astro.props;
2353
</div>
2454
</div>
2555

26-
<!-- Tools Pane (Light Dark Green) -->
56+
<!-- Tools Pane -->
2757
<div class="bg-[#DDB9F9] rounded-lg p-4 sm:p-6 shadow-sm hover:shadow-md transition-shadow">
2858
<div class="text-center">
2959
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-4">
@@ -43,7 +73,6 @@ const { id, title } = Astro.props;
4373
<div class="bg-[#FFAC4D] rounded-lg p-4 sm:p-6 shadow-sm hover:shadow-md transition-shadow">
4474
<div class="text-center">
4575
<div class="w-16 h-16 bg-white rounded-full flex items-center justify-center mx-auto mb-4">
46-
<!-- Paper/Literature Icon -->
4776
<svg class="w-8 h-8 text-[#7394E9]" fill="none" stroke="currentColor" viewBox="0 0 24 24">
4877
<rect x="4" y="4" width="16" height="16" rx="2" stroke-width="2"/>
4978
<line x1="8" y1="8" x2="16" y2="8" stroke-width="2"/>
Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
---
2+
const { id, title, text, imgSrc } = Astro.props;
3+
---
4+
5+
<section
6+
id={id}
7+
class="bg-[#F6F4EA] px-4 py-8 md:py-16 min-h-[60vh] md:min-h-[700px] h-auto flex items-center"
8+
>
9+
<div class="mx-auto max-w-screen-xl w-full">
10+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start">
11+
<!-- Left side - Figure and connecting text -->
12+
<div class="order-2 lg:order-1 space-y-6">
13+
<p class="text-2xl md:text-3xl text-gray-800 font-chivo leading-relaxed">
14+
Connecting fermented foods, microbes, and their metabolites to health benefits.
15+
</p>
16+
<img
17+
src={imgSrc}
18+
alt="Science illustration"
19+
class="w-full h-auto max-w-2xl mx-auto"
20+
/>
21+
</div>
22+
23+
<!-- Right side - Content -->
24+
<div class="order-1 lg:order-2 space-y-8">
25+
<!-- Mission -->
26+
<div class="space-y-4">
27+
<h2 class="text-3xl font-bold font-chivo text-gray-800">Our Mission</h2>
28+
<p class="text-xl font-chivo text-gray-800 mb-4 italic">
29+
Making the benefits of fermentation accessible to all
30+
</p>
31+
<p class="text-gray-700 font-chivo leading-relaxed">
32+
We're bridging ancient traditions and modern science to unlock the health potential of fermented foods—through research, education, and product innovation.
33+
</p>
34+
</div>
35+
36+
<!-- Why Fermentation Matters -->
37+
<div class="space-y-4">
38+
<h3 class="text-2xl font-bold font-chivo text-gray-800">Why Fermentation Matters</h3>
39+
<p class="text-lg font-chivo text-gray-800 mb-4 italic">
40+
Microbes have always been part of our food—and our biology
41+
</p>
42+
<p class="text-gray-700 font-chivo leading-relaxed">
43+
Fermented foods aren't just preserved—they're transformed. Microbes reshape ingredients into more flavorful, digestible, and nutrient-rich forms. These microbial ecosystems, found in everything from kimchi to cheese, also produce compounds that support gut and immune health.
44+
</p>
45+
</div>
46+
</div>
47+
</div>
48+
</div>
49+
</section>

src/components/Navigation.astro

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -19,10 +19,10 @@
1919
<!-- Navigation Links -->
2020
<div class="hidden md:block">
2121
<div class="ml-10 flex items-baseline space-x-8">
22-
<a href="#science" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors duration-200">Science</a>
23-
<a href="#learn" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors duration-200">Learn</a>
24-
<a href="#team" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors duration-200">Team</a>
25-
<a href="#contact" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-medium transition-colors duration-200">Contact</a>
22+
<a href="#mission" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-chivo transition-colors duration-200">Mission</a>
23+
<a href="#learn" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-chivo transition-colors duration-200">Learn</a>
24+
<a href="#team" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-chivo transition-colors duration-200">Team</a>
25+
<a href="#contact" class="text-gray-700 hover:text-gray-900 px-3 py-2 text-sm font-chivo transition-colors duration-200">Contact</a>
2626
</div>
2727
</div>
2828

@@ -43,10 +43,10 @@
4343
<!-- Mobile menu -->
4444
<div class="md:hidden hidden" id="mobile-menu">
4545
<div class="px-2 pt-2 pb-3 space-y-1 sm:px-3 border-t border-gray-200">
46-
<a href="#science" class="text-gray-700 hover:text-gray-900 block px-3 py-2 text-base font-medium">Science</a>
47-
<a href="#learn" class="text-gray-700 hover:text-gray-900 block px-3 py-2 text-base font-medium">Learn</a>
48-
<a href="#team" class="text-gray-700 hover:text-gray-900 block px-3 py-2 text-base font-medium">Team</a>
49-
<a href="#contact" class="text-gray-700 hover:text-gray-900 block px-3 py-2 text-base font-medium">Contact</a>
46+
<a href="#mission" class="text-gray-700 hover:text-gray-900 block px-3 py-2 text-chivo font-medium">Mission</a>
47+
<a href="#learn" class="text-gray-700 hover:text-gray-900 block px-3 py-2 text-chivo font-medium">Learn</a>
48+
<a href="#team" class="text-gray-700 hover:text-gray-900 block px-3 py-2 text-chivo font-medium">Team</a>
49+
<a href="#contact" class="text-gray-700 hover:text-gray-900 block px-3 py-2 text-chivo font-medium">Contact</a>
5050
</div>
5151
</div>
5252
</div>

src/components/ScienceSection.astro

Lines changed: 0 additions & 15 deletions
This file was deleted.

src/components/Section.astro

Lines changed: 0 additions & 28 deletions
This file was deleted.

0 commit comments

Comments
 (0)