added responsiveness

Author: ariflogs

app/(marketing)/page.tsx

@@ -18,8 +18,8 @@ import Link from "next/link";
 export default function Home() {
   return (
     <main className="space-y-36">
-      <section className="container max-w-6xl mx-auto mt-36 text-gray-900 flex justify-center items-center">
-        <div className="w-2/3">
+      <section className="container max-w-6xl mx-auto px-4 lg:px-0 mt-36 text-gray-900 flex justify-center items-center">
+        <div className="text-center lg:text-left w-full lg:w-2/3">
           <H1>Make your projects</H1>
           <H1 className="text-outlined">stand out!</H1>
 
@@ -29,7 +29,7 @@ export default function Home() {
             {/* <br /> Now available for both HTML and React! */}
           </p>
 
-          <div className="max-w-96 grid gap-4 grid-cols-2">
+          <div className="max-w-96 grid gap-4 grid-cols-2 mx-auto lg:mx-0">
             <Link href="/docs" passHref>
               <Button className="w-full" aria-label="Get Started with RetroUI">
                 Get Started
@@ -50,7 +50,7 @@ export default function Home() {
             </Link>
           </div>
         </div>
-        <div className="w-1/3">
+        <div className="hidden lg:block lg:w-1/3">
           <img
             alt="orange cool cat"
             src="/images/orange_boos.png"
@@ -59,7 +59,7 @@ export default function Home() {
         </div>
       </section>
 
-      <section className="container max-w-6xl mx-auto ">
+      <section className="container max-w-6xl mx-auto px-4 lg:px-0">
         <H2 className="mb-16 text-center">
           Our components look both old school and modern! ✨
         </H2>
@@ -71,7 +71,7 @@ export default function Home() {
           </div>
           <div className="space-y-4">
             <H4>Badge</H4>
-            <div className="space-x-2">
+            <div className="flex flex-wrap space-y-2 lg:space-y-0 space-x-2">
               <Badge>Default Badge</Badge>
               <Badge variant="error">Error Badge</Badge>
             </div>
@@ -101,7 +101,7 @@ export default function Home() {
         </div>
       </section>
 
-      <section className="container max-w-6xl mx-auto">
+      <section className="container max-w-6xl mx-auto px-4 lg:px-0">
         <H2 className="mb-16 text-center">
           And NO! We didn&apos;t just copy Gumroad!
           <br />
@@ -124,19 +124,19 @@ export default function Home() {
           <Image
             src="/images/gumroad_product_card.png"
             alt="our product card"
-            className="ml-auto"
+            className="mr-auto lg:ml-auto"
             width={300}
             height={600}
           />
           <H3 className="lg:hidden mt-2">👆 Gumroad&apos;s Card</H3>
         </div>
       </section>
 
-      <section className="container max-w-6xl mx-auto border-2 bg-primary-400 border-black p-16">
+      <section className="container max-w-6xl mx-auto border-2 bg-primary-400 border-black py-16 px-4 lg:p-16">
         <H2 className="mb-8 text-center">
           And did I mention it&apos;s Free and Open Source?
         </H2>
-        <div className="flex justify-center space-x-4">
+        <div className="flex flex-col lg:flex-row items-center justify-center space-y-4 lg:space-y-0 lg:space-x-4">
           <Link
             href="https://github.com/ariflogs/retroui"
             target="_blank"

app/favicon.ico

@@ -23,10 +23,18 @@ const shareTechMono = Share_Tech_Mono({
 
 export const metadata: Metadata = {
   title: "Retro Styled Tailwind UI Library | Retro UI",
-  description: "RetroUI - Retro styled TailwindCSS component library for modern web apps.",
+  description:
+    "RetroUI - Retro styled TailwindCSS component library for modern web apps.",
   openGraph: {
-    images: ['/banner.png']
-  }
+    images: ["/banner.png"],
+  },
+  twitter: {
+    card: "summary_large_image",
+    title: "Retro Styled Tailwind UI Library | Retro UI",
+    description:
+      "RetroUI - Retro styled TailwindCSS component library for modern web apps.",
+    images: ["/banner.png"],
+  },
 };
 
 export default function RootLayout({

app/layout.tsx

@@ -9,7 +9,7 @@ import { navConfig } from "@/config/navigation";
 export default function TopNav() {
   return (
     <nav className="fixed top-0 h-16 left-0 right-0 w-full border-b-2 border-black bg-white">
-      <div className="container max-w-6xl mx-auto">
+      <div className="container max-w-6xl px-4 lg:px-0 mx-auto">
         <div className="flex justify-between items-center h-16">
           {/* Logo Section */}
           <div className="flex-shrink-0">

components/TopNav.tsx

@@ -6,6 +6,8 @@ interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
 
 export function H1({ children, className }: HeadingProps) {
   return (
-    <h1 className={`font-head text-5xl lg:text-6xl font-bold ${className}`}>{children}</h1>
+    <h1 className={`font-head text-5xl lg:text-6xl font-bold ${className}`}>
+      {children}
+    </h1>
   );
 }

packages/ui/Typography/H1.tsx

@@ -6,7 +6,7 @@ interface HeadingProps extends HTMLAttributes<HTMLHeadingElement> {
 
 export function H2({ children, className }: HeadingProps) {
   return (
-    <h2 className={`font-head text-4xl font-semibold ${className}`}>
+    <h2 className={`font-head text-3xl lg:text-4xl font-semibold ${className}`}>
       {children}
     </h2>
   );