Welcome to the Rockethacks Hackathon Website! This website is designed to represent the spirit of "Rockethacks," a hackathon inspired by the themes of rockets and space exploration. The website is built using Next.js, React, Tailwind CSS, and ShadCN.
The website's design revolves around a space and rocket-centric theme, aiming to evoke the sense of outer space with visuals such as stars, planets, and rockets.
- Theme: Space and rocket-themed, with background visuals and imagery to reflect outer space elements.
- Colors:
- Primary Color: Blue (used for backgrounds, buttons, and headings).
- Accent Color: Yellow (used for highlights, buttons, and decorative elements).
- Font: A clean, modern, and bold font is used throughout the website to match the tech-savvy and space-themed vibe.
The website currently has three pages: Home/Landing Page, About Us Page, and FAQ Page.
- Hero Section:
- Displays a large rocket launch or space-themed background image/video.
- Bold and welcoming text, e.g., “Welcome to Rockethacks Hackathon!”.
- A prominent Call-to-Action (CTA) button, e.g., “Register Now!”, styled in yellow to stand out.
- About the Hackathon:
- Provides a brief description of the hackathon, its mission, and objectives.
- Uses cards or columns with space-themed icons to highlight key features (e.g., Workshops, Prizes, Networking).
- Footer:
- Includes social media links, contact information, and copyright details.
- Who We Are:
- Describes the organization’s vision and the purpose behind "Rockethacks".
- Uses blue backgrounds with yellow headings to maintain the website's cohesive theme.
- Team Section:
- Displays team members in a grid layout, each with a profile picture and short bio.
- Incorporates space-themed icons or decorative elements to enhance the page's visual appeal.
- Frequently Asked Questions:
- Utilizes an accordion-style layout where users can expand questions to view the answers.
- Keeps the background minimal, with subtle space-themed elements such as small stars or faint constellations.
- Contact Us Section:
- Provides a form or an email link for users to reach out with further questions.
- Next.js: For server-side rendering and routing.
- React: For building reusable components and handling the frontend of the website.
- Tailwind CSS: For styling and implementing the space-themed design using utility classes.
- ShadCN: For adding advanced UI components and improving user interaction.
- Clone the Repository:
git clone https://github.com/rockethacks/rockethacks.github.io.git cd rockethacks.github.io/front-end
- Fix the Sponsor Button in the Navigation Panel
- Add the new registration portal link
- Get more design ideas