Skip to content

Commit

Permalink
Refactor component imports and fix formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
@hrishikesh-mahajan
hrishikesh-mahajan committed Feb 17, 2024
1 parent 5e8d0dd commit 0aeb2ed
Show file tree
Hide file tree
Showing 22 changed files with 881 additions and 537 deletions.
53 changes: 30 additions & 23 deletions src/App.js
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,15 @@
import React from 'react';
import { Footer, Gallery, HeroSection, TeamCard ,CourseCard, ContactPage} from './containers';
import { Insights, Navbar, EventRegistrationForm } from './components';
import { Route, Routes, Navigate } from 'react-router-dom';
import './App.css';
import React from "react";
import { Navigate, Route, Routes } from "react-router-dom";
import "./App.css";
import { EventRegistrationForm, Insights, Navbar } from "./components";
import {
ContactPage,
CourseCard,
Footer,
Gallery,
HeroSection,
TeamCard,
} from "./containers";

const Home = () => {
return (
Expand All @@ -12,16 +19,16 @@ const Home = () => {
<Gallery />
<Footer />
</div>
)
}
);
};

const RegistrationForm = () => {
return (
<div>
<EventRegistrationForm />
</div>
)
}
);
};

// const About = () => {
// return (
Expand All @@ -33,19 +40,19 @@ const RegistrationForm = () => {

const Courses = () => {
return (
<div className='App'>
<CourseCard/>
<div className="App">
<CourseCard />
</div>
)
}
);
};

const Team = () => {
return (
<div>
<TeamCard />
</div>
)
}
);
};

// const Event = () => {
// return (
Expand All @@ -58,15 +65,15 @@ const Team = () => {
const Contactus = () => {
return (
<div>
<ContactPage/>
<ContactPage />
</div>
)
}
);
};

// the components will be imported inside of containers
const App = () => {
return (
<div className='App'>
<div className="App">
<Navbar />
<Routes>
<Route path="/" element={<Home />} />
Expand All @@ -75,11 +82,11 @@ const App = () => {
<Route path="/registrationform" element={<RegistrationForm />} />
<Route path="/team" element={<Team />} />
<Route path="/event" element={<RegistrationForm />} />
<Route path="/contactus" element={<Contactus/>} />
<Route path="/contactus" element={<Contactus />} />
<Route path="*" element={<Navigate to="/" replace />} />
</Routes>
</div>
)
}
);
};

export default App
export default App;
98 changes: 63 additions & 35 deletions src/components/Insights/Insights.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,57 +1,85 @@
import React from 'react';
import './insights.css';
import CountUp from 'react-countup';
import VisibilitySensor from 'react-visibility-sensor';

import React from "react";
import CountUp from "react-countup";
import VisibilitySensor from "react-visibility-sensor";
import "./insights.css";

const Insights = () => {
return (
<div id="projectFacts" className="sectionclassName">
<div className="fullWidth eight columns">
<div className="projectFactsWrap ">
<div className="item wow fadeInUpBig animated bg-transparent" data-number="12" style={{ visibility: 'visible' }}>
<div
className="item wow fadeInUpBig animated bg-transparent"
data-number="12"
style={{ visibility: "visible" }}
>
<i className="fa fa-briefcase"></i>
<p>Projects done</p>
<p className='number'><CountUp end={3} duration={2}>{({ countUpRef, start }) => (
<VisibilitySensor onChange={start} delayedCall>
<span ref={countUpRef} />
</VisibilitySensor>
)}</CountUp></p>

<p className="number">
<CountUp end={3} duration={2}>
{({ countUpRef, start }) => (
<VisibilitySensor onChange={start} delayedCall>
<span ref={countUpRef} />
</VisibilitySensor>
)}
</CountUp>
</p>
</div>
<div className="item wow fadeInUpBig animated bg-transparent" data-number="55" style={{ visibility: 'visible' }}>
<div
className="item wow fadeInUpBig animated bg-transparent"
data-number="55"
style={{ visibility: "visible" }}
>
<i className="fas fa-user-graduate"></i>
<p>Course Enrollment</p>
<p className='number'><CountUp end={50} duration={3}>{({ countUpRef, start }) => (
<VisibilitySensor onChange={start} delayedCall>
<span ref={countUpRef} />
</VisibilitySensor>
)}</CountUp></p>

<p className="number">
<CountUp end={50} duration={3}>
{({ countUpRef, start }) => (
<VisibilitySensor onChange={start} delayedCall>
<span ref={countUpRef} />
</VisibilitySensor>
)}
</CountUp>
</p>
</div>
<div className="item wow fadeInUpBig animated bg-transparent" data-number="359" style={{ visibility: 'visible' }}>
<div
className="item wow fadeInUpBig animated bg-transparent"
data-number="359"
style={{ visibility: "visible" }}
>
<i className="fas fa-award"></i>
<p>No. Of events</p>
<p className='number'><CountUp end={10} duration={5}>{({ countUpRef, start }) => (
<VisibilitySensor onChange={start} delayedCall>
<span ref={countUpRef} />
</VisibilitySensor>
)}</CountUp></p>

<p className="number">
<CountUp end={10} duration={5}>
{({ countUpRef, start }) => (
<VisibilitySensor onChange={start} delayedCall>
<span ref={countUpRef} />
</VisibilitySensor>
)}
</CountUp>
</p>
</div>
<div className="item wow fadeInUpBig animated bg-transparent" data-number="359" style={{ visibility: 'visible' }}>
<div
className="item wow fadeInUpBig animated bg-transparent"
data-number="359"
style={{ visibility: "visible" }}
>
<i className="fas fa-book-open"></i>
<p>No. of Courses</p>
<p className='number'><CountUp end={30} duration={5}>{({ countUpRef, start }) => (
<VisibilitySensor onChange={start} delayedCall>
<span ref={countUpRef} />
</VisibilitySensor>
)}</CountUp></p>
<p className="number">
<CountUp end={30} duration={5}>
{({ countUpRef, start }) => (
<VisibilitySensor onChange={start} delayedCall>
<span ref={countUpRef} />
</VisibilitySensor>
)}
</CountUp>
</p>
</div>
</div>
</div>
</div>
)
}
);
};

export default Insights
export default Insights;
7 changes: 3 additions & 4 deletions src/components/about/AboutImg.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,12 @@ export const AboutImg = ({ title, description, imgUrl }) => {
return (
<Col size={12} sm={6} md={4}>
<div className="proj-imgbx">
<img src={imgUrl} alt = ''/>
<img src={imgUrl} alt="" />
<div className="proj-txtx">
<h4>{title}</h4>
<span>{description}</span>
</div>
</div>
</Col>
)

}
);
};
102 changes: 62 additions & 40 deletions src/components/about/AboutSection.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,14 @@
import { Container, Row, Col, Tab, Nav } from "react-bootstrap";
import { AboutImg } from "./AboutImg";
import './About.css'
import "animate.css";
import { Col, Container, Nav, Row, Tab } from "react-bootstrap";
import module1 from "../../assets/Blog/module1.jpeg";
import module2 from "../../assets/Blog/module2.jpeg";
import module3 from "../../assets/Blog/module3.jpeg";
import 'animate.css';
import "./About.css";
import { AboutImg } from "./AboutImg";

import TrackVisibility from 'react-on-screen';
import TrackVisibility from "react-on-screen";

export const AboutSection = () => {

const projects1 = [
{
title: "Module 1",
Expand All @@ -26,7 +25,6 @@ export const AboutSection = () => {
description: "",
imgUrl: module3,
},

];

const projects2 = [
Expand All @@ -45,7 +43,6 @@ export const AboutSection = () => {
description: "",
imgUrl: module3,
},

];

return (
Expand All @@ -54,61 +51,86 @@ export const AboutSection = () => {
<Row>
<Col size={12}>
<TrackVisibility>
{({ isVisible }) =>
<div className={isVisible ? "animate__animated animate__fadeIn" : ""}>
{({ isVisible }) => (
<div
className={
isVisible ? "animate__animated animate__fadeIn" : ""
}
>
<h2>About Us</h2>
<p>Cisco Networking Academy is a global IT and cybersecurity education program that partners with learning institutions around the world to empower all people with career opportunities. It is Cisco’s largest and longest-running Cisco Corporate Social Responsibility program.</p>
<p>
Cisco Networking Academy is a global IT and cybersecurity
education program that partners with learning institutions
around the world to empower all people with career
opportunities. It is Cisco’s largest and longest-running
Cisco Corporate Social Responsibility program.
</p>
<Tab.Container id="projects-tabs" defaultActiveKey="first">
<Nav variant="pills" className="nav-pills mb-5 justify-content-center align-items-center" id="pills-tab">
<Nav
variant="pills"
className="nav-pills mb-5 justify-content-center align-items-center"
id="pills-tab"
>
<Nav.Item>
<Nav.Link eventKey="first"><i class='fas fa-chalkboard-teacher' style={{ fontSize: 23 }}></i></Nav.Link>
<Nav.Link eventKey="first">
<i
class="fas fa-chalkboard-teacher"
style={{ fontSize: 23 }}
></i>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="second"><i class='fas fa-calendar' style={{ fontSize: 23 }}></i></Nav.Link>
<Nav.Link eventKey="second">
<i
class="fas fa-calendar"
style={{ fontSize: 23 }}
></i>
</Nav.Link>
</Nav.Item>
<Nav.Item>
<Nav.Link eventKey="third"><i class='fas fa-solid fa-bullseye' style={{ fontSize: 23 }}></i></Nav.Link>
<Nav.Link eventKey="third">
<i
class="fas fa-solid fa-bullseye"
style={{ fontSize: 23 }}
></i>
</Nav.Link>
</Nav.Item>
</Nav>
<Tab.Content id="slideInUp" className={isVisible ? "animate__animated animate__slideInUp" : ""}>
<Tab.Content
id="slideInUp"
className={
isVisible ? "animate__animated animate__slideInUp" : ""
}
>
<Tab.Pane eventKey="first">
<Row>
{
projects1.map((project, index) => {
return (
<AboutImg
key={index}
{...project}
/>
)
})
}
{projects1.map((project, index) => {
return <AboutImg key={index} {...project} />;
})}
</Row>
</Tab.Pane>
<Tab.Pane eventKey="second">
<Row>
{
projects2.map((project, index) => {
return (
<AboutImg
key={index}
{...project}
/>
)
})
}
{projects2.map((project, index) => {
return <AboutImg key={index} {...project} />;
})}
</Row>
</Tab.Pane>
<Tab.Pane eventKey="third">
<p>Cisco Networking Academy is a global platform which can be used to inspire students and instructors to make their future</p>
<p>
Cisco Networking Academy is a global platform which
can be used to inspire students and instructors to
make their future
</p>
</Tab.Pane>
</Tab.Content>
</Tab.Container>
</div>}
</div>
)}
</TrackVisibility>
</Col>
</Row>
</Container>
</section>
)
}
);
};
Loading

0 comments on commit 0aeb2ed

Please sign in to comment.