a hack to fix the buggy div

src/pages/index.js

@@ -1,4 +1,4 @@
-import React from "react"
+import React, {useEffect, useState} from "react"
 
 import Layout from "../components/layout"
 import Hero from "../components/hero"
@@ -7,6 +7,29 @@ import SEO from "../components/seo"
 
 import bgImage from "../media/phones.webp"
 
+/*
+ For some inexplicable reason on first load React decides to make this div class into "divider".
+ I have no idea why that happens this is why I implemented this weird hack that forces React to reload classes.
+ If you have any idea how to fix this properly, you're more than welcome to open a PR.
+*/
+const BuggyDiv = () => {
+    const [clName, setClName] = useState("flex justify-center w-full mb-5");
+
+    useEffect(() => {
+        setTimeout(() => {
+            setClName("flex justify-center w-full mb-5 div-loaded");
+        }, 100)
+    }, [])
+
+    return (
+        <div className={clName}>
+            <CompatBtn autoFocus={true} className="btn-primary" href="/install/">Install</CompatBtn>
+            <div className="divider divider-horizontal" />
+            <CompatBtn className="btn-primary" href="/repos/">Repositories</CompatBtn>
+        </div>
+    )
+}
+
 const IndexPage = () => {
     return <Layout>
         <Hero bg={bgImage}>
@@ -16,11 +39,7 @@ const IndexPage = () => {
                 <div className="divider" />
                 On this official cloudstream/recloudstream site you can find downloads links and a list of repositories of extensions.
             </p>
-            <div className="flex justify-center w-full mb-5">
+            <BuggyDiv />
-                <CompatBtn autoFocus={true} className="btn-primary" href="/install/">Install</CompatBtn>
-                <div className="divider divider-horizontal" />
-                <CompatBtn className="btn-primary" href="/repos/">Repositories</CompatBtn>
-            </div>
             <CompatBtn className="btn-secondary" href="/docs/">Guides, FAQ & Docs</CompatBtn>
         </Hero>
     </Layout>