app/web/src/components/Hero/AssetWithGooey.tsx

@@ -9,11 +9,9 @@ import { useTexture, MeshDistortMaterial, Sphere } from '@react-three/drei'
 const thresholdAngle = 10
 export default function AssetWithGooey({
   assetUrl,
-  offset,
   scale,
 }: {
   assetUrl: string
-  offset: number[]
   scale: number
 }) {
   const geo = useLoader(STLLoader, assetUrl)
@@ -22,7 +20,7 @@ export default function AssetWithGooey({
   const mesh = useEdgeSplit((thresholdAngle * Math.PI) / 180, true, geo)
   const colorMap = useTexture(texture)
   const edges = React.useMemo(() => new THREE.EdgesGeometry(geo, 12), [geo])
-  const position = [offset[0], offset[1], 5]
+  const position = [0, 0, 5]
   const scaleArr = Array.from({ length: 3 }).map(() => scale)
   const { mouse } = useThree()
   const [rEuler, rQuaternion] = useMemo(

app/web/src/components/Hero/Hero.tsx

@@ -13,39 +13,95 @@ import ProjectsCell from 'src/components/ProjectsCell'
 import OutBound from 'src/components/OutBound/OutBound'
 
 // dynamic import to enable pre-render iof the homepage
-const Coffee = React.lazy(() => import('src/components/Hero/AssetWithGooey'))
+const AssetWithGooey = React.lazy(() => import('src/components/Hero/AssetWithGooey'))
+const cqCode = `from cadquery import *
+
+d1 = 58.5
+d2 = 56.5
+d3 = 63.5
+d4 = 84
+d5 = 88
+
+h1 = 8.5
+h2 = 154
+
+l1 = 14.5
+l2 = 4.5
+
+cup = (
+  Workplane("XY").circle(d1 / 2).extrude(h1)
+    .faces(">Z").circle(d3 / 2)
+    .workplane(offset=h2).circle(d5 / 2)
+    .loft()
+  .cut(Workplane("XY")
+    .circle((d3 - 3.5) / 2)
+    .workplane(offset=h2).circle((d5 - 3.5) / 2)
+    .loft()
+    .translate([0, 0, h1])
+   )
+`.split('\n')
+
+const scadCode = `hingeHalfExtrudeLength=hingeLength/2-clearance/2;
+mountingHoleMoveIncrement=(hingeLength-2*mountingHoleEdgeOffset)/
+  (mountingHoleCount-1);
+
+module costomizerEnd() {}
+$fn=30;
+tiny=0.005;
+// modules
+module hingeBaseProfile() {
+  translate([pivotRadius,0,0]){
+    square([baseWidth,baseThickness]);
+  }
+}
+
+module hingeBodyHalf() {
+  difference() {
+    union() {
+      linear_extrude(hingeHalfExtrudeLength){
+        offset(1)offset(-2)offset(1){
+          translate([0,pivotRadius,0]){
+            circle(pivotRadius);
+          }
+          square([pivotRadius,pivotRadius]);
+          hingeBaseProfile();
+        }
+      }
+      linear_extrude(hingeLength){
+        offset(1)offset(-1)hingeBaseProfile();
+      }
+    }
+    plateHoles();
+  }
+}`.split('\n')
 
 export const Hero = () => {
-  const [width, widthSetter] = React.useState(1024)
-
-  React.useEffect(() => {
-    const onResize = () => {
-      widthSetter(window.innerWidth)
-    }
-    window.addEventListener('resize', onResize)
-    onResize()
-    return () => {
-      window.removeEventListener('resize', onResize)
-    }
-  }, [])
-  const { heroOffset, tutOffset } = React.useMemo(() => {
-    if (width < 1024) {
-      return {
-        heroOffset: [0, -3],
-        tutOffset: [0, -3],
-      }
-    }
-    return {
-      heroOffset: [-5, 0],
-      tutOffset: [4, 0],
-    }
-  }, [width])
-
   return (
     <div className="bg-ch-gray-800">
-      <ModelSection assetUrl="/coffee-lid.stl" offset={heroOffset} scale={0.06}>
+      <div className="relative h-0 w-0">
-        <div className="grid lg:grid-cols-2 py-32">
+        <svg viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
-          <div className="flex items-end justify-center row-start-2 lg:row-start-1 pt-96 lg:pt-0 pr-12 pl-6">
+          <defs>
+            <clipPath id="code-blob-clip-path" clipPathUnits="objectBoundingBox" transform="scale(0.0038 0.0056)">
+              <path d="M68.5 169.159C13.3 167.159 5.69181e-05 144.659 0 71.1594C3.99994 13.1594 50.9244 -14.591 121.5 7.65941C223 39.6594 266 25.1594 263.5 113.659C261.634 179.701 191.5 173.616 68.5 169.159Z" fill="#C4C4C4"/>
+            </clipPath>
+          </defs>
+        </svg>
+      </div>
+      <div className="grid lg:grid-cols-5 max-w-8xl mx-auto">
+        <div className="relative row-start-2 col-start-1 h-full lg:row-start-1 lg:col-span-3 lg:col-start-1">
+
+          <div className="absolute inset-0 my-20 mx-10 lg:mr-40 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-40 overflow-hidden" style={{clipPath: 'url(#code-blob-clip-path)'}}>
+            <pre className="lg:ml-20 mt-12 text-blue-100 font-fira-code">
+              {cqCode.map((line, index) => <div key={index}><span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">{index+1}</span>{line}</div>)}
+            </pre>
+
+
+
+          </div>
+          <ModelSection assetUrl="/coffee-lid.stl" scale={0.06} />
+        </div>
+
+        <div className="flex items-end justify-center row-start-2 col-start-1 pt-96 pr-12 pl-6 pb-24 lg:col-span-3 lg:col-start-1 lg:row-start-1 lg:pt-0">
           <Link
             to={routes.project({
               userName: 'irevdev',
@@ -74,7 +130,7 @@ export const Hero = () => {
           </Link>
         </div>
 
-          <div className="col-start-1 lg:col-start-2 px-4">
+        <div className="col-start-1 px-4 py-32 lg:col-start-3 lg:row-start-1 lg:col-span-3 lg:pl-52">
           <div>
             <span
               className="text-7xl text-ch-blue-400 bg-ch-blue-640 bg-opacity-30 font-fira-code px-6 rounded-2xl shadow-ch"
@@ -105,12 +161,21 @@ export const Hero = () => {
           </OutlineButton>
         </div>
       </div>
-      </ModelSection>
       <ChooseYourCharacter />
       <Community />
-      <ModelSection assetUrl="/hinge.stl" offset={tutOffset} scale={0.12}>
+      <div className="max-w-8xl mx-auto grid lg:grid-cols-5 py-16">
-        <div className="max-w-7xl mx-auto grid py-16 overflow-hidden">
+        <div className=" row-start-2 col-start-1 lg:col-span-3 lg:col-start-3 lg:row-start-1 lg:-mx-10 h-full relative">
-          <div className="py-0 pb-32 lg:py-32 ml-4 col-start-1 lg:col-start-1 pr-12 pl-6">
+
+          <div className="absolute inset-0 mb-24 mt-16 ml:10 mr:10 lg:ml-40 lg:mr-52 bg-gradient-to-tr from-pink-400 to-blue-600 opacity-30 overflow-hidden" style={{clipPath: 'url(#code-blob-clip-path)'}}>
+            <pre className="ml-10 mt-12 text-blue-100 text-xs font-fira-code">
+              {scadCode.map((line, index) => <div key={index}><span className="w-12 pr-6 text-blue-200 text-opacity-50 inline-block text-right">{index+1}</span>{line}</div>)}
+            </pre>
+
+          </div>
+          <ModelSection assetUrl="/hinge.stl" scale={0.12} />
+        </div>
+
+        <div className="py-12 pb-32 ml-4 row-start-1 col-start-1 pr-12 pl-6 lg:py-32 lg:col-start-1 lg:col-span-3">
           <div className="text-4xl mb-6 text-ch-gray-300">Learn Code-CAD</div>
 
           <p className="text-gray-600 max-w-lg">
@@ -128,7 +193,7 @@ export const Hero = () => {
           </OutBound>
         </div>
 
-          <div className="flex items-end justify-center row-start-2 lg:row-start-1 lg:col-start-2 pt-96 lg:pt-0 lg:pr-10">
+        <div className="flex items-end justify-center row-start-2 col-start-1 pb-24 lg:row-start-1 lg:col-start-3 lg:col-span-3 pt-96 lg:pt-0 lg:pr-10">
           <Link
             to={routes.project({
               userName: 'irevdev',
@@ -159,7 +224,6 @@ export const Hero = () => {
           </Link>
         </div>
       </div>
-      </ModelSection>
       <Roadmap />
       <div className="h-3 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500" />
       <Footer />
@@ -171,19 +235,14 @@ const DisableRender = () => useFrame(() => null, 1000)
 
 function ModelSection({
   assetUrl,
-  offset,
-  children,
   scale,
 }: {
   assetUrl: string
-  offset: number[]
-  children: React.ReactNode
   scale: number
 }) {
   const { ref, inView } = useInView()
   return (
-    <div className="relative">
+    <div className="relative h-full">
-      {children}
       <div className="absolute inset-0" ref={ref}>
         <Canvas
           linear
@@ -202,7 +261,7 @@ function ModelSection({
           <Suspense
             fallback={<Html center className="loading" children="Loading..." />}
           >
-            <Coffee assetUrl={assetUrl} offset={offset} scale={scale} />
+            <AssetWithGooey assetUrl={assetUrl} scale={scale} />
           </Suspense>
 
           {/* uncomment for framerate and render time */}