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

Add framer motion

Browse Source
This commit is contained in:
1ilit
2024-01-18 09:21:30 +02:00
parent 58bafcfcaf
commit df9a3f8089
4 changed files with 89 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
src/pages/LandingPage.jsx
View File

@@ -4,6 +4,8 @@ import { IconCrossStroked } from "@douyinfe/semi-icons";
import SimpleCanvas from "../components/SimpleCanvas"
import Navbar from "../components/Navbar";
import { diagram } from "../data/heroDiagram"
import Reveal from "../animations/Reveal";
export default function LandingPage() {
const [showSurvey, setShowSurvey] = useState(true);
@@ -34,26 +36,32 @@ export default function LandingPage() {
<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>
<Reveal>
<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>
</Reveal>
<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">
<button className="bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100 transition-all duration-200" onClick={() => document
.getElementById("learn-more")
.scrollIntoView({ behavior: "smooth" })}>
Learn more
</button>
<Link to="/editor" className="bg-slate-700 text-white px-4 py-2 rounded shadow-lg hover:bg-slate-600">
<Link to="/editor" className="bg-slate-700 text-white px-4 py-2 rounded shadow-lg hover:bg-slate-600 transition-all duration-200">
Try it for yourself
</Link>
</div>
</div>
</div>
</div>
<div>hi</div>
<div id="learn-more">
more stuff
</div>
</div>
);
}