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-hotkeys-hook": "^4.4.1",
|
||||||
"react-i18next": "^14.1.1",
|
"react-i18next": "^14.1.1",
|
||||||
"react-router-dom": "^6.21.0",
|
"react-router-dom": "^6.21.0",
|
||||||
|
"react-tweet": "^3.2.1",
|
||||||
"url": "^0.11.1",
|
"url": "^0.11.1",
|
||||||
"usehooks-ts": "^3.1.0"
|
"usehooks-ts": "^3.1.0"
|
||||||
},
|
},
|
||||||
@ -1679,6 +1680,14 @@
|
|||||||
"win32"
|
"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": {
|
"node_modules/@types/babel__core": {
|
||||||
"version": "7.20.5",
|
"version": "7.20.5",
|
||||||
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.20.5.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
|
||||||
"integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow=="
|
"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": {
|
"node_modules/clsx": {
|
||||||
"version": "1.2.1",
|
"version": "1.2.1",
|
||||||
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz",
|
||||||
@ -5103,6 +5117,28 @@
|
|||||||
"react-dom": ">=16.8"
|
"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": {
|
"node_modules/react-window": {
|
||||||
"version": "1.8.10",
|
"version": "1.8.10",
|
||||||
"resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
|
"resolved": "https://registry.npmjs.org/react-window/-/react-window-1.8.10.tgz",
|
||||||
@ -5610,6 +5646,18 @@
|
|||||||
"node": ">=12.0.0"
|
"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": {
|
"node_modules/tailwindcss": {
|
||||||
"version": "3.3.6",
|
"version": "3.3.6",
|
||||||
"resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.3.6.tgz",
|
"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",
|
"resolved": "https://registry.npmjs.org/punycode/-/punycode-1.4.1.tgz",
|
||||||
"integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ=="
|
"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": {
|
"node_modules/usehooks-ts": {
|
||||||
"version": "3.1.0",
|
"version": "3.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/usehooks-ts/-/usehooks-ts-3.1.0.tgz",
|
||||||
|
|||||||
@ -36,6 +36,7 @@
|
|||||||
"react-hotkeys-hook": "^4.4.1",
|
"react-hotkeys-hook": "^4.4.1",
|
||||||
"react-i18next": "^14.1.1",
|
"react-i18next": "^14.1.1",
|
||||||
"react-router-dom": "^6.21.0",
|
"react-router-dom": "^6.21.0",
|
||||||
|
"react-tweet": "^3.2.1",
|
||||||
"url": "^0.11.1",
|
"url": "^0.11.1",
|
||||||
"usehooks-ts": "^3.1.0"
|
"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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="py-5 px-8 sm:px-4 flex justify-between items-center">
|
<div className="py-4 px-12 sm:px-4 flex justify-between items-center">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center justify-between w-full">
|
||||||
<Link to="/">
|
<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>
|
</Link>
|
||||||
<div className="md:hidden flex space-x-6 ml-6">
|
<div className="md:hidden flex gap-12">
|
||||||
<Link
|
<Link
|
||||||
className="text-lg font-semibold hover:text-indigo-700"
|
className="text-lg font-semibold hover:text-sky-800 transition-colors duration-300"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
document
|
document
|
||||||
.getElementById("features")
|
.getElementById("features")
|
||||||
@ -27,46 +27,46 @@ export default function Navbar() {
|
|||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/editor"
|
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
|
Editor
|
||||||
</Link>
|
</Link>
|
||||||
<Link
|
<Link
|
||||||
to="/templates"
|
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
|
Templates
|
||||||
</Link>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div className="md:hidden block space-x-3 ms-12">
|
||||||
<div className="md:hidden block space-x-3">
|
<a
|
||||||
<a
|
title="Jump to Github"
|
||||||
title="Jump to Github"
|
className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
||||||
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"
|
||||||
href="https://github.com/drawdb-io/drawdb"
|
target="_blank"
|
||||||
target="_blank"
|
rel="noreferrer"
|
||||||
rel="noreferrer"
|
>
|
||||||
>
|
<i className="opacity-70 bi bi-github" />
|
||||||
<i className="opacity-70 bi bi-github" />
|
</a>
|
||||||
</a>
|
<a
|
||||||
<a
|
title="Follow us on X"
|
||||||
title="Follow us on X"
|
className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
||||||
className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
href="https://x.com/drawDB_"
|
||||||
href="https://x.com/drawDB_"
|
target="_blank"
|
||||||
target="_blank"
|
rel="noreferrer"
|
||||||
rel="noreferrer"
|
>
|
||||||
>
|
<i className="opacity-70 bi bi-twitter-x" />
|
||||||
<i className="opacity-70 bi bi-twitter-x" />
|
</a>
|
||||||
</a>
|
<a
|
||||||
<a
|
title="Join the community on Discord"
|
||||||
title="Join the community on Discord"
|
className="px-2 py-2 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
||||||
className="px-3 py-2 bg-zinc-100 hover:opacity-60 transition-all duration-300 rounded-full text-2xl"
|
href="https://discord.gg/BrjZgNrmR6"
|
||||||
href="https://discord.gg/BrjZgNrmR6"
|
target="_blank"
|
||||||
target="_blank"
|
rel="noreferrer"
|
||||||
rel="noreferrer"
|
>
|
||||||
>
|
<i className="opacity-70 bi bi-discord" />
|
||||||
<i className="opacity-70 bi bi-discord" />
|
</a>
|
||||||
</a>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<button
|
<button
|
||||||
onClick={() => setOpenMenu((prev) => !prev)}
|
onClick={() => setOpenMenu((prev) => !prev)}
|
||||||
|
|||||||
@ -28,7 +28,7 @@ function Table({ table, grab }) {
|
|||||||
// Required for onPointerLeave to trigger when a touch pointer leaves
|
// Required for onPointerLeave to trigger when a touch pointer leaves
|
||||||
// https://stackoverflow.com/a/70976017/1137077
|
// https://stackoverflow.com/a/70976017/1137077
|
||||||
e.target.releasePointerCapture(e.pointerId);
|
e.target.releasePointerCapture(e.pointerId);
|
||||||
|
|
||||||
if (!e.isPrimary) return;
|
if (!e.isPrimary) return;
|
||||||
|
|
||||||
grab(e);
|
grab(e);
|
||||||
@ -197,7 +197,7 @@ export default function SimpleCanvas({ diagram, zoom }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
className="w-full h-full cursor-grab"
|
className="w-full h-full cursor-grab rounded-3xl"
|
||||||
onPointerUp={(e) => e.isPrimary && releaseTable()}
|
onPointerUp={(e) => e.isPrimary && releaseTable()}
|
||||||
onPointerMove={(e) => e.isPrimary && moveTable(e)}
|
onPointerMove={(e) => e.isPrimary && moveTable(e)}
|
||||||
onPointerLeave={(e) => e.isPrimary && releaseTable()}
|
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 {
|
.semi-form-vertical .semi-form-field {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
padding-top: 8px !important;
|
padding-top: 8px !important;
|
||||||
@ -125,3 +134,51 @@
|
|||||||
background-image: radial-gradient(rgb(118, 118, 209) 1px, white 1px);
|
background-image: radial-gradient(rgb(118, 118, 209) 1px, white 1px);
|
||||||
background-size: 20px 20px;
|
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 SimpleCanvas from "../components/SimpleCanvas";
|
||||||
import Navbar from "../components/Navbar";
|
import Navbar from "../components/Navbar";
|
||||||
import { diagram } from "../data/heroDiagram";
|
import { diagram } from "../data/heroDiagram";
|
||||||
import { Steps } from "@douyinfe/semi-ui";
|
|
||||||
import mysql_icon from "../assets/mysql.png";
|
import mysql_icon from "../assets/mysql.png";
|
||||||
import postgres_icon from "../assets/postgres.png";
|
import postgres_icon from "../assets/postgres.png";
|
||||||
import sqlite_icon from "../assets/sqlite.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 sql_server_icon from "../assets/sql-server.png";
|
||||||
import discord from "../assets/discord.png";
|
import discord from "../assets/discord.png";
|
||||||
import github from "../assets/github.png";
|
import github from "../assets/github.png";
|
||||||
|
import screenshot from "../assets/screenshot.png";
|
||||||
import FadeIn from "../animations/FadeIn";
|
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() {
|
export default function LandingPage() {
|
||||||
const [showSurvey, setShowSurvey] = useState(true);
|
const [showSurvey, setShowSurvey] = useState(true);
|
||||||
|
const [stats, setStats] = useState({ stars: 18000, forks: 1200 });
|
||||||
|
|
||||||
useEffect(() => {
|
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.body.setAttribute("theme-mode", "light");
|
||||||
document.title =
|
document.title =
|
||||||
"drawDB | Online database diagram editor and SQL generator";
|
"drawDB | Online database diagram editor and SQL generator";
|
||||||
});
|
|
||||||
|
fetchStats();
|
||||||
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<div className="flex flex-col h-screen">
|
<div className="flex flex-col h-screen bg-zinc-100">
|
||||||
{showSurvey && (
|
{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">
|
<Link to="/survey" className="hover:underline">
|
||||||
Help us improve! Share your feedback.
|
Help us improve! Share your feedback.
|
||||||
</Link>
|
</Link>
|
||||||
@ -39,27 +57,40 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
<Navbar />
|
<FadeIn duration={0.6}>
|
||||||
<div className="flex-1 flex-col relative">
|
<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">
|
<div className="h-full md:hidden">
|
||||||
<SimpleCanvas diagram={diagram} zoom={0.85} />
|
<SimpleCanvas diagram={diagram} zoom={0.85} />
|
||||||
</div>
|
</div>
|
||||||
<div className="hidden md:block h-full bg-dots"></div>
|
<div className="hidden md:block h-full bg-dots" />
|
||||||
<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="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}>
|
<FadeIn duration={0.75}>
|
||||||
<div className="text-4xl font-bold tracking-wide">
|
<div className="md:px-3">
|
||||||
<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">
|
<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
|
Draw, Copy, and Paste
|
||||||
</h1>
|
</h1>
|
||||||
</div>
|
<div className="text-lg font-medium mt-1 sliding-vertical">
|
||||||
<div className="text-lg font-semibold mt-3">
|
Free and open source, simple, and intuitive database design
|
||||||
Free, simple, and intuitive database design tool and SQL
|
editor, data-modeler, and SQL generator.{" "}
|
||||||
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>
|
</div>
|
||||||
</FadeIn>
|
</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
|
<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={() =>
|
onClick={() =>
|
||||||
document
|
document
|
||||||
.getElementById("learn-more")
|
.getElementById("learn-more")
|
||||||
@ -70,100 +101,108 @@ export default function LandingPage() {
|
|||||||
</button>
|
</button>
|
||||||
<Link
|
<Link
|
||||||
to="/editor"
|
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>
|
</Link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
{/* Learn more */}
|
||||||
<div id="learn-more">
|
<div id="learn-more">
|
||||||
<div className="bg-zinc-100 py-20 px-24 md:px-8 rounded-b-[40px]">
|
<div className="bg-zinc-100 py-10 px-28 md:px-8">
|
||||||
<FadeIn duration={1}>
|
<div className="flex justify-center items-center gap-28 md:block">
|
||||||
<div className="text-2xl text-slate-900 font-bold text-center mb-10 md:hidden">
|
<div className="text-center mb-4">
|
||||||
Entity-Relationship diagrams simplified
|
<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>
|
||||||
<div className="md:hidden">
|
<div className="text-center mb-4">
|
||||||
<Steps type="basic" current={3}>
|
<div className="text-5xl md:text-3xl font-bold text-sky-800">
|
||||||
<Steps.Step
|
{shortenNumber(stats.forks)}
|
||||||
title="Create tables"
|
</div>
|
||||||
description="Define tables with the necessary fields and indices."
|
<div className="ms-1 mt-1 font-medium tracking-wide">
|
||||||
/>
|
GitHub forks
|
||||||
<Steps.Step
|
</div>
|
||||||
title="Add relationships"
|
|
||||||
description="Build relationships by simply dragging"
|
|
||||||
/>
|
|
||||||
<Steps.Step
|
|
||||||
title="Export"
|
|
||||||
description="Export to your preferred SQL flavor"
|
|
||||||
/>
|
|
||||||
</Steps>
|
|
||||||
</div>
|
</div>
|
||||||
</FadeIn>
|
<div className="text-center mb-4">
|
||||||
<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-5xl md:text-3xl font-bold text-sky-800">
|
||||||
<div className="text-2xl font-bold text-slate-900 mb-8">
|
{shortenNumber(languages.length)}
|
||||||
Why drawDB?
|
</div>
|
||||||
|
<div className="ms-1 mt-1 font-medium tracking-wide">
|
||||||
|
Languages
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-3 gap-4 md:grid-cols-1 h-full">
|
<div className="w-96 md:w-full h-full md:text-center">
|
||||||
<SlideIn delay={0} duration={0.4} className="h-full">
|
<div>
|
||||||
<div className="h-full border rounded-lg p-6 hover:bg-slate-100 transition-all duration-300">
|
Join our community, become one of us. Help us become bigger and
|
||||||
<span className="text-white bg-green-400 rounded-full py-2.5 px-3">
|
better, support us by donating.
|
||||||
<i className="fa-solid fa-credit-card"></i>
|
</div>
|
||||||
</span>
|
<a
|
||||||
<div className="mt-6 text-lg font-semibold text-slate-700">
|
href="https://buymeacoffee.com/drawdb"
|
||||||
Free
|
className="inline-block bg-white hover:bg-zinc-50 transition-all duration-300 rounded-full px-9 py-2.5 shadow mt-2"
|
||||||
</div>
|
>
|
||||||
<div className="text-sm mt-3">
|
Support us{" "}
|
||||||
drawDB is completely free of charge.
|
<i className="ms-2 text-rose-600 fa-regular fa-heart"></i>
|
||||||
</div>
|
</a>
|
||||||
</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>
|
</div>
|
||||||
</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>
|
</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>
|
||||||
<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}>
|
<FadeIn duration={1}>
|
||||||
<div className="text-2xl font-bold text-center">
|
<div className="text-base font-medium text-center text-sky-900">
|
||||||
Here is what drawDB offers
|
More than just an editor
|
||||||
</div>
|
</div>
|
||||||
<div className="text-sm opacity-75 text-center">
|
<div className="text-2xl mt-1 font-medium text-center">
|
||||||
More coming soon...
|
What drawDB has to offer
|
||||||
</div>
|
</div>
|
||||||
<div className="grid grid-cols-3 gap-8 mt-10 md:grid-cols-2 sm:grid-cols-1">
|
<div className="grid grid-cols-3 gap-8 mt-10 md:grid-cols-2 sm:grid-cols-1">
|
||||||
{features.map((f, i) => (
|
{features.map((f, i) => (
|
||||||
<div
|
<div
|
||||||
key={i}
|
key={"feature" + i}
|
||||||
className="rounded-xl hover:bg-zinc-100 border shadow-sm hover:-translate-y-2 transition-all duration-300"
|
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="px-8 py-4 ">
|
||||||
<div className="text-lg font-semibold mb-3">{f.title}</div>
|
<div className="text-lg font-semibold mb-3">{f.title}</div>
|
||||||
{f.content}
|
{f.content}
|
||||||
@ -174,68 +213,48 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
</FadeIn>
|
</FadeIn>
|
||||||
</div>
|
</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">
|
{/* Tweets */}
|
||||||
We support these DBMS
|
<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>
|
||||||
<div className="grid grid-cols-5 place-items-center items-baseline sm:grid-cols-1 sm:gap-4">
|
<div
|
||||||
<img
|
data-theme="light"
|
||||||
src={mysql_icon}
|
className="grid grid-cols-2 place-items-center md:grid-cols-1"
|
||||||
className="opacity-70 hover:opacity-100 transition-all duration-300 h-20"
|
>
|
||||||
/>
|
<Tweet id="1816111365125218343" />
|
||||||
<img
|
<Tweet id="1817933406337905021" />
|
||||||
src={postgres_icon}
|
<Tweet id="1785457354777006524" />
|
||||||
className="opacity-70 hover:opacity-100 transition-all duration-300 h-12"
|
<Tweet id="1776842268042756248" />
|
||||||
/>
|
|
||||||
<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>
|
</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
|
Reach out to us
|
||||||
</div>
|
</div>
|
||||||
<div className="text-lg text-center mb-4">
|
<div className="text-lg text-center mb-4">
|
||||||
Your feedback is important to us. Share your thoughts and help us
|
We love hearing from you. Join our community on Discord, GitHub, and
|
||||||
improve.
|
X.
|
||||||
</div>
|
</div>
|
||||||
<div className="px-36 text-center md:px-8">
|
<div className="px-36 text-center md:px-8">
|
||||||
<div className="w-full flex gap-8 sm:block">
|
<div className="md:block md:space-y-3 flex gap-3 justify-center">
|
||||||
<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
|
|
||||||
<a
|
<a
|
||||||
href="mailto:drawdb@outlook.com"
|
className="inline-block"
|
||||||
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"
|
|
||||||
href="https://github.com/drawdb-io/drawdb"
|
href="https://github.com/drawdb-io/drawdb"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
@ -248,7 +267,7 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<a
|
<a
|
||||||
className="inline-block mt-2"
|
className="inline-block"
|
||||||
href="https://discord.gg/BrjZgNrmR6"
|
href="https://discord.gg/BrjZgNrmR6"
|
||||||
target="_blank"
|
target="_blank"
|
||||||
rel="noreferrer"
|
rel="noreferrer"
|
||||||
@ -260,9 +279,35 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="bg-red-700 py-1 text-center text-white text-xs font-semibold px-3">
|
<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
|
Attention! The diagrams are saved in your browser. Before clearing the
|
||||||
browser make sure to back up your data.
|
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 = [
|
const features = [
|
||||||
{
|
{
|
||||||
title: "Export",
|
title: "Export",
|
||||||
@ -373,7 +426,7 @@ const features = [
|
|||||||
content: (
|
content: (
|
||||||
<div>
|
<div>
|
||||||
Add custom types for object-relational databases, or create custom JSON
|
Add custom types for object-relational databases, or create custom JSON
|
||||||
schemes and alias types.
|
schemes.
|
||||||
</div>
|
</div>
|
||||||
),
|
),
|
||||||
footer: "",
|
footer: "",
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user