drawdb-io/drawdb
1
0
Fork 0
mirror of https://github.com/drawdb-io/drawdb.git synced 2025-09-20 14:34:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add hero

Browse Source
This commit is contained in:
1ilit
2024-01-18 04:24:38 +02:00
parent 9f981b62ec
commit 58bafcfcaf
3 changed files with 56 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
src/pages/LandingPage.jsx
View File

@@ -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>
);
}