From e0309bd8cfa1fc9b85c274f0ca3df4e43eaf3203 Mon Sep 17 00:00:00 2001 From: ajay Date: Thu, 14 May 2026 11:39:34 +0530 Subject: [PATCH 1/3] feat:responsive --- apps/web/app/brand-profile-page/page.tsx | 6 +- apps/web/app/gig-details/page.tsx | 86 +-- apps/web/app/gig-list/page.tsx | 51 +- apps/web/app/influencer-profile-page/page.tsx | 97 +-- apps/web/app/page.tsx | 559 +++++++---------- apps/web/components/AuthNavbar.tsx | 6 +- apps/web/components/DashboardHeader.tsx | 9 +- apps/web/components/Footer.tsx | 64 ++ apps/web/components/Navbar.tsx | 570 ++++++++---------- apps/web/components/SetupNavbar.tsx | 8 +- apps/web/public/hero-bg-v2.png | Bin 0 -> 712008 bytes apps/web/public/hero-bg.png | Bin 0 -> 620992 bytes 12 files changed, 581 insertions(+), 875 deletions(-) create mode 100644 apps/web/components/Footer.tsx create mode 100644 apps/web/public/hero-bg-v2.png create mode 100644 apps/web/public/hero-bg.png diff --git a/apps/web/app/brand-profile-page/page.tsx b/apps/web/app/brand-profile-page/page.tsx index 8f68685..8df0816 100644 --- a/apps/web/app/brand-profile-page/page.tsx +++ b/apps/web/app/brand-profile-page/page.tsx @@ -45,7 +45,7 @@ interface BrandData { const LoadingState = () => ( <> - +
@@ -60,7 +60,7 @@ const LoadingState = () => ( const ErrorState = ({ message }: { message: string }) => ( <> - +
@@ -108,7 +108,7 @@ function BrandProfileContent() { return (
- +
diff --git a/apps/web/app/gig-details/page.tsx b/apps/web/app/gig-details/page.tsx index d7696db..6f8c669 100644 --- a/apps/web/app/gig-details/page.tsx +++ b/apps/web/app/gig-details/page.tsx @@ -16,7 +16,8 @@ import { import { ReportingModal } from "@/components/shared/ReportingModal"; import api from "@/lib/axios.client"; import { useAuthStore } from "@/store/auth.store"; -import DashboardHeader from "@/components/DashboardHeader"; +import Navbar from "@/components/Navbar"; +import Footer from "@/components/Footer"; interface GigData { _id: string; @@ -173,9 +174,9 @@ function GigDetailsContent() { )} {/* Navbar */} - + -
+
{/* Breadcrumb */}
Home @@ -213,10 +214,12 @@ function GigDetailsContent() {
- {/* Header */} + {/* Content Wrapper */}
- -
+ {/* Header & Mobile Action */} +
+ +
{avatar ? ( <> -
+
-

{influencer?.fullName || "Unknown Creator"}

+

{influencer?.fullName || "Unknown Creator"}

{influencer?.isVerified && ( - + Verified )}
-
+
{influencer.categories.join(" & ")} - New Creator + New
+ {/* Mobile/Tablet Request Button */} +
+ +
+
+

{gig.title}

@@ -438,48 +459,6 @@ function GigDetailsContent() {
- {/* Footer */} -
-
-
-
-
- - - -
- Noillin -
- -
- {["About", "Support", "Privacy", "Terms"].map(l => ( - {l} - ))} -
- -
- {[ - { label: "SECURE PAYMENTS", icon: "🔒" }, - { label: "VERIFIED PROFILES", icon: "✔" } - ].map((badge, i) => ( -
- {badge.icon} - {badge.label} -
- ))} -
-
- -
-

© 2026 NOILLIN INC. ALL RIGHTS RESERVED.

-

- - BUILT FOR THE FUTURE OF INFLUENCE -

-
-
-
- {/* Booking Modal */} {/* Booking Modal */} {isModalOpen && ( @@ -557,6 +536,7 @@ function GigDetailsContent() { entityId={gig._id} entityType="GIG" /> +
); } diff --git a/apps/web/app/gig-list/page.tsx b/apps/web/app/gig-list/page.tsx index f0b6dd5..e46544f 100644 --- a/apps/web/app/gig-list/page.tsx +++ b/apps/web/app/gig-list/page.tsx @@ -5,7 +5,8 @@ import Image from "next/image"; import { Zap, Check, ArrowRight, Calendar } from "lucide-react"; import api from "@/lib/axios.client"; -import DashboardHeader from "@/components/DashboardHeader"; +import Navbar from "@/components/Navbar"; +import Footer from "@/components/Footer"; // ─── Types ─────────────────────────────────────────────────────────────────── type ViewMode = "grid" | "list"; @@ -421,7 +422,7 @@ export default function ExploreGigs() { return (
{/* Navbar */} - +
{/* Header Section */} @@ -683,47 +684,7 @@ export default function ExploreGigs() { )}
- {/* Footer */} -
-
-
-
-
- - - -
- Noillin -
- -
- {["About", "Support", "Privacy", "Terms"].map(l => ( - {l} - ))} -
- -
- {[ - { label: "SECURE PAYMENTS", icon: "🔒" }, - { label: "VERIFIED PROFILES", icon: "✔" } - ].map((badge, i) => ( -
- {badge.icon} - {badge.label} -
- ))} -
-
- -
-

© 2026 NOILLIN INC. ALL RIGHTS RESERVED.

-

- - BUILT FOR THE FUTURE OF INFLUENCE -

-
-
-
-
+
+
); -} \ No newline at end of file +} diff --git a/apps/web/app/influencer-profile-page/page.tsx b/apps/web/app/influencer-profile-page/page.tsx index 04dac08..4d72478 100644 --- a/apps/web/app/influencer-profile-page/page.tsx +++ b/apps/web/app/influencer-profile-page/page.tsx @@ -18,6 +18,8 @@ import { } from 'lucide-react'; import api from "@/lib/axios.client"; +import Navbar from "@/components/Navbar"; +import Footer from "@/components/Footer"; interface GigData { _id: string; @@ -88,41 +90,9 @@ function ProfileContent() { return (
- {/* Navigation */} - + + +
@@ -475,61 +445,8 @@ function ProfileContent() {
- - {/* Footer */} -
-
-
-
-
-
- N -
- Noillin -
-

- The professional marketplace for influencer-brand collaborations. -

-
- -
-

Platform

-
    -
  • Browse Influencers
    • -
  • Explore Gigs
    • -
  • How it Works
    • -
-
- -
-

Company

-
    -
  • About Us
    • -
  • Careers
    • -
  • Blog
    • -
-
- -
-

Support

-
    -
  • Help Center
    • -
  • Terms of Service
    • -
  • Privacy Policy
    • -
-
-
- -
-

© 2024 Noillin. All rights reserved.

-
- - - -
-
-
-
+
+
); } diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 719b70b..f0f802d 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -17,11 +17,15 @@ import { Search, CreditCard, Zap, - Check + Check, + Menu, + X } from "lucide-react"; import { Button } from "@/components/ui/button"; import NoillinIcon from "@/components/NoillinIcon"; +import Footer from "@/components/Footer"; +import Navbar from "@/components/Navbar"; const fadeInUp = { initial: { opacity: 0, y: 20 }, @@ -78,64 +82,73 @@ interface Testimonial { function TestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) { const [index, setIndex] = useState(0); + const [visibleCards, setVisibleCards] = useState(3); const ref = useRef(null); const isInView = useInView(ref, { once: true, amount: 0.1 }); - // Triple the testimonials for a seamless loop effect + // Update visible cards on resize + useEffect(() => { + const handleResize = () => { + setVisibleCards(window.innerWidth < 768 ? 1 : 3); + }; + handleResize(); + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, []); + + // Extended array for seamless loop const extendedTestimonials = [...testimonials, ...testimonials, ...testimonials]; + // Auto-slide logic useEffect(() => { if (testimonials.length === 0) return; const timer = setInterval(() => { - setIndex((prev) => (prev + 1) % testimonials.length); - }, 4000); + setIndex((prev) => prev + 1); + }, 5000); return () => clearInterval(timer); }, [testimonials.length]); return ( {extendedTestimonials.map((t, i) => (
-
-
- -
-
- {[1, 2, 3, 4, 5].map(s => )} -
-

- "{t.text}" -

+
+
+ {[1, 2, 3, 4, 5].map(s => )}
+ +

+ "{t.text}" +

-
-
- {t.name +
+
+ {t.name}
-

{t.name}

-

{t.role}

+

{t.name}

+

{t.role}

@@ -143,18 +156,18 @@ function TestimonialSlider({ testimonials }: { testimonials: Testimonial[] }) { ))} - {/* Glassy Shadow Fades for Premium Look */} -
-
- {/* Navigation Indicators */} -
+
{testimonials.map((_, i) => (
@@ -166,244 +179,120 @@ export default function HomePage() { const pathname = usePathname(); return (
- {/* Navbar */} - - -
- {/* Hero Section */} -
+ + + The Future of Influence + + Book Trusted Influencers.
- + Pay Securely. + - Discover, schedule, and collaborate with verified creators — all in one place. + Discover, schedule, and collaborate with verified creators — all in one seamless, high-performance ecosystem. - - - -
- {[1, 2, 3].map((i) => ( -
+ {[1, 2, 3, 4].map((i) => ( +
user
))}
-

- Join 2,000+ creators building today +

+ Join 2,000+ creators building the future

- {/* Hero Mockup */} - - {/* Background Accent */} -
- -
- {/* Header Bar */} -
- - {/* Profile Card Overlay */} -
-
- Sarah -
-
-

- Sarah Jenkins - -

-

Lifestyle & Beauty

-
- Instagram - TikTok -
-
-
- -
-
- - {/* Mini Calendar mockup with scroll animations */} - -
-

Availability

- - - -
-
- {['M', 'T', 'W', 'T', 'F', 'S', 'S'].map((d, i) => ( -
{d}
- ))} - {[1, 2, 3].map(d => ( - - {d} - - ))} - - 4 - - {[5, 6, 7].map(d => ( - - {d} - - ))} -
- - - {/* Price Details */} -
-
- Service Fee - $150.00 -
-
- Total - $150.00 -
-
- - -
- + {/* Floating Glassmorphic Elements for Modern Feel */} +
+
{/* Stats Section */} -
-
-

Trusted by brand & creators

-
+
+
+
+
+
+
+

Empowering the Future Economy

+
{[ - { label: "Influencers", value: "1,000+" }, - { label: "Processed", value: "$2M+" }, - { label: "Secure", value: "100%" } + { label: "Active Creators", value: "1,000+" }, + { label: "Brand Partnerships", value: "$2M+" }, + { label: "Success Rate", value: "99.9%" } ].map((stat, idx) => ( -

+

-

{stat.label}

+

{stat.label}

 ))}
@@ -411,46 +300,51 @@ export default function HomePage() {
{/* How it Works */} -
-
-
-

How Noillin Works

+
+
+
+ Simple Workflow +

The Path to Success

- Connect brands with elite creators in three simple, secure steps. + Experience a streamlined collaboration process designed for elite speed.

-
+
{[ { - title: "Discover", - desc: "Browse verified influencer gigs based on your niche and budget.", - icon: , - color: "bg-blue-50 text-blue-500" + title: "Discover Talent", + desc: "Browse a curated list of verified creators across every niche imaginable.", + icon: , + color: "bg-blue-500" }, { - title: "Book", - desc: "Select availability and packages that fit your campaign needs.", - icon: , - color: "bg-emerald-50 text-emerald-500" + title: "Instant Booking", + desc: "Check real-time availability and lock in your campaign with one click.", + icon: , + color: "bg-emerald-500" }, { - title: "Pay Securely", - desc: "Funds are held securely until deliverables are confirmed.", - icon: , - color: "bg-indigo-50 text-indigo-500" + title: "Secure Delivery", + desc: "Funds are released only when you're 100% satisfied with the results.", + icon: , + color: "bg-indigo-500" } ].map((step, i) => ( -
+
0{i + 1}
+
{step.icon}

{step.title}

-

{step.desc}

+

{step.desc}

))}
@@ -458,33 +352,35 @@ export default function HomePage() {
{/* Platform Features */} -
-
+
+
-

Platform Features

+ Cutting Edge +

The Noillin Edge

-
+
{[ - { title: "Availability Booking", desc: "See real-time calendar slots before you book. No more back-and-forth emails.", icon: }, - { title: "Secure Payments", desc: "Escrow-style protection ensures your money is safe until the job is done.", icon: }, - { title: "Direct Chat", desc: "Communicate directly with influencers or brands via our secure platform.", icon: }, - { title: "Transparent Pricing", desc: "No hidden fees. What you see is exactly what you pay.", icon: }, - { title: "Group Collabs", desc: "Book multiple influencers for the same campaign effortlessly.", icon: }, - { title: "Fast Turnaround", desc: "Get confirmed bookings in minutes, not days.", icon: }, + { title: "Live Booking", desc: "Real-time creator calendars integrated directly into the platform.", icon: }, + { title: "Escrow Security", desc: "Your capital is safe in our automated escrow system until delivery.", icon: }, + { title: "Unified Messaging", desc: "No more Discord or Telegram leaks. Keep everything professional.", icon: }, + { title: "Smart Contracts", desc: "Automated agreements that protect both brand and creator.", icon: }, + { title: "Mass Outreach", desc: "Invite 50+ influencers to your campaign with a single click.", icon: }, + { title: "Instant Payouts", desc: "Creators get paid the moment work is approved. Zero friction.", icon: }, ].map((feature, i) => ( -
+
{feature.icon}
-

{feature.title}

-

{feature.desc}

+

{feature.title}

+

{feature.desc}

))}
@@ -492,65 +388,66 @@ export default function HomePage() {
{/* Brand vs Creator */} -
+
{/* Brand Card */} -
-

Built for
Brands

-
    +
    +

    Scale Your
    Brand Reach

    +
      {[ - "Filter influencers by niche and platform", - "Clear deliverables and transparent pricing packages", - "Escrow-style payments protect your budget" + "Advanced creator discovery engine", + "Automated campaign management", + "Full escrow budget protection" ].map((item, i) => ( -
    • -
      - +
    • +
      +
      {item}
      • ))}
    {/* Creator Card */} -
    -

    Built for
    Creators

    -
      +
      +

      Monetize Your
      Influence

      +
        {[ - "Create single or group gigs easily", - "Manage availability like a pro", - "Get paid instantly once job is confirmed" + "Professional gig creation suite", + "Smart availability management", + "Instant, verified payouts" ].map((item, i) => ( -
      • +
      • - +
        {item}
        • ))}
      -
{/* Testimonials */} -
-
+
+
-

Community Stories

+ Success Stories +

The Community Voice

{/* Final CTA */} -
-
- {/* Animated Circles */} - - - -

- Start Collaborating Today -

-

- Join thousands of brands and creators building the future of influence together. -

-
- - - - - - +
+
+ {/* High-End Background Effects */} +
+
+
-
-
-
- {/* Footer */} -
-
-
-
-
- - - +
+

+ Ready to Join the
Future Economy? +

+

+ Unlock elite partnerships and scale your presence with the world's most advanced influencer infrastructure. +

+
+ + + + + +
- Noillin -
- -
- {["About", "Support", "Privacy", "Terms"].map(l => ( - {l} - ))} -
- -
- {[ - { label: "SECURE PAYMENTS", icon: "🔒" }, - { label: "VERIFIED PROFILES", icon: "✔" } - ].map((badge, i) => ( -
- {badge.icon} - {badge.label} -
- ))}
+ + -
-

© 2026 NOILLIN INC. ALL RIGHTS RESERVED.

-

- - BUILT FOR THE FUTURE OF INFLUENCE -

-
-
-
+
); } diff --git a/apps/web/components/AuthNavbar.tsx b/apps/web/components/AuthNavbar.tsx index 7396de2..1d74e94 100644 --- a/apps/web/components/AuthNavbar.tsx +++ b/apps/web/components/AuthNavbar.tsx @@ -6,9 +6,9 @@ import NoillinIcon from "./NoillinIcon"; export default function AuthNavbar() { return ( -