NOVA Studio – Design Agency Homepage

A modern and responsive Design Agency Homepage built using React.js. This project was created as part of the React.js Developer Internship task-based evaluation.

Live Demo

https://nova-studio-ten.vercel.app/

---

GitHub Repository

https://github.com/Jatly/nova-studio

Project Overview

NOVA Studio is a modern design agency landing page showcasing services, portfolio projects, and contact information. The website focuses on clean UI/UX, responsiveness, performance, and reusable React components.

The homepage consists of four main sections:

• Hero Section
• Services Section
• Portfolio Section
• Contact Section

---

Tech Stack Used

Frontend

• React.js
• Vite

Styling

• Tailwind CSS

Animations

• Framer Motion

Icons

• Lucide React
• React Icons

Deployment

• Vercel

---

Features

Hero Section

• Modern agency introduction
• Call-to-action buttons
• Featured project showcase
• Responsive layout

Services Section

• Service cards
• Interactive hover effects
• Animated entry transitions

Portfolio Section

• Project showcase grid
• Project thumbnails
• Smooth hover interactions

Contact Section

• Contact form
• Responsive layout
• User-friendly design

Additional Features

• Responsive Design
• Smooth Scrolling Navigation
• Modern Typography
• SEO Metadata
• Custom Favicon
• Framer Motion Animations
• Mobile-Friendly Experience

---

Folder Structure

src/

├── assets/

├── components/

│ ├── Navbar.jsx

│ ├── Hero.jsx

│ ├── Services.jsx

│ ├── Portfolio.jsx

│ ├── Contact.jsx

│ └── Footer.jsx

├── data/

│ ├── services.js

│ └── projects.js

├── App.jsx

├── main.jsx

└── index.css

---

Setup Instructions

1. Clone the Repository

git clone <repository-url>

2. Navigate to Project Directory

cd nova-design-agency

3. Install Dependencies

npm install

4. Run Development Server

npm run dev

5. Build for Production

npm run build

6. Preview Production Build

npm run preview

---

Assumptions

• Project data is currently stored locally using JavaScript data files.
• Contact form is designed for UI demonstration purposes and does not connect to a backend service.
• Portfolio projects are represented using sample project data.
• Social media links are placeholders and can be replaced with actual agency profiles.

---

Performance Considerations

• Lazy-loaded images
• Optimized asset loading
• Responsive image scaling
• Component-based architecture
• Minimal dependency usage

---

Future Improvements

• Backend integration for contact form
• CMS-powered portfolio management
• Dark/Light theme toggle
• Blog section
• Project filtering and search functionality

---

Author

Created by Jatly

React.js Developer Internship Assignment Submission