Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Created about page and optimized responsiveness #52

Closed
wants to merge 1 commit into from
Closed

Created about page and optimized responsiveness #52

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
77 changes: 77 additions & 0 deletions src/assets/styles/About.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
.about-container {
max-width: 75%;
margin: 0 auto;
padding: 2%;
}

h1,
h2 {
color: #1f1e1e;
}

a {
color: #0066CC;
text-decoration: none;
}

p {
line-height: 1.6;
color: #312e2e;
}

section {
display: flex;
flex-direction: column;
align-items: flex-start;
text-align: left;
justify-content: left;
}

.about-title {
align-items: center;
justify-content: center;
text-align: center;
}

section p {
align-items: right;
justify-content: right;
text-align: justify;
}

ul {
text-align: left;
color: #312e2e;
}

ul li {
margin: 15px;
}

.overview-section {
height: 20%;
}

.features-section {
height: 20%;
}

.usage-section {
height: 20%;
}

.geeta-section {
height: 20%;
}

.contributing-section {
height: 20%;
}

.contact-section {
height: 20%;
}

.thank-you-section {
height: 20%;
}
133 changes: 123 additions & 10 deletions src/pages/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,17 +1,130 @@
import React from 'react';
import Navbar from '../components/Navbar.jsx';
import Footer from '../components/Footer';
import Temporary from "../components/Temporary.jsx";
import Navbar from "../components/Navbar.jsx";
import Footer from "../components/Footer";
import "../assets/styles/About.css";

const About = () => {
return (
<>
<Navbar/>
<Temporary/>
<Navbar />
<div className="about-container">
<div style={{ marginTop: "120px" }}></div>
<h1 className="about-title">About The Library</h1>

<Footer/>
<section className="overview-section">
<h2>Overview 🦉</h2>
<p>
Welcome to The Library, where the journey of discovery meets the
serenity of wisdom. Immerse yourself in a world of knowledge
carefully curated from diverse sources, including the vast Open
Library API. Beyond an extensive collection of books, we invite you
to experience a daily ritual of spiritual reflection through the
timeless Geeta shlok. The Library is more than a platform; it&apos;s
a sanctuary for your mind and soul.
</p>
</section>

<section className="features-section">
<h2>Features 🚀</h2>
<ul>
<li>Access to a vast library of books.</li>
<li>User-friendly and intuitive interface.</li>
<li>Search books by title, author, genre, and more.</li>
<li>Read books for free.</li>
<li>Daily Geeta shlok for spiritual enrichment.</li>
<li>Open source, and anyone can contribute to its development.</li>
</ul>
</section>

<section className="usage-section">
<h2>Usage 📚</h2>
<p>
Once you&apos;ve opened The Library Website, you can immediately
begin your literary journey. Utilize the search options to discover
books that captivate your interest. Click on a book to embark on a
reading adventure, all for free.
</p>
</section>

<section className="geeta-section">
<h2>Daily Geeta Shlok 🙏</h2>
<p>
We believe in the transformative power of daily contemplation on
Geeta shlok. This practice can bring several benefits to your life:
</p>
<ul>
<li>
<strong>Spiritual Enlightenment:</strong> Gain profound insights
into the nature of life, duty, and spirituality.
</li>
<li>
<strong>Mental Clarity:</strong> Enhance mental clarity and deepen
your understanding of life&apos;s purpose.
</li>
<li>
<strong>Inner Peace:</strong> Attain tranquility and fortitude to
face life&apos;s challenges with grace.
</li>
<li>
<strong>Ethical Guidance:</strong> Receive valuable insights on
ethics, morality, and the right path in life.
</li>
<li>
<strong>Stress Reduction:</strong> Experience stress reduction and
improved mental well-being.
</li>
<li>
<strong>Personalized Recommendations:</strong> Discover books
tailored to your interests with our advanced recommendation
system.
</li>
<li>
<strong>Interactive Community:</strong> Connect with fellow
readers, share your favorite books, and engage in
thought-provoking discussions in our vibrant community forum.
</li>
</ul>
</section>

<section className="contributing-section">
<h2>Contributing 🤗</h2>
<p>
The Library is a community-driven project, and your contribution can
shape its future. Dive into the codebase, suggest new features, or
lend a helping hand to fellow contributors. Your ideas matter, and
together, we can build a reading haven for everyone! ✨
</p>
<p>
<a href="https://github.com/ajaynegi45/Library#contributing-">
Learn more about contributing...
</a>
</p>
</section>

<section className="contact-section">
<h2>Contact Information 📧</h2>
<p>
If you have questions or want to connect, reach out anytime.
I&apos;m more than happy to chat and learn from your experiences.
</p>
<p>
<strong>Email:</strong>{" "}
<a href="mailto:[email protected]">Contact Me</a>
</p>
</section>

<section className="thank-you-section">
<h2>Thank You ❤️</h2>
<p>
Thank you for exploring The Library project. We hope it enriches
your reading experience and provides daily spiritual nourishment
through the Geeta shlok. Your support and contributions are deeply
appreciated. ✨
</p>
</section>
</div>
<Footer />
</>
)
}
);
};

export default About
export default About;