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

Update landing page

Browse Source
This commit is contained in:
1ilit 2024-08-07 19:46:55 +03:00
parent 9ed89df9e3
commit 7ad1059990
7 changed files with 351 additions and 184 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
package-lock.json generated
View File

@ -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",

1
package.json
View File

@ -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
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 170 KiB

72
src/components/Navbar.jsx
View File

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

2
src/components/SimpleCanvas.jsx
View File

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

57
src/index.css
View File

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

345
src/pages/LandingPage.jsx
View File

@ -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&apos;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&apos;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: "",