Move links to navbar

index.html

@@ -8,7 +8,7 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Online database entity-realtionship diagram editor and SQL generator. Design, visualize, and export scripts without an account and completely free of charge."
+      content="Online database entity-realtionship diagram editor, data modeler, and SQL generator. Design, visualize, and export scripts without an account and completely free of charge."
     />
 
     <meta name="robots" content="index,follow,max-image-preview:large" />
@@ -21,7 +21,7 @@
     />
     <meta
       property="og:description"
-      content="Online database entity-realtionship diagram editor and SQL generator. Design, visualize, and export scripts without an account and completely free of charge."
+      content="Online database entity-realtionship diagram editor, data modeler, and SQL generator. Design, visualize, and export scripts without an account and completely free of charge."
     />
     <meta property="og:image" content="https://drawdb.vercel.app/hero_ss.png" />
 

src/components/Navbar.jsx

@@ -10,13 +10,13 @@ export default function Navbar() {
   return (
     <>
       <div className="py-5 px-8 sm:px-4 flex justify-between items-center">
-        <div className="flex items-center justify-start">
+        <div className="flex items-center">
           <Link to="/">
             <img src={logo} alt="logo" className="me-2 h-[48px] sm:h-[32px]" />
           </Link>
-          <div className="md:hidden">
+          <div className="md:hidden flex space-x-6 ml-6">
             <Link
-              className="ms-6 text-lg font-semibold hover:text-indigo-700"
+              className="text-lg font-semibold hover:text-indigo-700"
               onClick={() =>
                 document
                   .getElementById("features")
@@ -27,18 +27,41 @@ export default function Navbar() {
             </Link>
             <Link
               to="/editor"
-              className="ms-6 text-lg font-semibold hover:text-indigo-700"
+              className="text-lg font-semibold hover:text-indigo-700"
             >
               Editor
             </Link>
             <Link
               to="/templates"
-              className="ms-6 text-lg font-semibold hover:text-indigo-700"
+              className="text-lg font-semibold hover:text-indigo-700"
             >
               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"
+          >
+            <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_"
+          >
+            <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"
+          >
+            <i className="opacity-70 bi bi-discord" />
+          </a>
+        </div>
         <button
           onClick={() => setOpenMenu((prev) => !prev)}
           className="hidden md:inline-block h-[24px]"

src/pages/LandingPage.jsx

@@ -79,9 +79,9 @@ export default function LandingPage() {
         </div>
       </div>
       <div id="learn-more">
-        <div className="bg-zinc-100 py-10 px-24 md:px-8 rounded-b-[40px]">
+        <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-5 md:hidden">
+            <div className="text-2xl text-slate-900 font-bold text-center mb-10 md:hidden">
               Entity-Relationship diagrams simplified
             </div>
             <div className="md:hidden">
@@ -101,7 +101,7 @@ export default function LandingPage() {
               </Steps>
             </div>
           </FadeIn>
-          <div className="mt-16 text-center w-[75%] sm:w-full mx-auto shadow-sm rounded-lg border px-12 py-8 bg-white">
+          <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>
@@ -149,7 +149,7 @@ export default function LandingPage() {
           </div>
         </div>
       </div>
-      <div id="features" className="py-10 px-36 md:px-8">
+      <div id="features" className="py-20 px-36 md:px-8">
         <FadeIn duration={1}>
           <div className="text-2xl font-bold text-center">
             Here is what drawDB offers
@@ -157,7 +157,7 @@ export default function LandingPage() {
           <div className="text-sm opacity-75 text-center">
             More coming soon...
           </div>
-          <div className="grid grid-cols-3 gap-8 mt-6 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) => (
               <div
                 key={i}
@@ -174,7 +174,7 @@ export default function LandingPage() {
           </div>
         </FadeIn>
       </div>
-      <div className="bg-zinc-100 py-10 px-32 md:px-8 rounded-t-[40px]">
+      <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
         </div>