From e80c3561545fe95eed854dc841ad46c7faf811d0 Mon Sep 17 00:00:00 2001
From: Christopher Arraya <arrayacj@gmail.com>
Date: Sat, 13 Jan 2024 21:04:03 -0500
Subject: [PATCH] only access on desktop

---
 app/layout.tsx | 49 +++++++++++++++++++++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 10 deletions(-)
diff --git a/app/layout.tsx b/app/layout.tsx
index 773bdf9..1f66013 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -22,22 +22,51 @@ export default function RootLayout({
 }) {
   return (
     <html lang="en" suppressHydrationWarning>
-      <head />
+      <head>
+        <style>
+          {`
+            @media (max-width: 768px) {
+              .desktop-content {
+                display: none;
+              }
+              .mobile-message {
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                height: 100vh;
+                text-align: center;
+                font-size: 20px;
+              }
+            }
+
+            @media (min-width: 769px) {
+              .mobile-message {
+                display: none;
+              }
+            }
+          `}
+        </style>
+      </head>
       <body
         className={cn(
           "min-h-screen bg-background font-sans antialiased",
           fontSans.variable
         )}
       >
-        <ThemeProvider
-          attribute="class"
-          defaultTheme="system"
-          enableSystem
-          disableTransitionOnChange
-        >
-          {children}
-          <Toaster />
-        </ThemeProvider>
+        <div className="desktop-content">
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+            <Toaster />
+          </ThemeProvider>
+        </div>
+        <div className="mobile-message font-semibold">
+          Skalara works best on a desktop browser. Please visit us again.
+        </div>
       </body>
     </html>
   );
