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;