✨ Replace custom divider implementation with reusable <x-divider /> component across multiple views

HassanZahirnia · HassanZahirnia · commit 939c1c2317e7 · 2025-09-02T16:48:49.000+03:30
diff --git a/resources/views/article.blade.php b/resources/views/article.blade.php
@@ -76,29 +76,7 @@ class="text-sm"
         </header>
 
         {{-- Divider --}}
-        <div
-            x-init="
-                () => {
-                    motion.inView($el, () => {
-                        gsap.fromTo(
-                            $el,
-                            { autoAlpha: 0, x: 5 },
-                            { autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
-                        )
-                    })
-                }
-            "
-            class="flex items-center pt-3.5 pb-3"
-            aria-hidden="true"
-        >
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-            <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-        </div>
+        <x-divider />
 
         <div class="mt-2 flex items-start gap-5">
             {{-- Content --}}
diff --git a/resources/views/blog.blade.php b/resources/views/blog.blade.php
@@ -58,29 +58,7 @@ class="mx-auto max-w-2xl pt-4 text-base/relaxed text-gray-600 sm:text-lg/relaxed
         </header>
 
         {{-- Divider --}}
-        <div
-            x-init="
-                () => {
-                    motion.inView($el, () => {
-                        gsap.fromTo(
-                            $el,
-                            { autoAlpha: 0, x: 5 },
-                            { autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
-                        )
-                    })
-                }
-            "
-            class="flex items-center pt-3.5 pb-3"
-            aria-hidden="true"
-        >
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-            <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-        </div>
+        <x-divider />
 
         {{-- Articles --}}
         <section
diff --git a/resources/views/components/divider.blade.php b/resources/views/components/divider.blade.php
@@ -0,0 +1,19 @@
+<div
+    x-init="
+        () => {
+            motion.inView($el, () => {
+                gsap.fromTo(
+                    $el,
+                    { autoAlpha: 0, x: 5 },
+                    { autoAlpha: 1, x: 0, duration: 0.7, ease: 'power1.out' },
+                )
+            })
+        }
+    "
+    class="flex items-center pt-3.5 pb-3"
+    aria-hidden="true"
+>
+    <div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
+    <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
+    <div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
+</div>
diff --git a/resources/views/components/footer.blade.php b/resources/views/components/footer.blade.php
@@ -94,7 +94,7 @@ class="flex flex-wrap items-center justify-center gap-2.5 *:opacity-0"
             >
                 <a
                     href="/newsletter"
-                    class="group dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud relative z-0 flex max-w-105 items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pr-7 pl-6 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10"
+                    class="group relative z-0 flex max-w-105 items-center gap-6 overflow-hidden rounded-2xl bg-cyan-50/50 py-5 pr-7 pl-6 ring-1 ring-black/5 transition duration-300 ease-in-out hover:bg-cyan-50 hover:ring-black/10 dark:bg-mirage dark:hover:bg-haiti dark:hover:ring-cloud"
                 >
                     {{-- Decorative circle --}}
                     <div
@@ -273,14 +273,14 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
                         </a>
                     </li>
                     {{--
-                    <li>
+                        <li>
                         <a
-                            href="https://github.com/nativephp/mobile"
-                            class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
+                        href="https://github.com/nativephp/mobile"
+                        class="inline-block px-px py-1.5 transition duration-300 will-change-transform hover:translate-x-1 hover:text-gray-700 dark:hover:text-gray-300"
                         >
-                            GitHub
+                        GitHub
                         </a>
-                    </li>
+                        </li>
                     --}}
                 </ul>
             </section>
@@ -329,14 +329,7 @@ class="inline-block px-px py-1.5 transition duration-300 will-change-transform h
     </div>
 
     {{-- Divider --}}
-    <div
-        class="flex items-center pt-3 pb-3"
-        aria-hidden="true"
-    >
-        <div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
-        <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
-        <div class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"></div>
-    </div>
+    <x-divider />
 
     {{-- Copyright --}}
     <section
diff --git a/resources/views/privacy-policy.blade.php b/resources/views/privacy-policy.blade.php
@@ -56,35 +56,7 @@ class="text-sm"
         </header>
 
         {{-- Divider --}}
-        <div
-            x-init="
-                () => {
-                    motion.inView($el, (element) => {
-                        motion.animate(
-                            $el,
-                            {
-                                opacity: [0, 1],
-                                x: [5, 0],
-                            },
-                            {
-                                duration: 0.7,
-                                ease: motion.easeOut,
-                            },
-                        )
-                    })
-                }
-            "
-            class="flex items-center pt-3.5 pb-3 will-change-transform"
-            aria-hidden="true"
-        >
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-            <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-        </div>
+        <x-divider />
 
         {{-- Content --}}
         <article
@@ -105,7 +77,7 @@ class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
                     })
                 }
             "
-            class="prose dark:prose-headings:text-white mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400"
+            class="prose mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400 dark:prose-headings:text-white"
             aria-labelledby="article-title"
         >
             <p>
diff --git a/resources/views/sponsoring.blade.php b/resources/views/sponsoring.blade.php
@@ -7,7 +7,7 @@ class="mx-auto mt-10 w-full max-w-3xl px-5 md:mt-14"
         <header class="relative grid place-items-center text-center">
             {{-- Blurred circle - Decorative --}}
             <div
-                class="absolute right-1/2 top-0 -z-30 h-60 w-60 translate-x-1/2 rounded-full blur-[150px] md:w-80 dark:bg-slate-500/50"
+                class="absolute top-0 right-1/2 -z-30 h-60 w-60 translate-x-1/2 rounded-full blur-[150px] md:w-80 dark:bg-slate-500/50"
                 aria-hidden="true"
             ></div>
 
@@ -38,35 +38,7 @@ class="mt-8 text-3xl font-extrabold will-change-transform sm:text-4xl"
         </header>
 
         {{-- Divider --}}
-        <div
-            x-init="
-                () => {
-                    motion.inView($el, (element) => {
-                        motion.animate(
-                            $el,
-                            {
-                                opacity: [0, 1],
-                                x: [5, 0],
-                            },
-                            {
-                                duration: 0.7,
-                                ease: motion.easeOut,
-                            },
-                        )
-                    })
-                }
-            "
-            class="flex items-center pb-3 pt-3.5 will-change-transform"
-            aria-hidden="true"
-        >
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-            <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-        </div>
+        <x-divider />
 
         {{-- Content --}}
         <article
@@ -91,53 +63,81 @@ class="prose mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-
             aria-labelledby="article-title"
         >
             <p>
-                NativePHP is an organization backed by a team of dedicated employees, maintainers, and contributors who commit their time to
-                ensure its continued development and improvement. Currently, we operate two major projects: NativePHP for Mobile and
-                NativePHP for Desktop. Together, we can continue to grow NativePHP and ensure it remains a valuable tool for the community.
+                NativePHP is an organization backed by a team of dedicated
+                employees, maintainers, and contributors who commit their time
+                to ensure its continued development and improvement. Currently,
+                we operate two major projects: NativePHP for Mobile and
+                NativePHP for Desktop. Together, we can continue to grow
+                NativePHP and ensure it remains a valuable tool for the
+                community.
             </p>
 
             <h2>NativePHP for Mobile</h2>
 
             <p>
-                If you're interested in NativePHP for Mobile, you can <a href="/mobile">purchase a license</a>, which is the best way you can
-                support both projects of the NativePHP organization. These funds are used to cover the costs of development, infrastructure,
-                and community initiatives for both projects.
+                If you're interested in NativePHP for Mobile, you can
+                <a href="/mobile">purchase a license</a>
+                , which is the best way you can support both projects of the
+                NativePHP organization. These funds are used to cover the costs
+                of development, infrastructure, and community initiatives for
+                both projects.
             </p>
 
             <h2>NativePHP for Desktop</h2>
 
             <p>
-                NativePHP for Desktop is a free, open source project available under an MIT license. We encourage and appreciate any
-                contributions to the project, whether it's through code, documentation, spreading the word, or a financial sponsorship.
-                We provide the following ways of making an easy financial contribution:
+                NativePHP for Desktop is a free, open source project available
+                under an MIT license. We encourage and appreciate any
+                contributions to the project, whether it's through code,
+                documentation, spreading the word, or a financial sponsorship.
+                We provide the following ways of making an easy financial
+                contribution:
             </p>
 
             <ul>
-                <li><a href="https://opencollective.com/nativephp">OpenCollective</a></li>
+                <li>
+                    <a href="https://opencollective.com/nativephp">
+                        OpenCollective
+                    </a>
+                </li>
             </ul>
 
             <p>
-                All contributions are welcome, at any amount, as a one-off payment or on a recurring schedule. These funds are used to
+                All contributions are welcome, at any amount, as a one-off
+                payment or on a recurring schedule. These funds are used to
                 support the maintainers of the Desktop project.
             </p>
 
             <p>
-                All monthly sponsors above $10/month will be bestowed the <b>Sponsor</b> role on the NativePHP
-                <a href="https://discord.gg/X62tWNStZK">Discord</a>, granting access to private channels, early access to new releases, and
-                discounts on future premium services.
+                All monthly sponsors above $10/month will be bestowed the
+                <b>Sponsor</b>
+                role on the NativePHP
+                <a href="https://discord.gg/X62tWNStZK">Discord</a>
+                , granting access to private channels, early access to new
+                releases, and discounts on future premium services.
             </p>
 
             <h2>Corporate Partners</h2>
 
             <p>
-                If your organization is using NativePHP, we strongly encourage you to consider a Corporate Sponsorship. This level of
-                support will provide your team with the added benefits of increased levels of support, hands-on help directly from the
-                maintainers of NativePHP and promotion of your brand as a supporter of cutting-edge open source work.
+                If your organization is using NativePHP, we strongly encourage
+                you to consider a Corporate Sponsorship. This level of support
+                will provide your team with the added benefits of increased
+                levels of support, hands-on help directly from the maintainers
+                of NativePHP and promotion of your brand as a supporter of
+                cutting-edge open source work.
             </p>
 
             <p>
-                For more details, please view our <a href="/partners">partners page</a> or email us at
-                <a href="mailto:partners@nativephp.com?subject=Corporate%20Sponsorship">partners@nativephp.com</a>.
+                For more details, please view our
+                <a href="/partners">partners page</a>
+                or email us at
+                <a
+                    href="mailto:partners@nativephp.com?subject=Corporate%20Sponsorship"
+                >
+                    partners@nativephp.com
+                </a>
+                .
             </p>
         </article>
     </section>
diff --git a/resources/views/terms-of-service.blade.php b/resources/views/terms-of-service.blade.php
@@ -56,35 +56,7 @@ class="text-sm"
         </header>
 
         {{-- Divider --}}
-        <div
-            x-init="
-                () => {
-                    motion.inView($el, (element) => {
-                        motion.animate(
-                            $el,
-                            {
-                                opacity: [0, 1],
-                                x: [5, 0],
-                            },
-                            {
-                                duration: 0.7,
-                                ease: motion.easeOut,
-                            },
-                        )
-                    })
-                }
-            "
-            class="flex items-center pt-3.5 pb-3 will-change-transform"
-            aria-hidden="true"
-        >
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-            <div class="h-0.5 w-full bg-gray-200/90 dark:bg-[#242734]"></div>
-            <div
-                class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
-            ></div>
-        </div>
+        <x-divider />
 
         {{-- Content --}}
         <article
@@ -105,7 +77,7 @@ class="size-1.5 rotate-45 bg-gray-200/90 dark:bg-[#242734]"
                     })
                 }
             "
-            class="prose dark:prose-headings:text-white mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400"
+            class="prose mt-2 max-w-none text-gray-600 will-change-transform dark:text-gray-400 dark:prose-headings:text-white"
             aria-labelledby="article-title"
         >
             <p>
