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

fix: update card text color to maintain visibility in dark mode #385 #392

Merged
merged 1 commit into from
Dec 4, 2024
Merged

fix: update card text color to maintain visibility in dark mode #385 #392

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
79 changes: 50 additions & 29 deletions src/pages/Home.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export default function Home() {

return (
<div className={`d-flex flex-column align-items-center ${isDarkMode ? 'dark-mode' : 'light-mode'}`} style={{ color: isDarkMode ? 'white' : 'black' }}>

<div className="d-flex flex-column flex-md-row align-items-center justify-content-center w-100 p-4" style={{ padding: '80px 4px', borderRadius: '15px', backgroundColor: `${isDarkMode ? 'rgba(0, 0, 0, 0.6)' : 'rgba(255, 255, 255, 0.035)'}` }}>
<div className="d-flex flex-column align-items-center justify-content-center w-100">
<h1 className="font-weight-bold display-4 mb-3">चाणक्य नीति</h1>
Expand All @@ -29,61 +30,81 @@ export default function Home() {
</div>
<div className="d-flex justify-content-center w-100 mt-4 mt-md-0">
<Tilt>
<img className="img-fluid" src="/home1.png" alt="" style={{ animation: 'moveUpDown 2s infinite' }} />
<img className="img-fluid" src="/home1.png" alt="Chanakya Wisdom" style={{ animation: 'moveUpDown 2s infinite' }} />
</Tilt>
</div>
</div>

<div className="d-flex flex-column flex-md-row align-items-center justify-content-around w-100 my-4 py-4" style={{ gap: '20px', backgroundColor: `${isDarkMode ? 'rgba(52, 91, 57, 0.5)' : 'rgba(52, 91, 57, 0.328)'}`, borderRadius: '20px' }}>
<div className="card h-100 shadow-sm" style={{ width: '350px', borderRadius: '20px', backgroundColor: `${isDarkMode ? 'rgba(0, 0, 0, 0.6)' : 'white'}`, color: isDarkMode ? 'white' : 'black' }}>
<img src="/e-book.jpeg" className="card-img-top" alt="" />
{/* One wrapper div for the cards and multimedia content */}
<div
className="d-flex flex-column flex-md-row align-items-center justify-content-around w-100 my-4 py-4"
style={{
gap: '20px',
backgroundColor: `${isDarkMode ? 'rgba(52, 91, 57, 0.5)' : 'rgba(52, 91, 57, 0.328)'}`,
borderRadius: '20px'
}}
>
{/* E-Book Card */}
<div
className="card h-100 shadow-sm"
style={{
width: '350px',
borderRadius: '20px',
backgroundColor: `${isDarkMode ? 'rgba(0, 0, 0, 0.6)' : 'white'}`
}}
>
<img src="/e-book.jpeg" className="card-img-top" alt="E-book on Chanakya" />
<div className="card-body">
<h5 className="card-title font-weight-bold">Dive into the World of Chanakya through E-Books</h5>
<p className="card-text">
Discover the profound wisdom of Chanakya with our meticulously
curated e-books. Each page offers a gateway into the timeless
teachings of this ancient sage, providing you with insights and
strategies that remain relevant in today’s world.
<h5 className="card-title font-weight-bold" style={{ color: 'black' }}>Dive into the World of Chanakya through E-Books</h5>
<p className="card-text" style={{ color: 'black' }}>
Discover the profound wisdom of Chanakya with our meticulously curated e-books. Each page offers a gateway into the timeless teachings of this ancient sage, providing you with insights and strategies that remain relevant in today's world.
</p>
</div>
</div>
<div className="d-flex flex-column align-items-center justify-content-center gap-3" style={{ color: isDarkMode ? 'white' : 'black' }}>

{/* Video Button Section */}
<div
className="d-flex flex-column align-items-center justify-content-center gap-3"
style={{ color: isDarkMode ? 'white' : 'black' }}
>
<VideoButton />
<div className="text-center">
<h4 className="font-weight-bold">MULTIMEDIA CONTENT</h4>
<p className="font-weight-semibold">
Audio Files, Books, Videos on Chanakya’s Life
Audio Files, Books, Videos on Chanakya's Life
</p>
</div>
</div>
<div className="card h-100 shadow-sm" style={{ width: '350px', borderRadius: '20px', backgroundColor: `${isDarkMode ? 'rgba(0, 0, 0, 0.6)' : 'white'}`, color: isDarkMode ? 'white' : 'black' }}>
<img src="/video.jpg" className="card-img-top" alt="" />

{/* Video and Audio Card */}
<div
className="card h-100 shadow-sm"
style={{
width: '350px',
borderRadius: '20px',
backgroundColor: `${isDarkMode ? 'rgba(0, 0, 0, 0.6)' : 'white'}`
}}
>
<img src="/video.jpg" className="card-img-top" alt="Video and Audio Experiences" />
<div className="card-body">
<h5 className="card-title font-weight-bold">Video and Audio Experiences</h5>
<p className="card-text">
Immerse yourself in the wisdom of Chanakya through our captivating
blend of video and audio content. Explore his timeless teachings
with clarity and depth, as every word and gesture comes alive,
enriching your journey of learning and discovery.
<h5 className="card-title font-weight-bold" style={{ color: 'black' }}>Video and Audio Experiences</h5>
<p className="card-text" style={{ color: 'black' }}>
Immerse yourself in the wisdom of Chanakya through our captivating blend of video and audio content. Explore his timeless teachings with clarity and depth, as every word and gesture comes alive, enriching your journey of learning and discovery.
</p>
</div>
</div>
</div>

{/* AI-Powered Translations Section */}
<div className="d-flex flex-column align-items-center justify-content-center my-4 py-4" style={{ backgroundColor: `${isDarkMode ? 'rgba(52, 91, 57, 0.5)' : 'rgba(52, 91, 57, 0.328)'}`, borderRadius: '20px', width: '100%', color: isDarkMode ? 'white' : 'black' }}>
<div className="d-flex align-items-center gap-2 justify-content-center mb-3">
<img src="/ai.svg" alt="" style={{ width: '60px', borderRadius: '100%' }} />
<div className="d-flex align-items-center gap-2 center mb-3">
<img src="/ai.svg" alt="AI Translations" style={{ width: '60px', borderRadius: '100%' }} />
<h5 className="font-weight-bold">AI-Powered Translations</h5>
</div>
<p className="text-center">
Explore the world without boundaries with our AI-powered language
translation. Break down language barriers effortlessly as our
advanced technology seamlessly transforms content into your
preferred language. Whether you're discovering ancient wisdom or
connecting with global insights, our translation AI ensures every
word resonates, bridging cultures and uniting minds.
Explore the world without boundaries with our AI-powered language translation. Break down language barriers effortlessly as our advanced technology seamlessly transforms content into your preferred language. Whether you're discovering ancient wisdom or connecting with global insights, our translation AI ensures every word resonates, bridging cultures and uniting minds.
</p>
</div>
</div>
);
}
}
Loading