summaryrefslogtreecommitdiff
path: root/frontend/src/pages
diff options
context:
space:
mode:
Diffstat (limited to 'frontend/src/pages')
-rw-r--r--frontend/src/pages/about.js34
-rw-r--r--frontend/src/pages/contact.css3
-rw-r--r--frontend/src/pages/contact.js50
-rw-r--r--frontend/src/pages/courses.css45
-rw-r--r--frontend/src/pages/courses.js89
-rw-r--r--frontend/src/pages/index.css10
-rw-r--r--frontend/src/pages/index.js122
7 files changed, 353 insertions, 0 deletions
diff --git a/frontend/src/pages/about.js b/frontend/src/pages/about.js
new file mode 100644
index 0000000..4c239f6
--- /dev/null
+++ b/frontend/src/pages/about.js
@@ -0,0 +1,34 @@
+// Filename - pages/about.js
+
+import React from "react";
+import './index.css';
+import { Container, Row, Col } from 'react-bootstrap';
+const About = () => {
+ return (
+ <Container>
+ <h1>About us</h1>
+ <hr />
+ <Container className="background w-100 px-4 py-3 rounded mb-3">
+ <Row className="justify-content-evenly">
+ <Col xs={12} className="text-center mb-3 bg-light rounded">
+ <img src="/logo192.png" alt="Logo" height="200" />
+ </Col>
+ <Col xs={12} md={6} className="mb-3 text-light">
+ <h2>Who are we?</h2>
+ <p>
+ Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ad porro dolorem eveniet mollitia ipsum minus ex corporis ut. Nihil voluptatem exercitationem quaerat assumenda! Provident neque, minima quod voluptatum tenetur ducimus!
+ </p>
+ </Col>
+ <Col xs={12} md={6} className="mb-3 text-light">
+ <h2>Blah Blah</h2>
+ <p>
+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima velit deleniti perferendis impedit rerum possimus dolorum eligendi similique, vero odit sed consectetur officiis iusto nisi culpa ex delectus illo sequi?
+ </p>
+ </Col>
+ </Row>
+ </Container>
+ </Container>
+ );
+};
+
+export default About;
diff --git a/frontend/src/pages/contact.css b/frontend/src/pages/contact.css
new file mode 100644
index 0000000..e22a888
--- /dev/null
+++ b/frontend/src/pages/contact.css
@@ -0,0 +1,3 @@
+#contact .card:hover i,#contact .card:hover h4{
+ color: #9400FF;
+} \ No newline at end of file
diff --git a/frontend/src/pages/contact.js b/frontend/src/pages/contact.js
new file mode 100644
index 0000000..195aa12
--- /dev/null
+++ b/frontend/src/pages/contact.js
@@ -0,0 +1,50 @@
+// Contact.js
+
+import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './contact.css';
+const Contact = () => {
+ return (
+ <section id="contact">
+ <div className="container">
+ <h1>Contact us</h1>
+ <hr />
+ <p className="text-center w-75 m-auto">
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris interdum purus at sem ornare sodales. Morbi
+ leo nulla, pharetra vel felis nec, ullamcorper condimentum quam.
+ </p>
+ <div className="row">
+ <div className="col-sm-12 col-md-6 col-lg-4 my-5">
+ <div className="card border-0">
+ <div className="card-body text-center">
+ <i className="fa fa-phone fa-5x mb-3" aria-hidden="true"></i>
+ <h4 className="text-uppercase mb-5">Call us</h4>
+ <p>+8801683615582</p>
+ </div>
+ </div>
+ </div>
+ <div className="col-sm-12 col-md-6 col-lg-4 my-5">
+ <div className="card border-0">
+ <div className="card-body text-center">
+ <i className="fa fa-map-marker fa-5x mb-3" aria-hidden="true"></i>
+ <h4 className="text-uppercase mb-5">Office location</h4>
+ <address>New York, NY 10012, US</address>
+ </div>
+ </div>
+ </div>
+ <div className="col-sm-12 col-md-6 col-lg-4 my-5">
+ <div className="card border-0">
+ <div className="card-body text-center">
+ <i className="fa fa-globe fa-5x mb-3" aria-hidden="true"></i>
+ <h4 className="text-uppercase mb-5">Email</h4>
+ <p>info@example.com</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+ );
+};
+
+export default Contact;
diff --git a/frontend/src/pages/courses.css b/frontend/src/pages/courses.css
new file mode 100644
index 0000000..053ac91
--- /dev/null
+++ b/frontend/src/pages/courses.css
@@ -0,0 +1,45 @@
+
+/* Culorile săgeților active */
+.carousel-control-prev-icon,
+.carousel-control-next-icon {
+ background-color: black;
+}
+
+/* Culorile săgeților la hover */
+.carousel-control-prev:hover,
+.carousel-control-next:hover {
+ background-color: darkgrey;
+}
+
+/* Culorile săgeților inactive */
+.carousel-control-prev,
+.carousel-control-next {
+ background-color: grey;
+}
+/* Adaugă acest cod CSS în fișierul tău de stiluri (de exemplu, App.css) */
+
+/* Sageti de parcurgere - pozitionare mai in exterior */
+.carousel-control-prev, .carousel-control-next {
+ transform: translateY(250%);
+ }
+
+ /* Sageti de parcurgere - setare distanta intre sageti si marginea carousel-ului */
+ .carousel-control-prev {
+ margin-left: -3rem; /* Ajusteaza distanta pe orizontala la stanga */
+ }
+
+ .carousel-control-next {
+ margin-right: -3rem; /* Ajusteaza distanta pe orizontala la dreapta */
+ }
+ /* Adaugă acest cod CSS în fișierul tău de stiluri (de exemplu, App.css) */
+
+/* Stilizare dimensiune sageti de parcurgere */
+.carousel-control-prev, .carousel-control-next {
+ width: 50px; /* Lățimea săgeților */
+ height: 50px; /* Înălțimea săgeților */
+ font-size: 24px; /* Dimensiunea textului săgeților (dacă sunt utilizate iconițe) */
+ line-height: 3rem; /* Ajustează înălțimea liniei pentru a centra textul (dacă sunt utilizate iconițe) */
+ }
+
+ /* Alte stilizari pot fi adaugate aici */
+ \ No newline at end of file
diff --git a/frontend/src/pages/courses.js b/frontend/src/pages/courses.js
new file mode 100644
index 0000000..ffa7adb
--- /dev/null
+++ b/frontend/src/pages/courses.js
@@ -0,0 +1,89 @@
+import React from 'react';
+import { Carousel, Container, Row, Col } from 'react-bootstrap';
+import './courses.css';
+function CourseCard({ imageUrl, title, text }) {
+ return (
+ <div className="col-4 mb-2 text-dark">
+ <div className="card">
+ <a href="#">
+ <img src={imageUrl} className="card-img-top" alt="..." />
+ </a>
+ <div className="card-body">
+ <h5 className="card-title">{title}</h5>
+ <p className="card-text">{text}</p>
+ <a href="#" className="btn btn-primary background2">
+ Go somewhere
+ </a>
+ </div>
+ </div>
+ </div>
+ );
+ }
+const MyCarousel = () => {
+ return (
+ <Container>
+ <h1>Courses</h1>
+ <hr />
+ <Container>
+ <h2>Top Rated Courses</h2>
+ <Carousel>
+ <Carousel.Item>
+ <div className="row">
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+ </div>
+ </Carousel.Item>
+
+ <Carousel.Item>
+ <div className="row">
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+ </div> </Carousel.Item>
+
+ <Carousel.Item>
+ <div className="row">
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+ </div> </Carousel.Item>
+ </Carousel>
+ </Container>
+ <Container>
+ <h2>Recommended courses</h2>
+ <Carousel>
+ <Carousel.Item>
+ <div className="row">
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+ </div>
+ </Carousel.Item>
+
+ <Carousel.Item>
+ <div className="row">
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+ </div> </Carousel.Item>
+
+ <Carousel.Item>
+ <div className="row">
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+ </div> </Carousel.Item>
+ </Carousel>
+ </Container>
+ </Container>
+ );
+};
+
+export default MyCarousel;
diff --git a/frontend/src/pages/index.css b/frontend/src/pages/index.css
new file mode 100644
index 0000000..d80b5e3
--- /dev/null
+++ b/frontend/src/pages/index.css
@@ -0,0 +1,10 @@
+@import '~@fortawesome/fontawesome-free/css/all.css';
+.background{
+ background-color: #010001 !important;
+}
+.background2{
+ background-color: #9400FF !important;
+}
+.text-logo{
+ color: #9400FF !important;
+} \ No newline at end of file
diff --git a/frontend/src/pages/index.js b/frontend/src/pages/index.js
new file mode 100644
index 0000000..ac0e470
--- /dev/null
+++ b/frontend/src/pages/index.js
@@ -0,0 +1,122 @@
+// Filename - pages/index.js
+
+import React from "react";
+import './index.css';
+function CourseCard({ imageUrl, title, text }) {
+ return (
+ <div className="col-12 col-md-6 col-lg-3 mb-2 text-dark">
+ <div className="card">
+ <a href="#">
+ <img src={imageUrl} className="card-img-top" alt="..." />
+ </a>
+ <div className="card-body">
+ <h5 className="card-title">{title}</h5>
+ <p className="card-text">{text}</p>
+ <a href="#" className="btn btn-primary background2">
+ Go somewhere
+ </a>
+ </div>
+ </div>
+ </div>
+ );
+}
+function PersonCard({ imageUrl, name, username, socialLinks, websites }) {
+ return (
+ <div className="col-md-12 col-xl-4 mb-3 text-dark">
+ <div className="card" style={{ borderRadius: '15px' }}>
+ <div className="card-body text-center">
+ <div className="mt-3 mb-4">
+ <img src={imageUrl} className="rounded-circle img-fluid" style={{ width: '100px' }} alt="..." />
+ </div>
+ <h4 className="mb-2">{name}</h4>
+ <p className="text-muted mb-4">@{username} | <a href="#!">{websites}</a></p>
+ <div className="mb-4 pb-2">
+ {socialLinks.map((link, index) => (
+ <button key={index} type="button" className="btn btn-outline-primary btn-floating m-2">
+ <i className={`fab ${link.icon} fa-lg`}></i>
+ </button>
+ ))}
+ </div>
+ <button type="button" className="btn btn-primary btn-rounded btn-lg background2">
+ Message now
+ </button>
+ <div className="d-flex justify-content-between text-center mt-5 mb-2">
+ <div>
+ <p className="mb-2 h5">8471</p>
+ <p className="text-muted mb-0">Interactions</p>
+ </div>
+ <div className="px-3">
+ <p className="mb-2 h5">8512</p>
+ <p className="text-muted mb-0">Prepared Students</p>
+ </div>
+ <div>
+ <p className="mb-2 h5">4751</p>
+ <p className="text-muted mb-0">Something</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ );
+}
+
+// Componenta principală
+function Home() {
+ return (
+ <div className="container">
+ <h1>Dashboard</h1>
+ <hr />
+ {/* Cursurile tale */}
+ <div className="container rounded text-white pt-3 pb-3 mb-3 background ">
+ <h2>Your courses</h2>
+ <div className="row d-flex justify-content-center align-items-center h-100">
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+ <CourseCard imageUrl="https://cdn.discordapp.com/attachments/1176562447918825482/1183039686940299356/FreeFlowLogo.png?ex=6586e291&is=65746d91&hm=4e80dc68f4bd172af650629d344866400b374ea9a6e844da5d70723e99125f4d&" title="Titlu curs" text="Some quick example text to build on the card title and make up the bulk of the card's content." />
+
+ </div>
+ </div>
+ <div className="container background rounded text-white p-3 mb-3">
+ <h2>Connect with people</h2>
+ <div className="row d-flex justify-content-center align-items-center h-100">
+ <PersonCard
+ imageUrl="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png"
+ name="Nume Prenume"
+ username="Username"
+ socialLinks={[
+ { icon: 'fa-facebook-f' },
+ { icon: 'fa-twitter' },
+ { icon: 'fa-skype' },
+ ]}
+ websites={"website.com"}
+ />
+ <PersonCard
+ imageUrl="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png"
+ name="Nume Prenume"
+ username="Username"
+ socialLinks={[
+ { icon: 'fa-facebook-f' },
+ { icon: 'fa-twitter' },
+ { icon: 'fa-skype' },
+ ]}
+ websites={"website.com"}
+ />
+ <PersonCard
+ imageUrl="https://eitrawmaterials.eu/wp-content/uploads/2016/09/person-icon.png"
+ name="Nume Prenume"
+ username="Username"
+ socialLinks={[
+ { icon: 'fa-facebook-f' },
+ { icon: 'fa-twitter' },
+ { icon: 'fa-skype' },
+ ]}
+ websites={"website.com"}
+ />
+ </div>
+ </div>
+ </div>
+ );
+}
+
+export default Home;
generated by cgit v1.2.3 (git 2.25.1) at 2025-07-09 04:16:33 +0000