Data Analytics

Machine learning & AI

Chatgpt & AI Tools
Cyber Security
Data engineering
Cloud-AWS,Azure,GCP
Hadoop & Spark
Python
Scala
c,c++,Java
Android development
Website development
MS office
College Projects

aboutus.js
import React from 'react';
import './AboutUs.css'; // Ensure to create and import corresponding CSS file

const AboutUs = () => {

return (
<div className="about-us">
<h2 className="orange-text">About Us</h2>
<p className="black-text">
Akshara Softwares is one of the best software training institutes in
Bangalore located at Marathahalli. We are teaching all courses from basic to
advanced concepts. We have dedicated trainers for all trending software courses in
the IT industry, ensuring personalized attention and quality education.
</p>

<h2 className="orange-text">Our Services</h2>

<ul className="orange-bullets">
<li className="black-text">Off-Line Training at Marathahalli</li>
<li className="black-text">On-Line Training</li>
<li className="black-text">Corporate Training</li>
<li className="black-text">Job Support</li>
<li className="black-text">100% Interview Support</li>
</ul>

<h2 className="orange-text">Course Highlights</h2>

<ul className="orange-bullets">
<li className="black-text">Demo & First 2 free classes</li>
<li className="black-text">Classroom & Online</li>
<li className="black-text">Real Time training & Project</li>
<li className="black-text">Assignment and Case Studies</li>
<li className="black-text">Resume Building & Interview Guidance</li>
<li className="black-text">Mock Interviews</li>
<li className="black-text">100% Job Assistance (Freshers &
Experienced)</li>
</ul>
</div>
);
};

export default AboutUs;

aboutus.css

.about-us {
max-width: 800px;
margin: 0 auto;
padding: 20px;
}

.orange-text {
color: orange;
}

.black-text {
color: black;
}

.orange-bullets {
list-style-type: disc;
padding-left: 20px;
}

.orange-bullets li {
color: black; /* Ensures text inside bullets is black */
}

maincontent.js

import React from 'react';

import './MainContent.css';

const MainContent = () => {

return (
<div className="main-content">
<img src="C:/Users/Admin/Desktop/image.jpg" alt="Training" className="main-
image" />
<div className="training-terms">

</div>
</div>
);
};

export default MainContent;

maincontent.css

.main-content {
display: flex;
justify-content: space-between;
padding: 20px;
}

.main-image {
width: 60%;
border: 1px solid #ddd;
 }

.training-terms {
display: flex;
flex-direction: column;
justify-content: center;
font-size: 20px;
margin-left: 20px;
}

.training-terms p {
margin: 5px 0;
}

contactform.js

import React from 'react';

import './ContactForm.css';

const ContactForm = () => {

return (
<div className="contact-form">
<h2>Quick Enquiry</h2>
<form>
<input type="text" placeholder="Name" required />
<input type="text" placeholder="Mobile No(WhatsApp)" required />
<select required>
<option value="" disabled selected>Select a Course</option>
<option value="Data Analytics">Data Analytics</option>
<option value="Machine learning & AI">Machine learning & AI</option>
<option value="Chatgpt & AI Tools">Chatgpt & AI Tools</option>
<option value="Cyber Security">Cyber Security</option>
<option value="Data engineering">Data engineering</option>
<option value="Cloud-AWS,Azure,GCP">Cloud-AWS,Azure,GCP</option>
<option value="Hadoop & Spark">Hadoop & Spark</option>
<option value="Python">Python</option>
<option value="Scala">Scala</option>
<option value="c,c++,Java">C, C++, Java</option>
<option value="Android development">Android development</option>
<option value="Website development">Website development</option>
<option value="MS office">MS office</option>
<option value="College Projects">College Projects</option>
</select>
<select required>
<option value="" disabled selected>How & Where ??</option>
<option value="Classroom training">Classroom training</option>
<option value="Online training">Online training</option>
</select>
<textarea placeholder="Type your message here" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
);
};
export default ContactForm;

contactform.css

.contact-form {
position: fixed;
top: calc(50% + 60px); /* Adjusted to sit below the navigation bar */
right: 10%; /* Adjusted position slightly left from the right side */
transform: translateY(-50%);
background-color: #007bff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 280px; /* Reduced width for a narrower form */
color: white;
z-index: 1000; /* Ensure contact form is above other elements */
}

.contact-form h2 {
margin-bottom: 20px;
}

.contact-form form {
display: flex;
flex-direction: column;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
width: 100%;
box-sizing: border-box;
}

.contact-form button[type="submit"] {
background-color: #0056b3;
color: white;
border: none;
padding: 14px;
border-radius: 4px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}

.contact-form button[type="submit"]:hover {
background-color: #004088;
}

working maincontent .js

import React, { useState, useEffect } from 'react';

import './MainContent.css';

// Import images from assets folder

import image1 from '../assets/image1.jpg';
import image2 from '../assets/image2.jpg';
import image3 from '../assets/image3.jpg';

const MainContent = () => {

// State to manage current image index
const [currentImageIndex, setCurrentImageIndex] = useState(0);
const images = [image1, image2, image3]; // Array of images

// Function to move to the next image

const nextImage = () => {
setCurrentImageIndex((currentImageIndex + 1) % images.length);
};

// Automatic sliding functionality using useEffect and setInterval

useEffect(() => {
const interval = setInterval(() => {
nextImage();
}, 3000); // Change slide every 3 seconds (adjust as needed)

return () => clearInterval(interval); // Clean up interval on component unmount

}, [currentImageIndex]); // Re-run effect when currentImageIndex changes

return (
<div className="main-content">
<div className="carousel-container">
<img src={images[currentImageIndex]} alt="Training" className="main-
image" />
</div>

<div className="contact-form">
{/* Your contact form goes here */}
</div>
</div>
);
};

export default MainContent;

working maincontent.css

.main-content {
display: flex;
align-items: flex-start; /* Align items to the top */
gap: 20px; /* Space between the carousel and the contact form */
}

.carousel-container {
flex: 1;
max-width: 700px; /* Increase the max width for a wider image */
margin-left: 100px; /* Increase the left margin to leave more space */
}

.main-image {
width: 100%;
 height: 400px; /* Set height for a rectangular format */
object-fit: cover; /* Ensure the image covers the entire area without stretching
*/
border-radius: 8px;
}

.contact-form {
flex: 2;
/* Add your contact form styles here */
}

additional content.js

import React from 'react';

import './AdditionalContent.css';

// Import image from assets folder

import image4 from '../assets/image4.jpg';

const AdditionalContent = () => {

return (
<div className="additional-content">
<div className="section">
<h2>BEST SOFTWARE TRAINING INSTITUTE IN BANGALORE || ONLINE & OFFLINE
CLASSES</h2>
<p>REALTIME TRAINING & PROJECT</p>
</div>
<div className="section">
<h3>COURSE DETAILS</h3>
<ul>
<li><strong>Experienced Trainers:</strong> All the trainers are well
experienced, certified, and working professionals.</li>
<li><strong>Affordable Fees:</strong> Course fees are comparable to any
other quality training institutes in Bangalore.</li>
<li><strong>Hands-on Training:</strong> Our training includes hands-on
projects to help you work directly on real-world applications.</li>
<li><strong>100% Interview Support:</strong> You can approach trainers
anytime for assistance related to course content.</li>
<li><strong>Flexible Timings:</strong> We offer flexible timings for all
courses to accommodate your schedule.</li>
<li><strong>Decent Environment:</strong> Our institute is located in a
calm and green environment.</li>
</ul>
</div>
<div className="section">
<img src={image4} alt="Institute Environment" className="institute-
image" />
</div>
<div className="section">
<h3>COURSE LIST</h3>
<ul className="course-list">
<li>Python Full Stack</li>
<li>Java Full Stack</li>
<li>UI/Front-End Developer</li>
<li>Software Testing (Selenium)</li>
<li>DevOps + AWS</li>
<li>SAP FICO</li>
<li>Oracle SQL/PLSQL</li>
 <li>Power BI</li>
<li>Tableau</li>
<li>Informatica</li>
<li>Embedded Automotive Testing</li>
<li>iOS Swift</li>
<li>Data Science</li>
<li>Network Protocol Dev</li>
<li>Snowflake</li>
</ul>
</div>
</div>
);
};

export default AdditionalContent;

AdditionalContent.css

.additional-content {
margin-top: 20px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.section {
margin-bottom: 20px;
}

.section h2 {
font-size: 24px;
color: #007bff;
margin-bottom: 10px;
}

.section h3 {
font-size: 20px;
color: #007bff;
margin-bottom: 10px;
}

.section p {
margin-bottom: 10px;
}

.section ul {
list-style-type: none;
margin-left: 0;
padding-left: 0;
}

.section ul li {
margin-bottom: 8px;
line-height: 1.6;
}

.section img.institute-image {
 width: 100%; /* Adjust image width as needed */
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
}

.course-list {
color: #333;
list-style-type: none;
margin-left: 0;
padding-left: 0;
}

.course-list li::before {
content: "\2022"; /* Bullet character (•) */
color: orange; /* Bullet color */
display: inline-block;
width: 1em;
margin-left: -1em;
margin-right: 5px; /* Adjust margin between bullet and text */
}

contactform.js beforemaking contactform to stick to the screen

import React from 'react';

import './ContactForm.css';

const ContactForm = () => {

return (
<div className="contact-form">
<h2>Quick Enquiry</h2>
<form>
<input type="text" placeholder="Name" required />
<input type="text" placeholder="Mobile No(WhatsApp)" required />
<select required>
<option value="" disabled selected>Select a Course</option>
<option value="Data Analytics">Data Analytics</option>
<option value="Machine learning & AI">Machine learning & AI</option>
<option value="Chatgpt & AI Tools">Chatgpt & AI Tools</option>
<option value="Cyber Security">Cyber Security</option>
<option value="Data engineering">Data engineering</option>
<option value="Cloud-AWS,Azure,GCP">Cloud-AWS,Azure,GCP</option>
<option value="Hadoop & Spark">Hadoop & Spark</option>
<option value="Python">Python</option>
<option value="Scala">Scala</option>
<option value="c,c++,Java">C, C++, Java</option>
<option value="Android development">Android development</option>
<option value="Website development">Website development</option>
<option value="MS office">MS office</option>
<option value="College Projects">College Projects</option>
</select>
<select required>
<option value="" disabled selected>How & Where ??</option>
<option value="Classroom training">Classroom training</option>
<option value="Online training">Online training</option>
</select>
 <textarea placeholder="Type your message here" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
);
};

export default ContactForm;

contactform.css

/* ContactForm.css */

.contact-form {
position: fixed;
top: calc(50% + 35px); /* Adjusted slightly below the middle */
right: 10%;
transform: translateY(-50%);
background-color: #007bff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 280px;
color: white;
z-index: 1000;
}

.contact-form h2 {
margin-bottom: 20px;
}

.contact-form form {
display: flex;
flex-direction: column;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
width: 100%;
box-sizing: border-box;
}

.contact-form button[type="submit"] {
background-color: #0056b3;
color: white;
border: none;
padding: 14px;
border-radius: 4px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}
.contact-form button[type="submit"]:hover {
background-color: #004088;
}

footer.js

import React from 'react';

import './Footer.css';
import logo from '../assets/logo.png'; // Update the path as needed

const Footer = () => {

return (
<footer className="footer">
<div className="footer-container">
<div className="footer-section about">
<img src={logo} alt="Aravind Info Solutions" className="logo" />
<p>
Aravind Info Solutions is an outstanding Online Training and Classroom
Training,
Corporate Training Institute with State of Art infrastructure led by
the finest trainers in the market.
</p>
</div>
<div className="footer-section social-media">
<h4>SOCIAL MEDIA</h4>
<ul>
<li><a href="https://www.facebook.com" target="_blank" rel="noopener
noreferrer">Facebook</a></li>
<li><a href="https://www.twitter.com" target="_blank" rel="noopener
noreferrer">Twitter</a></li>
<li><a href="https://www.youtube.com" target="_blank" rel="noopener
noreferrer">YouTube</a></li>
<li><a href="https://www.linkedin.com" target="_blank" rel="noopener
noreferrer">LinkedIn</a></li>
</ul>
</div>
<div className="footer-section contact-details">
<h4>CONTACT DETAILS</h4>
<ul>
<li><i className="fas fa-map-marker-alt"></i> BannerghattaRd, Opp to
BGS National School,MuthurayyaSwamyLayout,Hulimavu.</li>
<li><i className="fas fa-phone"></i> +91 9900173022 (WhatsApp
Message/Call)</li>
<li><i className="fas fa-envelope"></i> [email protected]</li>
</ul>
</div>
</div>
<div className="footer-bottom">
<p>&copy; 2024 Aravind Info Solutions. All rights reserved.</p>
</div>
</footer>
);
}

export default Footer;

footer.css

.footer {
background-color: #f9f9f9;
padding: 20px 0;
color: #333;
font-family: Arial, sans-serif;
}

.footer-container {
display: flex;
justify-content: space-around;
align-items: flex-start;
flex-wrap: wrap;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}

.footer-section {
flex: 1;
margin: 10px;
min-width: 250px;
}

.logo {
width: 150px;
margin-bottom: 10px;
}

.footer-section h4 {
color: #ff6600;
margin-bottom: 10px;
}

.footer-section p,
.footer-section ul {
margin: 0;
padding: 0;
list-style: none;
}

.footer-section ul li {
margin-bottom: 10px;
}

.footer-section ul li a {
color: #333;
text-decoration: none;
}

.footer-section ul li a:hover {
text-decoration: underline;
}

.footer-section ul li i {
margin-right: 10px;
 color: #ff6600;
}

.footer-bottom {
text-align: center;
padding: 10px 0;
border-top: 1px solid #ccc;
margin-top: 20px;
}

.footer-bottom p {
margin: 0;
color: #666;
}

maincontent.js
import React, { useState, useEffect } from 'react';
import './MainContent.css';

// Import images from assets folder

import image1 from '../assets/image1.jpg';
import image2 from '../assets/image2.jpg';
import image3 from '../assets/image3.jpg';
import trainingProcessImage from '../assets/image4.jpg'; // Add your training
process image here
import experiencedtrainers from '../assets/experiencedtrainers.png'
import afordablefees from '../assets/afordablefees.png'
import handsontraining from '../assets/handsontraining.png'
import interviewsupport from '../assets/interviewsupport.png'
import flexibletimings from '../assets/flexibletimings.png'
import decentenvironment from '../assets/decentenvironment.png'

const MainContent = () => {

// State to manage current image index
const [currentImageIndex, setCurrentImageIndex] = useState(0);
const images = [image1, image2, image3]; // Array of images

// Function to move to the next image

const nextImage = () => {
setCurrentImageIndex((currentImageIndex + 1) % images.length);
};

// Automatic sliding functionality using useEffect and setInterval

useEffect(() => {
const interval = setInterval(() => {
nextImage();
}, 3000); // Change slide every 3 seconds (adjust as needed)

return () => clearInterval(interval); // Clean up interval on component unmount

}, [currentImageIndex]); // Re-run effect when currentImageIndex changes

return (
<div className="main-content">
<div className="carousel-container">
<img src={images[currentImageIndex]} alt="Training" className="main-
image" />
</div>
 <div className="contact-form">
{/* Your contact form goes here */}
</div>

<div className="intro-text">
<h2>BEST SOFTWARE TRAINING INSTITUTE IN BANGALORE</h2>
<h3>ONLINE & OFFLINE CLASSES</h3>
<h3>REALTIME TRAINING & PROJECT</h3>
</div>

<div className="course-details">
<h2>COURSE DETAILS</h2>
<div className="details">
<div className="detail-item">
<img src={experiencedtrainers} alt="Experienced Trainers" />
<h3>Experienced Trainers</h3>
<p>All the trainers are well experienced, certified and working
professionals.</p>
</div>
<div className="detail-item">
<img src={afordablefees} alt="Affordable Fees" />
<h3>Affordable Fees</h3>
<p>Course fees is comparable to any other quality training institutes
in Bangalore.</p>
</div>
<div className="detail-item">
<img src={handsontraining} alt="Hands on Training" />
<h3>Hands on Training</h3>
<p>We are very sure that our training helps you to directly work in
projects by giving hands on training.</p>
</div>
<div className="detail-item">
<img src={interviewsupport} alt="100% Interview Support" />
<h3>100% Interview Support</h3>
<p>You can approach any time to trainer for any course related
assistance.</p>
</div>
<div className="detail-item">
<img src={flexibletimings} alt="Flexible Timings" />
<h3>Flexible Timings</h3>
<p>You have flexible timings for all the courses.</p>
</div>
<div className="detail-item">
<img src={decentenvironment} alt="Decent Environment" />
<h3>Decent Environment</h3>
<p>Institute is located in very calm and greenery environment.</p>
</div>
</div>
</div>

<div className="training-process">
<h2></h2>
<img src={trainingProcessImage} alt="Training Process" />
</div>

<div className="course-list">
<h2>COURSE LIST</h2>
<div className="course-column">
<ul>
 <li>Data Analytics</li>
<li>Machine learning & AI</li>
<li>Chatgpt & AI Tools</li>
<li>Cyber Security</li>
<li>Data engineering</li>
</ul>
</div>
<div className="course-column">
<ul>
<li>Cloud-AWS,Azure,GCP</li>
<li>Hadoop & Spark</li>
<li>Python</li>
<li>Scala</li>
<li>c,c++,Java</li>
</ul>
</div>
<div className="course-column">
<ul>
<li>Android development</li>
<li>Website development</li>
<li>MS office </li>
<li>College Projects</li>

</ul>
</div>
</div>

<div className="separator"></div>

<div className="contact-info">
<p className="line1">Please Call/WhatsApp @96867 70604</p>
<p className="line2">[ For updated content, demo video & batch
Schedules]</p>
</div>

<div className="separator"></div>
</div>
);
};

export default MainContent;

maincontent.css
.main-content {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
width: 100%;
}

.carousel-container {
align-self: flex-start;
width: 100%;
max-width: 700px;
margin-left: 100px;
}
.main-image {
width: 100%;
height: 400px;
object-fit: cover;
border-radius: 8px;
}

.intro-text {
text-align: center;
margin: 20px 0;
}

.intro-text h2 {
font-size: 24px;
color: #ff5722; /* Orange color */
}

.intro-text h3 {
font-size: 20px;
color: #000; /* Black color */
}

.course-details {
width: 100%;
text-align: center;
}

.course-details h2 {
font-size: 24px;
margin: 20px 0;
color: black; /* Orange color */
}

.details {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 20px;
}

.detail-item {
max-width: 300px;
text-align: center;
}

.detail-item img {
width: 50px;
height: 50px;
margin-bottom: 10px;
}

.detail-item h3 {
font-size: 18px;
color: #ff5722; /* Orange color */
}

.detail-item p {
font-size: 14px;
color: #000; /* Black color */
}

.training-process {
width: 100%;
text-align: center;
margin: 40px 0;
}

.training-process h2 {
font-size: 24px;
margin-bottom: 20px;
color: #ff5722; /* Orange color */
}

.training-process img {
width: 80%;
max-width: 800px;
margin: 0 auto;
display: block;
}

.course-list {
width: 100%;
text-align: center;
margin: 40px 0;
}

.course-list h2 {
font-size: 24px;
margin-bottom: 20px;
color: black; /* Orange color */
}

.course-column {
display: inline-block;
vertical-align: top;
width: 30%;
padding: 0 10px;
}

.course-column ul {
list-style: none;
padding: 0;
margin: 0;
text-align: left;
}

.course-column li {
font-size: 16px;
color: orange; /* Black color */
margin-bottom: 10px;
position: relative;
padding-left: 20px;
}

.course-column li::before {
content: '\2022';
color: #ff5722; /* Orange color */
font-size: 20px;
 position: absolute;
left: 0;
top: 0;
}

.separator {
height: 2px;
width: 100%;
background-color: #ff5722; /* Orange color */
margin: 20px 0;
}

.contact-info {
text-align: center;
margin: 20px 0;
}

.contact-info p {
color: white; /* Black color */
font-size: 16px;
display: block; /* Ensure each line is on a new line */
margin: 0; /* Remove default margins */
}

.contact-info .line1 {
color: red; /* Red color for the first line */
}

.contact-info .line2 {
color: blue; /* Blue color for the second line */
margin-top: 10px; /* Space between the two lines */
}

.contact-info .line2::before,
.contact-info .line2::after {
content: '\2022'; /* Bullet point */
color: #ff5722; /* Orange color */
margin: 0 10px; /* Adjust spacing */
}

app.js
import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './components/Header';
import Navbar from './components/Navbar';
import ContactForm from './components/ContactForm';
import MainContent from './components/MainContent';
import AboutUs from './pages/AboutUs';
import TrainersProfile from './pages/TrainersProfile';
import AdditionalContent from './components/AdditionalContent';
import Footer from './components/Footer'; // Import Footer component
import './App.css';

// Import page components

import ClassroomTraining from './pages/ClassroomTraining';
import OnlineTraining from './pages/OnlineTraining';
import InterviewGuidance from './pages/InterviewGuidance';
import DataAnalytics from './pages/DataAnalytics';
import MachineLearningAI from './pages/MachineLearningAI';
import ChatGPTAITools from './pages/ChatGPTAITools';
import CyberSecurity from './pages/CyberSecurity';
import DataEngineering from './pages/DataEngineering';
import Cloud from './pages/Cloud';
import HadoopSpark from './pages/HadoopSpark';
import Python from './pages/Python';
import Scala from './pages/Scala';
import CCPJava from './pages/CCPJava';
import AndroidDevelopment from './pages/AndroidDevelopment';
import WebsiteDevelopment from './pages/WebsiteDevelopment';
import MSOffice from './pages/MSOffice';
import CollegeProjects from './pages/CollegeProjects';

function App() {
return (
<Router>
<div className="App">
<Header />
<Navbar />
<div className="container">
<Routes>
<Route path="/" element={<MainContent />} />
<Route path="/about-us" element={<AboutUs />} />
<Route path="/trainers" element={<TrainersProfile />} />
<Route path="/additional-content" element={<AdditionalContent />} />
{/* Services Routes */}
<Route path="/services/classroom-training"
element={<ClassroomTraining />} />
<Route path="/services/online-training" element={<OnlineTraining />} />
<Route path="/services/interview-guidance"
element={<InterviewGuidance />} />
{/* Courses Routes */}
<Route path="/courses/data-analytics" element={<DataAnalytics />} />
<Route path="/courses/machine-learning-ai"
element={<MachineLearningAI />} />
<Route path="/courses/chatgpt-ai-tools" element={<ChatGPTAITools />} />
<Route path="/courses/cyber-security" element={<CyberSecurity />} />
<Route path="/courses/data-engineering" element={<DataEngineering
/>} />
<Route path="/courses/cloud" element={<Cloud />} />
<Route path="/courses/hadoop-spark" element={<HadoopSpark />} />
<Route path="/courses/python" element={<Python />} />
<Route path="/courses/scala" element={<Scala />} />
<Route path="/courses/c-java" element={<CCPJava />} />
<Route path="/courses/android-development" element={<AndroidDevelopment
/>} />
<Route path="/courses/website-development" element={<WebsiteDevelopment
/>} />
<Route path="/courses/ms-office" element={<MSOffice />} />
<Route path="/courses/college-projects" element={<CollegeProjects
/>} />
</Routes>
<ContactForm />
</div>
 <Footer /> {/* Add Footer component */}
</div>
</Router>
);
}

export default App;

app.css

/* Reset default margin and padding */

body, h1, h2, h3, h4, h5, h6, p, ul, li {
margin: 0;
padding: 0;
}

/* Basic styling for the entire app */

.App {
font-family: Arial, sans-serif;
text-align: center;
}

/* Styling for the header */

.header {
background-color: #333;
color: #fff;
padding: 10px 0;
}

.header h1 {
font-size: 2.5rem;
}

/* Styling for the navigation bar */

.navbar {
background-color: #444;
padding: 10px 0;
}

.navbar ul {
list-style-type: none;
display: flex;
justify-content: center;
}

.navbar li {
margin: 0 10px;
}

.navbar a {
color: #fff;
text-decoration: none;
padding: 10px;
}

.navbar a:hover {
 text-decoration: underline;
}

/* Styling for the main content area */

.container {
margin-top: 20px;
}

/* Styling for the contact form */

.contact-form {
margin-top: 20px;
}

.contact-form input,
.contact-form textarea {
width: 100%;
padding: 10px;
margin-bottom: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}

.contact-form button {
background-color: #007bff;
color: #fff;
border: none;
padding: 10px 20px;
cursor: pointer;
border-radius: 4px;
}

.contact-form button:hover {
background-color: #0056b3;
}

contactform .js

import React from 'react';

import './ContactForm.css';

const ContactForm = () => {

return (
<div className="contact-form">
<h2>Quick Enquiry</h2>
<form>
<input type="text" placeholder="Name" required />
<input type="text" placeholder="Mobile No(WhatsApp)" required />
<select required>
<option value="" disabled selected>Select a Course</option>
<option value="Data Analytics">Data Analytics</option>
<option value="Machine learning & AI">Machine learning & AI</option>
<option value="Chatgpt & AI Tools">Chatgpt & AI Tools</option>
<option value="Cyber Security">Cyber Security</option>
<option value="Data engineering">Data engineering</option>
<option value="Cloud-AWS,Azure,GCP">Cloud-AWS,Azure,GCP</option>
<option value="Hadoop & Spark">Hadoop & Spark</option>
 <option value="Python">Python</option>
<option value="Scala">Scala</option>
<option value="c,c++,Java">C, C++, Java</option>
<option value="Android development">Android development</option>
<option value="Website development">Website development</option>
<option value="MS office">MS office</option>
<option value="College Projects">College Projects</option>
</select>
<select required>
<option value="" disabled selected>How & Where ??</option>
<option value="Classroom training">Classroom training</option>
<option value="Online training">Online training</option>
</select>
<textarea placeholder="Type your message here" required></textarea>
<button type="submit">Submit</button>
</form>
</div>
);
};

export default ContactForm;

contactform.css
/* ContactForm.css */

.contact-form {
position: fixed;
top: 50%; /* Adjust as needed to center vertically */
right: 10%; /* Adjust as needed for right spacing */
transform: translateY(-50%);
background-color: #007bff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 280px;
color: white;
z-index: 1000;
}

.contact-form h2 {
margin-bottom: 20px;
}

.contact-form form {
display: flex;
flex-direction: column;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
width: 100%;
 box-sizing: border-box;
}

.contact-form button[type="submit"] {
background-color: #0056b3;
color: white;
border: none;
padding: 14px;
border-radius: 4px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}

.contact-form button[type="submit"]:hover {
background-color: #004088;
}

contact form before backend code.js

import React, { useState } from 'react';

import './ContactForm.css';

const ContactForm = () => {

const [isVisible, setIsVisible] = useState(true);
const [isMinimized, setIsMinimized] = useState(false);

const handleMinimize = () => {

setIsMinimized(!isMinimized);
};

const handleClose = () => {

setIsVisible(false);
};

const handleOpen = () => {

setIsVisible(true);
setIsMinimized(false);
};

return (
<>
{!isVisible && (
<button className="open-btn" onClick={handleOpen}>
Open Enquiry Form
</button>
)}
{isVisible && (
<div className={`contact-form ${isMinimized ? 'minimized' : ''}`}>
<div className="form-header">
<h2>Quick Enquiry</h2>
<div className="form-controls">
<button className="minimize-btn" onClick={handleMinimize}>
{isMinimized ? '+' : '-'}
</button>
<button className="close-btn" onClick={handleClose}>x</button>
</div>
</div>
 {!isMinimized && (
<form>
<input type="text" placeholder="Name" required />
<input type="text" placeholder="Mobile No(WhatsApp)" required />
<select required>
<option value="" disabled selected>Select a Course</option>
<option value="Data Analytics">Data Analytics</option>
<option value="Machine learning & AI">Machine learning &
AI</option>
<option value="Chatgpt & AI Tools">Chatgpt & AI Tools</option>
<option value="Cyber Security">Cyber Security</option>
<option value="Data engineering">Data engineering</option>
<option value="Cloud-AWS,Azure,GCP">Cloud-AWS,Azure,GCP</option>
<option value="Hadoop & Spark">Hadoop & Spark</option>
<option value="Python">Python</option>
<option value="Scala">Scala</option>
<option value="c,c++,Java">C, C++, Java</option>
<option value="Android development">Android development</option>
<option value="Website development">Website development</option>
<option value="MS office">MS office</option>
<option value="College Projects">College Projects</option>
</select>
<select required>
<option value="" disabled selected>How & Where ??</option>
<option value="Classroom training">Classroom training</option>
<option value="Online training">Online training</option>
</select>
<textarea placeholder="Type your message here" required></textarea>
<button type="submit">Submit</button>
</form>
)}
</div>
)}
</>
);
};

export default ContactForm;

contactform before backend.css

.contact-form {
position: fixed;
top: 50%; /* Adjust as needed to center vertically */
right: 10%; /* Adjust as needed for right spacing */
transform: translateY(-50%);
background-color: #007bff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 280px;
color: white;
z-index: 1000;
}
.contact-form.minimized {
height: 60px; /* Adjust height when minimized */
overflow: hidden;
}

.form-header {
display: flex;
justify-content: space-between;
align-items: center;
}

.form-controls {
display: flex;
gap: 10px;
}

.minimize-btn,
.close-btn {
background: none;
border: none;
color: white;
font-size: 20px;
cursor: pointer;
}

.contact-form h2 {
margin-bottom: 20px;
}

.contact-form.minimized h2 {
margin-bottom: 0;
}

.contact-form form {
display: flex;
flex-direction: column;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
width: 100%;
box-sizing: border-box;
}

.contact-form button[type="submit"] {
background-color: #0056b3;
color: white;
border: none;
padding: 14px;
border-radius: 4px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}

.contact-form button[type="submit"]:hover {
background-color: #004088;
}

.open-btn {
position: fixed;
top: 50%;
right: 10%;
background-color: #007bff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 8px;
cursor: pointer;
z-index: 1000;
transform: translateY(-50%);
}

.open-btn:hover {
background-color: #0056b3;
}

contactform.js for sending enquuiry data to email

import React, { useState } from 'react';

import './ContactForm.css';

const ContactForm = () => {

const [formData, setFormData] = useState({
name: '',
mobile: '',
course: '',
trainingMethod: '',
message: '',
});
const [submitMessage, setSubmitMessage] = useState('');

const handleChange = (e) => {

const { name, value } = e.target;
setFormData({
...formData,
[name]: value,
});
};

const handleSubmit = async (e) => {

e.preventDefault();
try {
const response = await fetch('http://localhost:5000/submit-enquiry', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
 body: JSON.stringify(formData),
});

const data = await response.json();

if (response.ok) {
setSubmitMessage('Thanks for sharing details. We will get back soon.');
setFormData({
name: '',
mobile: '',
course: '',
trainingMethod: '',
message: '',
});
} else {
setSubmitMessage('Error submitting enquiry');
}
} catch (error) {
setSubmitMessage('Error submitting enquiry');
}
};

return (
<div className="contact-form">
<h2>Quick Enquiry</h2>
<form onSubmit={handleSubmit}>
<input
type="text"
name="name"
placeholder="Name"
value={formData.name}
onChange={handleChange}
required
/>
<input
type="text"
name="mobile"
placeholder="Mobile No(WhatsApp)"
value={formData.mobile}
onChange={handleChange}
required
/>
<select
name="course"
value={formData.course}
onChange={handleChange}
required
>
<option value="" disabled>
Select a Course
</option>
<option value="Data Analytics">Data Analytics</option>
<option value="Machine learning & AI">Machine learning & AI</option>
<option value="Chatgpt & AI Tools">Chatgpt & AI Tools</option>
<option value="Cyber Security">Cyber Security</option>
<option value="Data engineering">Data engineering</option>
<option value="Cloud-AWS,Azure,GCP">Cloud-AWS,Azure,GCP</option>
<option value="Hadoop & Spark">Hadoop & Spark</option>
<option value="Python">Python</option>
<option value="Scala">Scala</option>
 <option value="c,c++,Java">C, C++, Java</option>
<option value="Android development">Android development</option>
<option value="Website development">Website development</option>
<option value="MS office">MS office</option>
<option value="College Projects">College Projects</option>
</select>
<select
name="trainingMethod"
value={formData.trainingMethod}
onChange={handleChange}
required
>
<option value="" disabled>
How & Where ??
</option>
<option value="Classroom training">Classroom training</option>
<option value="Online training">Online training</option>
</select>
<textarea
name="message"
placeholder="Type your message here"
value={formData.message}
onChange={handleChange}
required
></textarea>
<button type="submit">Submit</button>
</form>
{submitMessage && (
<div className="submit-message">{submitMessage}</div>
)}
</div>
);
};

export default ContactForm;

contactform.css for sending enquuiry data to email

/* ContactForm.css */

.contact-form {
position: fixed;
top: 50%;
right: 10%;
transform: translateY(-50%);
background-color: #007bff;
padding: 30px;
border-radius: 8px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
width: 280px;
color: white;
z-index: 1000;
}

.contact-form h2 {
margin-bottom: 20px;
}
.contact-form form {
display: flex;
flex-direction: column;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
margin-bottom: 20px;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
background-color: white;
width: 100%;
box-sizing: border-box;
}

.contact-form button[type="submit"] {
background-color: #0056b3;
color: white;
border: none;
padding: 14px;
border-radius: 4px;
cursor: pointer;
width: 100%;
box-sizing: border-box;
}

.contact-form button[type="submit"]:hover {
background-color: #004088;
}

.submit-message {
margin-top: 20px;
padding: 10px;
background-color: #dff0d8;
color: #3c763d;
border: 1px solid #d6e9c6;
border-radius: 4px;
}

index.js for sending enquuiry data to email

// src/index.js

const express = require('express');

const mongoose = require('mongoose');
const nodemailer = require('nodemailer');
const cors = require('cors');
const bodyParser = require('body-parser');

const app = express();

const port = process.env.PORT || 5000;

// Middleware
app.use(cors());
app.use(bodyParser.json());
// MongoDB connection
mongoose.connect('mongodb://localhost:27017/contactForm', {
useNewUrlParser: true,
useUnifiedTopology: true,
}).then(() => {
console.log('Connected to MongoDB');
}).catch((err) => {
console.error('Error connecting to MongoDB:', err.message);
});

// Mongoose Schema
const enquirySchema = new mongoose.Schema({
name: String,
mobile: String,
course: String,
trainingMethod: String,
message: String,
});

const Enquiry = mongoose.model('Enquiry', enquirySchema);

// Nodemailer setup
const transporter = nodemailer.createTransport({
service: 'gmail',
auth: {
user: '[email protected]',
pass: 'muru ganp',
},
});

// Route to handle form submission

app.post('/submit-enquiry', async (req, res) => {
const { name, mobile, course, trainingMethod, message } = req.body;

try {
const enquiry = new Enquiry({
name,
mobile,
course,
trainingMethod,
message,
});

await enquiry.save();

// Send email
const mailOptions = {
from: '[email protected]',
to: '[email protected]',
subject: 'New Enquiry',
text: `
Name: ${name}
Mobile: ${mobile}
Course: ${course}
Training Method: ${trainingMethod}
Message: ${message}
`,
};
 transporter.sendMail(mailOptions, (error, info) => {
if (error) {
return console.log(error);
}
console.log('Email sent: ' + info.response);
});

res.status(200).json({ message: 'Enquiry submitted successfully' });

} catch (error) {
res.status(500).json({ message: 'Error submitting enquiry', error });
}
});

app.listen(port, () => {
console.log(`Server is running on port: ${port}`);
});

.env for sending enquiry data to email

PORT=5000
[email protected]
EMAIL_PASS=muruganp@123
[email protected]

whatsappbutton.js

// src/components/WhatsAppButton.js
import React from 'react';
import './WhatsAppButton.css';
import whatsappLogo from '../assets/whatsapp-logo.png'; // Adjust the path as
necessary

const WhatsAppButton = () => {

const phoneNumber = '8884752389'; // Replace with your WhatsApp number

const handleClick = () => {

window.open(`https://wa.me/${phoneNumber}`, '_blank');
};

return (
<div className="whatsapp-button" onClick={handleClick}>
<img src={whatsappLogo} alt="WhatsApp" className="whatsapp-logo" />
<span className="tooltip">WhatsApp</span>
</div>
);
};

export default WhatsAppButton;

whatsappbutton.css

/* src/components/WhatsAppButton.css */
.whatsapp-button {
 position: fixed;
bottom: 20px;
right: 20px;
cursor: pointer;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}

.whatsapp-logo {
width: 150px; /* Increased the size */
height: 150px; /* Increased the size */
transition: transform 0.3s ease;
}

.whatsapp-logo:hover {
transform: scale(1.1);
}

.whatsapp-button .tooltip {
visibility: hidden;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px 10px;
position: absolute;
left: -60px; /* Adjust position to the left side of the logo */
z-index: 1;
opacity: 0;
transition: opacity 0.3s;
white-space: nowrap; /* Prevent text from wrapping */
}

.whatsapp-button:hover .tooltip {
visibility: visible;
opacity: 1;
}