feat: add UI component files and navigation structure

Added various UI components and navigation elements including:
- Section cards and selection components
- Social icon SVGs with horizontal/vertical text variants
- Table, tabs, and toggle components
- Site header and sidebar components
- Tooltip and unauthorized page
- Project configuration files (tsconfig.json)
- Route handlers for health checks
- Utility and hook functions for mobile responsiveness

app/under-development/page.tsx

@@ -0,0 +1,77 @@
+import { ArrowRight, Construction, MessageCircle, Send, Share2 } from "lucide-react"
+import Image from "next/image"
+import Link from "next/link"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Separator } from "@/components/ui/separator"
+
+export default function UnderDevelopment() {
+  return (
+    <div className="bg-muted/40 flex min-h-screen items-center justify-center p-4">
+      <Card className="mx-auto w-full max-w-2xl">
+        <div className="flex justify-center pt-8">
+          <Image
+            src="/social-icon-with-horizontal-text-horizontal.svg"
+            alt="Chat Guide Logo"
+            width={320}
+            height={100}
+            priority
+            className="mb-2"
+          />
+        </div>
+
+        <CardHeader className="space-y-2 px-8">
+          <div className="flex items-center justify-between">
+            <div className="flex items-center gap-2">
+              <MessageCircle className="h-7 w-7 text-pink-500" />
+              <CardTitle className="text-3xl">Chat Guide Coming Soon</CardTitle>
+            </div>
+            <Badge variant="outline" className="border-pink-200 bg-pink-100/50 px-4 py-1 text-base text-pink-500">
+              Soon
+            </Badge>
+          </div>
+          <CardDescription className="mt-2 text-lg">
+            I'm creating a blog to share my chat techniques, tips, and personal experiences from OnlyFans
+          </CardDescription>
+        </CardHeader>
+        <Separator />
+        <CardContent className="px-8 pt-8 pb-6">
+          <div className="space-y-6">
+            <div className="flex items-start gap-4">
+              <Share2 className="text-muted-foreground mt-0.5 h-6 w-6" />
+              <div>
+                <p className="text-lg font-medium">My blog is almost ready!</p>
+                <p className="text-muted-foreground mt-2">
+                  I'm putting together my best chat strategies, engagement tips, and stories from my personal experience
+                  to help other creators connect better with their fans.
+                </p>
+              </div>
+            </div>
+
+            <div className="bg-muted rounded-lg p-6 text-base">
+              <p className="mb-3 text-lg font-semibold">What I'll be sharing:</p>
+              <ul className="text-muted-foreground list-disc space-y-2 pl-6">
+                <li>Chat techniques that increase engagement</li>
+                <li>How to build genuine connections</li>
+                <li>Tips for managing conversations</li>
+                <li>Real examples from my experience</li>
+              </ul>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter className="flex justify-between px-8 pb-8">
+          <Button variant="outline" size="lg" asChild>
+            <Link href="mailto:contact@subscribers.chat">Email me</Link>
+          </Button>
+          <Button size="lg" asChild className="bg-[#0088cc] hover:bg-[#0077b5]">
+            <Link href="https://t.me/onated2" target="_blank" rel="noopener noreferrer">
+              <Send className="mr-2 h-5 w-5" />
+              Telegram
+            </Link>
+          </Button>
+        </CardFooter>
+      </Card>
+    </div>
+  )
+}