https://github.com/thekiranmahajan/ansrauct
This project is a responsive web application built to showcase ANSRSource's past projects for clients. Each section demonstrates ANSRSource's expertise through interactive and visually appealing components. The website is designed for client engagement, featuring smooth animations, responsive design, and dynamic content.
https://github.com/thekiranmahajan/ansrauct
ansrsource bidding bidding-website javascript jsx react-icons reactjs reausable tailwindcss tailwindcss-background-patterns tailwindcss-plugin vitejs
Last synced: 7 months ago
JSON representation
This project is a responsive web application built to showcase ANSRSource's past projects for clients. Each section demonstrates ANSRSource's expertise through interactive and visually appealing components. The website is designed for client engagement, featuring smooth animations, responsive design, and dynamic content.
- Host: GitHub
- URL: https://github.com/thekiranmahajan/ansrauct
- Owner: thekiranmahajan
- Created: 2024-12-02T10:04:39.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2024-12-09T06:10:28.000Z (10 months ago)
- Last Synced: 2025-02-08T18:28:19.237Z (8 months ago)
- Topics: ansrsource, bidding, bidding-website, javascript, jsx, react-icons, reactjs, reausable, tailwindcss, tailwindcss-background-patterns, tailwindcss-plugin, vitejs
- Language: JavaScript
- Homepage: https://ansrauct.vercel.app
- Size: 36 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# ANSRAUCT
## Description
This project is a responsive web application built to showcase ANSRSource's past projects for clients. It features five dynamic sections: Home, Videos, Resources, Courses, and Testimonials. Each section demonstrates ANSRSource's expertise through interactive and visually appealing components. The website is designed for client engagement, featuring smooth animations, responsive design, and dynamic content.
---
## Features
### 1. **Home**
- Interactive self-swiping carousel using **Framer Motion**.
- Supports drag-and-swipe functionality for images.
- Each image includes text linking to different sections.
- Auto-swipes at regular intervals and resets to its original state.
- Fully responsive for all screen sizes.
- Data dynamically fetched from `carouselData.js`.
### 2. **Videos**
- Dynamic cards displaying:
- Video poster
- Title and description
- A "Watch Now" button that opens a pop-up modal.
- Modal functionality:
- Close via semi-transparent overlay click, cross icon, or scrolling to another section.
- Cards include hover states for an interactive user experience.
- Data dynamically fetched from `videosData.js`.
### 3. **Resources**
- Horizontal cards showcasing PDF resources.
- Displays:
- PDF icon
- Title
- Short description
- A button to download/view the PDF.
- Dynamic and fully responsive design.
- Data dynamically fetched from `resourcesData.js`.
### 4. **Courses**
- Layout with left-side course poster and right-side content.
- Displays:
- Course title and description
- Dynamic button linking to the course {opens in a new tab}.
- Data sourced from `coursesData.js`.
- Handles dynamic text without content overflow, maintaining responsiveness.
### 5. **Testimonials**
- Masonry grid layout for testimonials.
- Cards include:
- Person's picture
- Name, position, and organization
- LinkedIn icon linking to their profile
- Quoted feedback paragraph.
- Dynamically managed for seamless responsiveness.
- Data dynamically fetched from `testinonialsData.js`.
### 6. **Global Features**
- **Header/Navbar**:
- Includes a hamburger menu for mobile.
- Animated nav links for smooth transitions on large screens.
- All section names are fetched from `sectionsData.js`
- **Footer**:
- Displays ANSRSource's and the client's logo from same reusable component.
- Includes dynamic social links and text.
---
## Folder Structure
```
ANSRAUCT/
├── dist/ # Build files
├── node_modules/ # Project dependencies
├── public/ # Static assets
├── src/
│ ├── assets/
│ │ ├── carousel/ # Carousel images
│ │ ├── courses/ # Course images
│ │ ├── logos/ # Logos for branding
│ │ ├── testimonials/ # Testimonial images
│ │ ├── videos/ # Video and their posters
│ ├── components/ # Reusable UI components
│ ├── data/ # Dynamic data for sections
│ │ ├── carouselData.js
│ │ ├── coursesData.js
│ │ ├── videosData.js
│ │ ├── sectionsData.js
│ │ ├── ResourcesData.js
│ │ ├── testimonialsData.js
│ ├── hooks/
│ ├── sections/ # Section components for Home, Videos, etc.
│ ├── utils/ # Constants
│ ├── App.jsx
│ ├── index.css # Global styles
│ ├── main.jsx # Application entry point
```
---
## Tech Stack
- **React.js**: Frontend framework for building UI components.
- **Vite.js**: Fast build tool and development server.
- **Motion{Framer Motion}**: Smooth animations for carousel and modals.
- **Tailwind CSS**: Utility-first CSS framework for styling.
- **React-Icons**: Icon library for consistent visuals.
- Other supporting libraries.
---
## Installation & Usage
### Prerequisites
- Node.js and Git{if cloning from GitHub} installed on your system.
### Setup
1. Clone the repository:
```bash
git clone https://github.com/thekiranmahajan/ansrauct.git
cd ANSRAUCT
```
2. Install dependencies:
```bash
npm install
```
3. Run the development server:
```bash
npm run dev
```
4. Open the application in your browser:
```bash
http://localhost:5173
```
5. Assets:
- Add new images or videos in `src/assets` following folder/file conventions.
- also export them them from respective index.js file in order to import them in our data files.
6. Dynamic Data:
- Update content in `src/data` for Videos, Courses, Resources, etc.
- Import newly added assets and save
7. Changing color palate according to client:
- Go to `tailwind.config.js` file and change the primary and secondary custom colors with new hex codes under colors object.
8. Change required constants:
- Replace the links in `constants.js`
### Build for Production
To generate a production-ready build:
```bash
npm run build
```
### Deployment
Serve the `dist/` folder on a static hosting platform of your choice (e.g. demo server using FTP client like FileZilla Netlify, Vercel).
---
## Collaborators
- [Kiran Mahajan](https://github.com/thekiranmahajan) - Junior Develper Intern {e-Learning Production}
- [Sakshi Jaiswal](https://github.com/thesakshijaiswal) - Junior Develper Intern {e-Learning Production}
---
## Scope for Improvements
- Improve Hamburger menu design and animation for a smoother UI/UX.
- Improved masonry grid for Testimonial cards.
- Adding some elements to the white plain background.
- Improving SEO and accessibilty.
- Abstracting and optimising the code.
- Fetching linked profile image of testimonial section using a API call.
- Shimmer for all loading components
- making all fields dynamic to handle the HTML insertion as text for more custom output
## Acknowledgments
Special thanks to **Rajath K S** for the opportunity and support to create this amazing project!