Merge pull request #11 from CodeBoxxTechSchool/ml/ventures-functions

Ml/ventures functions

Author: minuitcinq

src/pages/Home.jsx

@@ -4,7 +4,7 @@ import { Button, Badge, Form, Offcanvas } from 'react-bootstrap';
 import { TopBar, Footer } from '../components/Chrome';
 import Avatar from '../components/Avatar';
 import Logo from '../components/Logo';
-import { useSanityTeam, useSanityLogos } from '../lib/sanity';
+import { useSanityTeam, useSanityLogos, useSanityPosts, sanityImageUrl } from '../lib/sanity';
 import { useIntakes } from '../lib/intakes';
 import '../lib/image-slot.js';
 
@@ -1522,13 +1522,12 @@ function WSJTeaser() {
   return (
     <section className="band-dark">
       <div className="wrap band-dark-inner">
-        <image-slot
+        <img
           id="wsj-logo"
-          shape="rect"
-          fit="contain"
-          placeholder="Wall Street Journal logo"
-          style={{ width: 320, height: 88, '--slot-frame-bg': 'transparent', color: '#fff' }}
-        ></image-slot>
+          alt="Wall Street Journal logo"
+          src="/assets/the-wall-street-journal.png"
+          style={{ width: 320, height: 'auto' }}
+        />
         <h2 className="band-heading">How Five Americans Made It to the Middle Class</h2>
         <p className="band-body">
           We are proud to be part of this success story, as featured in the Wall Street Journal. Tim
@@ -1551,10 +1550,10 @@ function WSJTeaser() {
   );
 }
 
-// Latest three from the CodeBlog. Same source as blog.jsx — replaced by the Sanity `post` document type at runtime.
-// Same 3 posts (and same seed slugs) as SEED_POSTS in Blog.jsx — this teaser stays
-// hardcoded rather than Sanity-backed (a separate, pre-existing gap unrelated to
-// giving posts their own pages), but its links now point at those pages too.
+// Latest three from the CodeBlog. Seed fallback only — same shape and seed slugs as
+// SEED_POSTS in Blog.jsx. CodeBlog() below fetches the real thing via useSanityPosts,
+// same as the /blog page, so this array only renders when there's no Sanity project
+// configured or no live posts yet.
 const LATEST_POSTS = [
   {
     title: 'Best Corporate AI Bootcamps',
@@ -1588,6 +1587,7 @@ function fmtPostDate(iso) {
 }
 
 function CodeBlog() {
+  const posts = useSanityPosts(LATEST_POSTS).slice(0, 3);
   return (
     <section id="codeblog" className="sect sect-steel">
       <div className="wrap">
@@ -1602,16 +1602,26 @@ function CodeBlog() {
           </p>
         </div>
         <div className="grid3">
-          {LATEST_POSTS.map((p) => (
+          {posts.map((p) => (
             <Link key={p.slug} to={'/blog/' + p.slug} className="panel panel-link-card">
-              <div className="d-flex flex-column gap-3">
-                <Badge bg="brand">{p.category}</Badge>
-                <h3 className="ptitle">{p.title}</h3>
-                <p className="pbody">{p.excerpt}</p>
-              </div>
-              <div className="d-flex flex-column gap-4">
-                <div className="rule" />
-                <span className="card-date">{fmtPostDate(p.date)}</span>
+              <image-slot
+                id={'codeblog-' + p.slug}
+                src={sanityImageUrl(p.featuredImage, { w: 500 })}
+                shape="rect"
+                fit="cover"
+                placeholder="Cover image"
+                style={{ width: '100%', height: 180 }}
+              ></image-slot>
+              <div className="panel-link-card-body">
+                <div className="d-flex flex-column gap-3">
+                  <Badge bg="brand">{p.category}</Badge>
+                  <h3 className="ptitle">{p.title}</h3>
+                  <p className="pbody">{p.excerpt}</p>
+                </div>
+                <div className="d-flex flex-column gap-4">
+                  <div className="rule" />
+                  <span className="card-date">{fmtPostDate(p.date)}</span>
+                </div>
               </div>
             </Link>
           ))}

src/pages/Ventures.jsx

@@ -1,8 +1,11 @@
 import React from 'react';
-import { Button, Badge, Form } from 'react-bootstrap';
+import { Button, Badge, Form, Offcanvas } from 'react-bootstrap';
 import { TopBar, Footer } from '../components/Chrome';
 import '../lib/image-slot.js';
 
+const PITCH_BLANK = { first: '', last: '', email: '', phone: '', kind: '', details: '' };
+const PROJECT_KINDS = ['Native App', 'Web App', 'Web Base Project', 'Other'];
+
 const MODELS = [
   [
     'Build for Equity',
@@ -48,7 +51,7 @@ const CRITERIA = [
   ['A Path to Revenue', 'A named first customer or a market we can reach in the first year.'],
 ];
 
-function Band() {
+function Band({ onPitch }) {
   return (
     <section className="band-dark">
       <div className="wrap d-flex flex-column gap-4 align-items-start">
@@ -58,13 +61,7 @@ function Band() {
           CodeBoxx Ventures puts the studio&rsquo;s delivery capacity behind products we believe in.
           Cash, equity, or both &mdash; the structure follows the stage you are at.
         </p>
-        <Button
-          onClick={() => {
-            location.href = '/#contact';
-          }}
-        >
-          Pitch Your Project
-        </Button>
+        <Button onClick={onPitch}>Pitch Your Project</Button>
       </div>
     </section>
   );
@@ -128,70 +125,86 @@ function Criteria() {
   );
 }
 
-function Pitch() {
+function PitchDrawer({ open, onClose }) {
+  const [form, setForm] = React.useState(PITCH_BLANK);
+  const [sent, setSent] = React.useState(false);
+  React.useEffect(() => {
+    if (open) setSent(false);
+  }, [open]);
+  const set = (k) => (e) => setForm((f) => Object.assign({}, f, { [k]: e.target.value }));
+  const invalid = form.email.length > 0 && !/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(form.email);
+  const ready = form.first && form.last && form.email && !invalid && form.phone;
   return (
-    <section className="sect">
-      <div className="wrap grid2">
-        <div className="d-flex flex-column gap-3">
-          <p className="eyebrow">START THE CONVERSATION</p>
-          <h2 className="h2">Have a project and looking for a venture-style partner?</h2>
-          <p className="lede">
-            Send the product, the stage you are at and what you need built. A delivery lead and a
-            partner review it together and answer with a proposed structure.
-          </p>
-          <div className="d-flex gap-3 flex-wrap">
-            <Button
-              variant="outline-primary"
-              onClick={() => {
-                location.href = 'CodeBoxx.html#solutions';
-              }}
-            >
-              See the Studio
-            </Button>
-          </div>
+    <Offcanvas show={open} onHide={onClose} placement="end" className="pitch-offcanvas">
+      <Offcanvas.Header className="site-header">
+        <div className="d-flex flex-column gap-3 align-items-start">
+          <span className="kicker">Ventures</span>
+          <h3 className="ptitle">Pitch Your Project</h3>
         </div>
-        <div className="panel">
-          <h3 className="ptitle">Submit your project</h3>
-          <Form.Group>
-            <Form.Label>Full Name</Form.Label>
-            <Form.Control id="v-name" placeholder="First Last" />
-          </Form.Group>
-          <Form.Group>
-            <Form.Label>Email</Form.Label>
-            <Form.Control id="v-email" placeholder="name@company.com" />
-          </Form.Group>
-          <Form.Group>
-            <Form.Label>Company or Product</Form.Label>
-            <Form.Control id="v-company" placeholder="codeboxx-enterprise-primary" />
-          </Form.Group>
-          <Form.Group>
-            <Form.Label>Stage</Form.Label>
-            <Form.Control id="v-stage" placeholder="Idea, prototype, or in market" />
-          </Form.Group>
-          <div className="rule" />
-          <div className="form-actions">
-            <span className="form-actions-note">Reviewed within one business day.</span>
-            <Button size="lg">Send</Button>
-          </div>
+        <Button size="sm" variant="ghost" onClick={onClose}>
+          Close
+        </Button>
+      </Offcanvas.Header>
+      <Offcanvas.Body className="d-flex flex-column gap-4">
+        <div className="form-row-2">
+          <Form.Control placeholder="First Name" value={form.first} onChange={set('first')} />
+          <Form.Control placeholder="Last Name" value={form.last} onChange={set('last')} />
         </div>
-      </div>
-    </section>
+        <Form.Group>
+          <Form.Control
+            placeholder="Email"
+            value={form.email}
+            isInvalid={invalid}
+            onChange={set('email')}
+          />
+          <Form.Control.Feedback type="invalid">
+            Invalid address. Missing domain.
+          </Form.Control.Feedback>
+        </Form.Group>
+        <Form.Control placeholder="Phone" value={form.phone} onChange={set('phone')} />
+        <Form.Group>
+          <Form.Label>What kind of project</Form.Label>
+          <Form.Select aria-label="What kind of project" value={form.kind} onChange={set('kind')}>
+            <option value="">Select</option>
+            {PROJECT_KINDS.map((k) => (
+              <option key={k} value={k}>
+                {k}
+              </option>
+            ))}
+          </Form.Select>
+        </Form.Group>
+        <Form.Group>
+          <Form.Label>Describe your project in a few words</Form.Label>
+          <Form.Control as="textarea" rows={4} value={form.details} onChange={set('details')} />
+        </Form.Group>
+        <div className="rule" />
+        <div className="form-actions">
+          <span className={'form-actions-note' + (sent ? ' sent' : '')}>
+            {sent ? 'Pitch received.' : 'Reviewed within one business day.'}
+          </span>
+          <Button size="lg" disabled={!ready} onClick={() => setSent(true)}>
+            Submit
+          </Button>
+        </div>
+      </Offcanvas.Body>
+    </Offcanvas>
   );
 }
 
 function VenturesPage() {
+  const [pitchOpen, setPitchOpen] = React.useState(false);
   return (
     <div id="top">
       <TopBar
         onCodi={() => {
           location.href = '/#contact';
         }}
       />
-      <Band />
+      <Band onPitch={() => setPitchOpen(true)} />
       <Models />
       <Criteria />
-      <Pitch />
       <Footer />
+      <PitchDrawer open={pitchOpen} onClose={() => setPitchOpen(false)} />
     </div>
   );
 }

src/styles/_home.scss

@@ -591,7 +591,9 @@
 }
 
 .panel-link-card {
-  justify-content: space-between;
+  padding: 0;
+  gap: 0;
+  overflow: hidden;
   min-height: 260px;
   color: inherit;
   text-decoration: none;
@@ -600,6 +602,14 @@
     text-decoration: none;
   }
 }
+.panel-link-card-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 20px;
+  padding: 24px;
+  flex: 1;
+}
 .card-date {
   font-size: v.$text-micro;
   font-weight: v.$weight-medium;

src/styles/_static-pages.scss

@@ -32,3 +32,8 @@
   gap: 20px;
   max-width: 780px;
 }
+
+// ---- Ventures "Pitch Your Project" drawer ----
+.pitch-offcanvas {
+  --bs-offcanvas-width: 460px;
+}