Update landing page
This commit is contained in:
1ilit
parent
9ed89df9e3
commit
7ad1059990
56
package-lock.json
generated
56
package-lock.json
generated
@ -34,6 +34,7 @@
|
||||
"react-hotkeys-hook": "^4.4.1",
|
||||
"react-i18next": "^14.1.1",
|
||||
"react-router-dom": "^6.21.0",
|
||||
"react-tweet": "^3.2.1",
|
||||
"url": "^0.11.1",
|
||||
"usehooks-ts": "^3.1.0"
|
||||
},
|
||||
@ -1679,6 +1680,14 @@
|
||||
"win32"
|
||||
]
|
||||
},
|
||||
"node_modules/@swc/helpers": {
|
||||
"version": "0.5.12",
|
||||
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.12.tgz",
|
||||
"integrity": "sha512-KMZNXiGibsW9kvZAO1Pam2JPTDBm+KSHMMHWdsyI/1DbIZjT2A6Gy3hblVXUMEDvUAKq+e0vL0X0o54owWji7g==",
|
||||
"dependencies": {
|
||||
"tslib": "^2.4.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@types/babel__core": {
|
||||
"version": "7.20.5",
|
||||
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
|
||||
@ -2410,6 +2419,11 @@
|
||||
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
|
||||
},
|
||||
"node_modules/client-only": {
|
||||
"version": "0.0.1",
|
||||
"resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
|
||||
"integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
|
||||
},
|
||||
"node_modules/clsx": {
|
||||
"version": "1.2.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
|
||||
@ -5103,6 +5117,28 @@
|
||||
"react-dom": ">=16.8"
|
||||
}
|
||||
},
|
||||
"node_modules/react-tweet": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/react-tweet/-/react-tweet-3.2.1.tgz",
|
||||
"integrity": "sha512-dktP3RMuwRB4pnSDocKpSsW5Hq1IXRW6fONkHhxT5EBIXsKZzdQuI70qtub1XN2dtZdkJWWxfBm/Q+kN+vRYFA==",
|
||||
"dependencies": {
|
||||
"@swc/helpers": "^0.5.3",
|
||||
"clsx": "^2.0.0",
|
||||
"swr": "^2.2.4"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": ">= 18.0.0",
|
||||
"react-dom": ">= 18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/react-tweet/node_modules/clsx": {
|
||||
"version": "2.1.1",
|
||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
|
||||
"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/react-window": {
|
||||
"version": "1.8.10",
|
||||
"resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
|
||||
@ -5610,6 +5646,18 @@
|
||||
"node": ">=12.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/swr": {
|
||||
"version": "2.2.5",
|
||||
"resolved": "https://registry.npmjs.org/swr/-/swr-2.2.5.tgz",
|
||||
"integrity": "sha512-QtxqyclFeAsxEUeZIYmsaQ0UjimSq1RZ9Un7I68/0ClKK/U3LoyQunwkQfJZr2fc22DfIXLNDc2wFyTEikCUpg==",
|
||||
"dependencies": {
|
||||
"client-only": "^0.0.1",
|
||||
"use-sync-external-store": "^1.2.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"react": "^16.11.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/tailwindcss": {
|
||||
"version": "3.3.6",
|
||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
|
||||
@ -5889,6 +5937,14 @@
|
||||
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
|
||||
"integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.2.2",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
|
||||
"integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/usehooks-ts": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
|
||||
|
||||
@ -36,6 +36,7 @@
|
||||
"react-hotkeys-hook": "^4.4.1",
|
||||
"react-i18next": "^14.1.1",
|
||||
"react-router-dom": "^6.21.0",
|
||||
"react-tweet": "^3.2.1",
|
||||
"url": "^0.11.1",
|
||||
"usehooks-ts": "^3.1.0"
|
||||
},
|
||||
|
||||
BIN
src/assets/screenshot.png
Normal file
BIN
src/assets/screenshot.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
@ -9,14 +9,14 @@ export default function Navbar() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="py-5 px-8 sm:px-4 flex justify-between items-center">
|
||||
<div className="flex items-center">
|
||||
<div className="py-4 px-12 sm:px-4 flex justify-between items-center">
|
||||
<div className="flex items-center justify-between w-full">
|
||||
<Link to="/">
|
||||
<img src={logo} alt="logo" className="me-2 h-[48px] sm:h-[32px]" />
|
||||
<img src={logo} alt="logo" className="h-[48px] sm:h-[32px]" />
|
||||
</Link>
|
||||
<div className="md:hidden flex space-x-6 ml-6">
|
||||
<div className="md:hidden flex gap-12">
|
||||
<Link
|
||||
className="text-lg font-semibold hover:text-indigo-700"
|
||||
className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
|
||||
onClick={() =>
|
||||
document
|
||||
.getElementById("features")
|
||||
@ -27,46 +27,46 @@ export default function Navbar() {
|
||||
</Link>
|
||||
<Link
|
||||
to="/editor"
|
||||
className="text-lg font-semibold hover:text-indigo-700"
|
||||
className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
|
||||
>
|
||||
Editor
|
||||
</Link>
|
||||
<Link
|
||||
to="/templates"
|
||||
className="text-lg font-semibold hover:text-indigo-700"
|
||||
className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
|
||||
>
|
||||
Templates
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:hidden block space-x-3">
|
||||
<a
|
||||
title="Jump to Github"
|
||||
className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
||||
href="https://github.com/drawdb-io/drawdb"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i className="opacity-70 bi bi-github" />
|
||||
</a>
|
||||
<a
|
||||
title="Follow us on X"
|
||||
className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
||||
href="https://x.com/drawDB_"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i className="opacity-70 bi bi-twitter-x" />
|
||||
</a>
|
||||
<a
|
||||
title="Join the community on Discord"
|
||||
className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
||||
href="https://discord.gg/BrjZgNrmR6"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i className="opacity-70 bi bi-discord" />
|
||||
</a>
|
||||
<div className="md:hidden block space-x-3 ms-12">
|
||||
<a
|
||||
title="Jump to Github"
|
||||
className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
||||
href="https://github.com/drawdb-io/drawdb"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i className="opacity-70 bi bi-github" />
|
||||
</a>
|
||||
<a
|
||||
title="Follow us on X"
|
||||
className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
||||
href="https://x.com/drawDB_"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i className="opacity-70 bi bi-twitter-x" />
|
||||
</a>
|
||||
<a
|
||||
title="Join the community on Discord"
|
||||
className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
||||
href="https://discord.gg/BrjZgNrmR6"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<i className="opacity-70 bi bi-discord" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setOpenMenu((prev) => !prev)}
|
||||
|
||||
@ -197,7 +197,7 @@ export default function SimpleCanvas({ diagram, zoom }) {
|
||||
|
||||
return (
|
||||
<svg
|
||||
className="w-full h-full cursor-grab"
|
||||
className="w-full h-full cursor-grab rounded-3xl"
|
||||
onPointerUp={(e) => e.isPrimary && releaseTable()}
|
||||
onPointerMove={(e) => e.isPrimary && moveTable(e)}
|
||||
onPointerLeave={(e) => e.isPrimary && releaseTable()}
|
||||
|
||||
@ -18,6 +18,15 @@
|
||||
}
|
||||
}
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box;
|
||||
border-width: 0;
|
||||
border-style: solid;
|
||||
border-color: #ffffff;
|
||||
}
|
||||
|
||||
.semi-form-vertical .semi-form-field {
|
||||
margin: 0;
|
||||
padding-top: 8px !important;
|
||||
@ -125,3 +134,51 @@
|
||||
background-image: radial-gradient(rgb(118, 118, 209) 1px, white 1px);
|
||||
background-size: 20px 20px;
|
||||
}
|
||||
|
||||
.sliding-vertical span {
|
||||
animation: top-to-bottom 9s linear infinite 0s;
|
||||
-ms-animation: top-to-bottom 9s linear infinite 0s;
|
||||
-webkit-animation: top-to-bottom 9s linear infinite 0s;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.sliding-vertical span:nth-child(2) {
|
||||
animation-delay: 3s;
|
||||
-ms-animation-delay: 3s;
|
||||
-webkit-animation-delay: 3s;
|
||||
}
|
||||
.sliding-vertical span:nth-child(3) {
|
||||
animation-delay: 6s;
|
||||
-ms-animation-delay: 6s;
|
||||
-webkit-animation-delay: 6s;
|
||||
}
|
||||
|
||||
@keyframes top-to-bottom {
|
||||
0% {
|
||||
opacity: 0;
|
||||
}
|
||||
5% {
|
||||
opacity: 0;
|
||||
transform: translateY(-18px);
|
||||
}
|
||||
10% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
25% {
|
||||
opacity: 1;
|
||||
transform: translateY(0px);
|
||||
}
|
||||
30% {
|
||||
opacity: 0;
|
||||
transform: translateY(18px);
|
||||
}
|
||||
80% {
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@ -4,7 +4,6 @@ import { IconCrossStroked } from "@douyinfe/semi-icons";
|
||||
import SimpleCanvas from "../components/SimpleCanvas";
|
||||
import Navbar from "../components/Navbar";
|
||||
import { diagram } from "../data/heroDiagram";
|
||||
import { Steps } from "@douyinfe/semi-ui";
|
||||
import mysql_icon from "../assets/mysql.png";
|
||||
import postgres_icon from "../assets/postgres.png";
|
||||
import sqlite_icon from "../assets/sqlite.png";
|
||||
@ -12,23 +11,42 @@ import mariadb_icon from "../assets/mariadb.png";
|
||||
import sql_server_icon from "../assets/sql-server.png";
|
||||
import discord from "../assets/discord.png";
|
||||
import github from "../assets/github.png";
|
||||
import screenshot from "../assets/screenshot.png";
|
||||
import FadeIn from "../animations/FadeIn";
|
||||
import SlideIn from "../animations/SlideIn";
|
||||
import axios from "axios";
|
||||
import { languages } from "../i18n/i18n";
|
||||
import { Tweet } from "react-tweet";
|
||||
|
||||
function shortenNumber(number) {
|
||||
if (number < 1000) return number;
|
||||
|
||||
if (number >= 1000 && number < 1_000_000)
|
||||
return `${(number / 1000).toFixed(1)}k`;
|
||||
}
|
||||
|
||||
export default function LandingPage() {
|
||||
const [showSurvey, setShowSurvey] = useState(true);
|
||||
const [stats, setStats] = useState({ stars: 18000, forks: 1200 });
|
||||
|
||||
useEffect(() => {
|
||||
const fetchStats = async () => {
|
||||
await axios
|
||||
.get("https://api.github-star-counter.workers.dev/user/drawdb-io")
|
||||
.then((res) => setStats(res.data));
|
||||
};
|
||||
|
||||
document.body.setAttribute("theme-mode", "light");
|
||||
document.title =
|
||||
"drawDB | Online database diagram editor and SQL generator";
|
||||
});
|
||||
|
||||
fetchStats();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="flex flex-col h-screen">
|
||||
<div className="flex flex-col h-screen bg-zinc-100">
|
||||
{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">
|
||||
<div className="text-white font-semibold py-1.5 px-4 text-sm text-center bg-gradient-to-r from-[#12495e] from-10% via-slate-500 to-[#12495e]">
|
||||
<Link to="/survey" className="hover:underline">
|
||||
Help us improve! Share your feedback.
|
||||
</Link>
|
||||
@ -39,27 +57,40 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
<Navbar />
|
||||
<div className="flex-1 flex-col relative">
|
||||
<FadeIn duration={0.6}>
|
||||
<Navbar />
|
||||
</FadeIn>
|
||||
|
||||
{/* Hero section */}
|
||||
<div className="flex-1 flex-col relative mx-4 md:mx-0 mb-4 rounded-3xl bg-white">
|
||||
<div className="h-full md:hidden">
|
||||
<SimpleCanvas diagram={diagram} zoom={0.85} />
|
||||
</div>
|
||||
<div className="hidden md:block h-full bg-dots"></div>
|
||||
<div className="absolute left-12 top-[50%] translate-y-[-50%] md:left-[50%] md:translate-x-[-50%] p-8 md:p-3 md:w-full text-zinc-800 text-center">
|
||||
<div className="hidden md:block h-full bg-dots" />
|
||||
<div className="absolute left-12 w-[45%] top-[50%] translate-y-[-54%] md:left-[50%] md:translate-x-[-50%] p-8 md:p-3 md:w-full text-zinc-800">
|
||||
<FadeIn duration={0.75}>
|
||||
<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">
|
||||
<div className="md:px-3">
|
||||
<h1 className="text-[42px] md:text-3xl font-bold tracking-wide bg-gradient-to-r from-sky-900 from-10% via-slate-500 to-[#12495e] 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 className="text-lg font-medium mt-1 sliding-vertical">
|
||||
Free and open source, simple, and intuitive database design
|
||||
editor, data-modeler, and SQL generator.{" "}
|
||||
<span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
|
||||
No sign up
|
||||
</span>
|
||||
<span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
|
||||
Free of charge
|
||||
</span>
|
||||
<span className="ms-2 sm:block sm:ms-0 text-slate-500 bg-white font-bold whitespace-nowrap">
|
||||
Quick and easy
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
<div className="mt-4 flex gap-4 justify-center font-semibold">
|
||||
<div className="mt-4 flex gap-4 justify-start font-semibold md:block md:mt-12">
|
||||
<button
|
||||
className="bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100 transition-all duration-300"
|
||||
className="bg-white shadow-lg px-9 py-3 rounded-full border border-zinc-200 hover:bg-zinc-100 transition-all duration-300"
|
||||
onClick={() =>
|
||||
document
|
||||
.getElementById("learn-more")
|
||||
@ -70,100 +101,108 @@ export default function LandingPage() {
|
||||
</button>
|
||||
<Link
|
||||
to="/editor"
|
||||
className="bg-slate-700 text-white px-4 py-2 rounded shadow-lg hover:bg-slate-600 transition-all duration-200"
|
||||
className="md:mt-2 inline-block bg-sky-900 text-white ps-7 pe-6 py-3 rounded-full shadow-lg hover:bg-sky-800 transition-all duration-300"
|
||||
>
|
||||
Try it for yourself
|
||||
Try it for yourself <i className="bi bi-arrow-right ms-1"></i>
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Learn more */}
|
||||
<div id="learn-more">
|
||||
<div className="bg-zinc-100 py-20 px-24 md:px-8 rounded-b-[40px]">
|
||||
<FadeIn duration={1}>
|
||||
<div className="text-2xl text-slate-900 font-bold text-center mb-10 md:hidden">
|
||||
Entity-Relationship diagrams simplified
|
||||
<div className="bg-zinc-100 py-10 px-28 md:px-8">
|
||||
<div className="flex justify-center items-center gap-28 md:block">
|
||||
<div className="text-center mb-4">
|
||||
<div className="text-5xl md:text-3xl font-bold text-sky-800">
|
||||
{shortenNumber(stats.stars)}
|
||||
</div>
|
||||
<div className="ms-1 mt-1 font-medium tracking-wide">
|
||||
GitHub stars
|
||||
</div>
|
||||
</div>
|
||||
<div className="md:hidden">
|
||||
<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="text-center mb-4">
|
||||
<div className="text-5xl md:text-3xl font-bold text-sky-800">
|
||||
{shortenNumber(stats.forks)}
|
||||
</div>
|
||||
<div className="ms-1 mt-1 font-medium tracking-wide">
|
||||
GitHub forks
|
||||
</div>
|
||||
</div>
|
||||
</FadeIn>
|
||||
<div className="mt-20 text-center w-[75%] sm:w-full mx-auto shadow-sm rounded-lg border p-12 bg-white">
|
||||
<div className="text-2xl font-bold text-slate-900 mb-8">
|
||||
Why drawDB?
|
||||
<div className="text-center mb-4">
|
||||
<div className="text-5xl md:text-3xl font-bold text-sky-800">
|
||||
{shortenNumber(languages.length)}
|
||||
</div>
|
||||
<div className="ms-1 mt-1 font-medium tracking-wide">
|
||||
Languages
|
||||
</div>
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-4 md:grid-cols-1 h-full">
|
||||
<SlideIn delay={0} duration={0.4} className="h-full">
|
||||
<div className="h-full 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>
|
||||
</SlideIn>
|
||||
<SlideIn delay={1 * 0.4} duration={0.4} className="h-full">
|
||||
<div className="h-full 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>
|
||||
</SlideIn>
|
||||
<SlideIn delay={2 * 0.4} duration={0.4} className="h-full">
|
||||
<div className="h-full 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's easy to navigate.
|
||||
</div>
|
||||
</div>
|
||||
</SlideIn>
|
||||
<div className="w-96 md:w-full h-full md:text-center">
|
||||
<div>
|
||||
Join our community, become one of us. Help us become bigger and
|
||||
better, support us by donating.
|
||||
</div>
|
||||
<a
|
||||
href="https://buymeacoffee.com/drawdb"
|
||||
className="inline-block bg-white hover:bg-zinc-50 transition-all duration-300 rounded-full px-9 py-2.5 shadow mt-2"
|
||||
>
|
||||
Support us{" "}
|
||||
<i className="ms-2 text-rose-600 fa-regular fa-heart"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-16 w-[75%] text-center sm:w-full mx-auto shadow-sm rounded-2xl border p-6 bg-white space-y-3">
|
||||
<div className="text-lg font-medium">
|
||||
Build diagrams with a few clicks, see the full picture, export SQL
|
||||
scripts, customize your editor, and more.
|
||||
</div>
|
||||
<img src={screenshot} className="mx-auto" />
|
||||
</div>
|
||||
<div className="text-lg font-medium text-center mt-12 mb-6">
|
||||
Design for your database
|
||||
</div>
|
||||
<div className="flex justify-center items-center gap-8 md:block">
|
||||
{dbs.map((s, i) => (
|
||||
<img
|
||||
key={"icon-" + i}
|
||||
src={s.icon}
|
||||
style={{ height: s.height }}
|
||||
className="opacity-70 hover:opacity-100 transition-opacity duration-300 md:scale-[0.7] md:mx-auto"
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<svg
|
||||
viewBox="0 0 1440 54"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="100%"
|
||||
className="bg-transparent"
|
||||
>
|
||||
<path
|
||||
d="M0 54C0 54 320 0 720 0C1080 0 1440 54 1440 54V0H0V100Z"
|
||||
fill="#f4f4f5"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
<div id="features" className="py-20 px-36 md:px-8">
|
||||
|
||||
{/* Features */}
|
||||
<div id="features" className="py-8 px-36 md:px-8">
|
||||
<FadeIn duration={1}>
|
||||
<div className="text-2xl font-bold text-center">
|
||||
Here is what drawDB offers
|
||||
<div className="text-base font-medium text-center text-sky-900">
|
||||
More than just an editor
|
||||
</div>
|
||||
<div className="text-sm opacity-75 text-center">
|
||||
More coming soon...
|
||||
<div className="text-2xl mt-1 font-medium text-center">
|
||||
What drawDB has to offer
|
||||
</div>
|
||||
<div className="grid grid-cols-3 gap-8 mt-10 md:grid-cols-2 sm:grid-cols-1">
|
||||
{features.map((f, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="rounded-xl hover:bg-zinc-100 border shadow-sm hover:-translate-y-2 transition-all duration-300"
|
||||
key={"feature" + i}
|
||||
className="flex rounded-xl hover:bg-zinc-100 border border-zinc-100 shadow-sm hover:-translate-y-2 transition-all duration-300"
|
||||
>
|
||||
<div className="bg-sky-700 py-1 rounded-t-xl" />
|
||||
<div className="bg-sky-700 px-0.5 rounded-l-xl" />
|
||||
<div className="px-8 py-4 ">
|
||||
<div className="text-lg font-semibold mb-3">{f.title}</div>
|
||||
{f.content}
|
||||
@ -174,68 +213,48 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</FadeIn>
|
||||
</div>
|
||||
<div className="bg-zinc-100 py-20 px-32 md:px-8 rounded-t-[40px]">
|
||||
<div className="text-center text-2xl font-bold mb-4">
|
||||
We support these DBMS
|
||||
|
||||
{/* Tweets */}
|
||||
<div className="px-40 mt-6 md:px-8">
|
||||
<div className="text-center text-2xl md:text-xl font-medium">
|
||||
What the internet says about us
|
||||
</div>
|
||||
<div className="grid grid-cols-5 place-items-center items-baseline sm:grid-cols-1 sm:gap-4">
|
||||
<img
|
||||
src={mysql_icon}
|
||||
className="opacity-70 hover:opacity-100 transition-all duration-300 h-20"
|
||||
/>
|
||||
<img
|
||||
src={postgres_icon}
|
||||
className="opacity-70 hover:opacity-100 transition-all duration-300 h-12"
|
||||
/>
|
||||
<img
|
||||
src={sqlite_icon}
|
||||
className="opacity-70 hover:opacity-100 transition-all duration-300 h-16"
|
||||
/>
|
||||
<img
|
||||
src={mariadb_icon}
|
||||
className="opacity-70 hover:opacity-100 transition-all duration-300 h-16"
|
||||
/>
|
||||
<img
|
||||
src={sql_server_icon}
|
||||
className="opacity-70 hover:opacity-100 transition-all duration-300 h-16"
|
||||
/>
|
||||
<div
|
||||
data-theme="light"
|
||||
className="grid grid-cols-2 place-items-center md:grid-cols-1"
|
||||
>
|
||||
<Tweet id="1816111365125218343" />
|
||||
<Tweet id="1817933406337905021" />
|
||||
<Tweet id="1785457354777006524" />
|
||||
<Tweet id="1776842268042756248" />
|
||||
</div>
|
||||
<div className="mt-16 mb-2 text-2xl font-bold text-center">
|
||||
</div>
|
||||
|
||||
{/* Contact us */}
|
||||
<svg
|
||||
viewBox="0 0 1440 54"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
width="100%"
|
||||
className="bg-transparent -scale-100"
|
||||
>
|
||||
<path
|
||||
d="M0 48 C0 48 320 0 720 0C1080 0 1440 48 1440 48V0H0V100Z"
|
||||
fill="#f4f4f5"
|
||||
/>
|
||||
</svg>
|
||||
<div className="bg-zinc-100 py-8 px-32 md:px-8">
|
||||
<div className="mt-4 mb-2 text-2xl font-bold text-center">
|
||||
Reach out to us
|
||||
</div>
|
||||
<div className="text-lg text-center mb-4">
|
||||
Your feedback is important to us. Share your thoughts and help us
|
||||
improve.
|
||||
We love hearing from you. Join our community on Discord, GitHub, and
|
||||
X.
|
||||
</div>
|
||||
<div className="px-36 text-center md:px-8">
|
||||
<div className="w-full flex gap-8 sm:block">
|
||||
<Link
|
||||
to="/survey"
|
||||
className="w-full flex items-center gap-2 font-semibold justify-center bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100 transition-all duration-300"
|
||||
>
|
||||
<div>Take a survey</div>
|
||||
<i className="bi bi-arrow-right"></i>
|
||||
</Link>
|
||||
<Link
|
||||
to="/bug-report"
|
||||
className="sm:mt-2 w-full flex items-center gap-2 font-semibold justify-center bg-white shadow-lg px-9 py-2 rounded border border-zinc-200 hover:bg-zinc-100 transition-all duration-300"
|
||||
>
|
||||
<div>Report a bug</div>
|
||||
<i className="bi bi-arrow-right"></i>
|
||||
</Link>
|
||||
</div>
|
||||
<div className="mt-10">
|
||||
Connect with us at
|
||||
<div className="md:block md:space-y-3 flex gap-3 justify-center">
|
||||
<a
|
||||
href="mailto:drawdb@outlook.com"
|
||||
className="text-blue-500 font-semibold hover:underline ms-1.5"
|
||||
>
|
||||
drawdb@outlook.com
|
||||
</a>
|
||||
</div>
|
||||
<div className="sm:block flex gap-3 justify-center">
|
||||
<a
|
||||
className="inline-block mt-2"
|
||||
className="inline-block"
|
||||
href="https://github.com/drawdb-io/drawdb"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
@ -248,7 +267,7 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
className="inline-block mt-2"
|
||||
className="inline-block"
|
||||
href="https://discord.gg/BrjZgNrmR6"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
@ -260,9 +279,35 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
<a
|
||||
className="inline-block"
|
||||
href="https://discord.gg/BrjZgNrmR6"
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
<div className="text-white bg-zinc-800 hover:opacity-90 transition-all duration-300 flex items-center gap-4 px-12 py-4 rounded-lg">
|
||||
<i className="text-2xl bi bi-twitter-x" />
|
||||
<div className="text-lg font-bold">Follow us on X</div>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div className="my-8">
|
||||
<div>
|
||||
If you're finding drawDB useful and would like to help us in
|
||||
improving and adding new features, consider making a donation.
|
||||
</div>
|
||||
<div>Your support means a lot to us!</div>
|
||||
<a
|
||||
href="https://buymeacoffee.com/drawdb"
|
||||
className="inline-block bg-white hover:bg-zinc-50 transition-all duration-300 rounded-full px-16 py-2.5 shadow mt-2"
|
||||
>
|
||||
Support us{" "}
|
||||
<i className="ms-2 text-rose-600 fa-regular fa-heart"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-red-700 py-1 text-center text-white text-xs font-semibold px-3">
|
||||
Attention! The diagrams are saved in your browser. Before clearing the
|
||||
browser make sure to back up your data.
|
||||
@ -275,6 +320,14 @@ export default function LandingPage() {
|
||||
);
|
||||
}
|
||||
|
||||
const dbs = [
|
||||
{ icon: mysql_icon, height: 80 },
|
||||
{ icon: postgres_icon, height: 48 },
|
||||
{ icon: sqlite_icon, height: 64 },
|
||||
{ icon: mariadb_icon, height: 64 },
|
||||
{ icon: sql_server_icon, height: 64 },
|
||||
];
|
||||
|
||||
const features = [
|
||||
{
|
||||
title: "Export",
|
||||
@ -373,7 +426,7 @@ const features = [
|
||||
content: (
|
||||
<div>
|
||||
Add custom types for object-relational databases, or create custom JSON
|
||||
schemes and alias types.
|
||||
schemes.
|
||||
</div>
|
||||
),
|
||||
footer: "",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user