Add hero

src/components/SimpleCanvas.jsx

@@ -19,8 +19,7 @@ function Table({ table, grab }) {
       onMouseLeave={() => setIsHovered(false)}
     >
       <div
-        className={`border-2 ${
-          isHovered ? "border-dashed border-blue-500" : "border-zinc-300"
+        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
@@ -33,8 +32,7 @@ function Table({ table, grab }) {
         {table.fields.map((e, i) => (
           <div
             key={i}
-            className={`${
-              i === table.fields.length - 1 ? "" : "border-b border-gray-400"
+            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>
+      <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,8 +15,9 @@ export default function LandingPage() {
 
   return (
     <div>
+      <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 via-30% to-90% to-slate-700">
+          <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>
@@ -27,6 +29,31 @@ export default function LandingPage() {
           </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>
+      </div>
+      <div>hi</div>
     </div>
   );
 }