responsive

app/_components/gallery/index.tsx

@@ -1,20 +1,20 @@
 export const Gallery = ({ logos }: { logos: Array<number> }) => {
   return (
-    <section id="gallery" className="w-full py-16">
+    <section id="gallery" className="w-full py-10 lg:py-16">
       <div className="mx-auto bg-amber-500/10 border border-amber-500/15 text-amber-500 px-3 py-1.5 rounded-full flex items-center gap-1 justify-center max-w-max text-xs mb-4">
         <span className="text-xs">⚡</span>
         Increase your creativity
       </div>
-      <h3 className="max-w-4xl text-3xl text-[#aaaaaa] font-semibold mb-12 text-center mx-auto">
+      <h3 className="max-w-4xl text-2xl lg:text-3xl text-[#aaaaaa] font-semibold mb-12 text-center mx-auto">
         See our <span className="text-white">last designs</span>.
       </h3>
-      <div className="flex items-start justify-center gap-6 flex-wrap">
+      <div className="max-lg:grid max-lg:grid-cols-2 lg:flex lg:items-start lg:justify-center gap-6 flex-wrap">
         {logos.map((index) => (
           <img
             key={index}
             src={`/api/images/${index}`}
             alt="Generated logo"
-            className="rounded-2xl size-72 object-cover"
+            className="rounded-2xl w-full lg:size-72 object-cover"
           />
         ))}
       </div>

app/_components/generation/index.tsx

@@ -38,19 +38,19 @@ export const Generation = () => {
   };
 
   return (
-    <main id="generation" className="w-full py-20">
-      <h3 className="max-w-4xl text-3xl text-[#aaaaaa] font-semibold mb-12 text-center mx-auto">
+    <main id="generation" className="w-full py-10 lg:py-20">
+      <h3 className="max-w-4xl text-2xl lg:text-3xl text-[#aaaaaa] font-semibold mb-12 text-center mx-auto">
         Start your <span className="text-white">generation</span> here.
       </h3>
       <Steps form={form} />
-      <div className="grid grid-cols-3 gap-20">
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8 lg:gap-20">
         <Brand form={form} setForm={setForm} />
         <Description form={form} setForm={setForm} />
         <Industry form={form} setForm={setForm} />
-        <div className="col-span-3 flex items-center justify-center">
+        <div className="lg:col-span-3 flex items-center justify-center">
           <button
             className={classNames(
-              "rounded-full bg-white text-zinc-950 font-medium text-sm px-6 py-3 hover:bg-opacity-80 transition-all duration-150 disabled:bg-zinc-500 disabled:text-zinc-700",
+              "max-lg:w-full rounded-full bg-white text-zinc-950 font-medium text-sm px-6 py-3 hover:bg-opacity-80 transition-all duration-150 disabled:bg-zinc-500 disabled:text-zinc-700",
               {
                 "animate-pulse": loading,
               }

app/_components/generation/step/brand.tsx

@@ -8,7 +8,7 @@ export const Brand = ({
   setForm: React.Dispatch<React.SetStateAction<Form>>;
 }) => {
   return (
-    <div className="">
+    <div className="w-full">
       <label htmlFor="brand_name" className="text-zinc-300 mb-1 block text-sm">
         Brand name
       </label>

app/_components/generation/step/description.tsx

@@ -8,7 +8,7 @@ export const Description = ({
   setForm: React.Dispatch<React.SetStateAction<Form>>;
 }) => {
   return (
-    <div className="">
+    <div className="w-full">
       <label htmlFor="description" className="text-zinc-300 mb-1 block text-sm">
         Short Description
       </label>

app/_components/generation/step/list.tsx

@@ -32,7 +32,7 @@ const STEPS = [
 
 export const Steps = ({ form }: { form: Form }) => {
   return (
-    <div className="w-full flex items-center justify-center gap-2 mb-12">
+    <div className="max-lg:hidden w-full flex items-center justify-center gap-2 mb-12">
       {STEPS.map((s, i) => (
         <>
           <div

app/_components/hero-header.tsx

@@ -23,8 +23,8 @@ export const HeroHeader = () => {
   }, 2000);
 
   return (
-    <header className="py-20 grid grid-cols-1 gap-5">
-      <h1 className="text-5xl font-semibold text-[#aaaaaa] max-w-max mx-auto text-center">
+    <header className="py-14 lg:py-20 grid grid-cols-1 gap-5">
+      <h1 className="text-4xl lg:text-5xl font-semibold text-[#aaaaaa] max-w-max mx-auto text-center">
         <span
           className={classNames("transition-all duration-300 text-opacity-0", {
             "text-white !text-opacity-100": selectedWord === "Think.",
@@ -52,16 +52,16 @@ export const HeroHeader = () => {
       <h2 className="text-lg font-light text-center text-[#898989] max-w-sm mx-auto">
         An AI powered tool that helps you create a logo for your brand.
       </h2>
-      <div className="flex items-center justify-center gap-6 mt-3">
+      <div className="max-lg:max-w-xs w-full max-lg:mx-auto max-lg:grid lg:flex lg:items-center lg:justify-center gap-6 mt-3 ">
         <a
           href="#generation"
-          className="rounded-full bg-white text-zinc-950 font-medium text-base px-6 py-3 hover:bg-opacity-80 transition-all duration-150"
+          className="rounded-full bg-white text-zinc-950 font-medium text-base px-6 py-3 hover:bg-opacity-80 transition-all duration-150 text-center max-lg:w-full"
         >
           Start generation
         </a>
         <a
           href="#gallery"
-          className="rounded-full text-zinc-300 bg-zinc-900 font-medium text-base px-6 py-3 hover:bg-opacity-80 transition-all duration-150"
+          className="rounded-full text-zinc-300 bg-zinc-900 font-medium text-base px-6 py-3 hover:bg-opacity-80 transition-all duration-150 text-center max-lg:w-full"
         >
           View examples
         </a>

app/layout.tsx

@@ -53,7 +53,7 @@ export default function RootLayout({
       <body
         className={`${nohemiRegular.variable} ${geistMono.variable} antialiased`}
       >
-        <div className="min-h-screen w-full overflow-auto font-[family-name:var(--font-nohemi-sans)] p-6 scroll-smooth">
+        <div className="h-screen w-full overflow-auto font-[family-name:var(--font-nohemi-sans)] p-6 scroll-smooth">
           <Navigation />
           {children}
         </div>

assets/globals.css

@@ -22,7 +22,7 @@ body {
 
 html,
 body {
-  @apply scroll-smooth;
+  @apply overflow-hidden;
 }
 
 @keyframes jiggle {

components/_navigation/index.tsx

@@ -5,7 +5,7 @@ import Logo from "@/assets/logo.png";
 
 export const Navigation = () => {
   return (
-    <div className="rounded-full bg-zinc-950 border border-white/10 px-6 py-4 flex items-center justify-between max-w-xl w-full mx-auto shadow-md relative">
+    <div className="rounded-full bg-zinc-950 border border-white/10 px-6 py-2.5 lg:py-4 flex items-center justify-center lg:justify-between max-w-max lg:max-w-xl lg:w-full mx-auto shadow-md relative">
       <div className="flex items-center justify-center gap-3 relative">
         <div className="relative">
           <Image src={Logo} alt="logo" className="size-6" />
@@ -20,7 +20,7 @@ export const Navigation = () => {
         </div>
         <p className="font-semibold text-lg text-white">LogoAI</p>
       </div>
-      <ul className="flex items-center justify-right gap-3 text-white"></ul>
+      <ul className="hidden lg:flex items-center justify-right gap-3 text-white"></ul>
     </div>
   );
 };

next.config.mjs

@@ -1,15 +1,4 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {
-  webpack: (config) => {
-    // Ignore node-specific modules when bundling for the browser
-    // See https://webpack.js.org/configuration/resolve/#resolvealias
-    config.resolve.alias = {
-      ...config.resolve.alias,
-      sharp$: false,
-      "onnxruntime-node$": false,
-    };
-    return config;
-  },
-};
+const nextConfig = {};
 
 export default nextConfig;