feat: update layout

Author: mychidarko

.vitepress/theme/components/Community/Blog.vue

@@ -28,7 +28,7 @@ const articles = [
 </script>
 
 <template>
-  <section id="blog" class="testimonials flex justify-center items-center h-[70vh] d-sm-down:none">
+  <section id="blog" class="testimonials hidden md:flex justify-center items-center h-[70vh]">
     <div class="flex:center-between py:_10" style="display: grid; grid-template-columns: 1fr 1.25fr; gap: 4rem;">
       <div class="text-sm">
         <h2 class="title mb-4" style="text-align: left;">Latest writings from the Leaf team</h2>

.vitepress/theme/components/Community/Hero.vue

@@ -3,13 +3,14 @@
 
 <template>
   <div class="flex flex-col min-h-[500px] justify-center items-center bg-[var(--vp-c-bg-alt)]">
-    <h1 class="text-center !font-bold !text-7xl">
-      <span>#Leaf</span> #Community
+    <h1 class="text-center !font-bold !text-5xl md:!text-7xl">
+      <span>#Leaf</span> <vue-writer
+        :array="['#Community', '#Comunidad', '#Communauté', '#コミュニティ', '#社区', '#Comunidade']" />
     </h1>
-    <p class="text-center max-w-[600px] mt-4">
-      Join our community of developers, contributors, and users to help us build a better framework for everyone.
-      We
-      welcome all contributions, from bug reports to feature requests, and code contributions.
+    <p class="text-center max-w-[600px] mt-4 text-sm md:text-base p-2 sm:p-0">
+      Our community is the heart of Leaf. Our community drives what we build, how we build it, and why we build it.
+      Whether you are new to programming or a seasoned developer, you can join the community to hang out with other
+      like-minded developers. 🌱
     </p>
   </div>
 </template>
@@ -21,4 +22,8 @@ h1 span {
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+h1 * {
+  display: inline !important;
+}
 </style>

.vitepress/theme/components/Community/Meetups.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="flex justify-center item-center py-48 bg-[var(--vp-c-bg-alt)]">
-    <section class="container grid grid-cols-2">
-      <img src="/images/community.svg" />
+    <section class="container grid md:grid-cols-2">
+      <img src="/images/community.svg" class="md:ml-5 mb-10 md:mb-0" />
 
-      <div class="text-center mb-24">
-        <h1 class="!text-3xl mb-8">Community meetups.</h1>
-        <p class="px-[22%]">
+      <div class="text-center flex flex-col items-center justify-center">
+        <h1 class="!text-3xl font-semibold mb-8">Community meetups.</h1>
+        <p class="md:px-[20%]">
           Our first community meet up was in 2023 which we held together with SeevCash. Since then our community has
           gotten bigger, growing together with Leaf and all the tools in the ecosystem. Join our young but vibrant
           community and the Leaf team as we discuss our insights from the past year and what’s to come in the next

.vitepress/theme/components/Community/NewsLetterSubstack.vue

@@ -5,7 +5,7 @@
 <template>
   <section id="newsletter" class="NewsLetter">
     <div class="container">
-      <iframe src="https://leafphp.substack.com/embed" style="display: #041D24;" width="480" height="320" frameborder="0" scrolling="no"></iframe>
+      <iframe src="https://leafphp.substack.com/embed" style="display: #041D24;" width="100%" height="320" frameborder="0" scrolling="no"></iframe>
 
       <p class="help">
         You can read our blog posts at

.vitepress/theme/components/Community/Speak.vue

@@ -1,8 +1,13 @@
+<script setup lang="ts">
+import Button from '../shared/Button.vue';
+</script>
+
 <template>
-  <section id="newsletter" class="speak flex-col flex:center-all">
+  <section id="newsletter" class="speak flex flex-col justify-center items-center">
     <div class="container">
-      <div class="flex flex:center-all">
-        <div class="flex flex:center-all border-radius:50 w:_5 h:_5 mb:_2" style="background: var(--vt-c-bg-soft);">
+      <div class="flex justify-center items-center">
+        <div class="flex justify-center items-center rounded-full w-12 h-12 mb-2"
+          style="background: var(--vp-c-bg-soft);">
           <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 352 512" height="20px"
             width="20px" xmlns="http://www.w3.org/2000/svg">
             <path
@@ -16,11 +21,12 @@
         Want a Leaf core team member to speak at your next event? Invite us to create a memorable and engaging
         experience for your attendees.
       </p>
-      <div class="flex flex:center-all">
-        <a href="mailto:[email protected]?subject=Invitation to speak at our next event" rel="noopener" target="_blank"
-          class="join-button mt:_3 w-xs:100 flex flex:center-all">
+
+      <div class="mt-5 text-center">
+        <Button as="a" href="mailto:[email protected]?subject=Invitation to speak at our next event" rel="noopener"
+          target="_blank" class="bg-white text-black m-auto">
           Reach out to us
-        </a>
+        </Button>
       </div>
     </div>
   </section>

.vitepress/theme/components/Community/WallOfFame.vue

@@ -6,13 +6,13 @@ import SponsorGroup from '../shared/SponsorGroup.vue';
   <div class="flex justify-center item-center py-48">
     <section class="flex flex-col justify-center items-center max-w-[1280px]">
       <div class="text-center mb-10">
-        <h1 class="!text-5xl font-bold mb-8">Wall of Fame</h1>
-        <p class="px-[22%]">
+        <h1 class="text-3xl md:!text-5xl font-bold mb-8">Wall of Fame</h1>
+        <p class="p-2 md:px-[22%]">
           These are the heroes who have made Leaf what it is today. We are grateful for their contributions and support ❤️
         </p>
       </div>
 
-      <SponsorGroup group="code" class="w-full sm:!grid-cols-4 md:!grid-cols-6 lg:!grid-cols-8 xl:!grid-cols-10" />
+      <SponsorGroup group="code" class="w-full sm:!grid-cols-4 md:!grid-cols-6 lg:!grid-cols-8 xl:!grid-cols-10 p-2" />
     </section>
   </div>
 </template>

.vitepress/theme/components/Community/Welcome.vue

@@ -8,22 +8,14 @@ import Card from '../shared/Card.vue';
   <section class="flex flex-col justify-center items-center container py-40">
     <div class="text-center mb-12">
       <h1 class="flex justify-center text-center text-4xl font-bold mb-4">
-        <vue-writer :array="['Hello, ', 'Hola, ', 'Bonjour, ', 'こんにちは, ', '你好, ', 'Olá, ']" /><span>welcome 👋</span>
+        Keep in touch 💃
       </h1>
-      <p class="max-w-[700px] mb-4">
-        The community is the heart of Leaf. Unlike other frameworks, we let the community drive the development of Leaf.
-        This includes RFCs, feature requests, bug reports, and code contributions. We welcome all contributions, no
-        matter how
-        small. We believe that the community is the backbone of any successful project. We are grateful for your support
-        and contributions. Together, we can build a better framework for everyone. 🌱
-      </p>
       <p>Join us on GitHub, Discord, Twitter or YouTube</p>
     </div>
 
-    <div class="grid grid-cols-4 gap-2 max-w-[850px]">
-      <Card class="p-4 row-span-2 relative">
-        <img src="/images/community/discord.png" class="rounded" alt="">
-        <svg width="16" height="16" class="h-6 w-6 absolute right-6 top-6" viewBox="0 0 40 40" fill="none"
+    <div class="grid sm:grid-cols-3 lg:grid-cols-5 lg:max-w-[1000px] gap-2">
+      <Card class="p-4 relative">
+        <svg width="16" height="16" class="h-6 w-6" viewBox="0 0 40 40" fill="none"
           xmlns="http://www.w3.org/2000/svg">
           <rect width="40" height="40" rx="10" fill="#5865F2"></rect>
           <mask id="mask0_4221_8593" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="8" y="8" width="24"
@@ -37,7 +29,7 @@ import Card from '../shared/Card.vue';
           </g>
         </svg>
 
-        <h3 class="font-bold mt-4">Leaf World 🍁 on Discord</h3>
+        <h3 class="font-bold mt-4">Leaf on Discord</h3>
         <p class="text-sm">Join our Discord server to connect with the team and other users.</p>
       </Card>
       <Card class="p-4">
@@ -98,14 +90,14 @@ import Card from '../shared/Card.vue';
         <h3 class="font-bold mt-2">@leafphp on YouTube</h3>
         <p class="text-sm">Subscribe to our YouTube channel.</p>
       </Card>
-      <Card class="p-4 col-span-2">
+      <!-- <Card class="p-4 col-span-2">
         <img src="/logo-circle.png" alt="LeafPHP Logo" class="w-6 h-6 rounded-full">
 
         <p class="text-sm mt-2">
           Contribute to Leaf, Hana or Naytive. We welcome all contributions, no matter how small. Your code can help
           make Leaf better for everyone.
         </p>
-      </Card>
+      </Card> -->
     </div>
   </section>
 </template>

.vitepress/theme/components/Home/Footer.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="flex flex-col justify-center !py-24">
+  <section class="hidden md:flex flex-col justify-center !py-24">
     <img src="/logo-circle.png" class="w-14 h-14" alt="">
     <div class="mt-6 grid grid-cols-5 md:gap-x-8 gap-y-12">
       <div class="lg:col-span-2">

.vitepress/theme/components/Home/Hero.vue

@@ -9,7 +9,7 @@ import Button from '../shared/Button.vue';
       Elegant PHP <br>
       <span>for Modern Developers</span>
     </h1>
-    <p class="text-center max-w-[600px]">
+    <p class="text-center max-w-[600px] p-2 md:p-0 text-sm md:text-base">
       Leaf is a lightweight and user-friendly framework designed for quick and efficient development. It features a
       zero-config setup and an ecosystem of tools, making it ideal for building scalable apps with ease.
     </p>

.vitepress/theme/components/Home/Testimonials.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="flex justify-center item-center md:py-48 bg-[var(--vp-c-bg-secondary)]">
+  <div class="hidden sm:flex justify-center item-center md:py-48 bg-[var(--vp-c-bg-secondary)]">
     <section class="flex flex-col justify-center items-center">
       <div class="text-center mb-16">
         <h1 class="text-3xl md:!text-5xl px-[20%]">Loved by thousands of product people like you.</h1>