style: add section, update/improve design and styling

app/page.tsx

@@ -1,41 +1,42 @@
 import Hero from "@/components/pages/main/Hero"
 import FeatureCard from "@/components/pages/main/FeatureCard"
-import { Mail, Lock, Disc3 } from "lucide-react"
+import { Mail, Lock, Disc3, Headset } from "lucide-react"
 import { SiGitea, SiAuthentik } from "react-icons/si";
 import Navbar from "@/components/pages/main/Navbar"
+import PoweredBySection from "@/components/pages/main/PoweredBySection"
 
 export default function Home() {
   const features = [
     {
       title: "Email",
       description: "Free email service with webmail and antispam, powered by a custom docker-mailserver setup.",
-      link: "https://pontusmail.org/",
       icon: Mail,
     },
     {
       title: "Password Manager",
       description: "Securely store and manage your passwords across devices with Vaultwarden.",
-      link: "https://vaultwarden.p0ntus.com/",
       icon: Lock,
     },
     {
       title: "Git",
       description: "Host your repositories and run actions free of charge on our Gitea instance.",
-      link: "https://git.pontusmail.org/",
       icon: SiGitea,
     },
     {
       title: "Authentik",
       description: "A secure single-sign-on service for easy login to your other services.",
-      link: "https://git.pontusmail.org/",
       icon: SiAuthentik,
     },
     {
       title: "Music",
       description: "Coming soon. Host your music on our community server and stream it everywhere",
-      link: "https://git.pontusmail.org/",
       icon: Disc3,
     },
+    {
+      title: "Support",
+      description: "Administrators are standing by most of the day via our various support channels.",
+      icon: Headset,
+    },
   ]
 
   return (
@@ -43,7 +44,7 @@ export default function Home() {
       <Navbar />
       <main>
         <Hero />
-        <section id="services" className="py-20">
+        <section id="services">
           <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
             <h2 className="text-4xl font-extrabold text-center mb-12 text-white">Our Services</h2>
             <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
@@ -53,6 +54,7 @@ export default function Home() {
             </div>
           </div>
         </section>
+        <PoweredBySection />
       </main>
     </div>
   )

components/pages/main/Hero.tsx

@@ -6,10 +6,10 @@ import { ReactTyped } from "react-typed"
 import Link from "next/link";
 
 const Hero = () => {
-  const phrases = ["developers", "students", "non-profits", "everyone"]
+  const phrases = ["everyone", "developers", "students", "non-profits", "teachers", "workers", "friends"]
 
   return (
-    <div className="py-20 text-white">
+    <div className="pt-20 pb-30 text-white">
       <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
         <div className="text-center">
           <h1 className="text-4xl tracking-tight font-extrabold sm:text-5xl md:text-6xl">
@@ -19,7 +19,7 @@ const Hero = () => {
             </span>
           </h1>
           <p className="mt-6 max-w-md mx-auto text-xl text-gray-300 sm:max-w-3xl">
-            Experience FOSS at its best with LibreCloud, a free service provider built with all kinds of people in mind.
+            Experience FOSS at its best with LibreCloud, a free service provider built with everyone in mind.
           </p>
           <div className="mt-10 max-w-md mx-auto sm:flex sm:justify-center">
             <div className="rounded-md shadow-sm">

components/pages/main/Navbar.tsx

@@ -1,8 +1,8 @@
 "use client"
 
-import { useState } from "react"
+import React, { useState } from "react"
 import Link from "next/link"
-import { Menu, X, Server, Home, User } from "lucide-react"
+import { Menu, X, Server, Home, User, Rss } from "lucide-react"
 
 const Navbar = () => {
   const [isOpen, setIsOpen] = useState(false)
@@ -21,6 +21,9 @@ const Navbar = () => {
               <NavLink href="/" icon={Home}>
                 Home
               </NavLink>
+              <NavLink href="https://status.librecloud.cc" icon={Rss}>
+                Status
+              </NavLink>
               <NavLink href="/#services" icon={Server}>
                 Services
               </NavLink>
@@ -52,6 +55,9 @@ const Navbar = () => {
             <MobileNavLink href="/" icon={Home}>
               Home
             </MobileNavLink>
+            <MobileNavLink href="https://status.librecloud.cc" icon={Rss}>
+              Status
+            </MobileNavLink>
             <MobileNavLink href="/#services" icon={Server}>
               Services
             </MobileNavLink>
@@ -89,7 +95,7 @@ interface MobileNavLinkProps {
 const MobileNavLink: React.FC<MobileNavLinkProps> = ({ href, icon: Icon, children }) => (
   <Link
     href={href}
-    className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white block px-3 py-2 rounded-md text-base font-medium"
+    className="flex items-center text-gray-300 hover:bg-gray-700 hover:text-white px-3 py-2 rounded-md text-base font-medium"
   >
     <Icon className="mr-2 h-5 w-5" /> {children}
   </Link>

components/pages/main/PoweredBySection.tsx

@@ -0,0 +1,29 @@
+import { RiOpenSourceFill } from "react-icons/ri";
+import { Ampersand } from "lucide-react";
+import { HiMiniHeart } from "react-icons/hi2";
+
+const PoweredBySection = () => {
+  return (
+    <section id="love" className="py-30">
+      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
+        <h2 className="text-5xl md:text-6xl font-extrabold text-center mb-8 ">Powered by</h2>
+        <div className="flex flex-col sm:flex-row justify-center items-center">
+          <div className="bg-green-400 rounded-full flex items-center p-4 lg:px-8 sm:mb-0">
+            <RiOpenSourceFill size={40} className="my-auto mr-2 lg:size-22" />
+            <h1 className="text-4xl lg:text-8xl font-extrabold">libre</h1>
+          </div>
+          <Ampersand size={40} className="m-4 lg:my-8 lg:size-22" />
+          <div className="bg-red-400 rounded-full flex items-center p-4 lg:px-8">
+            <HiMiniHeart size={40} className="my-auto mr-2 lg:size-24" />
+            <h1 className="text-4xl lg:text-8xl font-extrabold">love</h1>
+          </div>
+        </div>
+        <p className="text-center text-md lg:text-lg mt-8 max-w-2xl mx-auto">
+          We believe in the power of open source to positively impact the world. That&#39;s why we empower you with the infrastructure to explore how it can make a positive integration into your life.
+        </p>
+      </div>
+    </section>
+  )
+}
+
+export default PoweredBySection;