KampKode Assignment

Overview

This project is a responsive landing page developed as part of the assignment for the KampKode internship application process. The webpage is built using Next.js, following a pixel-perfect design based on provided Figma files, and it incorporates Magic UI and Accernity UI components. The goal was to create a modern, responsive, and accessible landing page using industry-standard tools and best practices.

Deployed Link: https://kamp-kode-assignment.vercel.app/

Video

https://github.com/user-attachments/assets/07f61993-c0b7-42d2-9449-fda7b1b2bcf5

Tech Stack

• Next.js: A React framework for server-rendered or statically-exported React applications.
• React: A JavaScript library for building user interfaces.
• Tailwind CSS: A utility-first CSS framework for styling.
• Framer Motion: A library for animations in React.
• Radix UI: A set of low-level, customizable UI components built with accessibility in mind.
• React Icons: A collection of icons for React applications.
• Class Variance Authority: A library for creating type-safe Tailwind CSS utilities.
• clsx: A utility for conditionally joining classNames together.
• TypeScript: A strongly typed programming language that builds on JavaScript, giving you better tooling at any scale.

Installation and Setup

To get the project up and running on your local machine, follow these steps:

1. Clone the repository:

   git clone https://github.com/Shivam-Sharma-1/KampKode-Assignment.git
   cd kampkode-assignment
   

2. Install dependencies:

   npm install
   

3. Run the development server:

   npm run dev
   

   The app will be available at http://localhost:3000.

4. Build for production:

   npm run build
   

5. Start the production server:

   npm start
   

Features

• Responsive Design: The webpage is fully responsive, ensuring a seamless experience across devices of varying screen sizes.
• Magic UI and Accernity UI Integration: The page utilizes components from Magic UI and Accernity UI, adhering to the provided Figma designs.
• Accessibility: The UI components are built with accessibility in mind, ensuring they are usable by all users, including those with disabilities.
• Animations: Smooth and visually appealing animations are implemented using Framer Motion.

Deliverables

• GitHub Repository: The code for this project is hosted on GitHub. You can access it here.
• Screen Recording: A screen recording demonstrating the webpage's responsiveness can be viewed here.

How to Use

• Navigate through the webpage to explore the components and layout.
• The design is pixel-perfect and closely follows the Figma mockups.
• The webpage is responsive, with layouts adapting to different screen sizes, from mobile to desktop.

Acknowledgements

• KampKode Team: For providing the assignment and Figma designs.