Skip to content

Enhance blog page UI with hover effects and styling improvements #38

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

Open
Abhay-aps001 wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Enhance blog page UI with hover effects and styling improvements #38

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
2d265cb
Enhance blog page UI with hover effects and styling improvements
Abhay-aps001 Aug 10, 2025
a0271f1
checking the conflict
Abhay-aps001 Aug 13, 2025
d17ae8e
Merge branch 'main' into blog-enhancement
Abhay-aps001 Aug 17, 2025
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
121 changes: 88 additions & 33 deletions Frontend/src/components/about/RupeeFiabout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,38 +1,80 @@
import React from 'react';
import React, { useState, useEffect } from 'react';
import { motion } from 'framer-motion';
import { FaArrowDown, FaArrowUp } from 'react-icons/fa';

const RupeeFiBlog = () => {
const [isAtBottom, setIsAtBottom] = useState(false);
useEffect(() => {
const handleScroll = () => {
const bottom =
window.innerHeight + window.scrollY >= document.body.scrollHeight - 50;
setIsAtBottom(bottom);
};

window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
const handleScrollClick = () => {
if (isAtBottom) {
window.scrollTo({ top: 0, behavior: 'smooth' });
} else {
window.scrollTo({ top: document.body.scrollHeight, behavior: 'smooth' });
}
};

return (
<div className="max-w-4xl mx-auto px-4 py-12 pt-32">
<motion.article
<div className="max-w-4xl mx-auto px-4 py-12 pt-32 relative">
{ }
<button
onClick={handleScrollClick}
className="fixed left-6 bottom-6 bg-blue-600 text-white p-3 rounded-full shadow-lg hover:bg-blue-700 transition-colors z-50"
>
{isAtBottom ? <FaArrowUp size={20} /> : <FaArrowDown size={20} />}
</button>

<motion.article
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="prose prose-lg max-w-none"
>
<h1 className="text-4xl font-bold mb-8 text-gray-900">
<motion.h1
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.6 }}
className="text-4xl font-extrabold mb-8 bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent"
>
Building RupeeFi: A Journey into Digital Currency Innovation
</h1>
</motion.h1>


<section className="mb-12">
<h2 className="text-3xl font-semibold mb-6">Introduction</h2>

<section className="mb-12 bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition-all duration-300 hover:shadow-[0_4px_20px_rgba(59,130,246,0.4)]">
<h2 className="text-2xl font-bold relative inline-block after:content-[''] after:block after:w-16 after:h-1 after:bg-blue-500 after:mt-1 after:rounded-full after:transition-all hover:after:w-24 mb-4">
Introduction
</h2>

<p className="text-gray-700 leading-relaxed">
RupeeFi represents a groundbreaking approach to digital payments in India,
combining the power of e-Rupee (CBDC) with modern financial technology.
Our journey began with a simple mission: to make digital currency
RupeeFi represents a groundbreaking approach to digital payments in India,
combining the power of e-Rupee (CBDC) with modern financial technology.
Our journey began with a simple mission: to make digital currency
transactions accessible, secure, and rewarding for everyone.
</p>
</section>

<section className="mb-12">
<h2 className="text-3xl font-semibold mb-6">Technical Architecture</h2>


<section className="mb-12 bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition-all duration-300 hover:shadow-[0_4px_20px_rgba(59,130,246,0.4)]">
<h2 className="text-2xl font-bold relative inline-block after:content-[''] after:block after:w-16 after:h-1 after:bg-blue-500 after:mt-1 after:rounded-full after:transition-all hover:after:w-24 mb-4">
Technical Architecture
</h2>

<h3 className="text-2xl font-medium mb-4">Frontend Development</h3>
<p className="text-gray-700 leading-relaxed mb-6">
Built with React and Vite, our frontend architecture focuses on
performance and user experience. We implemented a component-based
Built with React and Vite, our frontend architecture focuses on
performance and user experience. We implemented a component-based
structure with key features including:
</p>
<ul className="list-disc pl-6 mb-6 text-gray-700">
<ul className="list-disc marker:text-blue-500 pl-6 mb-6 text-gray-700">
<li>Real-time transaction tracking with WebSocket integration</li>
<li>Custom blockchain visualization using Canvas API</li>
<li>Framer Motion for smooth animations</li>
Expand All @@ -43,71 +85,84 @@ const RupeeFiBlog = () => {
<p className="text-gray-700 leading-relaxed mb-6">
Our Node.js and Express backend handles complex operations including:
</p>
<ul className="list-disc pl-6 mb-6 text-gray-700">
<ul className="list-disc marker:text-blue-500 pl-6 mb-6 text-gray-700">
<li>Custom blockchain implementation for transaction tracking</li>
<li>JWT-based authentication system</li>
<li>MongoDB integration for user data and transactions</li>
<li>Real-time payment processing with UPI integration</li>
</ul>
</section>

<section className="mb-12">
<h2 className="text-3xl font-semibold mb-6">Key Features Deep Dive</h2>


<section className="mb-12 bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition-all duration-300 hover:shadow-[0_4px_20px_rgba(59,130,246,0.4)]">
<h2 className="text-2xl font-bold relative inline-block after:content-[''] after:block after:w-16 after:h-1 after:bg-blue-500 after:mt-1 after:rounded-full after:transition-all hover:after:w-24 mb-4">
Key Features Deep Dive
</h2>

<h3 className="text-2xl font-medium mb-4">Blockchain Implementation</h3>
<p className="text-gray-700 leading-relaxed mb-6">
Our custom blockchain solution ensures transparent and secure
transaction tracking. Each block contains up to three transactions,
Our custom blockchain solution ensures transparent and secure
transaction tracking. Each block contains up to three transactions,
with automatic block creation and validation.
</p>

<h3 className="text-2xl font-medium mb-4">Reward System</h3>
<p className="text-gray-700 leading-relaxed mb-6">
The gamified reward system includes:
</p>
<ul className="list-disc pl-6 mb-6 text-gray-700">
<ul className="list-disc marker:text-blue-500 pl-6 mb-6 text-gray-700">
<li>Scratch cards after every third transaction</li>
<li>Daily login bonuses</li>
<li>Transaction-based reward points</li>
<li>Special merchant rewards</li>
</ul>
</section>

<section className="mb-12">
<h2 className="text-3xl font-semibold mb-6">Security Measures</h2>

<section className="mb-12 bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition-all duration-300 hover:shadow-[0_4px_20px_rgba(59,130,246,0.4)]">
<h2 className="text-2xl font-bold relative inline-block after:content-[''] after:block after:w-16 after:h-1 after:bg-blue-500 after:mt-1 after:rounded-full after:transition-all hover:after:w-24 mb-2">
Security Measures
</h2>
<p className="text-gray-700 leading-relaxed mb-6">
Security is paramount in financial applications. We implemented:
</p>
<ul className="list-disc pl-6 mb-6 text-gray-700">
<ul className="list-disc marker:text-blue-500 pl-6 mb-6 text-gray-700">
<li>Google OAuth for secure authentication</li>
<li>JWT token-based API protection</li>
<li>Rate limiting to prevent DDoS attacks</li>
<li>Encrypted transaction data</li>
</ul>
</section>

<section className="mb-12">
<h2 className="text-3xl font-semibold mb-6">Future Roadmap</h2>

<section className="mb-12 bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition-all duration-300 hover:shadow-[0_4px_20px_rgba(59,130,246,0.4)]">
<h2 className="text-2xl font-bold relative inline-block after:content-[''] after:block after:w-16 after:h-1 after:bg-blue-500 after:mt-1 after:rounded-full after:transition-all hover:after:w-24 mb-2">
Future Roadmap
</h2>
<p className="text-gray-700 leading-relaxed mb-6">
Looking ahead, we plan to:
</p>
<ul className="list-disc pl-6 mb-6 text-gray-700">
<ul className="list-disc marker:text-blue-500 pl-6 mb-6 text-gray-700">
<li>Implement AI-powered fraud detection</li>
<li>Expand merchant services</li>
<li>Add cross-border transaction support</li>
<li>Enhance the reward system</li>
</ul>
</section>

<section className="mb-12">
<h2 className="text-3xl font-semibold mb-6">Conclusion</h2>

<section className="mb-12 bg-white p-8 rounded-xl shadow-lg border border-gray-200 transition-all duration-300 hover:shadow-[0_4px_20px_rgba(59,130,246,0.4)]">
<h2 className="text-2xl font-bold relative inline-block after:content-[''] after:block after:w-16 after:h-1 after:bg-blue-500 after:mt-1 after:rounded-full after:transition-all hover:after:w-24 mb-2">
Conclusion
</h2>
<p className="text-gray-700 leading-relaxed">
RupeeFi represents the future of digital payments in India,
combining security, user experience, and innovation. We continue
to evolve and improve our platform based on user feedback and
RupeeFi represents the future of digital payments in India,
combining security, user experience, and innovation. We continue
to evolve and improve our platform based on user feedback and
technological advancements.
</p>
</section>

</motion.article>
</div>
);
Expand Down