Skip to content

Commit ef8b3da

Browse files
Otaiki1Otaiki1
authored
Merge pull request #62 from ZyhvarZeGreat/main
Feat/Implemented the Campaign Profile Page
2 parents 8011586 + f59a045 commit ef8b3da

22 files changed

+6959
-6454
lines changed

‎app/campaign-profile/page.tsx‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
"use client";
2+
import Image from "next/image";
3+
import { Globe, MessageSquare, Share2, Twitter } from "lucide-react";
4+
import { Button } from "@/components/ui/button";
5+
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
6+
import { Badge } from "@/components/ui/badge";
7+
import { useTheme } from "@/components/ThemeContext";
8+
import CampaignProfileCard from "@/components/dasboard-components/CampaignProfileCard";
9+
import CampaignProfileTabs from "@/components/dasboard-components/CampaignProfileTabs";
10+
import CampaignProfileInfo from "@/components/dasboard-components/CampaignProfileInfo";
11+
12+
export default function CampaignProfile() {
13+
const { theme } = useTheme();
14+
return (
15+
<div
16+
className={`font-satoshi w-full min-h-screen flex flex-col items-center justify-start border-[#636363] px-2 ${
17+
theme === "dark" ? "bg-black text-white" : "bg-white text-black"
18+
}`}
19+
>
20+
<div className="border w-full border-gray-800 mx-4 my-6 overflow-hidden">
21+
{/* Banner Image */}
22+
<div className="w-full h-60 relative">
23+
<Image
24+
src="/campaign.jpg"
25+
alt="Profile banner"
26+
fill
27+
className="object-cover"
28+
/>
29+
</div>
30+
31+
{/* Profile Info */}
32+
<div className="px-6 pt-16 pb-6 w-full xl:max-w-[1440px] mx-auto relative">
33+
<CampaignProfileInfo />
34+
<CampaignProfileTabs />
35+
</div>
36+
</div>
37+
</div>
38+
);
39+
}

‎app/globals.css‎

Lines changed: 95 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -3,50 +3,120 @@
33
@tailwind utilities;
44

55
:root {
6-
--background-color: #0d0d0d;
7-
--text-color: #ffffff;
6+
--background-color: #0d0d0d;
7+
--text-color: #ffffff;
88
}
99

1010
[data-theme="light"] {
11-
--background-color: #ffffff;
12-
--text-color: #000000;
11+
--background-color: #ffffff;
12+
--text-color: #000000;
1313
}
1414

1515
body {
16-
background-color: var(--background-color);
17-
color: var(--text-color);
18-
font-weight: 400;
19-
transition: background-color 0.3s ease, color 0.3s ease;
16+
background-color: var(--background-color);
17+
color: var(--text-color);
18+
font-weight: 400;
19+
transition: background-color 0.3s ease, color 0.3s ease;
2020
}
2121

2222
@media (prefers-color-scheme: dark) {
23-
:root {
24-
--background: #0a0a0a;
25-
--foreground: #ededed;
26-
}
23+
:root {
24+
--background: #0a0a0a;
25+
--foreground: #ededed;
26+
}
2727
}
2828

2929
.taskProgressBar::-webkit-progress-bar {
30-
background-color: #f0f0f0;
31-
border-radius: 4px;
30+
background-color: #f0f0f0;
31+
border-radius: 4px;
3232
}
33+
3334
.taskProgressBar::-webkit-progress-value {
34-
background-color: #c4ff63;
35-
border-radius: 4px;
35+
background-color: #c4ff63;
36+
border-radius: 4px;
3637
}
38+
3739
.animate__animated.animate__zoomIn {
38-
--animate-duration: 0.3s;
40+
--animate-duration: 0.3s;
3941
}
42+
4043
.nft-pattern {
41-
background-image: url("/nft-guy.png");
42-
background-size: cover;
43-
background-repeat: no-repeat;
44-
background-position: center;
44+
background-image: url("/nft-guy.png");
45+
background-size: cover;
46+
background-repeat: no-repeat;
47+
background-position: center;
4548
}
4649

4750
.dao-pattern {
48-
background-image: url("/dao-guy.png");
49-
background-size: cover;
50-
background-repeat: no-repeat;
51-
background-position: center;
51+
background-image: url("/dao-guy.png");
52+
background-size: cover;
53+
background-repeat: no-repeat;
54+
background-position: center;
55+
}
56+
57+
@layer base {
58+
:root {
59+
--background: 0 0% 100%;
60+
--foreground: 0 0% 3.9%;
61+
--card: 0 0% 100%;
62+
--card-foreground: 0 0% 3.9%;
63+
--popover: 0 0% 100%;
64+
--popover-foreground: 0 0% 3.9%;
65+
--primary: 0 0% 9%;
66+
--primary-foreground: 0 0% 98%;
67+
--secondary: 0 0% 96.1%;
68+
--secondary-foreground: 0 0% 9%;
69+
--muted: 0 0% 96.1%;
70+
--muted-foreground: 0 0% 45.1%;
71+
--accent: 0 0% 96.1%;
72+
--accent-foreground: 0 0% 9%;
73+
--destructive: 0 84.2% 60.2%;
74+
--destructive-foreground: 0 0% 98%;
75+
--border: 0 0% 89.8%;
76+
--input: 0 0% 89.8%;
77+
--ring: 0 0% 3.9%;
78+
--chart-1: 12 76% 61%;
79+
--chart-2: 173 58% 39%;
80+
--chart-3: 197 37% 24%;
81+
--chart-4: 43 74% 66%;
82+
--chart-5: 27 87% 67%;
83+
--radius: 0.5rem;
84+
}
85+
86+
.dark {
87+
--background: 0 0% 3.9%;
88+
--foreground: 0 0% 98%;
89+
--card: 0 0% 3.9%;
90+
--card-foreground: 0 0% 98%;
91+
--popover: 0 0% 3.9%;
92+
--popover-foreground: 0 0% 98%;
93+
--primary: 0 0% 98%;
94+
--primary-foreground: 0 0% 9%;
95+
--secondary: 0 0% 14.9%;
96+
--secondary-foreground: 0 0% 98%;
97+
--muted: 0 0% 14.9%;
98+
--muted-foreground: 0 0% 63.9%;
99+
--accent: 0 0% 14.9%;
100+
--accent-foreground: 0 0% 98%;
101+
--destructive: 0 62.8% 30.6%;
102+
--destructive-foreground: 0 0% 98%;
103+
--border: 0 0% 14.9%;
104+
--input: 0 0% 14.9%;
105+
--ring: 0 0% 83.1%;
106+
--chart-1: 220 70% 50%;
107+
--chart-2: 160 60% 45%;
108+
--chart-3: 30 80% 55%;
109+
--chart-4: 280 65% 60%;
110+
--chart-5: 340 75% 55%;
111+
}
52112
}
113+
114+
@layer base {
115+
* {
116+
@apply border-border;
117+
}
118+
119+
body {
120+
@apply bg-background text-foreground;
121+
}
122+
}

‎app/onboard/page.tsx‎

Lines changed: 90 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
11
"use client";
22

33
import { Autoplay } from "swiper/modules";
4-
import { Swiper, SwiperSlide } from "swiper/react";
4+
import {
5+
Swiper,
6+
SwiperSlide,
7+
SwiperClass,
8+
SwiperRef,
9+
SwiperProps,
10+
} from "swiper/react";
511
import { useState, useRef } from "react";
612
import { HiOutlineChevronLeft, HiOutlineChevronRight } from "react-icons/hi";
713
import "swiper/css";
@@ -17,99 +23,95 @@ import MintAndProcessPage from "@/components/MintAndProcessPage";
1723
import { useTheme } from "@/components/ThemeContext";
1824

1925
export default function Onboard() {
20-
const [isAutoplay, setIsAutoplay] = useState(true); // Control autoplay
21-
const [showButtons, setShowButtons] = useState(false); // Control button visibility
22-
const [isLastSlide, setIsLastSlide] = useState(false); // Track if it's the last slide
23-
const swiperRef = useRef(null); // Reference to the Swiper instance
26+
const [isAutoplay, setIsAutoplay] = useState(true); // Control autoplay
27+
const [showButtons, setShowButtons] = useState(false); // Control button visibility
28+
const [isLastSlide, setIsLastSlide] = useState(false); // Track if it's the last slide
29+
const swiperRef = useRef<SwiperClass>(null); // Reference to the Swiper instance
2430

25-
const onBoardSlides = [
26-
<OnboardScreen1 />,
27-
<OnboardScreen2 />,
28-
<OnboardScreen3 />,
29-
<OnboardScreen4 />,
30-
<OnboardScreen5 />,
31-
<OnboardScreen6 />,
32-
<OnboardScreen7 />,
33-
<MintAndProcessPage />,
34-
<RegisterUser />,
35-
];
31+
const onBoardSlides = [
32+
<OnboardScreen1 />,
33+
<OnboardScreen2 />,
34+
<OnboardScreen3 />,
35+
<OnboardScreen4 />,
36+
<OnboardScreen5 />,
37+
<OnboardScreen6 />,
38+
<OnboardScreen7 />,
39+
<MintAndProcessPage />,
40+
<RegisterUser />,
41+
];
3642

37-
const handleSlideChange = (swiper) => {
38-
const currentIndex = swiper.activeIndex;
39-
const lastSlideIndex = onBoardSlides.length - 1;
43+
const handleSlideChange = (swiper: SwiperClass) => {
44+
const currentIndex = swiper.activeIndex;
45+
const lastSlideIndex = onBoardSlides.length - 1;
4046

41-
// Enable autoplay only for the first two slides
42-
if (currentIndex <= 1) {
43-
setIsAutoplay(true);
44-
setShowButtons(false); // Hide buttons for the first two slides
45-
} else {
46-
setIsAutoplay(false);
47-
setShowButtons(true); // Show buttons for remaining slides
48-
if (swiperRef.current) swiperRef.current.autoplay.stop(); // Stop autoplay
49-
}
47+
// Enable autoplay only for the first two slides
48+
if (currentIndex <= 1) {
49+
setIsAutoplay(true);
50+
setShowButtons(false); // Hide buttons for the first two slides
51+
} else {
52+
setIsAutoplay(false);
53+
setShowButtons(true); // Show buttons for remaining slides
54+
if (swiperRef.current) swiperRef.current?.autoplay.stop(); // Stop autoplay
55+
}
5056

51-
// Check if it's the last slide
52-
setIsLastSlide(currentIndex === lastSlideIndex);
53-
};
54-
const { theme } = useTheme();
57+
// Check if it's the last slide
58+
setIsLastSlide(currentIndex === lastSlideIndex);
59+
};
60+
const { theme } = useTheme();
5561

56-
return (
57-
<div className="min-h-screen flex justify-center items-center ">
58-
<Swiper
59-
modules={[Autoplay]}
60-
autoplay={
61-
isAutoplay
62-
? { delay: 3000, disableOnInteraction: true }
63-
: false
64-
}
65-
onSlideChange={handleSlideChange}
66-
onSwiper={(swiper) => {
67-
swiperRef.current = swiper; // Save swiper instance
68-
}}
69-
spaceBetween={50}
70-
slidesPerView={1}
71-
loop={false}
72-
className="h-screen w-full"
62+
return (
63+
<div className="min-h-screen flex justify-center items-center ">
64+
<Swiper
65+
modules={[Autoplay]}
66+
autoplay={
67+
isAutoplay ? { delay: 3000, disableOnInteraction: true } : false
68+
}
69+
onSlideChange={handleSlideChange}
70+
onSwiper={(swiper: SwiperClass) => {
71+
swiperRef.current = swiper; // Save swiper instance
72+
}}
73+
spaceBetween={50}
74+
slidesPerView={1}
75+
loop={false}
76+
className="h-screen w-full"
77+
>
78+
{onBoardSlides.map((slide, index) => (
79+
<SwiperSlide key={index}>
80+
<div
81+
className={`h-screen w-full md:flex justify-center items-center ${
82+
theme === "dark" ? "bg-black text-white" : "bg-white text-black"
83+
}`}
7384
>
74-
{onBoardSlides.map((slide, index) => (
75-
<SwiperSlide key={index}>
76-
<div
77-
className={`h-screen w-full md:flex justify-center items-center ${
78-
theme === "dark"
79-
? "bg-black text-white"
80-
: "bg-white text-black"
81-
}`}
82-
>
83-
{slide}
84-
</div>
85-
</SwiperSlide>
86-
))}
87-
</Swiper>
85+
{slide}
86+
</div>
87+
</SwiperSlide>
88+
))}
89+
</Swiper>
8890

89-
{/* Conditionally render navigation buttons */}
90-
{showButtons && (
91-
<>
92-
{/* Left navigation button (always visible except on the first two slides) */}
93-
<button
94-
onClick={() => swiperRef.current?.slidePrev()}
95-
className="absolute left-4 top-1/2 transform -translate-y-1/2 text-white bg-black bg-opacity-50 rounded-full p-3 hover:bg-opacity-75 transition z-10"
96-
aria-label="Previous slide"
97-
>
98-
<HiOutlineChevronLeft size={30} />
99-
</button>
91+
{/* Conditionally render navigation buttons */}
92+
{showButtons && (
93+
<>
94+
{/* Left navigation button (always visible except on the first two slides) */}
95+
<button
96+
onClick={() => swiperRef.current?.slidePrev()}
97+
className="absolute left-4 top-1/2 transform -translate-y-1/2 text-white bg-black bg-opacity-50 rounded-full p-3 hover:bg-opacity-75 transition z-10"
98+
aria-label="Previous slide"
99+
>
100+
<HiOutlineChevronLeft size={30} />
101+
</button>
100102

101-
{/* Right navigation button (hidden on the last slide) */}
102-
{!isLastSlide && (
103-
<button
104-
onClick={() => swiperRef.current?.slideNext()}
105-
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-white bg-black bg-opacity-50 rounded-full p-3 hover:bg-opacity-75 transition z-10"
106-
aria-label="Next slide"
107-
>
108-
<HiOutlineChevronRight size={30} />
109-
</button>
110-
)}
111-
</>
112-
)}
113-
</div>
114-
);
103+
{/* Right navigation button (hidden on the last slide) */}
104+
{!isLastSlide && (
105+
<button
106+
onClick={() => swiperRef.current?.slideNext()}
107+
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-white bg-black bg-opacity-50 rounded-full p-3 hover:bg-opacity-75 transition z-10"
108+
aria-label="Next slide"
109+
>
110+
<HiOutlineChevronRight size={30} />
111+
</button>
112+
)}
113+
</>
114+
)}
115+
</div>
116+
);
115117
}

0 commit comments

Comments
 (0)