I am creating a static site with NextJS (seems too much just for a static site I know but I might have to expand this in the future). Anyways, right now I am keeping it simple with a few animations. The problem is I have created a Hero component which should take up the entire height of the screen. I used min-h-screen in the main tag and h-screen for the Hero component.
Here’s the index.js:
import Hero from "@/components/Hero";
import About from "@/components/About";
export default function Home() {
return (
<main className="flex flex-col min-h-screen w-full items-center">
<Hero />
<About />
</main>
)
}
Hero.js
import Lausanne from 'next/font/local';
import Juana from 'next/font/local';
import Image from "next/image";
import gobhiPic from '../assets/fried veg.png';
import { HiMiniArrowUpRight } from "react-icons/hi2";
import { motion } from "framer-motion";
const lausanne = Lausanne({ src: '../assets/Lausanne-Regular.otf' });
const juana = Juana({ src: '../assets/Juana-Medium.otf' });
const Hero = () => {
return (
<div className="flex h-screen w-full items-center overflow-hidden">
<motion.div
initial={{ opacity: 0, x: 0, y: 150 }}
animate={{ opacity: 1, x: 0, y: 0 }}
transition={{ duration: 1.5 }}
>
<div className="flex p-24 justify-center items-center text-black-ribbon">
<h1 className={`text-10xl ${juana.className}`}>
Large Name
<p className={`text-sm px-2 mt-3 md:mt-0 md:text-base md:px-2 ${lausanne.className}`}>
TAGLINE
</p>
<button href="#menu" className={`text-xl md:text-2xl mt-10 p-2 flex items-center bg-transparent transition-colors duration-500 ease-in-out hover:bg-algae hover:text-white ${lausanne.className}`}>
Menu <HiMiniArrowUpRight size={20} strokeWidth={1} />
</button>
</h1>
<div className="hidden md:flex">
<motion.div
initial={{ rotate: 0, x: 30, y: -50 }}
animate={{ rotate: -30, x: [30, -5, 0], y: [-50, -5, 0] }}
transition={{ duration: 1.5 }}
whileHover={{ scale: 1.05, transition: { duration: 0.3 } }}
>
<Image
src={gobhiPic}
height={850}
width={850}
alt="Hero image"
priority={true}
className="drop-shadow-xl md:drop-shadow-2xl"
/>
</motion.div>
</div>
</div>
</motion.div>
</div>
);
};
export default Hero;
This all works fine but now I am adding another component beneath Hero which should ideally be visible after scrolling.
About.js
import Juana from 'next/font/local';
const juana = Juana({ src: '../assets/Juana-Medium.otf' })
const About = () => {
return (
<div className={`flex w-full items-center bg-black`}>
<div className={`flex text-black-ribbon justify-center`}>
<h1 className={`text-4xl ${juana.className}`}>About</h1>
</div>
</div>
);
};
export default About;
The problem is, NextJS renders the About component not beneath the Hero but within the screen view. I added a bg-black class to debug this and you can see in the screenshot that the component shows up inside the screen height instead of beneath the Hero component. If I remove min-h-screen from the main tag the About component just disappears. What I want to do is render the Hero component on the entire screen then scroll down to About.
This is my first project with NextJS and Tailwind so apologies if this is something super trivial. Thanks in advance!
Edit: I know the button tag is incorrect and it should be the a> tag forgot to fix it before posting sorry!
