Valentine website

page.tsx

"use client";
import { useState } from "react";

export default function Page() {
  const [noCount, setNoCount] = useState(0);
  const [yesPressed, setYesPressed] = useState(false);
  const yesButtonSize = noCount * 20 + 16;

  const handleNoClick = () => {
    setNoCount(noCount + 1);
  };

  const getNoButtonText = () => {
    const phrases = [
      "No",
      "Are you sure?",
      "Really sure?",
      "Think again!",
      "Last chance!",
      "Surely not?",
      "You might regret this!",
      "Give it another thought!",
      "Are you absolutely certain?",
      "This could be a mistake!",
      "Have a heart!",
      "Don't be so cold!",
      "Change of heart?",
      "Wouldn't you reconsider?",
      "Is that your final answer?",
      "You're breaking my heart ;(",
    ];

    return phrases[Math.min(noCount, phrases.length - 1)];
  };

  return (
    <div className="flex flex-col items-center justify-center h-screen -mt-16">
      {yesPressed ? (
        <>
        <img src="https://media.tenor.com/gUiu1zyxfzYAAAAi/bear-kiss-bear-kisses.gif" />
        <div className="text-4xl font-bold my-4">Ok yay!!!</div>
        </>
      ) : (
        <>
          <img className="h-[200px]" src="https://gifdb.com/images/high/cute-love-bear-roses-ou7zho5oosxnpo6k.gif" />
          <h1 className="text-4xl my-4">Will you be my Valentine?</h1>
          <div>
            <button
              className={`bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded mr-4`}
              style={{ fontSize: yesButtonSize }}
              onClick={() => setYesPressed(true)}
            >
              Yes
            </button>
            <button
              onClick={handleNoClick}
              className=" bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
            >
              {noCount === 0 ? "No" : getNoButtonText()}
            </button>
          </div>
        </>
      )}
    </div>
  );
}

@nithishp helped me out a whole lot. I just had to add the tailwindcss css config files as required to ./src/index.css .

1. after following @nithishp steps up till step 7, copy and paste :
   @tailwind base;
   @tailwind components;
   @tailwind utilities;

into ./src/index.css (to be the first three lines in this file).

Then carry on with @nithishp steps.

To all those who are looking for this:
https://saurabhnemade.github.io/will-you-be-my-valentine/

Vite + Tailwindcss + Github Pages

Here is full code:
https://github.com/saurabhnemade/will-you-be-my-valentine

Nice

i only want to change sentence and the gif but how does it work? can someone please explain it to me

• Demo: https://valentine.phannhatchanh.com
• Built with: Next.js, TailwindCSS and Vercel
• Full code: https://github.com/phannhatchanh/valentine

pls step by step edited turotial

I manage to build the app and everything else. After I uploaded it to Netlify and deployed it the link I got isn't working. Help

Same as above