add a warning

src/components/cards/repo.jsx

@@ -17,7 +17,7 @@ const RepoCard = ({ url, isFirst }) => {
         return <progress className="progress progress-primary w-full mx-10 md:w-2/3 mb-5"></progress>
     }
 
-    return <article className="card card bg-base-200 shadow-xl w-full mx-10 md:w-2/3 mb-5">
+    return <article className="card bg-base-200 shadow-xl w-full mx-10 md:w-2/3 mb-5">
         <div className="card-body">
             <h2 className="card-title">{data.name || "Unnamed"}</h2>
             <p>

src/pages/repos.js

@@ -4,6 +4,8 @@ import Layout from "../components/layout"
 import RepoCard from "../components/cards/repo"
 import bgImage from "../media/phones.png"
 
+import { TiWarning } from "react-icons/ti";
+
 const IndexPage = () => {
     const [repos, setRepos] = useState([]);
     
@@ -17,6 +19,15 @@ const IndexPage = () => {
 
     return <Layout>
         <div className="flex items-center w-full flex-col">
+            <div className="alert alert-warning shadow-lg w-full mx-10 md:w-2/3 mb-5">
+                <div>
+                    <TiWarning className="stroke-current flex-shrink-0 h-6 w-6"/>
+                    <div>
+                        <h3 className="font-bold text-xl">Keep in mind that the extensions can execute arbitrary code inside the app.</h3>
+                        <span className="text-xs">This means you should treat them with the same level of scrutiny you treat any apps. Extensions can also read all of the Cloudstream's data.</span>
+                    </div>
+                </div>
+            </div>
             {repos &&
                 repos.map((it, index) => <RepoCard url={it} key={index} isFirst={index===0}/>)
             }