Skip to content

Made About and Contact page theme aware #127

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

Closed
Lalitya31 wants to merge 4 commits into from
Closed

Made About and Contact page theme aware #127

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7d0e909
make about page theme aware
Lalitya31 Mar 8, 2026
1a515f7
make contact page theme aware
Lalitya31 Mar 8, 2026
49a541c
Merge remote-tracking branch 'upstream/main' into About-Contact
Lalitya31 Mar 8, 2026
d026431
commit changes suggested by copilot
Lalitya31 Mar 8, 2026
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
66 changes: 33 additions & 33 deletions frontend/src/pages/About.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -106,42 +106,42 @@ function About() {

return (
<>
<div className="w-full min-h-screen pt-24 pb-0">
<div className="w-full min-h-screen pt-24 pb-0 bg-white dark:bg-transparent">

{/* SECTION 1: Corporate Hero - bg-[#0b1220] */}
<div className="bg-[#0b1220] relative">
<div className="bg-white dark:bg-[#0b1220] relative">
{/* Depth mask */}
<div className="absolute inset-0 bg-gradient-to-b from-black/10 to-transparent pointer-events-none"></div>

<div ref={heroRef} className="relative max-w-7xl mx-auto px-4 lg:px-8 py-16">
<div className="grid grid-cols-1 lg:grid-cols-2 gap-12 items-center">
{/* Left: Headline and Trust */}
<div>
<h1 className="text-4xl md:text-5xl font-semibold text-white mb-4 leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
<h1 className="text-4xl md:text-5xl font-semibold text-black dark:text-white mb-4 leading-tight" style={{ fontFamily: 'Poppins, sans-serif' }}>
Enterprise-Level Commerce Experience
</h1>
<p className="text-xl text-gray-200 mb-6 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
<p className="text-xl text-gray-700 dark:text-gray-200 mb-6 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
Built for Reliability, Designed for Trust
</p>
<p className="text-sm text-gray-400 mb-8 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
<p className="text-sm text-gray-600 dark:text-gray-400 mb-8 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
Riveto is a modern, responsive e-commerce platform designed to deliver a seamless and intuitive shopping experience.
We combine cutting-edge technology with exceptional design to create a shopping journey that's both enjoyable and efficient.
</p>

{/* Trust Badges */}
<div className="grid grid-cols-2 gap-3">
{trustBadges.map((badge, index) => (
<div key={index} className="flex items-center gap-2 p-3 bg-[#1a2332] border border-[#1f2a44] rounded-lg">
<div key={index} className="flex items-center gap-2 p-3 bg-gray-100 dark:bg-[#1a2332] border border-gray-200 dark:border-[#1f2a44] rounded-lg">
<div className="text-blue-400">{badge.icon}</div>
<span className="text-sm text-gray-300" style={{ fontFamily: 'Inter, sans-serif' }}>{badge.text}</span>
<span className="text-sm text-gray-600 dark:text-gray-300" style={{ fontFamily: 'Inter, sans-serif' }}>{badge.text}</span>
</div>
))}
</div>
</div>

{/* Right: Visual */}
<div className="relative">
<div className="rounded-2xl overflow-hidden shadow-xl border border-[#1f2a44]">
<div className="rounded-2xl overflow-hidden shadow-xl border border-gray-200 dark:border-[#1f2a44]">
<Carousel
baseWidth={500}
autoplay={true}
Expand All @@ -157,27 +157,27 @@ function About() {
</div>

{/* SECTION 2: Operational Overview - bg-[#0f172a] */}
<div className="bg-[#0f172a] py-16">
<div className="bg-gray-50 dark:bg-[#0f172a] py-16">
<div className="max-w-7xl mx-auto px-4 lg:px-8">
<h2 className="text-2xl font-semibold text-gray-200 mb-8 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
<h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-8 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
Operational Overview
</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
<div className="bg-[#101a2f] border border-[#1f2a44] p-6 rounded-lg">
<h3 className="text-lg font-semibold text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Platform Stability</h3>
<p className="text-sm text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
<div className="bg-white dark:bg-[#101a2f] border border-gray-200 dark:border-[#1f2a44] p-6 rounded-lg">
<h3 className="text-lg font-semibold text-black dark:text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Platform Stability</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
99.9% uptime with enterprise-grade infrastructure ensuring your shopping experience is always available when you need it.
</p>
</div>
<div className="bg-[#101a2f] border border-[#1f2a44] p-6 rounded-lg">
<h3 className="text-lg font-semibold text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Fulfillment Network</h3>
<p className="text-sm text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
<div className="bg-white dark:bg-[#101a2f] border border-gray-200 dark:border-[#1f2a44] p-6 rounded-lg">
<h3 className="text-lg font-semibold text-black dark:text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Fulfillment Network</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
Strategic warehouse locations and vetted logistics partners enable fast, reliable delivery across all regions.
</p>
</div>
<div className="bg-[#101a2f] border border-[#1f2a44] p-6 rounded-lg">
<h3 className="text-lg font-semibold text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Customer Protection</h3>
<p className="text-sm text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
<div className="bg-white dark:bg-[#101a2f] border border-gray-200 dark:border-[#1f2a44] p-6 rounded-lg">
<h3 className="text-lg font-semibold text-black dark:text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>Customer Protection</h3>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
Comprehensive buyer protection policies, secure payment processing, and transparent return procedures.
</p>
</div>
Expand All @@ -186,14 +186,14 @@ function About() {
</div>

{/* SECTION 3: Scale Indicators - bg-[#111c33] Slab Strip */}
<div ref={statsRef} className="bg-[#111c33] border-y border-[#1f2a44]">
<div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 divide-x divide-[#1f2a44] py-10 text-center">
<div ref={statsRef} className="bg-gray-100 dark:bg-[#111c33] border-y border-gray-200 dark:border-[#1f2a44]">
<div className="max-w-6xl mx-auto grid grid-cols-2 md:grid-cols-4 divide-x divide-gray-200 dark:divide-[#1f2a44] py-10 text-center">
{stats.map((stat, index) => (
<div key={index} className="px-6">
<div className="text-3xl md:text-4xl font-bold text-white mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
<div className="text-3xl md:text-4xl font-bold text-black dark:text-white mb-1" style={{ fontFamily: 'Poppins, sans-serif' }}>
{stat.number}
</div>
<div className="text-sm text-gray-400 uppercase tracking-wide" style={{ fontFamily: 'Inter, sans-serif' }}>
<div className="text-sm text-gray-600 dark:text-gray-400 uppercase tracking-wide" style={{ fontFamily: 'Inter, sans-serif' }}>
{stat.label}
</div>
</div>
Expand All @@ -202,29 +202,29 @@ function About() {
</div>

{/* SECTION 4: Platform Capabilities - bg-[#0b1220] with Contained Zone */}
<div className="bg-[#0b1220] py-20">
<div className="bg-white dark:bg-[#0b1220] py-20">
<div className="max-w-7xl mx-auto px-4 lg:px-8">
<h2 className="text-2xl font-semibold text-gray-200 mb-8 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
<h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-8 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
Platform Capabilities
</h2>

{/* Contained Platform Zone */}
<div ref={capabilitiesRef} className="bg-[#111c33] border border-[#1f2a44] rounded-2xl p-10">
<div ref={capabilitiesRef} className="bg-gray-100 dark:bg-[#111c33] border border-gray-200 dark:border-[#1f2a44] rounded-2xl p-10">
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{capabilities.map((capability, index) => (
<div
key={index}
className="capability-card bg-[#101a2f] border border-[#1f2a44] p-6 rounded-lg transition-all duration-300 hover:-translate-y-1 hover:border-blue-500/40 hover:shadow-[0_0_20px_rgba(59,130,246,0.15)]"
className="capability-card bg-white dark:bg-[#101a2f] border border-gray-200 dark:border-[#1f2a44] p-6 rounded-lg transition-all duration-300 hover:-translate-y-1 dark:hover:border-blue-500/40 hover:shadow-[0_0_20px_rgba(59,130,246,0.15)]"
Comment thread
Lalitya31 marked this conversation as resolved.
Outdated
>
<div className="flex items-start gap-4">
<div className="text-blue-400 mt-1">
{capability.icon}
</div>
<div className="flex-1">
<h3 className="text-base font-semibold text-white mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>
<h3 className="text-base font-semibold text-black dark:text-white mb-2" style={{ fontFamily: 'Inter, sans-serif' }}>
{capability.title}
</h3>
<p className="text-sm text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
{capability.text}
</p>
</div>
Expand All @@ -237,9 +237,9 @@ function About() {
</div>

{/* SECTION 5: Core Principles - bg-[#0f172a] Pure Typography */}
<div className="bg-[#0f172a] py-16">
<div className="bg-gray-50 dark:bg-[#0f172a] py-16">
<div className="max-w-7xl mx-auto px-4 lg:px-8">
<h2 className="text-2xl font-semibold text-gray-200 mb-12 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
<h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-200 mb-12 text-center" style={{ fontFamily: 'Poppins, sans-serif' }}>
Core Principles
</h2>
<div className="max-w-4xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-10 text-left">
Expand All @@ -250,10 +250,10 @@ function About() {
{ title: 'Community', desc: 'Fostering connections and supporting the communities we serve' }
].map((principle, index) => (
<div key={index}>
<h3 className="text-xl font-semibold text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
<h3 className="text-xl font-semibold text-black dark:text-white mb-3" style={{ fontFamily: 'Inter, sans-serif' }}>
{principle.title}
</h3>
<p className="text-sm text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
<p className="text-sm text-gray-600 dark:text-gray-400 leading-relaxed" style={{ fontFamily: 'Inter, sans-serif' }}>
{principle.desc}
</p>
</div>
Expand Down
Loading
Loading