https://github.com/ebazhanov/nextjs-tailwind-landing-page

Landing page template based on Nextjs and TailwindCss
https://github.com/ebazhanov/nextjs-tailwind-landing-page

landing-page nextjs slider tailwindcss typescript vercel

Last synced: 3 months ago
JSON representation

Landing page template based on Nextjs and TailwindCss

• Host: GitHub
• URL: https://github.com/ebazhanov/nextjs-tailwind-landing-page
• Owner: Ebazhanov
• Created: 2022-08-01T08:58:07.000Z (over 2 years ago)
• Default Branch: main
• Last Pushed: 2022-09-04T18:50:38.000Z (over 2 years ago)
• Last Synced: 2023-03-03T20:09:36.022Z (almost 2 years ago)
• Topics: landing-page, nextjs, slider, tailwindcss, typescript, vercel
• Language: TypeScript
• Homepage: https://keep-moving.vercel.app/
• Size: 1.79 MB
• Stars: 7
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
### What you can find useful in this project: 

- [x] Responsive design (mobile, tablet, desktop)

- [x] 'NavBar' freezed when you start scrolling

- [x] Simple 'Slider' implementation

- [x] Project build based on TypeScript using Nextjs, TailwindCss

-------

### Also below some more interesting things i have learned

- Example of freezed NavBar [components/NavigationBar/NavBar.tsx](components/NavigationBar/NavBar.tsx)

```tsx

  useEffect(() => {

    const changeColor = () => {

      if (window.scrollY >= 90) {

        setColor("#ffffff");

        setTextColor("#000000");

      } else {

        setColor("transparent");

        setTextColor("#ffffff");

      }

    };

    window.addEventListener("scroll", changeColor);

  }, []);

```

--------

- Slider [components/Slider/Slider.tsx](components/Slider/Slider.tsx)

```tsx

const Slider = ({ slides }: Props) => {

  const [current, setCurrent] = useState(0);

  const length = slides.length;

  const nextSlide = () => {

    setCurrent(current === length - 1 ? 0 : current + 1);

  };

  const prevSlide = () => {

    setCurrent(current === 0 ? length - 1 : current - 1);

  };

  if (!Array.isArray(slides) || slides.length <= 0) {

    return null;

  }

  return (

    


      
Gallery

      


        {SliderData.map((slide, index) => {

          return (

            


              

              {index === current && (

                

              )}

              

            

          );

        })}

      

    

  );

};

```


--------

- Set the root to navigate to different part of the page (please do not forget to put `id="portfolio"` for smooth scrolling)

```js

My roads

```

```js

const Portfolio = () => {

    return (

        


            
Amazing roads

            


                


                    

```

---------


#### Reference:

- thanks goes to @Clint Briley [youtube](https://www.youtube.com/watch?v=HVyct9EUNP8), [repo](https://github.com/fireclint/NextJS-Tailwind-Responsive)

- try it out [Pesticide for Chrome](https://chrome.google.com/webstore/detail/pesticide-for-chrome/bakpbgckdnepkmkeaiomhmfcnejndkbi)