style(fix): mobile-first responsiveness

.env.example

@@ -1 +1,3 @@
-AUTH_SECRET=secret
+SUPABASE_URL=<your-supabase-url>.supabase.co
+SUPABASE_ANON_KEY=<your-anon-key>
+NEXT_PUBLIC_APP_URL=http://localhost:3000

.prettierrc

@@ -0,0 +1,3 @@
+{
+  "plugins": ["prettier-plugin-tailwindcss"]
+}

app/(user)/generate/page.tsx

@@ -1,7 +1,8 @@
+import Image from "next/image";
 import { redirect } from "next/navigation";
 
 import { createClient } from "@/lib/supabase/server";
-import SignOutButton from "@/components/sign-out-button";
+import PickupLineInputForm from "@/components/pickupline-input-form";
 
 export default async function Page() {
   const supabase = createClient();
@@ -10,11 +11,24 @@ export default async function Page() {
   if (error || !data?.user) {
     redirect("/login");
   }
-
   return (
     <div className="flex flex-col items-center justify-center">
-      <p>Hello {data.user.user_metadata.full_name}!</p>
-      <SignOutButton />
+      <div className="absolute inset-0">
+        <Image
+          src="/background.png"
+          alt="Background"
+          fill
+          className="object-cover object-center"
+          quality={100}
+          priority
+        />
+      </div>
+      <div className="relative z-10 flex flex-col items-center justify-center w-full text-center p-8 md:p-12 lg:p-24">
+        <p>Hello {data.user.user_metadata.full_name}!</p>
+        <PickupLineInputForm />
+      </div>
+      {/* Semi-transparent overlay to ensure text readability */}
+      <div className="absolute inset-0 bg-white bg-opacity-80"></div>
     </div>
   );
 }

app/alternate-landing/page.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+import Image from "next/image";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/button";
+
+function page() {
+  return (
+    <div className="flex flex-col items-center justify-center min-h-screen">
+      <div className="absolute inset-0">
+        <Image
+          src="/background.png"
+          alt="Background"
+          fill
+          className="object-cover object-center"
+          quality={100}
+          priority
+        />
+      </div>
+      {/* Content Overlay */}
+      <div className="relative z-10 -left-4 -top-20 flex flex-col items-center justify-center w-full text-center gap-36 p-8 md:p-12 lg:p-48">
+        <div className="mb-12 lg:mb-24">
+          <h1 className="text-3xl md:text-4xl lg:text-5xl text-white leading-tight">
+            Pickup Line
+            <br />
+            Generator
+          </h1>
+        </div>
+        <Button
+          asChild
+          className="h-12 w-[27%] px-4 py-2 md:px-6 md:py-3 text-base md:text-3xl text-white rounded-full hover:bg-rose-600 transition duration-300 shadow-xl mb-24"
+        >
+          <Link href="/generate">
+            <span className="flex items-center space-x-2">
+              <Image
+                src="/ph_heart-fill.svg"
+                width={16}
+                height={17}
+                alt="Heart"
+              />
+              <span>Generate one for me</span>
+              <Image
+                src="/ph_heart-fill.svg"
+                width={16}
+                height={17}
+                alt="Heart"
+              />
+            </span>
+          </Link>
+        </Button>
+      </div>
+    </div>
+  );
+}
+
+export default page;

app/page.tsx

@@ -5,56 +5,53 @@ import { Button } from "@/components/ui/button";
 
 export default function Home() {
   return (
-    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden p-4 bg-[#FED8D8]">
+    <main className="relative flex min-h-screen flex-col items-center justify-center overflow-hidden bg-[#FED8D8] p-4">
       {/* Background Image */}
-      {/* <div className="absolute inset-0"> */}
       <div className="relative w-full">
         <Image
           src="/background.png"
           alt="Background"
           fill
-          className="object-cover object-center rounded-3xl"
+          className="rounded-3xl object-cover object-center"
           quality={100}
           priority
         />
-        {/* </div> */}
 
         {/* Content Overlay */}
-        <div className="relative z-10 -left-4 -top-20 flex flex-col items-center justify-center w-full text-center gap-36 p-8 md:p-12 lg:p-48">
+        <div className="relative -left-2 z-10 flex w-full flex-col items-center justify-center gap-16 p-8 text-center md:gap-24 md:p-12 lg:-left-4 lg:-top-20 lg:gap-36 lg:p-48">
           <div className="mb-12 lg:mb-24">
-            <h1 className="text-3xl md:text-4xl lg:text-5xl text-white leading-tight">
+            <h1 className="text-2xl leading-tight text-white md:text-3xl lg:text-5xl">
               Pickup Line
               <br />
               Generator
             </h1>
           </div>
           <Button
             asChild
-            className="h-12 w-[27%] px-4 py-2 md:px-6 md:py-3 text-base md:text-3xl text-white rounded-full hover:bg-rose-600 transition duration-300 shadow-xl mb-24"
+            className="mb-24 h-8 w-[150px] rounded-full px-4 py-2 text-base text-white shadow-xl transition duration-300 hover:bg-rose-600 md:h-12 md:w-[200px] md:px-6 md:py-3 md:text-xl lg:w-[300px] lg:text-3xl"
           >
             <Link href="/generate">
-              <span className="flex items-center space-x-2">
+              <span className="flex items-center justify-center space-x-1 sm:space-x-2">
                 <Image
                   src="/ph_heart-fill.svg"
                   width={16}
                   height={17}
                   alt="Heart"
+                  className="h-3 w-3 sm:h-4 sm:w-4 md:h-5 md:w-5"
                 />
                 <span>Generate one for me</span>
                 <Image
                   src="/ph_heart-fill.svg"
                   width={16}
                   height={17}
                   alt="Heart"
+                  className="h-3 w-3 sm:h-4 sm:w-4 md:h-5 md:w-5"
                 />
               </span>
             </Link>
           </Button>
         </div>
       </div>
-
-      {/* Semi-transparent overlay to ensure text readability */}
-      {/* <div className="absolute inset-0 bg-gradient-to-br from-pink-200 to-transparent opacity-50 rounded-3xl"></div> */}
     </main>
   );
 }

components/pickupline-input-form.tsx

@@ -0,0 +1,76 @@
+"use client";
+
+import React, { useState } from "react";
+import { redirect } from "next/navigation";
+
+import SignOutButton from "@/components/sign-out-button";
+
+function PickupLineInputForm() {
+  const [crush, setCrush] = useState("");
+  const [style, setStyle] = useState("funny");
+
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    // Here you would typically send the data to an API
+    console.log({ crush, style });
+    // For now, we'll just simulate a redirect
+    redirect("/result");
+  };
+
+  return (
+    <div className="min-h-screen bg-gradient-to-br from-pink-100 to-white p-4">
+      <div className="max-w-md mx-auto">
+        <header className="flex justify-between items-center mb-8">
+          <h1 className="text-3xl font-bold text-pink-600 font-pacifico">
+            Pickup Line Generator
+          </h1>
+          <SignOutButton />
+        </header>
+        <form onSubmit={handleSubmit} className="space-y-6">
+          <div>
+            <label
+              htmlFor="crush"
+              className="block text-lg font-medium text-pink-700 mb-2"
+            >
+              Tell us about your crush
+            </label>
+            <textarea
+              id="crush"
+              value={crush}
+              onChange={(e) => setCrush(e.target.value)}
+              className="w-full p-3 border border-pink-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent"
+              rows={4}
+              placeholder="What makes them special?"
+            ></textarea>
+          </div>
+          <div>
+            <label
+              htmlFor="style"
+              className="block text-lg font-medium text-pink-700 mb-2"
+            >
+              Style
+            </label>
+            <select
+              id="style"
+              value={style}
+              onChange={(e) => setStyle(e.target.value)}
+              className="w-full p-3 border border-pink-300 rounded-lg focus:ring-2 focus:ring-pink-500 focus:border-transparent"
+            >
+              <option value="funny">Funny</option>
+              <option value="romantic">Romantic</option>
+              <option value="cheesy">Cheesy</option>
+            </select>
+          </div>
+          <button
+            type="submit"
+            className="w-full py-3 px-6 bg-pink-500 text-white rounded-full text-lg font-semibold hover:bg-pink-600 transition-colors"
+          >
+            ♥ Generate for me ♥
+          </button>
+        </form>
+      </div>
+    </div>
+  );
+}
+
+export default PickupLineInputForm;

components/sign-out-button.tsx

@@ -7,7 +7,11 @@ import { Button } from "./ui/button";
 function SignOutButton() {
   return (
     <form>
-      <Button type="submit" formAction={signOut}>
+      <Button
+        type="submit"
+        formAction={signOut}
+        className="px-4 py-2 bg-pink-200 text-pink-700 rounded-full hover:bg-pink-300 transition-colors"
+      >
         Sign out
       </Button>
     </form>

components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }

lib/actions.ts

@@ -11,8 +11,6 @@ export async function login(formData: FormData) {
   // Sign in with OAuth - Google
   const { data, error } = await supabase.auth.signInWithOAuth({
     provider: "google",
-
-    //  TO-DO: Add dynamic redirect URL
     options: { redirectTo: `${process.env.NEXT_PUBLIC_APP_URL}/auth/callback` },
   });