Please build a hero component and a navbar. This should be built as a Next.js project with Typescript. It should be responsive across different devices. Please create a GitHub repo and deploy the project to Vercel. You can choose which CSS framework to work with and the styling is completely up to you. Please be creative with the demo content in the hero component and navbar. The end product should be a Vercel site I can visit to see your work and a GitHub repo to review your code.
This project is a landing page for Block Money, a web3 payments solution. It's built with Next.js, TypeScript, and Tailwind CSS.
- Hero Section: A visually appealing hero section with a Spline scene and engaging text.
- Infinite Marquee: A scrolling marquee showcasing key features and benefits.
- Animated Background: An animated background with orbiting orbs and a blurred effect.
- Loading Screen: A loading screen that displays while the application is initializing.
- Responsive Design: The layout adapts to different screen sizes.
- Next.js: A React framework for building performant web applications.
- TypeScript: A typed superset of JavaScript.
- Tailwind CSS: A utility-first CSS framework.
- Framer Motion: A library for creating animations.
- @splinetool/react-spline: A library for integrating Spline scenes into React applications.
- Zustand: A small, fast, and scalable bearbones state-management solution.
- Lucide React: A library of beautiful, consistent icons.
-
Clone the repository:
git clone https://github.com/mindsgn/arena-test cd arena-test -
Install dependencies:
npm install # or yarn install
-
Start the development server:
npm run dev
This will start the Next.js development server at
http://localhost:3000.
-
Build the application:
npm run build # or yarn build -
Start the production server:
npm run start # or yarn start