Skip to content

Added Why Kshitij treasure animation and updated About section backgr… #6

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
Shubhankarsharma18 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Added Why Kshitij treasure animation and updated About section backgr… #6

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
9 changes: 9 additions & 0 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

15 changes: 14 additions & 1 deletion frontend/src/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { useState, useEffect } from 'react';
import AboutUs from './components/AboutUs';
import WhyKshitij from './components/WhyKshitij';


function App() {
const words = ['Inside', 'Within', 'Deeper', 'Godward'];
Expand Down Expand Up @@ -106,7 +108,18 @@ function App() {
</div>

{/* About Us Section with Boat Animation */}
<AboutUs />
{/* Shared Forest Background */}
<div
className="relative bg-cover bg-center bg-fixed"
style={{ backgroundImage: "url('/image.png')" }}
>
<div className="relative z-10">
<AboutUs />
<WhyKshitij />
</div>
</div>



</div>
);
Expand Down
46 changes: 24 additions & 22 deletions frontend/src/components/AboutUs.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,33 +5,37 @@ const AboutUs = () => {
const [hoveredBubble, setHoveredBubble] = useState(null);

return (
<section id="about" className="relative min-h-screen overflow-hidden pt-20">
{/* Background Image */}
<div
className="absolute inset-0 z-0 bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: "url('/image.png')",
}}
/>

{/* Bubbles Container */}
<div className="relative z-10 w-full h-screen pt-8">
<section id="about" className="relative min-h-screen overflow-hidden pt-24">

{/* Section Overlay for Readability */}
<div className="absolute inset-0 bg-black/40"></div>

<div className="relative z-10 w-full min-h-screen pt-8">

{/* Instruction Text */}
<div className="absolute top-[26%] left-[3%] max-w-xs">
<div className="bg-black/30 backdrop-blur-sm rounded-2xl p-6 border border-white/20 shadow-[0_0_40px_rgba(0,0,0,0.3)]">
<h1 className="text-5xl md:text-7xl font-black text-white tracking-tight leading-none mb-3 drop-shadow-[0_3px_12px_rgba(0,0,0,0.9)]">
About <span className="bg-gradient-to-r from-amber-300 via-emerald-300 to-amber-300 bg-clip-text text-transparent">Us</span>
About{" "}
<span className="bg-gradient-to-r from-amber-300 via-emerald-300 to-amber-300 bg-clip-text text-transparent">
Us
</span>
</h1>

<div className="h-1 w-20 bg-gradient-to-r from-amber-400 to-emerald-400 rounded-full mb-4" />

<p className="text-sm md:text-base text-white/90 font-medium leading-relaxed drop-shadow-[0_1px_4px_rgba(0,0,0,0.9)]">
Three seekers. Three sparks of purpose.
Hover over the <span className="text-amber-300 font-semibold">bubbles</span> to uncover our Mission, our Vision, and the Values that light our way.
Hover over the{" "}
<span className="text-amber-300 font-semibold">
bubbles
</span>{" "}
to uncover our Mission, our Vision, and the Values that light our way.
</p>
</div>
</div>

{/* Bubble 1 - Left Person (Mission) */}
{/* Bubble 1 - Mission */}
<div
className="absolute top-[4%] left-[35%] cursor-pointer"
onMouseEnter={() => setHoveredBubble('mission')}
Expand All @@ -40,10 +44,9 @@ const AboutUs = () => {
<img
src="/bubble.png"
alt="Mission Bubble"
className="w-10 h-10 md:w-14 md:h-14 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
className="w-14 h-14 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
/>

{/* Mission Content */}
{hoveredBubble === 'mission' && (
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-4 w-80 bg-white/95 backdrop-blur-md p-6 rounded-2xl shadow-2xl border-2 border-amber-300 animate-fade-in">
<div className="flex items-center gap-3 mb-3">
Expand All @@ -57,7 +60,7 @@ const AboutUs = () => {
)}
</div>

{/* Bubble 2 - Center Person (Vision) */}
{/* Bubble 2 - Vision */}
<div
className="absolute top-[1%] left-[55%] cursor-pointer"
onMouseEnter={() => setHoveredBubble('vision')}
Expand All @@ -66,11 +69,10 @@ const AboutUs = () => {
<img
src="/bubble.png"
alt="Vision Bubble"
className="w-16 h-16 md:w-20 md:h-20 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
className="w-20 h-20 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
style={{ animationDelay: '0.5s' }}
/>

{/* Vision Content */}
{hoveredBubble === 'vision' && (
<div className="absolute top-full left-1/2 -translate-x-1/2 mt-4 w-80 bg-white/95 backdrop-blur-md p-6 rounded-2xl shadow-2xl border-2 border-green-300 animate-fade-in">
<div className="flex items-center gap-3 mb-3">
Expand All @@ -84,7 +86,7 @@ const AboutUs = () => {
)}
</div>

{/* Bubble 3 - Right Person (Values) */}
{/* Bubble 3 - Values */}
<div
className="absolute top-[22%] right-[27%] cursor-pointer"
onMouseEnter={() => setHoveredBubble('values')}
Expand All @@ -93,11 +95,10 @@ const AboutUs = () => {
<img
src="/bubble.png"
alt="Values Bubble"
className="w-16 h-16 md:w-10 md:h-10 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
className="w-14 h-14 opacity-80 hover:opacity-100 transition-all hover:scale-110 animate-float"
style={{ animationDelay: '1s' }}
/>

{/* Values Content */}
{hoveredBubble === 'values' && (
<div className="absolute top-full right-0 mt-4 w-96 bg-white/95 backdrop-blur-md p-6 rounded-2xl shadow-2xl border-2 border-blue-300 animate-fade-in">
<div className="flex items-center gap-3 mb-4">
Expand Down Expand Up @@ -148,3 +149,4 @@ const AboutUs = () => {
};

export default AboutUs;

103 changes: 103 additions & 0 deletions frontend/src/components/whykshitij.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
import { useState } from "react";
import { Leaf, Brain, BookOpen, Users, Landmark, Sparkles } from "lucide-react";

const items = [
{ icon: Leaf, title: "Live Your Potential", desc: "Discover purpose and inner strength." },
{ icon: Brain, title: "Inner Peace", desc: "Calm your mind amid college chaos." },
{ icon: BookOpen, title: "Spiritual Knowledge", desc: "Wisdom from the Gita & Upanishads." },
{ icon: Users, title: "Community", desc: "Walk the spiritual journey together." },
{ icon: Landmark, title: "Heritage Exploration", desc: "Explore sacred Odisha sites." },
{ icon: Sparkles, title: "Divine Connection", desc: "Experience devotion and transformation." }
];

export default function WhyKshitij() {
const [open, setOpen] = useState(false);

const radius = 260; // distance of cards from center

return (
<section className="relative min-h-screen flex items-center justify-center text-white">

{/* soft overlay for readability on forest */}
<div className="absolute inset-0 bg-black/40"></div>

<div className="relative z-10 flex flex-col items-center">

{/* Title */}
<h2 className="text-5xl md:text-6xl font-bold mb-20 text-center">
Why <span className="text-yellow-400">KSHITIJ</span>
</h2>

{/* Main container */}
<div className="relative w-[720px] h-[620px] flex items-center justify-center">

{/* Cards */}
{items.map((item, index) => {

const angle = (index / items.length) * 2 * Math.PI;

const x = open ? radius * Math.cos(angle) : 0;
const y = open ? radius * Math.sin(angle) : 0;

const Icon = item.icon;

return (
<div
key={index}
className="absolute transition-all duration-700 ease-out"
style={{
transform: `translate(${x}px, ${y}px)`,
opacity: open ? 1 : 0
}}
>
<div className="w-44 p-5 rounded-xl bg-white/10 backdrop-blur-md border border-white/20 text-center shadow-xl hover:scale-105 transition">

<Icon className="mx-auto mb-2 text-yellow-300" size={30} />

<h3 className="font-semibold mb-1">{item.title}</h3>

<p className="text-sm text-white/80">{item.desc}</p>

</div>
</div>
);
})}

{/* Vintage Treasure Chest */}
<div
onClick={() => setOpen(!open)}
className="relative cursor-pointer flex flex-col items-center group"
>

{/* Chest Lid */}
<div
className={`w-56 h-20 bg-gradient-to-b from-yellow-700 to-yellow-900 border-4 border-yellow-950 rounded-t-[30px] origin-bottom transition-transform duration-700 shadow-xl ${
open ? "-rotate-45" : "rotate-0"
}`}
></div>

{/* Chest Body */}
<div className="w-56 h-36 bg-gradient-to-b from-yellow-800 to-yellow-950 border-4 border-yellow-950 rounded-b-2xl flex items-center justify-center shadow-[0_15px_50px_rgba(0,0,0,0.7)]">

<img
src="/Logo.png"
alt="Kshitij Logo"
className="w-20 h-20 drop-shadow-[0_0_15px_gold]"
/>

</div>

</div>

</div>

</div>
</section>
);
}