Skip to content

Commit e0309bd

Browse files
ajeaiexecutesajeaiexecutes
committed
feat:responsive
1 parent 38b92c4 commit e0309bd

12 files changed

Lines changed: 581 additions & 875 deletions

File tree

‎apps/web/app/brand-profile-page/page.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ interface BrandData {
4545

4646
const LoadingState = () => (
4747
<>
48-
<DashboardHeader />
48+
<DashboardHeader isPill={true} />
4949
<div className="min-h-[80vh] flex flex-col items-center justify-center gap-4 text-emerald-500 pt-20">
5050
<div className="relative">
5151
<Loader2 className="w-12 h-12 animate-spin" />
@@ -60,7 +60,7 @@ const LoadingState = () => (
6060

6161
const ErrorState = ({ message }: { message: string }) => (
6262
<>
63-
<DashboardHeader />
63+
<DashboardHeader isPill={true} />
6464
<div className="min-h-[80vh] flex flex-col items-center justify-center gap-6 p-4 pt-20 text-center">
6565
<div className="w-20 h-20 bg-rose-50 text-rose-500 rounded-3xl flex items-center justify-center shadow-sm">
6666
<AlertCircle className="w-10 h-10" />
@@ -108,7 +108,7 @@ function BrandProfileContent() {
108108

109109
return (
110110
<div className="min-h-screen bg-[#FAFAFA] font-sans selection:bg-emerald-100 selection:text-emerald-900">
111-
<DashboardHeader />
111+
<DashboardHeader isPill={true} />
112112

113113
<main className="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 space-y-8">
114114

‎apps/web/app/gig-details/page.tsx‎

Lines changed: 33 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ import {
1616
import { ReportingModal } from "@/components/shared/ReportingModal";
1717
import api from "@/lib/axios.client";
1818
import { useAuthStore } from "@/store/auth.store";
19-
import DashboardHeader from "@/components/DashboardHeader";
19+
import Navbar from "@/components/Navbar";
20+
import Footer from "@/components/Footer";
2021

2122
interface GigData {
2223
_id: string;
@@ -173,9 +174,9 @@ function GigDetailsContent() {
173174
)}
174175

175176
{/* Navbar */}
176-
<DashboardHeader />
177+
<Navbar />
177178

178-
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-12 flex-1 w-full">
179+
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 pt-28 sm:pt-36 pb-12 flex-1 w-full">
179180
{/* Breadcrumb */}
180181
<div className="flex items-center text-sm text-gray-500 mb-8 font-medium">
181182
<Link href="/" className="hover:text-gray-900">Home</Link>
@@ -213,10 +214,12 @@ function GigDetailsContent() {
213214
</div>
214215
</div>
215216

216-
{/* Header */}
217+
{/* Content Wrapper */}
217218
<div>
218-
<Link href={`/influencer-profile-page?id=${influencer?._id}`} className="flex items-center gap-4 mb-6 hover:opacity-80 transition-opacity bg-white p-4 rounded-3xl border border-slate-100 shadow-sm w-fit">
219-
<div className="relative w-16 h-16 rounded-full overflow-hidden border-2 border-emerald-100 shadow-sm bg-emerald-50 flex items-center justify-center font-bold text-emerald-600 text-xl">
219+
{/* Header & Mobile Action */}
220+
<div className="flex flex-row items-center justify-between gap-3 sm:gap-6 mb-8">
221+
<Link href={`/influencer-profile-page?id=${influencer?._id}`} className="flex items-center gap-3 sm:gap-4 hover:opacity-80 transition-opacity bg-white p-2.5 sm:p-4 rounded-2xl sm:rounded-3xl border border-slate-100 shadow-sm flex-1 min-w-0 group">
222+
<div className="relative w-12 h-12 sm:w-16 sm:h-16 rounded-full overflow-hidden border-2 border-emerald-100 shadow-sm bg-emerald-50 flex items-center justify-center font-bold text-emerald-600 text-lg sm:text-xl">
220223
{avatar ? (
221224
<>
222225
<Image
@@ -238,27 +241,45 @@ function GigDetailsContent() {
238241
(influencer?.fullName || "I").charAt(0).toUpperCase()
239242
)}
240243
</div>
241-
<div>
244+
<div className="min-w-0 flex-1">
242245
<div className="flex items-center gap-2">
243-
<h1 className="text-xl font-bold text-gray-900">{influencer?.fullName || "Unknown Creator"}</h1>
246+
<h1 className="text-lg sm:text-xl font-bold text-gray-900 truncate">{influencer?.fullName || "Unknown Creator"}</h1>
244247
{influencer?.isVerified && (
245-
<span className="bg-[#E6F6ED] text-[#0CAF60] text-xs font-bold px-2 py-0.5 rounded-full flex items-center gap-1">
248+
<span className="bg-[#E6F6ED] text-[#0CAF60] text-[10px] sm:text-xs font-bold px-2 py-0.5 rounded-full flex items-center gap-1">
246249
<CheckCircle2 className="w-3 h-3 fill-current" />
247250
Verified
248251
</span>
249252
)}
250253
</div>
251-
<div className="text-xs text-gray-500 flex items-center gap-2 mt-0.5 font-medium">
254+
<div className="text-[10px] sm:text-xs text-gray-500 flex items-center gap-2 mt-0.5 font-medium">
252255
<span>{influencer.categories.join(" & ")}</span>
253256
<span className="w-1 h-1 bg-gray-300 rounded-full"></span>
254257
<span className="flex items-center text-gray-700">
255258
<Star className="w-3.5 h-3.5 fill-yellow-400 text-yellow-400 mr-1" />
256-
<span className="font-bold">New Creator</span>
259+
<span className="font-bold">New</span>
257260
</span>
258261
</div>
259262
</div>
260263
</Link>
261264

265+
{/* Mobile/Tablet Request Button */}
266+
<div className="lg:hidden">
267+
<button
268+
onClick={() => {
269+
if (!user) {
270+
router.push(`/login?redirect=${encodeURIComponent(window.location.pathname + window.location.search)}`);
271+
return;
272+
}
273+
setIsModalOpen(true);
274+
}}
275+
disabled={!isInitialized || alreadyRequested || isRequestSuccess}
276+
className="h-12 sm:h-14 px-8 bg-emerald-500 hover:bg-emerald-600 disabled:bg-slate-200 disabled:text-slate-400 text-white rounded-2xl font-bold text-sm sm:text-base transition-all shadow-lg shadow-emerald-500/20 whitespace-nowrap"
277+
>
278+
{alreadyRequested ? "Requested" : "Request Now"}
279+
</button>
280+
</div>
281+
</div>
282+
262283
<h2 className="text-4xl font-black text-gray-900 leading-tight mb-5 pr-8">
263284
{gig.title}
264285
</h2>
@@ -438,48 +459,6 @@ function GigDetailsContent() {
438459
</div>
439460
</main>
440461

441-
{/* Footer */}
442-
<footer className="bg-[#0F172A] pt-28 pb-16 text-slate-400 mt-20">
443-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
444-
<div className="flex flex-col md:flex-row justify-between items-center gap-12 pb-20 border-b border-white/5">
445-
<div className="flex items-center gap-3 group cursor-pointer">
446-
<div className="w-10 h-10 text-white bg-[#10B981] rounded-xl flex items-center justify-center transition-all group-hover:rotate-12">
447-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6 text-white">
448-
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
449-
</svg>
450-
</div>
451-
<span className="text-2xl font-black text-white tracking-tight ">Noillin</span>
452-
</div>
453-
454-
<div className="flex gap-16 text-[13px] font-bold uppercase tracking-widest">
455-
{["About", "Support", "Privacy", "Terms"].map(l => (
456-
<a key={l} href="#" className="hover:text-emerald-500 transition-colors">{l}</a>
457-
))}
458-
</div>
459-
460-
<div className="flex items-center gap-8">
461-
{[
462-
{ label: "SECURE PAYMENTS", icon: "🔒" },
463-
{ label: "VERIFIED PROFILES", icon: "✔" }
464-
].map((badge, i) => (
465-
<div key={i} className="flex items-center gap-3 text-[10px] font-black tracking-[.2em] opacity-80 group">
466-
<span className="text-emerald-500 text-lg group-hover:scale-125 transition-transform">{badge.icon}</span>
467-
<span className="text-slate-100">{badge.label}</span>
468-
</div>
469-
))}
470-
</div>
471-
</div>
472-
473-
<div className="pt-12 flex flex-col md:flex-row justify-between items-center gap-6 text-[11px] font-bold tracking-widest opacity-30">
474-
<p>&copy; 2026 NOILLIN INC. ALL RIGHTS RESERVED.</p>
475-
<p className="flex items-center gap-2">
476-
<Zap className="w-3 h-3 fill-white" />
477-
BUILT FOR THE FUTURE OF INFLUENCE
478-
</p>
479-
</div>
480-
</div>
481-
</footer>
482-
483462
{/* Booking Modal */}
484463
{/* Booking Modal */}
485464
{isModalOpen && (
@@ -557,6 +536,7 @@ function GigDetailsContent() {
557536
entityId={gig._id}
558537
entityType="GIG"
559538
/>
539+
<Footer />
560540
</div>
561541
);
562542
}

‎apps/web/app/gig-list/page.tsx‎

Lines changed: 6 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ import Image from "next/image";
55
import { Zap, Check, ArrowRight, Calendar } from "lucide-react";
66

77
import api from "@/lib/axios.client";
8-
import DashboardHeader from "@/components/DashboardHeader";
8+
import Navbar from "@/components/Navbar";
9+
import Footer from "@/components/Footer";
910
// ─── Types ───────────────────────────────────────────────────────────────────
1011

1112
type ViewMode = "grid" | "list";
@@ -421,7 +422,7 @@ export default function ExploreGigs() {
421422
return (
422423
<div className="min-h-screen bg-[#F1F5F9] text-slate-900 font-sans selection:bg-emerald-100 selection:text-emerald-900 pt-20">
423424
{/* Navbar */}
424-
<DashboardHeader />
425+
<Navbar />
425426

426427
<div className="max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-12">
427428
{/* Header Section */}
@@ -683,47 +684,7 @@ export default function ExploreGigs() {
683684
)}
684685
</div>
685686

686-
{/* Footer */}
687-
<footer className="bg-[#0F172A] pt-28 pb-16 text-slate-400">
688-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
689-
<div className="flex flex-col md:flex-row justify-between items-center gap-12 pb-20 border-b border-white/5">
690-
<div className="flex items-center gap-3 group cursor-pointer">
691-
<div className="w-10 h-10 text-white bg-[#10B981] rounded-xl flex items-center justify-center transition-all group-hover:rotate-12">
692-
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round" className="h-6 w-6 text-white">
693-
<path d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5" />
694-
</svg>
695-
</div>
696-
<span className="text-2xl font-black text-white tracking-tight ">Noillin</span>
697-
</div>
698-
699-
<div className="flex gap-16 text-[13px] font-bold uppercase tracking-widest">
700-
{["About", "Support", "Privacy", "Terms"].map(l => (
701-
<a key={l} href="#" className="hover:text-emerald-500 transition-colors">{l}</a>
702-
))}
703-
</div>
704-
705-
<div className="flex items-center gap-8">
706-
{[
707-
{ label: "SECURE PAYMENTS", icon: "🔒" },
708-
{ label: "VERIFIED PROFILES", icon: "✔" }
709-
].map((badge, i) => (
710-
<div key={i} className="flex items-center gap-3 text-[10px] font-black tracking-[.2em] opacity-80 group">
711-
<span className="text-emerald-500 text-lg group-hover:scale-125 transition-transform">{badge.icon}</span>
712-
<span className="text-slate-100">{badge.label}</span>
713-
</div>
714-
))}
715-
</div>
716-
</div>
717-
718-
<div className="pt-12 flex flex-col md:flex-row justify-between items-center gap-6 text-[11px] font-bold tracking-widest opacity-30">
719-
<p>&copy; 2026 NOILLIN INC. ALL RIGHTS RESERVED.</p>
720-
<p className="flex items-center gap-2">
721-
<Zap className="w-3 h-3 fill-white" />
722-
BUILT FOR THE FUTURE OF INFLUENCE
723-
</p>
724-
</div>
725-
</div>
726-
</footer >
727-
</div >
687+
<Footer />
688+
</div>
728689
);
729-
}
690+
}

‎apps/web/app/influencer-profile-page/page.tsx‎

Lines changed: 7 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ import {
1818
} from 'lucide-react';
1919

2020
import api from "@/lib/axios.client";
21+
import Navbar from "@/components/Navbar";
22+
import Footer from "@/components/Footer";
2123

2224
interface GigData {
2325
_id: string;
@@ -88,41 +90,9 @@ function ProfileContent() {
8890

8991
return (
9092
<div className="min-h-screen bg-[#FDFDFD] text-slate-900 font-sans sm:px-0">
91-
{/* Navigation */}
92-
<nav className="bg-white border-b border-slate-100 sticky top-0 z-50">
93-
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-20 flex items-center justify-between">
94-
<div className="flex items-center gap-12">
95-
{/* Logo */}
96-
<div className="flex items-center gap-2 cursor-pointer">
97-
<Link href="/">
98-
<div className="flex items-center gap-2">
99-
<div className="w-8 h-8 bg-emerald-500 rounded flex items-center justify-center text-white font-bold text-xl">
100-
N
101-
</div>
102-
<span className="text-xl font-bold tracking-tight text-slate-900">Noillin</span>
103-
</div>
104-
</Link>
105-
</div>
106-
</div>
107-
108-
{/* Links */}
109-
<div className="hidden md:flex items-center gap-8 text-sm font-medium">
110-
<Link href="#" className="text-slate-500 hover:text-slate-900 transition-colors">About</Link>
111-
<Link href="/gig-list" className="text-slate-500 hover:text-slate-900 transition-colors">Influencers</Link>
112-
<div className="relative h-20 flex items-center">
113-
<Link href="#" className="text-emerald-600 font-semibold">Gigs</Link>
114-
<div className="absolute bottom-0 left-0 right-0 h-0.5 bg-emerald-600"></div>
115-
</div>
116-
<Link href="#" className="text-slate-500 hover:text-slate-900 transition-colors">Support</Link>
117-
</div>
118-
119-
120-
<div className="flex flex-row items-center gap-4 sm:gap-6 text-sm font-medium">
121-
<Link href="/login" className="text-slate-600 hover:text-slate-900 hidden sm:block">Sign In</Link>
122-
<Link href="/signup" className="px-4 py-2 sm:px-5 sm:py-2.5 text-white bg-emerald-500 hover:bg-emerald-600 rounded-lg transition-colors font-semibold">Get Started</Link>
123-
</div>
124-
</div>
125-
</nav>
93+
<Navbar />
94+
95+
<div className="pt-24 sm:pt-32">
12696

12797
<main className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 md:py-12 space-y-8">
12898

@@ -475,61 +445,8 @@ function ProfileContent() {
475445
</div>
476446

477447
</main>
478-
479-
{/* Footer */}
480-
<footer className="bg-white border-t border-slate-100 py-16 px-4 md:px-8 mt-12">
481-
<div className="max-w-7xl mx-auto">
482-
<div className="grid grid-cols-1 md:grid-cols-4 lg:grid-cols-5 gap-8 lg:gap-12 mb-16">
483-
<div className="lg:col-span-2 space-y-4">
484-
<div className="flex items-center gap-2">
485-
<div className="w-8 h-8 bg-emerald-500 rounded flex items-center justify-center text-white font-bold text-xl">
486-
N
487-
</div>
488-
<span className="text-xl font-bold tracking-tight text-slate-900">Noillin</span>
489-
</div>
490-
<p className="text-slate-500 text-sm max-w-sm leading-relaxed">
491-
The professional marketplace for influencer-brand collaborations.
492-
</p>
493-
</div>
494-
495-
<div className="space-y-4">
496-
<h4 className="font-bold text-slate-900 text-sm">Platform</h4>
497-
<ul className="space-y-3">
498-
<li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Browse Influencers</Link></li>
499-
<li><Link href="/gig-list" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Explore Gigs</Link></li>
500-
<li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">How it Works</Link></li>
501-
</ul>
502-
</div>
503-
504-
<div className="space-y-4">
505-
<h4 className="font-bold text-slate-900 text-sm">Company</h4>
506-
<ul className="space-y-3">
507-
<li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">About Us</Link></li>
508-
<li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Careers</Link></li>
509-
<li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Blog</Link></li>
510-
</ul>
511-
</div>
512-
513-
<div className="space-y-4">
514-
<h4 className="font-bold text-slate-900 text-sm">Support</h4>
515-
<ul className="space-y-3">
516-
<li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Help Center</Link></li>
517-
<li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Terms of Service</Link></li>
518-
<li><Link href="#" className="text-slate-500 hover:text-emerald-600 text-sm transition-colors">Privacy Policy</Link></li>
519-
</ul>
520-
</div>
521-
</div>
522-
523-
<div className="pt-8 border-t border-slate-100 flex flex-col md:flex-row items-center justify-between gap-4">
524-
<p className="text-slate-400 text-sm">© 2024 Noillin. All rights reserved.</p>
525-
<div className="flex gap-4">
526-
<Link href="#" className="text-slate-400 hover:text-slate-600 transition-colors"><Twitter className="w-5 h-5" /></Link>
527-
<Link href="#" className="text-slate-400 hover:text-slate-600 transition-colors"><Instagram className="w-5 h-5" /></Link>
528-
<Link href="#" className="text-slate-400 hover:text-slate-600 transition-colors"><Linkedin className="w-5 h-5" /></Link>
529-
</div>
530-
</div>
531-
</div>
532-
</footer>
448+
</div>
449+
<Footer />
533450
</div>
534451
);
535452
}

0 commit comments

Comments
 (0)