Skip to content

Commit f0dbf80

Browse files
kaneki003kaneki003
authored
Merge pull request #10 from Arnav-Nehra/bug/responsive
made page responsive
2 parents 97994d1 + 328ff6c commit f0dbf80

File tree

4 files changed

+115
-45
lines changed

4 files changed

+115
-45
lines changed

‎components/header.tsx‎

Lines changed: 63 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,16 +5,19 @@ import { usePathname } from "next/navigation";
55
import { ConnectButton } from "@rainbow-me/rainbowkit";
66
import { cn } from "@/lib/utils";
77
import Image from "next/image";
8+
import { useState } from "react";
9+
import { Menu, X, Home, Repeat2, Droplets, LayoutDashboard, Plus } from "lucide-react";
810

911
const navigation = [
10-
{ name: "Swap", href: "/swap" },
11-
{ name: "Pools", href: "/pools" },
12-
{ name: "Dashboard", href: "/dashboard" },
13-
{ name: "Create Pool", href: "/create" },
12+
{ name: "Swap", href: "/swap", icon: Repeat2 },
13+
{ name: "Pools", href: "/pools", icon: Droplets },
14+
{ name: "Dashboard", href: "/dashboard", icon: LayoutDashboard },
15+
{ name: "Create Pool", href: "/create", icon: Plus },
1416
];
1517

1618
export function Header() {
1719
const pathname = usePathname();
20+
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
1821

1922
return (
2023
<>
@@ -63,9 +66,64 @@ export function Header() {
6366

6467
{/* Right side actions */}
6568
<div className="flex items-center space-x-4">
66-
<ConnectButton accountStatus={"address"} showBalance={false} />
69+
<button
70+
onClick={() => setMobileMenuOpen(!mobileMenuOpen)}
71+
className="md:hidden p-2 rounded-lg hover:bg-accent/10 transition-colors"
72+
aria-label="Toggle menu"
73+
>
74+
{mobileMenuOpen ? (
75+
<X className="h-6 w-6" />
76+
) : (
77+
<Menu className="h-6 w-6" />
78+
)}
79+
</button>
80+
81+
<div className="hidden md:block">
82+
<ConnectButton accountStatus={"address"} showBalance={false} />
83+
</div>
6784
</div>
6885
</div>
86+
87+
{mobileMenuOpen && (
88+
<div className="md:hidden border-t border-border/40 bg-background/95 backdrop-blur">
89+
<nav className="container mx-auto px-4 py-4 space-y-1">
90+
<Link
91+
href="/"
92+
onClick={() => setMobileMenuOpen(false)}
93+
className={cn(
94+
"flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors",
95+
pathname === "/"
96+
? "bg-accent/10 text-accent"
97+
: "text-foreground hover:bg-accent/5"
98+
)}
99+
>
100+
<Home className="h-5 w-5" />
101+
<span className="text-base font-medium">Home</span>
102+
</Link>
103+
104+
{navigation.map((item) => (
105+
<Link
106+
key={item.name}
107+
href={item.href}
108+
onClick={() => setMobileMenuOpen(false)}
109+
className={cn(
110+
"flex items-center space-x-3 px-4 py-3 rounded-lg transition-colors",
111+
pathname === item.href
112+
? "bg-accent/10 text-accent"
113+
: "text-foreground hover:bg-accent/5"
114+
)}
115+
>
116+
<item.icon className="h-5 w-5" />
117+
<span className="text-base font-medium">{item.name}</span>
118+
</Link>
119+
))}
120+
121+
<div className="pt-4 border-t border-border/40">
122+
<ConnectButton accountStatus={"address"} showBalance={false} />
123+
</div>
124+
</nav>
125+
</div>
126+
)}
69127
</header>
70128
</>
71129
);

‎components/landing/hero-section.tsx‎

Lines changed: 31 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -29,34 +29,46 @@ export function HeroSection() {
2929

3030
const calculateTextPositions = () => {
3131
const centerY = window.innerHeight / 2;
32+
const centerX = window.innerWidth / 2;
33+
const isMobile = window.innerWidth < 768;
34+
const isTablet = window.innerWidth >= 768 && window.innerWidth < 1024;
35+
36+
const headingSize = isMobile ? 36 : isTablet ? 70 : 100;
37+
const subheadingSize = isMobile ? 14 : isTablet ? 22 : 28;
38+
const verticalSpacing = isMobile ? 0.6 : 1;
39+
40+
// Add padding for mobile to prevent text overflow
41+
const horizontalPadding = isMobile ? 20 : 0;
42+
const maxWidth = window.innerWidth - (horizontalPadding * 2);
43+
3244
setTextPositions([
3345
{
3446
text: "Auction-Based",
35-
size: 100,
36-
x: window.innerWidth / 2,
37-
y: centerY - 55, // Adjusted position
47+
size: headingSize,
48+
x: centerX,
49+
y: centerY - (55 * verticalSpacing),
3850
weight: "700",
3951
},
4052
{
4153
text: "Liquidity Pools",
42-
size: 100,
43-
x: window.innerWidth / 2,
44-
y: centerY + 45, // Adjusted position
54+
size: headingSize,
55+
x: centerX,
56+
y: centerY + (45 * verticalSpacing),
4557
weight: "700",
4658
},
4759
{
4860
text: "Automated Market Making",
49-
size: 28,
50-
x: window.innerWidth / 2,
51-
y: centerY + 120, // Adjusted position
61+
size: subheadingSize,
62+
x: centerX,
63+
y: centerY + (120 * verticalSpacing),
5264
font: "Plus Jakarta Sans, sans-serif",
5365
weight: "500",
5466
},
5567
{
5668
text: "with Proper Price Discovery",
57-
size: 28,
58-
x: window.innerWidth / 2,
59-
y: centerY + 160, // Adjusted position
69+
size: subheadingSize,
70+
x: centerX,
71+
y: centerY + (160 * verticalSpacing),
6072
font: "Plus Jakarta Sans, sans-serif",
6173
weight: "500",
6274
},
@@ -76,7 +88,7 @@ export function HeroSection() {
7688
return (
7789
<section className="relative min-h-screen flex items-center justify-center overflow-hidden bg-[#001233]">
7890
{/* Wave Ripple Effect */}
79-
<div className="absolute inset-0 z-10">
91+
<div className="absolute inset-0 z-10 pointer-events-none">
8092
<WaveRippleCanvas
8193
mousePosition={mousePosition}
8294
texts={textPositions}
@@ -91,7 +103,7 @@ export function HeroSection() {
91103
<div className="relative container mx-auto px-4 text-center z-30">
92104
<div className="max-w-4xl mx-auto">
93105
{/* Animated Circular Text - Positioned to encompass all content */}
94-
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2">
106+
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 pointer-events-none">
95107
<CircularText
96108
text="MAELSTROM*MAELSTROM*"
97109
onHover="speedUp"
@@ -107,18 +119,18 @@ export function HeroSection() {
107119
</div>
108120

109121
{/* Spacer for canvas text */}
110-
<div className="h-[300px]"></div>
122+
<div className="h-[200px] sm:h-[250px] md:h-[300px]"></div>
111123

112124
{/* CTA Buttons - Positioned below canvas text */}
113-
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mt-32">
125+
<div className="flex flex-col sm:flex-row gap-4 justify-center items-center mt-24 sm:mt-32 md:mt-44">
114126
<Button
115127
asChild
116-
size="lg"
117-
className="bg-accent hover:bg-accent-cyan-2 text-accent-foreground glow-primary"
128+
size="default"
129+
className="bg-accent hover:bg-accent-cyan-2 text-accent-foreground glow-primary mt-8 w-auto px-8"
118130
>
119131
<Link href="/swap">
120132
Swap
121-
<ArrowRight className="ml-2 h-5 w-5" />
133+
<ArrowRight className="ml-2 h-4 w-4" />
122134
</Link>
123135
</Button>
124136
</div>

‎components/landing/stats-section.tsx‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -35,28 +35,28 @@ export function StatsSection() {
3535
}, [])
3636

3737
return (
38-
<section className="py-16 bg-muted/10">
38+
<section className="py-12 sm:py-16 md:py-20 bg-muted/10">
3939
<div className="container mx-auto px-4">
40-
<div className="text-center mb-12">
41-
<h2 className="text-2xl md:text-3xl font-bold mb-4">
40+
<div className="text-center mb-8 sm:mb-12">
41+
<h2 className="text-xl sm:text-2xl md:text-3xl font-bold mb-3 sm:mb-4">
4242
Powering the Future of <span className="text-accent">DeFi</span>
4343
</h2>
44-
<p className="text-muted-foreground">Real-time metrics from our growing ecosystem</p>
44+
<p className="text-sm sm:text-base text-muted-foreground">Real-time metrics from our growing ecosystem</p>
4545
</div>
4646

47-
<div className="grid grid-cols-2 lg:grid-cols-4 gap-6">
47+
<div className="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4 md:gap-6">
4848
{stats.map((stat, index) => (
4949
<Card key={index} className="group text-center border-border/50 bg-card/50 backdrop-blur-sm relative overflow-hidden cursor-pointer">
5050
<RippleEffect color="rgba(124, 58, 237, 0.06)" />
51-
<CardContent className="p-6 relative">
52-
<div className="text-2xl md:text-3xl font-bold text-accent mb-2">
51+
<CardContent className="p-3 sm:p-4 md:p-6 relative">
52+
<div className="text-xl sm:text-2xl md:text-3xl font-bold text-accent mb-1 sm:mb-2">
5353
{stat.value}
54-
{stat.suffix && <span className="text-lg">{stat.suffix}</span>}
54+
{stat.suffix && <span className="text-sm sm:text-base md:text-lg">{stat.suffix}</span>}
5555
</div>
56-
<p className="text-sm text-muted-foreground">{stat.label}</p>
57-
<div className="mt-2 flex items-center justify-center">
58-
<div className="w-2 h-2 rounded-full bg-green-500 animate-pulse mr-2" />
59-
<span className="text-xs text-green-500">Live</span>
56+
<p className="text-xs sm:text-sm text-muted-foreground">{stat.label}</p>
57+
<div className="mt-1 sm:mt-2 flex items-center justify-center">
58+
<div className="w-1.5 h-1.5 sm:w-2 sm:h-2 rounded-full bg-green-500 animate-pulse mr-1 sm:mr-2" />
59+
<span className="text-[10px] sm:text-xs text-green-500">Live</span>
6060
</div>
6161
</CardContent>
6262
</Card>

‎components/landing/value-props-section.tsx‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -29,29 +29,29 @@ const valueProps = [
2929

3030
export function ValuePropsSection() {
3131
return (
32-
<section className="py-24 bg-linear-to-b from-background to-muted/20">
32+
<section className="py-12 sm:py-16 md:py-20 lg:py-24 bg-linear-to-b from-background to-muted/20">
3333
<div className="container mx-auto px-4">
34-
<div className="text-center mb-16">
35-
<h2 className="text-3xl md:text-4xl font-bold mb-4 text-balance">
34+
<div className="text-center mb-8 sm:mb-12 md:mb-16">
35+
<h2 className="text-2xl sm:text-3xl md:text-4xl font-bold mb-3 sm:mb-4 text-balance">
3636
Why Choose <span className="text-accent">Maelstrom</span>
3737
</h2>
38-
<p className="text-lg text-muted-foreground max-w-2xl mx-auto text-pretty">
38+
<p className="text-base sm:text-lg text-muted-foreground max-w-2xl mx-auto text-pretty px-4">
3939
Built for the next generation of DeFi traders who demand speed, security, and seamless user experience.
4040
</p>
4141
</div>
4242

43-
<div className="grid grid-cols-1 md:grid-cols-2 gap-6 max-w-4xl mx-auto">
43+
<div className="grid grid-cols-1 md:grid-cols-2 gap-4 sm:gap-6 max-w-4xl mx-auto">
4444
{valueProps.map((prop) => (
4545
<Card
4646
key={prop.title}
4747
className="group hover:shadow-medium transition-all duration-300 hover:-translate-y-2 border-border/50 bg-card/50 backdrop-blur-sm relative overflow-hidden cursor-pointer"
4848
>
4949
<RippleEffect color="rgba(124, 58, 237, 0.06)" />
50-
<CardContent className="p-6 text-center relative">
51-
<div className="mb-4 inline-flex items-center justify-center w-12 h-12 rounded-full bg-accent/10 group-hover:bg-accent/20 transition-colors duration-300">
52-
<prop.icon className="h-6 w-6 text-accent" />
50+
<CardContent className="p-4 sm:p-6 text-center relative">
51+
<div className="mb-3 sm:mb-4 inline-flex items-center justify-center w-10 h-10 sm:w-12 sm:h-12 rounded-full bg-accent/10 group-hover:bg-accent/20 transition-colors duration-300">
52+
<prop.icon className="h-5 w-5 sm:h-6 sm:w-6 text-accent" />
5353
</div>
54-
<h3 className="text-lg font-semibold mb-2">{prop.title}</h3>
54+
<h3 className="text-base sm:text-lg font-semibold mb-2">{prop.title}</h3>
5555
<p className="text-sm text-muted-foreground text-pretty">{prop.description}</p>
5656
</CardContent>
5757
</Card>

0 commit comments

Comments
 (0)