titor/drawDB
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add some stuff to the landing page

Browse Source
This commit is contained in:
1ilit 2024-01-29 16:19:12 +02:00
parent 78d0a26807
commit 4f2386563c
1 changed files with 49 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
src/pages/LandingPage.jsx
View File

@ -5,6 +5,7 @@ import SimpleCanvas from "../components/SimpleCanvas"
import Navbar from "../components/Navbar";
import { diagram } from "../data/heroDiagram"
import Reveal from "../animations/Reveal";
import { Steps } from "@douyinfe/semi-ui";
export default function LandingPage() {
const [showSurvey, setShowSurvey] = useState(true);
@ -60,7 +61,54 @@ export default function LandingPage() {
</div>
</div>
<div id="learn-more">
more stuff
<div className="bg-zinc-100 py-10 px-24">
<div className="text-2xl text-slate-900 font-bold text-center mb-5">Entity-Relationship diagrams simplified</div>
<Steps type="basic" current={3}>
<Steps.Step title="Create tables" description="Define tables with the necessary fields and indices." />
<Steps.Step title="Add relationships" description="Build relationships by simply dragging" />
<Steps.Step title="Export" description="Export to your preferred SQL flavor" />
</Steps>
<div className="mt-16 text-center w-[75%] sm:w-[80%] mx-auto shadow-sm rounded-lg border px-12 py-8 bg-white">
<div className="text-2xl font-bold text-slate-900 mb-8">
Why drawDB?
</div>
<div className="grid grid-cols-3 gap-4 ">
<div className="border rounded-lg p-6 hover:bg-slate-100 transition-all duration-300">
<span className="text-white bg-green-400 rounded-full py-2.5 px-3">
<i className="fa-solid fa-credit-card"></i>
</span>
<div className="mt-6 text-lg font-semibold text-slate-700">
Free
</div>
<div className="text-sm mt-3">drawDB is completely free of charge.</div>
</div>
<div className="border rounded-lg p-6 hover:bg-slate-100 transition-all duration-300">
<span className="text-white bg-blue-400 rounded-full py-2.5 px-3">
<i className="fa-solid fa-user-xmark"></i>
</span>
<div className="mt-6 text-lg font-semibold text-slate-700">
No registration
</div>
<div className="text-sm mt-3">No need to sign up or login. Just jump into development.</div>
</div>
<div className="border rounded-lg p-6 hover:bg-slate-100 transition-all duration-300">
<span className="text-white bg-emerald-400 rounded-full py-2.5 px-3">
<i className="fa-regular fa-star "></i>
</span>
<div className="mt-6 text-lg font-semibold text-slate-700">
Simple to use
</div>
<div className="text-sm mt-3">
Intuitive design that&apos;s easy to navigate.
</div>
</div>
</div>
</div>
</div>
</div>
<hr className="border-zinc-300" />
<div className="text-center text-sm py-3">
&copy; 2024 <strong>drawDB</strong> - All right reserved.
</div>
</div>
);