Implements #265(Add social links to website) along with a few minor changes

layouts/index.html

@@ -28,7 +28,9 @@
     <!--Section starts here-->
     <div class="text-center bg-cnp-blue md:py-36 py-14">
         <h1 class="md:text-xl text-white text-base">This open source project has been originally created by</h1>
-        <a href="https://www.enterprisedb.com/products/cloud-native-postgresql-kubernetes-ha-clusters-k8s-containers-scalable"><img src="logo/edb_landscape_color_grey.svg" alt="EDB logo" class="mx-auto pt-6 h-20 md:h-24"></a>
+        <a
+            href="https://www.enterprisedb.com/products/cloud-native-postgresql-kubernetes-ha-clusters-k8s-containers-scalable"><img
+                src="logo/edb_landscape_color_grey.svg" alt="EDB logo" class="mx-auto pt-6 h-20 md:h-24"></a>
         <div class="mx-auto md:py-24 md:px-56 px-4 py-8">
             <hr>
         </div>
@@ -42,10 +44,5 @@ <h1 class="md:text-5xl font-bold text-white leading-10 md:pt-4 text-3xl">Open So
             on <a href="https://github.com/cloudnative-pg/cloudnative-pg" class="text-rose-600">GitHub</a>.</p>
     </div>
     <!--Section ends here-->
-
-    <div class="text-center pt-24">
-        <a href="https://github.com/cloudnative-pg/cloudnative-pg"
-            class="bg-red-1 py-4 px-12 rounded-full text-white text-xl">View on GitHub</a>
-    </div>
 </section>
 {{ end }}

layouts/partials/footer.html

@@ -1,15 +1,73 @@
-<footer class="text-center pb-24">
-    <p class="text-sm charcoal md:w-1/2 mx-auto md:pt-10 px-6 pt-12">
+<footer class="section pb-0">
 
-      Copyright &copy; CloudNativePG a Series of LF Projects, LLC.<br />
-      For website terms of use, trademark policy and other project policies please see <a href="https://lfprojects.org/policies/">LF Projects, LLC Policies</a>.<br /><br />
+  <div class="pt-16">
+    <div
+      class="max-w-6xl mx-auto grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-10 pb-10 border-b border-b-zinc-200">
+
+      <!-- Learn -->
+      <div>
+        <h3 class="text-3xl font-semibold mb-0">Learn</h3>
+        <div class="space-y-2 text-base text-red-500">
+          <div><a href="/docs" class="hover:text-red-700 transition">Documentation</a></div>
+          <div><a href="https://cloudnative-pg.io/documentation/current/quickstart/"
+              class="hover:text-red-600 transition">Quickstart Guide</a></div>
+          <div><a href="/tags/tutorial" class="hover:text-red-600 transition">Tutorials</a></div>
+        </div>
+      </div>
+
+      <!-- Community -->
+      <div>
+        <h3 class="text-3xl font-semibold mb-0">Community</h3>
+        <div class="space-y-2 text-base text-red-500">
+          <div><a href="/blog" class="hover:text-red-700 transition">Blog</a></div>
+          <div><a href="/releases" class="hover:text-red-600 transition">Releases</a></div>
+          <div><a href="https://github.com/cloudnative-pg/cloudnative-pg/blob/main/CONTRIBUTING.md"
+              class="hover:text-red-600 transition">How to Contribute</a></div>
+        </div>
+      </div>
 
-      <a href="https://www.linuxfoundation.org/trademark-usage/" class="red-1">The Linux Foundation has registered trademarks and uses trademarks</a>.<br /><br />
+      <!-- Logo + Social -->
+      <div class="flex flex-col items-center">
+        <a href="https://cloudnative-pg.io/">
+          <img src="/logo/large_logo.svg" alt="CloudNativePG Logo" class="mb-2">
+        </a>
+        <div class="flex space-x-4 mb-2">
+          <a href="https://cloud-native.slack.com/archives/C08MAUJ7NPM">
+            <img src="/icons/Slack.svg" alt="Slack" title="Join our Slack channel now!">
+          </a>
+          <a href="https://twitter.com/CloudNativePg">
+            <img src="/icons/Twitter.svg" alt="Twitter">
+          </a>
+          <a href="https://www.youtube.com/channel/UCTGH88W1BiuRRPTzJUDPJyA">
+            <img src="/icons/YouTube.svg" alt="YouTube">
+          </a>
+          <a href="https://mastodon.social/@CloudNativePG" class="px-1">
+            <img src="/icons/mastodon.svg" alt="Mastodon">
+          </a>
+          <a href="https://bsky.app/profile/cloudnativepg.bsky.social" class="px-1">
+            <img src="/icons/bluesky.svg" alt="Bluesky">
+          </a>
+        </div>
+        <div class="text-center pt-4">
+          <a href="https://github.com/cloudnative-pg/cloudnative-pg"
+            class="bg-red-1 py-2 px-12 rounded-full text-white text-xl">View on GitHub</a>
+        </div>
+      </div>
+    </div>
+  </div>
 
-      <a href="https://www.postgresql.org/about/policies/trademarks"
-        class="red-1">Postgres, PostgreSQL and the Slonik Logo are trademarks or
+  <!-- Legal Text Section -->
+  <div class="text-center pb-4">
+    <p class="text-sm charcoal md:w-1/2 mx-auto md:pt-10 px-6 pt-12">
+      Copyright &copy; CloudNativePG a Series of LF Projects, LLC.<br />
+      For website terms of use, trademark policy and other project policies please see
+      <a href="https://lfprojects.org/policies/">LF Projects, LLC Policies</a>.<br /><br />
+      <a href="https://www.linuxfoundation.org/trademark-usage/" class="red-1">The Linux Foundation has registered
+        trademarks and uses trademarks</a>.<br /><br />
+      <a href="https://www.postgresql.org/about/policies/trademarks" class="red-1">Postgres, PostgreSQL and the Slonik
+        Logo are trademarks or
         registered trademarks of the PostgreSQL Community Association of Canada, and
         used with their permission</a>.
-
     </p>
+  </div>
 </footer>

layouts/partials/nav.html

@@ -1,7 +1,7 @@
 <!--Navbar starts here-->
 <nav>
   <header>
-    <div class="md:flex md:flex-row md:px-16 md:justify-between py-5">
+    <div class="md:flex md:flex-row md:px-16 md:justify-between py-5 items-center">
       <div class="flex justify-between px-4 md:hidden">
         <div>
           {{ $image := resources.Get "logo/large_logo.svg" }}
@@ -20,7 +20,7 @@
       </div>
 
       <div class="hidden md:block">
-        <ul class="md:flex gap-14 text-2xl medium-gray my-5">
+        <ul class="md:flex gap-14 text-2xl medium-gray my-5 pb-0">
           <li><a href="/blog">Blog</a></li>
           <li><a href="/tags/tutorial">Tutorials</a></li>
           <li><a href="/releases">Releases</a></li>
@@ -56,19 +56,10 @@
       </div>
       <!--For hamburger click -->
 
-      <div class="flex gap-5 my-4 fill-cnp-blue hidden md:flex">
+      <div class="my-4 hidden md:flex">
         <a class="github-button" href="https://github.com/cloudnative-pg/cloudnative-pg"
           data-color-scheme="no-preference: light; light: light; dark: dark;" data-size="large" data-show-count="true"
           aria-label="Star cloudnative-pg/cloudnative-pg on GitHub">Star</a>
-        <a href="https://cloud-native.slack.com/archives/C08MAUJ7NPM">
-          <img src="/icons/Slack.svg" alt="Slack" title="Join our Slack channel now!">
-        </a>
-        <a href="https://twitter.com/CloudNativePg">
-          <img src="/icons/Twitter.svg" alt="Twitter">
-        </a>
-        <a href="https://www.youtube.com/channel/UCTGH88W1BiuRRPTzJUDPJyA">
-          <img src="/icons/YouTube.svg" alt="YouTube">
-        </a>
       </div>
     </div>
   </header>

package.json

@@ -1,4 +1,29 @@
 {
+  "name": "cloudnative-pg",
+  "version": "1.0.0",
+  "description": "",
+  "homepage": "https://github.com/cloudnative-pg/cloudnative-pg.github.io#readme",
+  "bugs": {
+    "url": "https://github.com/cloudnative-pg/cloudnative-pg.github.io/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cloudnative-pg/cloudnative-pg.github.io.git"
+  },
+  "license": "ASF v2",
+  "author": "",
+  "main": "postcss.config.js",
+  "scripts": {
+    "build": "NODE_ENV=production npm run css && hugo -e production",
+    "build-dev": "NODE_ENV=development npm run css && hugo -D -e development --disableFastRender",
+    "css": "npx tailwindcss build -i assets/css/main.css -o assets/css/output.css",
+    "dev": "NODE_ENV=development npm run css && hugo server -D -e development --disableFastRender",
+    "prod": "NODE_ENV=production npm run css && hugo server -e production"
+  },
+  "dependencies": {
+    "postcss": "^8.3.11",
+    "postcss-scss": "^4.0.2"
+  },
   "devDependencies": {
     "@babel/cli": "^7.12.8",
     "@babel/core": "^7.12.9",
@@ -8,33 +33,7 @@
     "postcss-cli": "^8.3.0",
     "postcss-nested": "^5.0.1",
     "postcss-object-fit-images": "^1.1.2",
-    "postcss-preset-env": "^6.7.0",
-    "tailwindcss": "^3.0.23"
-  },
-  "dependencies": {
-    "postcss": "^8.3.11",
-    "postcss-scss": "^4.0.2",
+    "postcss-preset-env": "^10.2.4",
     "tailwindcss": "^3.0.23"
-  },
-  "name": "cloudnative-pg",
-  "description": "",
-  "version": "1.0.0",
-  "main": "postcss.config.js",
-  "scripts": {
-    "css": "npx tailwindcss build -i assets/css/main.css -o assets/css/output.css",
-    "prod": "NODE_ENV=production npm run css && hugo server -e production",
-    "build": "NODE_ENV=production npm run css && hugo -e production",
-    "dev": "NODE_ENV=development npm run css && hugo server -D -e development --disableFastRender",
-    "build-dev": "NODE_ENV=development npm run css && hugo -D -e development --disableFastRender"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/EnterpriseDB/temp-cnp-webpage.git"
-  },
-  "author": "",
-  "license": "ASF v2",
-  "bugs": {
-    "url": "https://github.com/EnterpriseDB/temp-cnp-webpage/issues"
-  },
-  "homepage": "https://github.com/EnterpriseDB/temp-cnp-webpage#readme"
+  }
 }