changes to the readme and also the structure of the project

App.jsx

@@ -1,5 +1,5 @@
 import { createRoot } from 'react-dom/client';
-import Main from "./src/Main";
+import Main from "./src/components/Main";
 
 function App(){
     return (

README.md

@@ -1,8 +1,75 @@
-# React + Vite
+# React Business Card
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+![React Business Card](./public/card-preview.png)
 
-Currently, two official plugins are available:
+## Overview
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+This project is a simple and stylish business card created using React and plain CSS. It serves as a hands-on exercise for learning React, and it was developed as part of a Scrimba teaching lesson.
+
+## Features
+
+- **Responsive Design:** The business card is designed to be responsive, ensuring a seamless viewing experience across various devices and screen sizes.
+
+- **React Components:** The project is built using React components, showcasing the modular and reusable nature of React.
+
+- **Plain CSS Styling:** The styling is done using plain CSS, demonstrating the fundamental concepts of styling in web development.
+
+- **Vite Build Tool:** The project is set up with Vite, a fast build tool that enhances the development experience by providing a quick and efficient development server.
+
+## Getting Started
+
+Follow these steps to get the project up and running on your local machine:
+
+1. Clone the repository:
+
+   ```bash
+   git clone https://github.com/your-username/react-business-card.git
+   ```
+
+2. Navigate to the project directory:
+
+   ```bash
+   cd react-business-card
+   ```
+
+3. Install dependencies:
+
+   ```bash
+   npm install
+   ```
+
+4. Start the development server:
+
+   ```bash
+   npm run dev
+   ```
+
+   This will launch the application locally. Open your browser and go to `http://localhost:3000` to view the business card.
+
+## Project Structure
+
+- **src/components:** Contains React components used to build the business card.
+
+- **styles.css:** Holds the CSS for styling the business card.
+
+- **public:** Includes the `card-preview.png` image and other public assets.
+
+## Dependencies
+
+- [React](https://reactjs.org/): A JavaScript library for building user interfaces.
+
+- [Vite](https://vitejs.dev/): A fast build tool that enhances the development experience.
+
+## Credits
+
+This project was developed as part of a Scrimba teaching lesson. Special thanks to Scrimba for providing an interactive platform for learning web development.
+
+## Author
+
+"https://github.com/dimitriskd"
+
+Feel free to customize this README file according to your project's specific details and requirements.
+
+---
+
+Happy coding! 🚀

src/Footer.jsx → src/components/Footer.jsx

@@ -1,7 +1,7 @@
-import Twitter from "./assets/twitter-square-brands.svg";
-import Facebook from "./assets/facebook-square-brands.svg";
-import Instagram from "./assets/instagram-square-brands.svg";
-import Github from "./assets/github-square-brands.svg";
+import Twitter from "../assets/twitter-square-brands.svg";
+import Facebook from "../assets/facebook-square-brands.svg";
+import Instagram from "../assets/instagram-square-brands.svg";
+import Github from "../assets/github-square-brands.svg";
 import userData from "./details";
 
 export default function Footer(){

src/Info.jsx → src/components/Info.jsx

@@ -1,5 +1,5 @@
-import mailLogo from "./assets/envelope-solid.svg"
-import linkedin from "./assets/linkedin-brands.svg"
+import mailLogo from "../assets/envelope-solid.svg"
+import linkedin from "../assets/linkedin-brands.svg"
 import userData from "./details.js"
 console.log(userData);