Add hero

src/components/SimpleCanvas.jsx

@@ -19,9 +19,8 @@ function Table({ table, grab }) {
       onMouseLeave={() => setIsHovered(false)}
     >
       <div
-        className={`border-2 ${
-          isHovered ? "border-dashed border-blue-500" : "border-zinc-300"
-        } select-none rounded-lg w-full bg-zinc-100 text-zinc-800`}
+        className={`border-2 ${isHovered ? "border-dashed border-blue-500" : "border-zinc-300"
+          } select-none rounded-lg w-full bg-zinc-100 text-zinc-800`}
       >
         <div
           className={`h-[10px] w-full rounded-t-md`}
@@ -33,9 +32,8 @@ function Table({ table, grab }) {
         {table.fields.map((e, i) => (
           <div
             key={i}
-            className={`${
-              i === table.fields.length - 1 ? "" : "border-b border-gray-400"
-            } h-[36px] px-2 py-1 flex justify-between`}
+            className={`${i === table.fields.length - 1 ? "" : "border-b border-gray-400"
+              } h-[36px] px-2 py-1 flex justify-between`}
             onMouseEnter={() => setHoveredField(i)}
             onMouseLeave={() => setHoveredField(-1)}
           >
@@ -139,7 +137,7 @@ function Relationship({ relationship }) {
   );
 }
 
-export default function Canvas({ diagram }) {
+export default function SimpleCanvas({ diagram, zoom }) {
   const [tables, setTables] = useState(diagram.tables);
   const [relationships, setRelationships] = useState(diagram.relationships);
   const [dragging, setDragging] = useState(-1);
@@ -233,12 +231,17 @@ export default function Canvas({ diagram }) {
         height="100%"
         fill="url(#pattern-circles)"
       ></rect>
-      {tables.map((t, i) => (
-        <Table key={i} table={t} grab={(e) => grabTable(e, i)} />
-      ))}
-      {relationships.map((r, i) => (
-        <Relationship key={i} relationship={r} />
-      ))}
+      <g style={{
+        transform: `scale(${zoom})`,
+        transformOrigin: "top left",
+      }}>
+        {tables.map((t, i) => (
+          <Table key={i} table={t} grab={(e) => grabTable(e, i)} />
+        ))}
+        {relationships.map((r, i) => (
+          <Relationship key={i} relationship={r} />
+        ))}
+      </g>
     </svg>
   );
 }

src/data/heroDiagram.js

@@ -1,4 +1,4 @@
-const xOffset = window.innerWidth * 0.57 * 0.09;
+const xOffset = window.innerWidth * 0.65;
 export const diagram = {
   tables: [
     {

src/pages/LandingPage.jsx

@@ -1,8 +1,9 @@
 import { useState, useEffect } from "react";
 import { Link } from "react-router-dom";
 import { IconCrossStroked } from "@douyinfe/semi-icons";
+import SimpleCanvas from "../components/SimpleCanvas"
 import Navbar from "../components/Navbar";
-
+import { diagram } from "../data/heroDiagram"
 export default function LandingPage() {
   const [showSurvey, setShowSurvey] = useState(true);
 
@@ -14,19 +15,45 @@ export default function LandingPage() {
 
   return (
     <div>
-      {showSurvey && (
-        <div className="text-white font-semibold py-1.5 px-4 text-sm text-center bg-gradient-to-r from-slate-700 from-10% via-slate-500 via-30% to-90% to-slate-700">
-          <Link to="/survey" className="hover:underline">
-            Help us improve! Share your feedback.
-          </Link>
-          <div className="float-right">
-            <button onClick={() => setShowSurvey(false)}>
-              <IconCrossStroked size="small" />
-            </button>
+      <div className="flex flex-col h-screen">
+        {showSurvey && (
+          <div className="text-white font-semibold py-1.5 px-4 text-sm text-center bg-gradient-to-r from-slate-700 from-10% via-slate-500 to-slate-700">
+            <Link to="/survey" className="hover:underline">
+              Help us improve! Share your feedback.
+            </Link>
+            <div className="float-right">
+              <button onClick={() => setShowSurvey(false)}>
+                <IconCrossStroked size="small" />
+              </button>
+            </div>
+          </div>
+        )}
+        <Navbar />
+        <div className="flex-1 flex-col relative">
+          <div className="h-full">
+            <SimpleCanvas diagram={diagram} zoom={0.85} />
+          </div>
+          <div className="absolute left-0 top-[50%] translate-y-[-50%] p-8 text-zinc-800 text-center">
+            <div className="text-4xl font-bold tracking-wide">
+              <h1 className="py-1 bg-gradient-to-r from-slate-700 from-10% via-slate-500 to-slate-700 inline-block text-transparent bg-clip-text">
+                Draw, Copy, and Paste
+              </h1>
+            </div>
+            <div className="text-lg font-semibold mt-3">
+              Free, simple, and intuitive database design tool and SQL generator.
+            </div>
+            <div className="mt-4 flex gap-4 justify-center font-semibold">
+              <button className="bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100">
+                Learn more
+              </button>
+              <Link to="/editor" className="bg-slate-700 text-white px-4 py-2 rounded shadow-lg hover:bg-slate-600">
+                Try it for yourself
+              </Link>
+            </div>
           </div>
         </div>
-      )}
-      <Navbar />
+      </div>
+      <div>hi</div>
     </div>
   );
 }