https://github.com/shivam-sharma-1/kampkode-assignment
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 landing page.
https://github.com/shivam-sharma-1/kampkode-assignment
aceternity-ui javascript magicui nextjs reactjs shadcn-ui tailwindcss typescript
Last synced: 2 months ago
JSON representation
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 landing page.
- Host: GitHub
- URL: https://github.com/shivam-sharma-1/kampkode-assignment
- Owner: Shivam-Sharma-1
- Created: 2024-08-27T09:22:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-08-27T14:24:49.000Z (about 1 year ago)
- Last Synced: 2025-03-04T08:24:19.127Z (7 months ago)
- Topics: aceternity-ui, javascript, magicui, nextjs, reactjs, shadcn-ui, tailwindcss, typescript
- Language: TypeScript
- Homepage: https://kamp-kode-assignment.vercel.app/
- Size: 152 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:**
```bash
git clone https://github.com/Shivam-Sharma-1/KampKode-Assignment.git
cd kampkode-assignment
```
2. **Install dependencies:**
```bash
npm install
```
3. **Run the development server:**
```bash
npm run dev
```
The app will be available at [http://localhost:3000](http://localhost:3000).
4. **Build for production:**
```bash
npm run build
```
5. **Start the production server:**
```bash
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](https://github.com/Shivam-Sharma-1/KampKode-Assignment).
- **Screen Recording**: A screen recording demonstrating the webpage's responsiveness can be viewed [here](https://drive.google.com/drive/folders/1aj-PVaU6JCKCRPk8tmh_5WGJ69nd4YF4?usp=sharing).
## 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.