Nextjs development and production behavior is different | Next.js | Page 1

pseudo skiffBOT Sep 7, 2024, 7:29 PM

#

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

broken prism Sep 7, 2024, 7:29 PM

#

Development Mode:

#

Production Mode:

#

Code:

<div className="snap-y snap-mandatory h-screen overflow-y-scroll bg-custom-gradient pt-16">
        <div className="h-screen snap-start bg-custom-gradient relative z-10 transition duration-500 ease-in-out overflow-hidden px-12">
          <div className="relative flex h-[800px] w-full flex-col items-center justify-center overflow-hidden rounded-lg bg-[#010E10] md:shadow-xl">
            <div className="absolute flex flex-row z-40" style={{ top: "15%" }} >
              <Button className="bg-[rgba(245,245,247,0.15)] text-white rounded-full py-2 px-4 flex items-center justify-between w-full max-w-md hover:bg-gray-700 transition duration-300 ease-in-out gap-2 border-2 border-[#142123]">
                <span className={cn(poppins_regular.className, "bg-[#3DD86F] text-[#010E10] px-3 py-1 rounded-full")}>Ücretsiz</span>
                <span className={cn(poppins_regular.className, "flex-1 text-center text-[#F5F5F7]")}>Marka Analizi İçin Başvur!</span>
                <span className="bg-gray-700 p-0 rounded-full hover:bg-gray-600 transition duration-300 ease-in-out">
                  <ArrowRight className="text-white" />
                </span>
              </Button>
            </div>
            <div className="absolute top-1/4 flex flex-row gap-3">
              <BlurIn
                word="Büyük Markaların"
                className={cn(poppins_bold.className, "text-5xl text-gradient-white")}
              />
              <BlurIn
                word="Dijital Gücü"
                className={cn(poppins_bold.className, "text-5xl text-gradient-green pb-5")}
              />
            </div>
            <div className={cn(poppins_light.className, "text-lg text-[#cdcdce] absolute left-24 bottom-4")} style={{ top: '45%' }}>
              <div className="flex flex-col gap-10" >
                <div className="flex flex-col" >
                  <BlurInParagraph
                    word="Vise Dijital Çözümler ile şirketiniz veya ekibiniz için"
                  />
                  <BlurInParagraph
                    word="sağladığımız çözüm odaklı hizmetlerimizden yararlanın."
                  />
                  <div className="flex flex-row gap-1" >
                    <BlurInParagraph
                      word="İşletmenizi"
                    />
                    <BlurInParagraph
                      word="dijital dünya"
                      className="text-[#3DD86F]"
                    />
                    <BlurInParagraph
                      word="ile iç içe getirin."
                    />
                  </div>
                </div>
                <div className="flex flex-row gap-2" >
                  <Button className="bg-[rgba(245,245,247,0.15)] rounded-full py-2 px-4 hover:bg-[#3DD86F] transition duration-300 ease-in-out gap-2">
                    <span className={cn(poppins_regular.className)}>Şimdi Başla</span>
                    <FaChevronRight className="text-[#F5F5F7]" />
                  </Button>
                  <Button className="bg-transparent rounded-full py-2 px-4 hover:bg-[#3DD86F] transition duration-300 ease-in-out gap-2">
                    <span className={cn(poppins_regular.className)}>Daha Fazla</span>
                    <FaChevronRight className="text-[#F5F5F7]" />
                  </Button>
                </div>
              </div>
            </div>
            <BorderBeam size={250} duration={12} delay={9} />
          </div>
          <Globe
            className="absolute bottom-0 right-0 m-4 z-20"
          />
        </div>
</div>