Section separation, card transparency, page overview sections, transparent social icons

- WhatWeDo background → yellow; TopicsCard → transparent (no white-on-yellow)
- ProjectsOverview header → white (breaks yellow→yellow adjacency)
- ValueCard → white (lighter feel on About page)
- FourValues split into its own white Section separate from yellow intro
- All pages now open with yellow pageTop h1 + overview paragraph
- Social icon SVGs: remove white circle background and black stroke
- Logo grid: mix-blend-mode multiply for transparent PNG logos

Author: MMesch

src/components/about/ValueCard.tsx

@@ -3,7 +3,7 @@ import Card from "../layout/Card";
 
 export function ValueCard({ value }) {
   return (
-    <Card bg="yellow" className={styles.value_card}>
+    <Card className={styles.value_card}>
       <div className={styles.value_icon}>
         <value.pictureComponent alt={value.alt} />
       </div>

src/components/about/index.tsx

@@ -21,6 +21,9 @@ export function About() {
     <>
       <Section pageTop bg="yellow">
         <h1>About QuantStack</h1>
+        <p>We are an open-source software company focused on the scientific computing ecosystem. We build, maintain, and contribute to projects used by millions of researchers, engineers, and developers worldwide.</p>
+      </Section>
+      <Section>
         <FourValues />
       </Section>
       <Section>

src/components/blog/index.tsx

@@ -24,36 +24,41 @@ export default function BlogsComponent() {
   };
 
   return (
-    <Section pageTop>
-      <div className="flex-full-centered" style={{ marginBottom: "var(--ifm-spacing-lg)" }}>
-        <h1 className="padding-none margin-none">
-          Featured Posts by QuantStack Contributors
-        </h1>
-        <div style={{ padding: "0 10px" }}>
-          <a href={"/atom.xml"}>
-            <AtomOrange width={"42px"} height={"42px"} />
-          </a>
+    <>
+      <Section pageTop bg="yellow">
+        <div className="flex-full-centered">
+          <h1 className="padding-none margin-none">
+            Featured Posts by QuantStack Contributors
+          </h1>
+          <div style={{ padding: "0 10px" }}>
+            <a href={"/atom.xml"}>
+              <AtomOrange width={"42px"} height={"42px"} />
+            </a>
+          </div>
+        </div>
+        <p className="text--center">News, releases, and technical articles from the QuantStack team.</p>
+      </Section>
+      <Section>
+        <div>
+          <input
+            className={styles.search_input}
+            type="search"
+            placeholder="Search for blog posts"
+            onChange={handleChange}
+          />
         </div>
-      </div>
-      <div>
-        <input
-          className={styles.search_input}
-          type="search"
-          placeholder="Search for blog posts"
-          onChange={handleChange}
-        />
-      </div>
 
-      <CardGrid cols={3}>
-        {filteredBlogPosts.map((blogpost, index) => (
-          <li key={index}>
-            <BlogpostCard
-              blogpost={blogpost}
-              timeIndex={numberOfBlogs - index}
-            />
-          </li>
-        ))}
-      </CardGrid>
-    </Section>
+        <CardGrid cols={3}>
+          {filteredBlogPosts.map((blogpost, index) => (
+            <li key={index}>
+              <BlogpostCard
+                blogpost={blogpost}
+                timeIndex={numberOfBlogs - index}
+              />
+            </li>
+          ))}
+        </CardGrid>
+      </Section>
+    </>
   );
 }

src/components/careers/index.tsx

@@ -9,8 +9,11 @@ import GroupPhotoJupyterConUrl from "@site/static/img/group/group-photo.png";
 export default function Careers() {
   return (
     <>
-      <Section pageTop>
+      <Section pageTop bg="yellow">
         <h1>Join the QuantStack team!</h1>
+        <p>Work on open-source software that powers scientific discovery, adopted at global scale by millions of researchers and engineers.</p>
+      </Section>
+      <Section>
         <div className={styles.group_photo_container + " flex-full-centered"}>
           <img
             src={GroupPhotoJupyterConUrl}

src/components/fundable/index.tsx

@@ -26,8 +26,6 @@ export function MainAreaFundableProjects() {
 
   return (
     <>
-      <h1>Projects available for funding</h1>
-
       <div className={styles.filter_tags}>
         {CATEGORIES.map((cat) => (
           <button
@@ -59,8 +57,14 @@ export function MainAreaFundableProjects() {
 
 export default function FundableProjects() {
   return (
-    <Section pageTop>
-      <MainAreaFundableProjects />
-    </Section>
+    <>
+      <Section pageTop bg="yellow">
+        <h1>Projects available for funding</h1>
+        <p>Open-source features and improvements you can sponsor to move your priorities forward.</p>
+      </Section>
+      <Section>
+        <MainAreaFundableProjects />
+      </Section>
+    </>
   );
 }

src/components/home/ProjectsOverview/index.tsx

@@ -10,7 +10,7 @@ import styles from "./styles.module.css";
 export default function ProjectsOverview() {
   return (
     <div className={styles.projects_overview_container}>
-      <Section bg="yellow">
+      <Section>
         <h2 className="text--center">Our open-source projects</h2>
       </Section>
       <JupyterProject />

src/components/home/TrustedBy/styles.module.css

@@ -18,4 +18,5 @@
   filter: grayscale(1);
   opacity: 0.75;
   object-fit: contain;
+  mix-blend-mode: multiply;
 }

src/components/home/WhatWeDo/styles.module.css

@@ -33,7 +33,7 @@
   }
 
   .whatwedo_outer {
-    background: var(--ifm-bg-neutral);
+    background: var(--ifm-bg-brand);
     padding: var(--ifm-spacing-3xl) 0;
   }
 

src/components/services/Header.tsx

@@ -8,6 +8,7 @@ export default function Header() {
         Hire QuantStack to build upon the Jupyter, Mamba, and the PyData
         ecosystem.
       </h1>
+      <p>We offer software development, support retainers, and custom engineering for teams relying on open-source scientific infrastructure.</p>
     </Section>
   );
 }