├── .eslintrc.json
├── .gitignore
├── README.md
├── app
    ├── compact
    │   └── page.jsx
    ├── components
    │   ├── Footer.jsx
    │   ├── Header.jsx
    │   ├── InfiniteMovingCards.jsx
    │   ├── InfoIcon.jsx
    │   ├── InvalidCardIcon.jsx
    │   ├── LinkCompact.jsx
    │   ├── LinkRounded.jsx
    │   ├── Links.jsx
    │   ├── Location.jsx
    │   ├── Message.jsx
    │   ├── MonitorMobileIcon.jsx
    │   ├── Photos.jsx
    │   ├── Services.jsx
    │   ├── ShieldSecurityIcon.jsx
    │   ├── Stars.jsx
    │   ├── Store.jsx
    │   ├── Stories.jsx
    │   ├── Story.jsx
    │   ├── StoryThumbnail.jsx
    │   ├── Testimonials.jsx
    │   └── YutubeLink.jsx
    ├── favicon.ico
    ├── globals.css
    ├── influencer
    │   └── page.jsx
    ├── layout.js
    ├── page.js
    ├── podcast
    │   └── page.jsx
    ├── rounded
    │   └── page.jsx
    ├── standard
    │   ├── StandardLink.jsx
    │   └── layout.jsx
    ├── writer
    │   └── page.jsx
    └── youtuber
    │   └── page.jsx
├── data.js
├── jsconfig.json
├── next.config.js
├── package-lock.json
├── package.json
├── postcss.config.js
├── public
    ├── font
    │   ├── Interegular.otf
    │   ├── Interlight.otf
    │   └── Intermedium.otf
    ├── images
    │   ├── cry.jpg
    │   ├── f.jpg
    │   ├── img1.jpg
    │   ├── img10.jpg
    │   ├── img11.jpg
    │   ├── img3.jpg
    │   ├── img4.jpg
    │   ├── img4.png
    │   ├── img5.jpg
    │   ├── img6.jpg
    │   ├── img7.jpg
    │   ├── img8.jpg
    │   ├── img9.jpg
    │   ├── mapp.webp
    │   ├── mappp.webp
    │   └── yellow.jpg
    ├── next.svg
    ├── vercel.svg
    └── videos
    │   └── yutube.mp4
└── tailwind.config.js


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | .yarn/install-state.gz
 8 | 
 9 | # testing
10 | /coverage
11 | 
12 | # next.js
13 | /.next/
14 | /out/
15 | 
16 | # production
17 | /build
18 | 
19 | # misc
20 | .DS_Store
21 | *.pem
22 | 
23 | # debug
24 | npm-debug.log*
25 | yarn-debug.log*
26 | yarn-error.log*
27 | 
28 | # local env files
29 | .env*.local
30 | 
31 | # vercel
32 | .vercel
33 | 
34 | # typescript
35 | *.tsbuildinfo
36 | next-env.d.ts
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | # or
10 | yarn dev
11 | # or
12 | pnpm dev
13 | # or
14 | bun dev
15 | ```
16 | 
17 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
18 | 
19 | You can start editing the page by modifying `app/page.js`. The page auto-updates as you edit the file.
20 | 
21 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
22 | 
23 | ## Learn More
24 | 
25 | To learn more about Next.js, take a look at the following resources:
26 | 
27 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
28 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
29 | 
30 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
31 | 
32 | ## Deploy on Vercel
33 | 
34 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
35 | 
36 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
37 | 


--------------------------------------------------------------------------------
/app/compact/page.jsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useRef, useState } from "react";
  4 | 
  5 | import Link from "next/link";
  6 | import { usePathname } from "next/navigation";
  7 | import { AnimatePresence, motion, useScroll } from "framer-motion";
  8 | import {
  9 |   PiArrowSquareOutThin,
 10 |   PiXCircleLight,
 11 |   PiFacebookLogoLight,
 12 |   PiLinkedinLogoLight,
 13 |   PiLinkLight,
 14 |   PiGlobe,
 15 | } from "react-icons/pi";
 16 | 
 17 | import { FcCheckmark } from "react-icons/fc";
 18 | import { FaAngleRight, FaTwitter } from "react-icons/fa";
 19 | import { RiVerifiedBadgeFill } from "react-icons/ri";
 20 | import { TbBrandYoutubeFilled, TbCopy } from "react-icons/tb";
 21 | // import Links from "./Links";
 22 | import { BsTwitterX, BsThreads, BsWhatsapp, BsMessenger } from "react-icons/bs";
 23 | import { LiaFlagUsaSolid } from "react-icons/lia";
 24 | 
 25 | import Stories from "@/app/components/Stories";
 26 | // import stories from "../../data";
 27 | import Stars from "@/app/components/Stars";
 28 | import Location from "@/app/components/Location";
 29 | import Services from "@/app/components/Services";
 30 | import Store from "@/app/components/Store";
 31 | import Message from "@/app/components/Message";
 32 | import Links from "../components/Links";
 33 | 
 34 | import { Accordion, AccordionItem } from "@nextui-org/react";
 35 | 
 36 | const inviteUrl = `hey@josephhjamess46@gmail.com`;
 37 | 
 38 | import { MonitorMobileIcon } from "../components/MonitorMobileIcon";
 39 | import { ShieldSecurityIcon } from "../components/ShieldSecurityIcon";
 40 | import { InfoIcon } from "../components/InfoIcon";
 41 | import { InvalidCardIcon } from "../components/InvalidCardIcon";
 42 | import Testimonials from "../components/Testimonials";
 43 | import Photos from "../components/Photos";
 44 | import Footer from "../components/Footer";
 45 | import LinkCompact from "@/app/components/LinkCompact";
 46 | 
 47 | import YouTube from "react-youtube";
 48 | import Image from "next/image";
 49 | 
 50 | function Compact() {
 51 |   const [copied, setCopied] = useState(false);
 52 |   const [open, setOpen] = useState(false);
 53 |   const [dialog, setDialog] = useState(false);
 54 | 
 55 |   const ref = useRef(null);
 56 | 
 57 |   const path = usePathname();
 58 | 
 59 |   const itemClasses = {
 60 |     base: "py-0 w-full",
 61 |     title: "font-normal text-medium",
 62 |     trigger:
 63 |       "px-2 py-0 data-[hover=true]:bg-default-100 rounded-lg h-14 flex items-center",
 64 |     indicator: "text-medium",
 65 |     content: "text-small px-2",
 66 |   };
 67 | 
 68 |   const options = {
 69 |     playerVars: {
 70 |       autoplay: 1,
 71 |       controls: 1,
 72 |     },
 73 |   };
 74 | 
 75 |   const onReady = (e) => {
 76 |     e.target.pauseVideo();
 77 |   };
 78 | 
 79 |   const defaultContent =
 80 |     "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.";
 81 | 
 82 |   useScroll({
 83 |     target: ref,
 84 |     offset: ["0 1", "1.33 1"],
 85 |   });
 86 | 
 87 |   const onCopy = () => {
 88 |     navigator.clipboard.writeText(inviteUrl);
 89 |     setCopied(true);
 90 | 
 91 |     setTimeout(() => {
 92 |       setCopied(false);
 93 |     }, 1000);
 94 |   };
 95 | 
 96 |   const links = [
 97 |     {
 98 |       iconFirst: <PiFacebookLogoLight className="text-2xl" />,
 99 |       name: "Share on Facebook",
100 | 
101 |       lastIcon: <FaAngleRight />,
102 |     },
103 |     {
104 |       iconFirst: <PiLinkedinLogoLight className="text-2xl" />,
105 |       name: "Share on LinkedIn",
106 |       lastIcon: <FaAngleRight />,
107 |     },
108 |     {
109 |       iconFirst: <FaTwitter className="text-2xl" />,
110 |       name: "Share on X",
111 |       lastIcon: <FaAngleRight />,
112 |     },
113 |     {
114 |       iconFirst: <BsThreads className="text-2xl" />,
115 |       name: "Share on Threads",
116 |       lastIcon: <FaAngleRight />,
117 |     },
118 |     {
119 |       iconFirst: <BsWhatsapp className="text-2xl" />,
120 |       name: "Share on Whatsapp",
121 |       lastIcon: <FaAngleRight />,
122 |     },
123 |     {
124 |       iconFirst: <BsMessenger className="text-2xl" />,
125 |       name: "Share on Messanger",
126 |       lastIcon: <FaAngleRight />,
127 |     },
128 |     {
129 |       iconFirst: <PiLinkLight className="text-2xl" />,
130 |       name: "hey@josephhjamess46@gmail.com",
131 |       stri: "Copy",
132 |       lastIcon: <FaAngleRight />,
133 |     },
134 |   ];
135 | 
136 |   // let copiedd = "hey@josephhjamess46@gmail.com";
137 | 
138 |   // console.log(links.at(-1).stri);
139 | 
140 |   return (
141 |     <>
142 |       {path === "/compact" && ""}
143 | 
144 |       <div className=" mt-20  w-full flex justify-center z-10 relative -top-9">
145 |         <div className="absolute  p-1 rounded-full bg-[#111111]">
146 |           <Image
147 |             width={800}
148 |             height={800}
149 |             className="w-16 h-16 rounded-full object-cover "
150 |             src="/images/img4.png"
151 |             alt=""
152 |           />
153 |         </div>
154 |       </div>
155 | 
156 |       <div className="bg-[#111111] h-screen p-3">
157 |         <div className="h-screen max-w-lg mx-auto bg-[#111111] pt-14">
158 |           <div>
159 |             <div className="text-center">
160 |               <h3 className="font-Intermedium text-white text-2xl flex justify-center items-center gap-x-2">
161 |                 Paul wyete
162 |                 <RiVerifiedBadgeFill className="text-[#B5924F] text-xl" />
163 |               </h3>
164 |               <div className="mt-3 text-neutral-500 flex justify-center gap-x-2 items-center font-Interegular">
165 |                 <p>Est. 1699</p>
166 |                 <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
167 |                 <p>United Kingdom, Europe</p>
168 |                 <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
169 |                 <p>He/Him</p>
170 |               </div>
171 |             </div>
172 |             <div>
173 |               <p className="font-Intermedium text-neutral-500 text-center my-3">
174 |                 Paul wyete is a skateboarder, software designer and content
175 |                 creator based in England.
176 |               </p>
177 | 
178 |               <div className="flex justify-center items-center">
179 |                 <div className="flex items-center gap-x-2   cursor-pointer hover:bg-neutral-900 transition-all ease-in duration-100 p-1 px-2 rounded-xl w-fit text-center">
180 |                   <PiGlobe className=" text-xl text-neutral-500" />
181 |                   <p className="text-white font-Intermedium"> Paulwyete.com</p>
182 |                 </div>
183 |               </div>
184 |             </div>
185 |             <div className="mt-5">
186 |               {path === "/compact" && <LinkCompact />}
187 |               {/* <Links /> */}
188 |             </div>
189 |             <div>
190 |               <div className="bg-[#161616] gap-x-6 p-2.5 rounded-xl mt-8 flex justify-between items-center hover:bg-neutral-800 duration-150 ease-out cursor-pointer ">
191 |                 <Image
192 |                   width={800}
193 |                   height={800}
194 |                   className="w-10 h-9 rounded-lg object-cover"
195 |                   src="/images/f.jpg"
196 |                   alt=""
197 |                 />
198 |                 <div className="flex-1">
199 |                   <h4 className="font-Interegular text-white text-sm text-center">
200 |                     Ultra
201 |                   </h4>
202 |                 </div>
203 | 
204 |                 <button className="text-white flex items-center gap-x-2 h-fit bg-neutral-800 p-2 rounded-lg">
205 |                   <PiArrowSquareOutThin />
206 |                 </button>
207 |               </div>
208 | 
209 |               <div className="bg-[#161616] gap-x-6 p-2.5 rounded-xl mt-2 flex justify-between items-center hover:bg-neutral-800 duration-150 ease-out cursor-pointer">
210 |                 <Image
211 |                   width={800}
212 |                   height={800}
213 |                   className="w-10 h-9 rounded-lg object-cover"
214 |                   src="/images/cry.jpg"
215 |                   alt=""
216 |                 />
217 |                 <div className="flex-1">
218 |                   <h4 className="font-Interegular text-white text-sm text-center ">
219 |                     Graino Gradients
220 |                   </h4>
221 |                 </div>
222 | 
223 |                 <button className="text-white flex items-center gap-x-2 h-fit bg-neutral-800 p-2 rounded-lg">
224 |                   <PiArrowSquareOutThin />
225 |                 </button>
226 |               </div>
227 |               <div className="bg-[#161616] gap-x-6 p-2.5 rounded-xl mt-2 flex justify-between items-center hover:bg-neutral-800 duration-150 ease-out cursor-pointer">
228 |                 <Image
229 |                   width={800}
230 |                   height={800}
231 |                   className="w-10 h-9 rounded-lg object-cover"
232 |                   src="/images/yellow.jpg"
233 |                   alt=""
234 |                 />
235 |                 <div className="flex-1">
236 |                   <h4 className="font-Interegular text-white text-sm text-center ">
237 |                     AR & Design
238 |                   </h4>
239 |                 </div>
240 | 
241 |                 <button className="text-white flex items-center gap-x-2 h-fit bg-neutral-800 p-2 rounded-lg">
242 |                   <PiArrowSquareOutThin />
243 |                 </button>
244 |               </div>
245 |             </div>
246 |             <Accordion
247 |               showDivider={false}
248 |               className=" flex flex-col mt-2  w-full "
249 |               variant="shadow"
250 |               itemClasses={itemClasses}
251 |               motionProps={{
252 |                 variants: {
253 |                   enter: {
254 |                     y: 0,
255 |                     opacity: 1,
256 |                     height: "auto",
257 |                     transition: {
258 |                       height: {
259 |                         type: "spring",
260 |                         stiffness: 500,
261 |                         damping: 30,
262 |                         duration: 1,
263 |                       },
264 |                       opacity: {
265 |                         easings: "ease",
266 |                         duration: 1,
267 |                       },
268 |                     },
269 |                   },
270 |                   exit: {
271 |                     y: -10,
272 |                     opacity: 0,
273 |                     height: 0,
274 |                     transition: {
275 |                       height: {
276 |                         easings: "ease",
277 |                         duration: 0.25,
278 |                       },
279 |                       opacity: {
280 |                         easings: "ease",
281 |                         duration: 0.3,
282 |                       },
283 |                     },
284 |                   },
285 |                 },
286 |               }}
287 |             >
288 |               <AccordionItem
289 |                 key="1"
290 |                 aria-label="Connected devices"
291 |                 className="text-white  bg-[#161616]  rounded-xl px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
292 |                 startContent={<MonitorMobileIcon className="text-white" />}
293 |                 title="Latest Post"
294 |               >
295 |                 <div className=" p-3 rounded-2xl  px-0">
296 |                   <div className="flex gap-x-4">
297 |                     <Image
298 |                       width={800}
299 |                       height={800}
300 |                       className="w-11 h-11 rounded-full"
301 |                       src="/images/img1.jpg"
302 |                       alt=""
303 |                     />
304 | 
305 |                     <div>
306 |                       <div className="flex items-center gap-x-2 ">
307 |                         <p className="font-Intermedium text-base text-white">
308 |                           JoScript Joe
309 |                         </p>
310 |                         <RiVerifiedBadgeFill className="text-[#26a8ff] text-xl" />
311 |                       </div>
312 | 
313 |                       <div className="flex gap-x-2 items-center font-Interegular">
314 |                         <span className="text-neutral-400">@joe</span>
315 |                         <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
316 |                         <button className="text-blue-600 font-Intermedium text-sm">
317 |                           Follow
318 |                         </button>
319 |                       </div>
320 |                     </div>
321 |                   </div>
322 |                   <div className="">
323 |                     <h3 className="text-base text-white my-3">
324 |                       Propting in AI = The new writing
325 |                     </h3>
326 |                     <div className="flex items-center gap-x-2 font-Intermedium text-neutral-400 text-sm">
327 |                       <p className="">10:39 PM </p>
328 |                       <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
329 |                       <p>Jul 23, 2023</p>
330 |                     </div>
331 |                   </div>
332 |                 </div>
333 |               </AccordionItem>
334 | 
335 |               <AccordionItem
336 |                 key="2"
337 |                 aria-label="Apps Permissions"
338 |                 startContent={<ShieldSecurityIcon />}
339 |                 className="text-white  bg-[#161616]  rounded-xl mt-2 px-3  hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
340 |                 title="Latest Video"
341 |               >
342 |                 <YouTube
343 |                   videoId="p69xC3CW7WQ"
344 |                   options={options}
345 |                   onReady={onReady}
346 |                   id="video"
347 |                   iframeClassName={"w-[500px] h-[250px]"}
348 |                 />
349 |               </AccordionItem>
350 |               <AccordionItem
351 |                 key="3"
352 |                 aria-label="Pending tasks"
353 |                 className="text-white bg-[#161616]  rounded-xl mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
354 |                 startContent={<InfoIcon className="text-warning" />}
355 |                 title="Latest Photos"
356 |               >
357 |                 <Photos />
358 |               </AccordionItem>
359 |               <AccordionItem
360 |                 key="4"
361 |                 aria-label="Card expired"
362 |                 className="text-white  bg-[#161616]  rounded-xl mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
363 |                 startContent={<InvalidCardIcon className="text-danger" />}
364 |                 subtitle="Store"
365 |               >
366 |                 <Store />
367 |               </AccordionItem>
368 |               <AccordionItem
369 |                 key="5"
370 |                 aria-label="Card expired"
371 |                 className="text-white  bg-[#161616]  rounded-xl mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
372 |                 startContent={<InvalidCardIcon className="text-danger" />}
373 |                 subtitle="Latest played"
374 |               >
375 |                 {/* <Store /> */}
376 |                 {/* Music */}
377 |               </AccordionItem>
378 |               <AccordionItem
379 |                 key="6"
380 |                 aria-label="Services"
381 |                 className="text-white  bg-[#161616]  rounded-xl mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
382 |                 startContent={<InvalidCardIcon className="text-danger" />}
383 |                 subtitle="Services"
384 |               >
385 |                 <Services />
386 |               </AccordionItem>
387 |               <AccordionItem
388 |                 key="7"
389 |                 aria-label="Card expired"
390 |                 className="text-white  bg-[#161616]  rounded-xl mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
391 |                 startContent={<InvalidCardIcon className="text-danger" />}
392 |                 subtitle="Testimonials"
393 |               >
394 |                 <Testimonials />
395 |               </AccordionItem>
396 |               <AccordionItem
397 |                 key="8"
398 |                 aria-label="Card expired"
399 |                 className="text-white  bg-[#161616]  rounded-xl mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
400 |                 startContent={<InvalidCardIcon className="text-danger" />}
401 |                 subtitle="Where I'm based"
402 |               >
403 |                 <Location />
404 |               </AccordionItem>
405 |               <AccordionItem
406 |                 key="9"
407 |                 aria-label="Card expired"
408 |                 className="text-white  bg-[#161616]  rounded-xl mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
409 |                 startContent={<InvalidCardIcon className="text-danger" />}
410 |                 subtitle="Leave a message"
411 |               >
412 |                 <Message />
413 |               </AccordionItem>
414 |             </Accordion>
415 |             <Footer />;
416 |           </div>
417 |         </div>
418 |       </div>
419 | 
420 |       <motion.div
421 |         initial={{
422 |           display: !open ? "none" : "block",
423 |         }}
424 |         animate={{
425 |           display: open ? "flex" : "none",
426 |           transition: { duration: !open ? 1 : 0 },
427 |         }}
428 |         transition={{ duration: 0.8 }}
429 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-10 overscroll-y-none right-0 left-0 h-full"
430 |       >
431 |         <div className="max-w-md  bg-[#161616] py-3 px-3 rounded-xl">
432 |           <div className="flex justify-between items-center text-white">
433 |             <p className="text-xl font-Intermedium">Share this profile</p>
434 | 
435 |             <div className="cursor-pointer" onClick={() => setOpen(false)}>
436 |               <PiXCircleLight className="text-2xl text-neutral-300" />
437 |             </div>
438 |           </div>
439 | 
440 |           <div className="mt-3">
441 |             {links.map((link, indx) => (
442 |               <div
443 |                 key={indx}
444 |                 className={`flex items-center justify-between  text-neutral-300 hover:bg-neutral-800 duration-300 ease-in-out transition-all p-2 mt-1 rounded-xl cursor-pointer ${
445 |                   indx === links.length - 1 &&
446 |                   "bg-neutral-950 hover:bg-neutral-950"
447 |                 }`}
448 |               >
449 |                 <div className="flex items-center gap-x-2 ">
450 |                   {link.iconFirst}
451 |                   <p
452 |                     key={indx}
453 |                     className={` font-Intermedium ${
454 |                       indx === links.length - 1 ? "text-base " : "text-lg"
455 |                     }  `}
456 |                   >
457 |                     {link.name}
458 |                   </p>
459 |                 </div>
460 |                 {indx === links.length - 1 ? (
461 |                   <span
462 |                     onClick={onCopy}
463 |                     className="flex items-center bg-neutral-300  p-1 rounded-lg px-1 gap-x-1 font-Intermedium text-neutral-600 cursor-pointer "
464 |                   >
465 |                     {copied ? "Copied" : link.stri}
466 | 
467 |                     <AnimatePresence>
468 |                       {copied ? (
469 |                         <motion.span
470 |                           initial={{ scale: 1 }}
471 |                           animate={{ scale: 0.8 }}
472 |                           exit={{ scale: 1 }}
473 |                           transition={{
474 |                             type: "spring",
475 |                             stiffness: 200,
476 |                             damping: 100,
477 |                           }}
478 |                         >
479 |                           <FcCheckmark className="w-4 h-4" />
480 |                         </motion.span>
481 |                       ) : (
482 |                         <motion.span
483 |                           initial={{ scale: 0.8 }}
484 |                           animate={{ scale: 1 }}
485 |                           exit={{ scale: 0.8 }}
486 |                           transition={{
487 |                             type: "spring",
488 |                             stiffness: 200,
489 |                             damping: 10,
490 |                           }}
491 |                         >
492 |                           <TbCopy className="w-4 h-4" />
493 |                         </motion.span>
494 |                       )}
495 |                     </AnimatePresence>
496 |                   </span>
497 |                 ) : (
498 |                   link.lastIcon
499 |                 )}
500 |               </div>
501 |             ))}
502 |           </div>
503 |         </div>
504 |       </motion.div>
505 |       <motion.div
506 |         initial={{
507 |           display: !dialog ? "none" : "block",
508 |         }}
509 |         animate={{
510 |           display: dialog ? "flex" : "none",
511 |           transition: { duration: !dialog ? 1 : 0 },
512 |         }}
513 |         transition={{ duration: 0.8 }}
514 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-10 overscroll-y-none right-0 left-0 h-full"
515 |       >
516 |         <div className="max-w-md  bg-[#161616] py-3 px-3 rounded-xl">
517 |           <div className="flex justify-center relative ">
518 |             <div
519 |               className="cursor-pointer absolute right-2 top-2 "
520 |               onClick={() => setDialog(false)}
521 |             >
522 |               <PiXCircleLight className="text-2xl text-neutral-300" />
523 |             </div>
524 |             <Image
525 |               width={800}
526 |               height={800}
527 |               className="w-14 h-14 rounded-full object-cover "
528 |               src="/images/f.jpg"
529 |               alt=""
530 |             />
531 |           </div>
532 |           <p className="text-neutral-300 text-center font-Interegular mt-3">
533 |             Subscribe to JoScript
534 |           </p>
535 |           <p className="text-center font-Intermedium text-neutral-600 my-1">
536 |             Stay up to date with everything important
537 |           </p>
538 | 
539 |           <form action="">
540 |             <input
541 |               className="bg-neutral-800 rounded-lg p-2 w-full placeholder:text-neutral-600 mt-2 focus:ring-2 ring-neutral-500 outline-none text-neutral-400 font-Intermedium "
542 |               type="text"
543 |               placeholder="Your email"
544 |               name=""
545 |               id=""
546 |             />
547 |             <button className="bg-neutral-800 p-2 rounded-lg mt-2 w-full text-neutral-200 font-Intermedium">
548 |               Subscribe
549 |             </button>
550 |           </form>
551 |         </div>
552 |       </motion.div>
553 |     </>
554 |   );
555 | }
556 | 
557 | export default Compact;
558 | 


--------------------------------------------------------------------------------
/app/components/Footer.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | function Footer() {
 4 |   return (
 5 |     <div>
 6 |       <div className="flex justify-center flex-col items-center  w-full p-3 mt-6 ">
 7 |         <div className="text-neutral-500">
 8 |           <span>© {new Date().getFullYear()}</span>
 9 |           <span>Portfolio by @Joscript</span>
10 |         </div>
11 |         <div className="flex items-center gap-x-4 mt-3 text-white">
12 |           <p className="hover:text-neutral-700 duration-200 ease-in transition-all cursor-pointer">
13 |             Purchase Courses
14 |           </p>
15 |           <span className="w-1 h-1 rounded-full bg-white" />
16 |           <p className="hover:text-neutral-700 duration-200 ease-in transition-all cursor-pointer">
17 |             Become a Team
18 |           </p>
19 |         </div>
20 |       </div>
21 |     </div>
22 |   );
23 | }
24 | 
25 | export default Footer;
26 | 


--------------------------------------------------------------------------------
/app/components/InfiniteMovingCards.jsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Image from "next/image";
  4 | import React, { useEffect, useState } from "react";
  5 | 
  6 | import { twMerge } from "tailwind-merge";
  7 | 
  8 | export const InfiniteMovingCardsPreview = () => {
  9 |   return (
 10 |     <div className="h-screen  flex flex-col antialiased  bg-slate-900 items-center justify-center relative overflow-hidden">
 11 |       <InfiniteMovingCards direction="left" speed="normal" />
 12 |     </div>
 13 |   );
 14 | };
 15 | 
 16 | export const InfiniteMovingCards = ({
 17 |   direction = "left",
 18 |   speed = "normal",
 19 |   pauseOnHover = true,
 20 | }) => {
 21 |   // const testimonials = [
 22 |   //   {
 23 |   //     quote:
 24 |   //       "It was the best of times, it was the worst of times, it was the age of wisdom, it was the age of foolishness, it was the epoch of belief, it was the epoch of incredulity, it was the season of Light, it was the season of Darkness, it was the spring of hope, it was the winter of despair.",
 25 |   //     name: "Charles Dickens",
 26 |   //     title: "A Tale of Two Cities",
 27 |   //   },
 28 |   //   {
 29 |   //     quote:
 30 |   //       "To be, or not to be, that is the question: Whether 'tis nobler in the mind to suffer The slings and arrows of outrageous fortune, Or to take Arms against a Sea of troubles, And by opposing end them: to die, to sleep.",
 31 |   //     name: "William Shakespeare",
 32 |   //     title: "Hamlet",
 33 |   //   },
 34 |   //   {
 35 |   //     quote: "All that we see or seem is but a dream within a dream.",
 36 |   //     name: "Edgar Allan Poe",
 37 |   //     title: "A Dream Within a Dream",
 38 |   //   },
 39 |   //   {
 40 |   //     quote:
 41 |   //       "It is a truth universally acknowledged, that a single man in possession of a good fortune, must be in want of a wife.",
 42 |   //     name: "Jane Austen",
 43 |   //     title: "Pride and Prejudice",
 44 |   //   },
 45 |   //   {
 46 |   //     quote:
 47 |   //       "Call me Ishmael. Some years ago—never mind how long precisely—having little or no money in my purse, and nothing particular to interest me on shore, I thought I would sail about a little and see the watery part of the world.",
 48 |   //     name: "Herman Melville",
 49 |   //     title: "Moby-Dick",
 50 |   //   },
 51 |   // ];
 52 |   const testimonials = [
 53 |     "/images/img1.jpg",
 54 |     "/images/img3.jpg",
 55 |     "/images/img4.jpg",
 56 |     "/images/img5.jpg",
 57 |     "/images/img6.jpg",
 58 |     "/images/img7.jpg",
 59 |     "/images/img8.jpg",
 60 |     "/images/img9.jpg",
 61 |     "/images/img10.jpg",
 62 |   ];
 63 | 
 64 |   const containerRef = React.useRef(null);
 65 |   const scrollerRef = React.useRef(null);
 66 | 
 67 |   useEffect(() => {
 68 |     addAnimation();
 69 |   }, [addAnimation]);
 70 | 
 71 |   const [start, setStart] = useState(false);
 72 | 
 73 |   function addAnimation() {
 74 |     if (containerRef.current && scrollerRef.current) {
 75 |       const scrollerContent = Array.from(scrollerRef.current.children);
 76 | 
 77 |       scrollerContent.forEach((item) => {
 78 |         const duplicatedItem = item.cloneNode(true);
 79 |         if (scrollerRef.current) {
 80 |           scrollerRef.current.appendChild(duplicatedItem);
 81 |         }
 82 |       });
 83 | 
 84 |       getDirection();
 85 |       getSpeed();
 86 |       setStart(true);
 87 |     }
 88 |   }
 89 |   const getDirection = () => {
 90 |     if (containerRef.current) {
 91 |       if (direction === "left") {
 92 |         containerRef.current.style.setProperty(
 93 |           "--animation-direction",
 94 |           "forwards"
 95 |         );
 96 |       } else {
 97 |         containerRef.current.style.setProperty(
 98 |           "--animation-direction",
 99 |           "reverse"
100 |         );
101 |       }
102 |     }
103 |   };
104 |   const getSpeed = () => {
105 |     if (containerRef.current) {
106 |       if (speed === "fast") {
107 |         containerRef.current.style.setProperty("--animation-duration", "20s");
108 |       } else if ((speed = "normal")) {
109 |         containerRef.current.style.setProperty("--animation-duration", "45s");
110 |       } else {
111 |         containerRef.current.style.setProperty("--animation-duration", "80s");
112 |       }
113 |     }
114 |   };
115 |   return (
116 |     <div
117 |       ref={containerRef}
118 |       className={twMerge(
119 |         "scroller relative z-10 group max-w-7xl overflow-hidden  [mask-image:linear-gradient(to_right,transparent,white_20%,white_80%,transparent)]"
120 |       )}
121 |     >
122 |       <ul
123 |         ref={scrollerRef}
124 |         className={twMerge(
125 |           " flex min-w-full shrink-0 gap-4 py-4 w-max items-center flex-nowrap",
126 |           start && "animate-scroll ",
127 |           pauseOnHover && "group-hover:[animation-play-state:paused]"
128 |         )}
129 |       >
130 |         {testimonials.map((testimonial, idx) => (
131 |           <li
132 |             className="  relative rounded-2xl  flex-shrink-0 border-slate-700   "
133 |             key={testimonial}
134 |           >
135 |             <Image
136 |               width={800}
137 |               height={800}
138 |               className="w-12 h-12 rounded-full object-cover"
139 |               src={testimonial}
140 |               alt=""
141 |             />
142 |           </li>
143 |         ))}
144 |       </ul>
145 |     </div>
146 |   );
147 | };
148 | 


--------------------------------------------------------------------------------
/app/components/InfoIcon.jsx:
--------------------------------------------------------------------------------
 1 | export const InfoIcon = (props) => (
 2 |   <svg
 3 |     aria-hidden="true"
 4 |     fill="none"
 5 |     focusable="false"
 6 |     height="24"
 7 |     role="presentation"
 8 |     viewBox="0 0 24 24"
 9 |     width="24"
10 |     {...props}
11 |   >
12 |     <path
13 |       d="M12 22C17.5 22 22 17.5 22 12C22 6.5 17.5 2 12 2C6.5 2 2 6.5 2 12C2 17.5 6.5 22 12 22Z"
14 |       stroke="currentColor"
15 |       strokeLinecap="round"
16 |       strokeLinejoin="round"
17 |       strokeWidth="1.5"
18 |     />
19 |     <path
20 |       d="M12 8V13"
21 |       stroke="currentColor"
22 |       strokeLinecap="round"
23 |       strokeLinejoin="round"
24 |       strokeWidth="1.5"
25 |     />
26 |     <path
27 |       d="M11.9945 16H12.0035"
28 |       stroke="currentColor"
29 |       strokeLinecap="round"
30 |       strokeLinejoin="round"
31 |       strokeWidth="2"
32 |     />
33 |   </svg>
34 | );
35 | 


--------------------------------------------------------------------------------
/app/components/InvalidCardIcon.jsx:
--------------------------------------------------------------------------------
 1 | export const InvalidCardIcon = (props) => (
 2 |   <svg
 3 |     aria-hidden="true"
 4 |     fill="none"
 5 |     focusable="false"
 6 |     height="24"
 7 |     role="presentation"
 8 |     viewBox="0 0 24 24"
 9 |     width="24"
10 |     {...props}
11 |   >
12 |     <path
13 |       d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
14 |       stroke="currentColor"
15 |       strokeLinecap="round"
16 |       strokeLinejoin="round"
17 |       strokeWidth="1.5"
18 |     />
19 |     <path
20 |       d="M10 21.4699V16.95"
21 |       stroke="currentColor"
22 |       strokeLinecap="round"
23 |       strokeLinejoin="round"
24 |       strokeWidth="1.5"
25 |     />
26 |     <path
27 |       d="M2 12.95H10"
28 |       stroke="currentColor"
29 |       strokeLinecap="round"
30 |       strokeLinejoin="round"
31 |       strokeWidth="1.5"
32 |     />
33 |     <path
34 |       d="M6.73999 21.47H9.99999"
35 |       stroke="currentColor"
36 |       strokeLinecap="round"
37 |       strokeLinejoin="round"
38 |       strokeWidth="1.5"
39 |     />
40 |     <path
41 |       d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
42 |       stroke="currentColor"
43 |       strokeLinecap="round"
44 |       strokeLinejoin="round"
45 |       strokeWidth="1.5"
46 |     />
47 |     <path
48 |       d="M17.2445 18.25H17.2535"
49 |       stroke="currentColor"
50 |       strokeLinecap="round"
51 |       strokeLinejoin="round"
52 |       strokeWidth="2"
53 |     />
54 |   </svg>
55 | );
56 | 


--------------------------------------------------------------------------------
/app/components/LinkCompact.jsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import React from "react";
 3 | 
 4 | import {
 5 |   PiDribbbleLogoThin,
 6 |   PiFigmaLogoThin,
 7 |   PiGithubLogoThin,
 8 |   PiInstagramLogoThin,
 9 |   PiLinkedinLogoLight,
10 |   PiYoutubeLogoThin,
11 | } from "react-icons/pi";
12 | import { BsTwitterX } from "react-icons/bs";
13 | import { SiEthereum } from "react-icons/si";
14 | 
15 | function Links() {
16 |   return (
17 |     <div className="flex justify-center  flex-wrap gap-x-5  mx-auto mt-8 gap-y-3 md:gap-y-0">
18 |       <Link
19 |         href={"/"}
20 |         className="h-11 w-11 flex justify-center items-center  rounded-lg  gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
21 |       >
22 |         <BsTwitterX className="text-base" />
23 |       </Link>
24 |       <Link
25 |         href={"/"}
26 |         className="h-11 w-11 flex justify-center items-center  rounded-lg  gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
27 |       >
28 |         <PiFigmaLogoThin className="text-xl" />
29 |       </Link>
30 |       <Link
31 |         href={"/"}
32 |         className="h-11 w-11 flex justify-center items-center  rounded-lg  gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
33 |       >
34 |         <PiGithubLogoThin className="text-xl" />
35 |       </Link>
36 |       <Link
37 |         href={"/"}
38 |         className="h-11 w-11 flex justify-center items-center  rounded-lg  gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
39 |       >
40 |         <PiDribbbleLogoThin className="text-xl" />
41 |       </Link>
42 |       <Link
43 |         href={"/"}
44 |         className="h-11 w-11 flex justify-center items-center  rounded-lg  gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
45 |       >
46 |         <PiInstagramLogoThin className="text-xl" />
47 |       </Link>
48 |       <Link
49 |         href={"/"}
50 |         className="h-11 w-11 flex justify-center items-center  rounded-lg  gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
51 |       >
52 |         <PiLinkedinLogoLight className="text-xl" />
53 |       </Link>
54 |       <Link
55 |         href={"/"}
56 |         className="h-11 w-11 flex justify-center items-center  rounded-lg  gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
57 |       >
58 |         <PiYoutubeLogoThin className="text-xl" />
59 |       </Link>
60 |       <Link
61 |         href={"/"}
62 |         className="h-11 w-11 flex justify-center items-center  rounded-lg  gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
63 |       >
64 |         <SiEthereum className="text-xl" />
65 |       </Link>
66 |     </div>
67 |   );
68 | }
69 | 
70 | export default Links;
71 | 


--------------------------------------------------------------------------------
/app/components/LinkRounded.jsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import React from "react";
 3 | 
 4 | import {
 5 |   PiDribbbleLogoThin,
 6 |   PiFigmaLogoThin,
 7 |   PiGithubLogoThin,
 8 |   PiInstagramLogoThin,
 9 |   PiLinkedinLogoLight,
10 |   PiYoutubeLogoThin,
11 | } from "react-icons/pi";
12 | import { BsTwitterX } from "react-icons/bs";
13 | import { SiEthereum } from "react-icons/si";
14 | 
15 | function Links() {
16 |   return (
17 |     <div className="flex justify-center  flex-wrap gap-x-4  mx-auto mt-8">
18 |       <Link
19 |         href={"/"}
20 |         className="p-3 px-3 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
21 |       >
22 |         <BsTwitterX className="text-xl" />
23 |       </Link>
24 |       <Link
25 |         href={"/"}
26 |         className="p-3 px-3 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
27 |       >
28 |         <PiFigmaLogoThin className="text-xl" />
29 |       </Link>
30 |       <Link
31 |         href={"/"}
32 |         className="p-3 px-3 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
33 |       >
34 |         <PiGithubLogoThin className="text-xl" />
35 |       </Link>
36 |       <Link
37 |         href={"/"}
38 |         className="p-3 px-3 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
39 |       >
40 |         <PiDribbbleLogoThin className="text-xl" />
41 |       </Link>
42 |       <Link
43 |         href={"/"}
44 |         className="p-3 px-3 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
45 |       >
46 |         <PiInstagramLogoThin className="text-xl" />
47 |       </Link>
48 |       <Link
49 |         href={"/"}
50 |         className="p-3 px-3 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
51 |       >
52 |         <PiLinkedinLogoLight className="text-xl" />
53 |       </Link>
54 |       <Link
55 |         href={"/"}
56 |         className="p-3 px-3 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
57 |       >
58 |         <PiYoutubeLogoThin className="text-xl" />
59 |       </Link>
60 |       <Link
61 |         href={"/"}
62 |         className="p-3 px-3 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800  duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
63 |       >
64 |         <SiEthereum className="text-xl" />
65 |       </Link>
66 |     </div>
67 |   );
68 | }
69 | 
70 | export default Links;
71 | 


--------------------------------------------------------------------------------
/app/components/Links.jsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import React from "react";
 3 | 
 4 | import {
 5 |   PiDribbbleLogoThin,
 6 |   PiFigmaLogoThin,
 7 |   PiGithubLogoThin,
 8 |   PiInstagramLogoThin,
 9 |   PiLinkedinLogoLight,
10 |   PiYoutubeLogoThin,
11 | } from "react-icons/pi";
12 | import { BsTwitterX } from "react-icons/bs";
13 | import { SiEthereum } from "react-icons/si";
14 | 
15 | function Links() {
16 |   return (
17 |     <div className="flex flex-wrap gap-3  mx-auto mt-8">
18 |       <Link
19 |         href={"/"}
20 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
21 |       >
22 |         <BsTwitterX />
23 |         <span>@Joscript</span>
24 |       </Link>
25 |       <Link
26 |         href={"/"}
27 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
28 |       >
29 |         <PiFigmaLogoThin />
30 |         <span>@Joscript</span>
31 |       </Link>
32 |       <Link
33 |         href={"/"}
34 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
35 |       >
36 |         <PiGithubLogoThin />
37 |         <span>/Joscript</span>
38 |       </Link>
39 |       <Link
40 |         href={"/"}
41 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
42 |       >
43 |         <PiDribbbleLogoThin />
44 |         <span>/Joscript</span>
45 |       </Link>
46 |       <Link
47 |         href={"/"}
48 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
49 |       >
50 |         <PiInstagramLogoThin />
51 |         <span>@Joscript</span>
52 |       </Link>
53 |       <Link
54 |         href={"/"}
55 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
56 |       >
57 |         <PiLinkedinLogoLight />
58 |         <span>/Joscript</span>
59 |       </Link>
60 |       <Link
61 |         href={"/"}
62 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
63 |       >
64 |         <PiYoutubeLogoThin />
65 |         <span>@Joscript</span>
66 |       </Link>
67 |       <Link
68 |         href={"/"}
69 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
70 |       >
71 |         <SiEthereum />
72 |         <span>@Joscript</span>
73 |       </Link>
74 |     </div>
75 |   );
76 | }
77 | 
78 | export default Links;
79 | 


--------------------------------------------------------------------------------
/app/components/Location.jsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import { usePathname } from "next/navigation";
 3 | 
 4 | import Link from "next/link";
 5 | import React from "react";
 6 | import { LiaFlagUsaSolid } from "react-icons/lia";
 7 | 
 8 | function Location() {
 9 |   const path = usePathname();
10 | 
11 |   return (
12 |     <div>
13 |       <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
14 |         <div className=" gap-x-6  flex justify-between ">
15 |           <div className="flex justify-between items-center w-full p-2">
16 |             <p className="text-white font-Intermedium">
17 |               {path === "/youtuber" ? "Currently in" : "My Location "}
18 |             </p>
19 |             <Link
20 |               href={"/"}
21 |               className="p-1 px-2 w-fit rounded-full flex items-center gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
22 |             >
23 |               <LiaFlagUsaSolid />
24 |               <span className="font-Intermedium">USA</span>
25 |             </Link>
26 |           </div>
27 |         </div>
28 | 
29 |         <div className="  mt-3  h-56 w-full">
30 |           <Image
31 |             width={1000}
32 |             height={1000}
33 |             className="h-full w-full object-cover rounded-2xl"
34 |             // src="/images/mapp.webp"
35 |             src={
36 |               path === "/youtuber" ? "/images/mappp.webp" : "/images/mapp.webp"
37 |             }
38 |             alt=""
39 |           />
40 |         </div>
41 |       </div>
42 |     </div>
43 |   );
44 | }
45 | 
46 | export default Location;
47 | 


--------------------------------------------------------------------------------
/app/components/Message.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { usePathname } from "next/navigation";
 4 | 
 5 | function Message() {
 6 |   const path = usePathname();
 7 |   return (
 8 |     <div>
 9 |       <div className=" mt-3  bg-[#161616] py-3 px-3 rounded-xl">
10 |         <p className="text-neutral-300  font-Interegular font-bold mt-3">
11 |           {path === "/" ? "Leave a Message" : "Submit a question"}
12 |         </p>
13 | 
14 |         <form action="">
15 |           <input
16 |             className="bg-neutral-800 rounded-lg p-2 w-full placeholder:text-neutral-600 mt-2 focus:ring-2 ring-neutral-500 outline-none text-neutral-400 font-Intermedium "
17 |             type="text"
18 |             placeholder="Your Name"
19 |             name=""
20 |             id=""
21 |           />
22 |           <input
23 |             className="bg-neutral-800 rounded-lg p-2 w-full placeholder:text-neutral-600 mt-2 focus:ring-2 ring-neutral-500 outline-none text-neutral-400 font-Intermedium "
24 |             type="text"
25 |             placeholder="Your email"
26 |             name=""
27 |             id=""
28 |           />
29 |           <textarea
30 |             className="bg-neutral-800 rounded-lg p-2 w-full placeholder:text-neutral-600 mt-2 focus:ring-2 ring-neutral-500 outline-none text-neutral-400 font-Intermedium "
31 |             rows={5}
32 |             type="text"
33 |             placeholder="Your message"
34 |             name=""
35 |             id=""
36 |           />
37 |           <button className="bg-neutral-800 p-2 rounded-lg mt-2 w-full text-neutral-200 font-Intermedium">
38 |             {path === "/" ? "Subscribe" : "Send"}
39 |           </button>
40 |         </form>
41 |       </div>
42 |     </div>
43 |   );
44 | }
45 | 
46 | export default Message;
47 | 


--------------------------------------------------------------------------------
/app/components/MonitorMobileIcon.jsx:
--------------------------------------------------------------------------------
 1 | export const MonitorMobileIcon = (props) => (
 2 |   <svg
 3 |     aria-hidden="true"
 4 |     fill="none"
 5 |     focusable="false"
 6 |     height="24"
 7 |     role="presentation"
 8 |     viewBox="0 0 24 24"
 9 |     width="24"
10 |     {...props}
11 |   >
12 |     <path
13 |       d="M10 16.95H6.21C2.84 16.95 2 16.11 2 12.74V6.74003C2 3.37003 2.84 2.53003 6.21 2.53003H16.74C20.11 2.53003 20.95 3.37003 20.95 6.74003"
14 |       stroke="currentColor"
15 |       strokeLinecap="round"
16 |       strokeLinejoin="round"
17 |       strokeWidth="1.5"
18 |     />
19 |     <path
20 |       d="M10 21.4699V16.95"
21 |       stroke="currentColor"
22 |       strokeLinecap="round"
23 |       strokeLinejoin="round"
24 |       strokeWidth="1.5"
25 |     />
26 |     <path
27 |       d="M2 12.95H10"
28 |       stroke="currentColor"
29 |       strokeLinecap="round"
30 |       strokeLinejoin="round"
31 |       strokeWidth="1.5"
32 |     />
33 |     <path
34 |       d="M6.73999 21.47H9.99999"
35 |       stroke="currentColor"
36 |       strokeLinecap="round"
37 |       strokeLinejoin="round"
38 |       strokeWidth="1.5"
39 |     />
40 |     <path
41 |       d="M22 12.8V18.51C22 20.88 21.41 21.47 19.04 21.47H15.49C13.12 21.47 12.53 20.88 12.53 18.51V12.8C12.53 10.43 13.12 9.83997 15.49 9.83997H19.04C21.41 9.83997 22 10.43 22 12.8Z"
42 |       stroke="currentColor"
43 |       strokeLinecap="round"
44 |       strokeLinejoin="round"
45 |       strokeWidth="1.5"
46 |     />
47 |     <path
48 |       d="M17.2445 18.25H17.2535"
49 |       stroke="currentColor"
50 |       strokeLinecap="round"
51 |       strokeLinejoin="round"
52 |       strokeWidth="2"
53 |     />
54 |   </svg>
55 | );
56 | 


--------------------------------------------------------------------------------
/app/components/Photos.jsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Link from "next/link";
 3 | import React from "react";
 4 | import { PiInstagramLogoThin } from "react-icons/pi";
 5 | 
 6 | function Photos() {
 7 |   return (
 8 |     <div>
 9 |       <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
10 |         <div className=" gap-x-6  flex justify-between ">
11 |           <div className="flex justify-between items-center w-full p-2">
12 |             <p className="text-white font-Intermedium">Latest Photos</p>
13 |             <Link
14 |               href={"/"}
15 |               className="p-1 px-2 w-fit rounded-full flex items-center gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
16 |             >
17 |               <PiInstagramLogoThin />
18 |               <span className="font-Intermedium">@Joscript</span>
19 |             </Link>
20 |           </div>
21 |         </div>
22 | 
23 |         <div className="  mt-3  h-56 w-full">
24 |           <Image
25 |             width={1000}
26 |             height={1000}
27 |             className="h-full w-full object-cover rounded-2xl"
28 |             src="/images/f.jpg"
29 |             alt=""
30 |           />
31 |         </div>
32 |       </div>
33 |     </div>
34 |   );
35 | }
36 | 
37 | export default Photos;
38 | 


--------------------------------------------------------------------------------
/app/components/Services.jsx:
--------------------------------------------------------------------------------
  1 | import React from "react";
  2 | import { PiCheckLight, PiLaptop, PiRecycleLight } from "react-icons/pi";
  3 | 
  4 | function Services() {
  5 |   return (
  6 |     <div>
  7 |       <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
  8 |         <div className="  flex justify-between ">
  9 |           <p className="text-white font-Intermedium">Services</p>
 10 |         </div>
 11 | 
 12 |         {/* Services */}
 13 | 
 14 |         <div className=" overflow-x-auto mt-3  ">
 15 |           <div className=" flex  gap-x-3 w-[1000px] p-2  ">
 16 |             <div className=" w-[300px] hover:bg-neutral-800/40 cursor-pointer transition-all ease-in duration-150 p-2  rounded-xl">
 17 |               <div className="bg-neutral-800 p-2 flex items-center justify-center rounded-lg w-fit">
 18 |                 <PiRecycleLight className="text-xl text-purple-600" />
 19 |               </div>
 20 | 
 21 |               <p className="text-white text-base mt-3">Design co-pilot</p>
 22 |               <p className="text-neutral-400 uppercase text-xs font-Intermedium mt-2">
 23 |                 Fixed rate of
 24 |               </p>
 25 |               <p className="text-2xl text-white font-Intermedium mt-2">
 26 |                 $5,999
 27 |               </p>
 28 |               <span className="text-neutral-400 uppercase text-xs font-Intermedium mt-2">
 29 |                 /Month
 30 |               </span>
 31 |               <div className="flex items-center gap-x-2 mt-2">
 32 |                 <PiCheckLight className="text-neutral-400 text-lg" />
 33 |                 <span className="text-white">Unlimited revisions</span>
 34 |               </div>
 35 |               <div className="flex items-center gap-x-2 mt-2">
 36 |                 <PiCheckLight className="text-neutral-400 text-lg" />
 37 |                 <span className="text-white">High quality design</span>
 38 |               </div>
 39 |               <div className="flex items-center gap-x-2 mt-2">
 40 |                 <PiCheckLight className="text-neutral-400 text-lg" />
 41 |                 <span className="text-white">No calls or meetings</span>
 42 |               </div>
 43 |               <div className="flex items-center gap-x-2 mt-2">
 44 |                 <PiCheckLight className="text-neutral-400 text-lg" />
 45 |                 <span className="text-white">Simple fixed monthly fee</span>
 46 |               </div>
 47 |               <div className="flex items-center gap-x-2 mt-2">
 48 |                 <PiCheckLight className="text-neutral-400 text-lg" />
 49 |                 <span className="text-white">Pause or cancel anytime</span>
 50 |               </div>
 51 | 
 52 |               <button className="bg-neutral-700 p-2 flex justify-center items-center w-full rounded-lg mt-3 text-white font-Intermedium">
 53 |                 Subscribe
 54 |               </button>
 55 |             </div>
 56 |             <div className=" w-[300px] hover:bg-neutral-800/40 cursor-pointer transition-all ease-in duration-150 p-2  rounded-xl">
 57 |               <div className="bg-sky-950  p-2 flex items-center justify-center rounded-lg w-fit">
 58 |                 <PiLaptop className="text-xl text-sky-600 " />
 59 |               </div>
 60 | 
 61 |               <p className="text-white text-base mt-3">Landing page</p>
 62 |               <p className="text-neutral-400 uppercase text-xs font-Intermedium mt-2">
 63 |                 Starting at
 64 |               </p>
 65 |               <p className="text-2xl text-white font-Intermedium mt-2">
 66 |                 $1,999
 67 |               </p>
 68 |               <span className="text-neutral-400 uppercase text-xs font-Intermedium mt-2">
 69 |                 2-4 weeks delivery
 70 |               </span>
 71 |               <div className="flex items-center gap-x-2 mt-2">
 72 |                 <PiCheckLight className="text-neutral-400 text-lg" />
 73 |                 <span className="text-white">One pager</span>
 74 |               </div>
 75 |               <div className="flex items-center gap-x-2 mt-2">
 76 |                 <PiCheckLight className="text-neutral-400 text-lg" />
 77 |                 <span className="text-white">SEO-ready</span>
 78 |               </div>
 79 |               <div className="flex items-center gap-x-2 mt-2">
 80 |                 <PiCheckLight className="text-neutral-400 text-lg" />
 81 |                 <span className="text-white">Highly converting</span>
 82 |               </div>
 83 |               <div className="flex items-center gap-x-2 mt-2">
 84 |                 <PiCheckLight className="text-neutral-400 text-lg" />
 85 |                 <span className="text-white">Subtle animations</span>
 86 |               </div>
 87 |               <div className="flex items-center gap-x-2 mt-2">
 88 |                 <PiCheckLight className="text-neutral-400 text-lg" />
 89 |                 <span className="text-white">Optimized page speed</span>
 90 |               </div>
 91 | 
 92 |               <button className="bg-neutral-700 p-2 flex justify-center items-center w-full rounded-lg mt-3 text-white font-Intermedium">
 93 |                 Schedule call
 94 |               </button>
 95 |             </div>
 96 |             <div className=" w-[300px] hover:bg-neutral-800/40 cursor-pointer transition-all ease-in duration-150 p-2  rounded-xl">
 97 |               <div className="bg-pink-950 p-2 flex items-center justify-center rounded-lg w-fit">
 98 |                 <PiRecycleLight className="text-xl text-pink-600" />
 99 |               </div>
100 | 
101 |               <p className="text-white text-base mt-3">Multi-page website</p>
102 |               <p className="text-neutral-400 uppercase text-xs font-Intermedium mt-2">
103 |                 Starting at
104 |               </p>
105 |               <p className="text-2xl text-white font-Intermedium mt-2">
106 |                 $3,999
107 |               </p>
108 |               <span className="text-neutral-400 uppercase text-xs font-Intermedium mt-2">
109 |                 3-5 weeks delivery
110 |               </span>
111 |               <div className="flex items-center gap-x-2 mt-2">
112 |                 <PiCheckLight className="text-neutral-400 text-lg" />
113 |                 <span className="text-white">Multiple pages (10 max)</span>
114 |               </div>
115 |               <div className="flex items-center gap-x-2 mt-2">
116 |                 <PiCheckLight className="text-neutral-400 text-lg" />
117 |                 <span className="text-white">SEO-ready</span>
118 |               </div>
119 |               <div className="flex items-center gap-x-2 mt-2">
120 |                 <PiCheckLight className="text-neutral-400 text-lg" />
121 |                 <span className="text-white">CMS-ready</span>
122 |               </div>
123 |               <div className="flex items-center gap-x-2 mt-2">
124 |                 <PiCheckLight className="text-neutral-400 text-lg" />
125 |                 <span className="text-white">Subtle animations</span>
126 |               </div>
127 |               <div className="flex items-center gap-x-2 mt-2">
128 |                 <PiCheckLight className="text-neutral-400 text-lg" />
129 |                 <span className="text-white">Optimized page speed</span>
130 |               </div>
131 | 
132 |               <button className="bg-neutral-700 p-2 flex justify-center items-center w-full rounded-lg mt-3 text-white font-Intermedium">
133 |                 Subscribe
134 |               </button>
135 |             </div>
136 |           </div>
137 |         </div>
138 |       </div>
139 |     </div>
140 |   );
141 | }
142 | 
143 | export default Services;
144 | 


--------------------------------------------------------------------------------
/app/components/ShieldSecurityIcon.jsx:
--------------------------------------------------------------------------------
 1 | export const ShieldSecurityIcon = (props) => (
 2 |   <svg
 3 |     aria-hidden="true"
 4 |     fill="none"
 5 |     focusable="false"
 6 |     height="24"
 7 |     role="presentation"
 8 |     viewBox="0 0 24 24"
 9 |     width="24"
10 |     {...props}
11 |   >
12 |     <path
13 |       d="M10.49 2.23006L5.49997 4.11006C4.34997 4.54006 3.40997 5.90006 3.40997 7.12006V14.5501C3.40997 15.7301 4.18997 17.2801 5.13997 17.9901L9.43997 21.2001C10.85 22.2601 13.17 22.2601 14.58 21.2001L18.88 17.9901C19.83 17.2801 20.61 15.7301 20.61 14.5501V7.12006C20.61 5.89006 19.67 4.53006 18.52 4.10006L13.53 2.23006C12.68 1.92006 11.32 1.92006 10.49 2.23006Z"
14 |       stroke="currentColor"
15 |       strokeLinecap="round"
16 |       strokeLinejoin="round"
17 |       strokeWidth="1.5"
18 |     />
19 |     <path
20 |       d="M12 12.5C13.1046 12.5 14 11.6046 14 10.5C14 9.39543 13.1046 8.5 12 8.5C10.8954 8.5 10 9.39543 10 10.5C10 11.6046 10.8954 12.5 12 12.5Z"
21 |       stroke="currentColor"
22 |       strokeLinecap="round"
23 |       strokeLinejoin="round"
24 |       strokeMiterlimit="10"
25 |       strokeWidth="1.5"
26 |     />
27 |     <path
28 |       d="M12 12.5V15.5"
29 |       stroke="currentColor"
30 |       strokeLinecap="round"
31 |       strokeLinejoin="round"
32 |       strokeMiterlimit="10"
33 |       strokeWidth="1.5"
34 |     />
35 |   </svg>
36 | );
37 | 


--------------------------------------------------------------------------------
/app/components/Stars.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import { PiStarFill } from "react-icons/pi";
 3 | 
 4 | function Stars({ num }) {
 5 |   function getLength() {
 6 |     let arr = [];
 7 | 
 8 |     for (let i = 0; i < num; i++) {
 9 |       arr.push(<PiStarFill key={i} className="text-yellow-300" />);
10 |     }
11 |     return arr;
12 |   }
13 |   return <div className="flex gap-x-2 mt-3">{getLength()}</div>;
14 | }
15 | 
16 | export default Stars;
17 | 


--------------------------------------------------------------------------------
/app/components/Store.jsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | import Link from "next/link";
 3 | import React from "react";
 4 | import { PiInstagramLogoThin } from "react-icons/pi";
 5 | 
 6 | function Store() {
 7 |   return (
 8 |     <div>
 9 |       <div className="bg-[#161616] p-2 rounded-xl mt-3  ">
10 |         <div className="  flex justify-between  ">
11 |           <div className="flex justify-between items-center w-full p-2  ">
12 |             <p className="text-white font-Intermedium">Store</p>
13 |             <Link
14 |               href={"/"}
15 |               className="p-1 px-2 w-fit rounded-full flex items-center gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
16 |             >
17 |               <PiInstagramLogoThin />
18 |               <span className="font-Intermedium">@JoStore</span>
19 |             </Link>
20 |           </div>
21 |         </div>
22 | 
23 |         <div className=" overflow-x-auto mt-3 ">
24 |           <div className="flex  gap-x-3 w-[1000px] p-2 h-72 ">
25 |             <div className="flex flex-col w-[300px] hover:bg-neutral-800/40 cursor-pointer transition-all ease-in duration-150 p-2  rounded-xl">
26 |               <Image
27 |                 width={1000}
28 |                 height={1000}
29 |                 className=" w-full h-full object-cover rounded-2xl "
30 |                 src="/images/img5.jpg"
31 |                 alt=""
32 |               />
33 | 
34 |               <p className="text-white">Hoodie</p>
35 |               <span className="text-neutral-400">$80</span>
36 |             </div>
37 |             <div className="flex flex-col w-[300px] hover:bg-neutral-800/40 cursor-pointer transition-all ease-in duration-150 p-2  rounded-xl">
38 |               <Image
39 |                 width={1000}
40 |                 height={1000}
41 |                 className="h-full w-full object-cover rounded-2xl"
42 |                 src="/images/img6.jpg"
43 |                 alt=""
44 |               />
45 | 
46 |               <p className="text-white">Hoodie</p>
47 |               <span className="text-neutral-400">$80</span>
48 |             </div>
49 |             <div className="flex flex-col w-[300px] hover:bg-neutral-800/40 cursor-pointer transition-all ease-in duration-150 p-2  rounded-xl">
50 |               <Image
51 |                 width={1000}
52 |                 height={1000}
53 |                 className="h-full w-full object-cover rounded-2xl"
54 |                 src="/images/img9.jpg"
55 |                 alt=""
56 |               />
57 | 
58 |               <p className="text-white">Hoodie</p>
59 |               <span className="text-neutral-400">$80</span>
60 |             </div>
61 |           </div>
62 |         </div>
63 |       </div>
64 |     </div>
65 |   );
66 | }
67 | 
68 | export default Store;
69 | 


--------------------------------------------------------------------------------
/app/components/Stories.jsx:
--------------------------------------------------------------------------------
 1 | import { useRef, useEffect, useCallback, useState } from "react";
 2 | import Story from "./Story";
 3 | import StoryThumbnail from "./StoryThumbnail";
 4 | 
 5 | import { AnimatePresence, motion } from "framer-motion";
 6 | 
 7 | const Stories = ({ stories }) => {
 8 |   const [activeStoryIndex, setActiveStoryIndex] = useState(null);
 9 |   const activeStory = stories[activeStoryIndex];
10 |   const isModalOpenRef = useRef(false);
11 | 
12 |   const handleKeyPress = useCallback((e) => {
13 |     if (e.key === "Escape") {
14 |       handleModalClose();
15 |     }
16 |   }, []);
17 | 
18 |   const handleModalOpen = (index) => {
19 |     isModalOpenRef.current = true;
20 |     setActiveStoryIndex(index);
21 |     window.addEventListener("keyup", handleKeyPress);
22 |   };
23 | 
24 |   const handleModalClose = () => {
25 |     setActiveStoryIndex(null);
26 |   };
27 | 
28 |   useEffect(() => {
29 |     // Close the modal when reaching the beginning or end of the list
30 |     if (activeStoryIndex < 0 || activeStoryIndex >= stories.length) {
31 |       handleModalClose();
32 |     }
33 |   }, [activeStoryIndex, stories.length]);
34 | 
35 |   useEffect(() => {
36 |     if (!activeStory && isModalOpenRef.current) {
37 |       isModalOpenRef.current = false;
38 |       window.removeEventListener("keyup", handleKeyPress);
39 |     }
40 |   }, [activeStory, handleKeyPress]);
41 | 
42 |   useEffect(() => {
43 |     // Remove event on unmount
44 |     return () => {
45 |       window.removeEventListener("keyup", handleKeyPress);
46 |     };
47 |   }, [handleKeyPress]);
48 | 
49 |   return (
50 |     <div className="flex ">
51 |       {!activeStory ? (
52 |         stories.map((story, index) => (
53 |           <StoryThumbnail
54 |             key={index}
55 |             setActiveStory={handleModalOpen}
56 |             index={index}
57 |             thumbnail={story.thumbnail}
58 |             user={story.username}
59 |           />
60 |         ))
61 |       ) : (
62 |         <AnimatePresence mode="wait">
63 |           <motion.div
64 |             initial={{ opacity: 0 }}
65 |             animate={{
66 |               opacity: 1,
67 |               transition: {
68 |                 duration: 0.5,
69 |                 stiffness: "7000",
70 |                 type: "spring",
71 |                 damping: "3000",
72 |               },
73 |             }}
74 |             exit={{ opacity: 0 }}
75 |             transition={{ duration: 0.5 }}
76 |             className="fixed top-0 right-0 left-0 bottom-0 backdrop-blur-lg h-full flex justify-center items-center z-50 bg-black/70 p-3 overflow-hidden"
77 |           >
78 |             <div className="h-full lg:w-1/4  w-96 border border-neutral-700 rounded-lg">
79 |               <Story
80 |                 story={activeStory}
81 |                 goToPrevStory={() => setActiveStoryIndex(activeStoryIndex - 1)}
82 |                 goToNextStory={() => setActiveStoryIndex(activeStoryIndex + 1)}
83 |                 handleCloseClick={handleModalClose}
84 |               />
85 |             </div>
86 |           </motion.div>
87 |         </AnimatePresence>
88 |       )}
89 |     </div>
90 |   );
91 | };
92 | 
93 | export default Stories;
94 | 


--------------------------------------------------------------------------------
/app/components/Story.jsx:
--------------------------------------------------------------------------------
  1 | import React, { useState, useEffect } from "react";
  2 | import cn from "classnames";
  3 | 
  4 | import { IoMdClose } from "react-icons/io";
  5 | import { GrNext, GrPrevious } from "react-icons/gr";
  6 | import Image from "next/image";
  7 | 
  8 | const Story = ({ story, goToPrevStory, goToNextStory, handleCloseClick }) => {
  9 |   const [currentSlideIndex, setCurrentSlideIndex] = useState(0);
 10 |   const { slides, timer = 4000, thumbnail, username } = story;
 11 |   const currentSlide = slides[currentSlideIndex];
 12 |   const slideCount = slides.length;
 13 | 
 14 |   // Set the CSS animation timing equal to the value in the story props
 15 |   useEffect(() => {
 16 |     document.documentElement.style.setProperty(
 17 |       "--animation-timing",
 18 |       `${timer}ms`
 19 |     );
 20 |   }, [timer]);
 21 | 
 22 |   useEffect(() => {
 23 |     let interval;
 24 | 
 25 |     // Change slides on an interval
 26 |     interval = setInterval(() => {
 27 |       if (currentSlideIndex < slideCount - 1) {
 28 |         setCurrentSlideIndex(currentSlideIndex + 1);
 29 |       } else if (currentSlideIndex === slideCount - 1) {
 30 |         setCurrentSlideIndex(0);
 31 |         goToNextStory();
 32 |       }
 33 |     }, timer);
 34 | 
 35 |     return () => {
 36 |       clearInterval(interval);
 37 |     };
 38 |   }, [goToNextStory, currentSlideIndex, slideCount, timer]);
 39 | 
 40 |   const handlePrevClick = () => {
 41 |     const newIndex = currentSlideIndex - 1;
 42 | 
 43 |     if (newIndex < 0) {
 44 |       setCurrentSlideIndex(0);
 45 |       goToPrevStory();
 46 |     } else {
 47 |       setCurrentSlideIndex(newIndex);
 48 |     }
 49 |   };
 50 | 
 51 |   const handleNextClick = () => {
 52 |     const newIndex = currentSlideIndex + 1;
 53 | 
 54 |     if (newIndex === slideCount) {
 55 |       setCurrentSlideIndex(0);
 56 |       goToNextStory();
 57 |     } else {
 58 |       setCurrentSlideIndex(newIndex);
 59 |     }
 60 |   };
 61 | 
 62 |   return (
 63 |     <>
 64 |       <div className="backdrop-blur-lg z-40 flex h-full absolute" />
 65 | 
 66 |       <div className="flex justify-center  ">
 67 |         <button
 68 |           className="absolute bottom-16 z-50 w-10 h-10 bg-neutral-800/25  rounded-full flex justify-center items-center"
 69 |           onClick={handleCloseClick}
 70 |         >
 71 |           <IoMdClose className="w-7 h-7 text-white" />
 72 |         </button>
 73 |         <span className="uppercase text-xs font-Intermedium absolute bottom-12 text-white z-50">
 74 |           Close
 75 |         </span>
 76 |       </div>
 77 |       <div className="flex h-full p-1">
 78 |         <div className="relative z-40  h-full w-full ">
 79 |           <Image
 80 |             width={1000}
 81 |             height={1000}
 82 |             className="h-full object-cover relative opacity-75 rounded-lg"
 83 |             src={currentSlide.image}
 84 |             alt=""
 85 |           />
 86 | 
 87 |           <div className="flex relative gap-x-3 -top-[710px] z-50 ">
 88 |             {slides.map((slide, index) => (
 89 |               <span
 90 |                 key={`${slide.text}-${index}`}
 91 |                 className={cn("indicator", {
 92 |                   complete: currentSlideIndex > index,
 93 |                   active: currentSlideIndex === index,
 94 |                 })}
 95 |               />
 96 |             ))}
 97 |           </div>
 98 |           <div className="">
 99 |             <div className="absolute top-7 left-0 flex gap-x-2 items-center">
100 |               <Image
101 |                 width={800}
102 |                 height={800}
103 |                 className="rounded-full w-11 h-11 ml-3"
104 |                 src={thumbnail.src}
105 |                 alt={thumbnail.alt}
106 |               />
107 |               <span className="text-neutral-100 font-Intermedium">
108 |                 {username}
109 |               </span>
110 |             </div>
111 |             <h3 className="absolute bottom-3 flex justify-center text-white ">
112 |               {currentSlide.text}
113 |             </h3>
114 |           </div>
115 |           <div className="prev-next">
116 |             <button onClick={handlePrevClick}>
117 |               <GrPrevious />
118 |             </button>
119 |             <button onClick={handleNextClick}>
120 |               <GrNext />
121 |             </button>
122 |           </div>
123 |         </div>
124 |       </div>
125 |     </>
126 |   );
127 | };
128 | 
129 | export default Story;
130 | 


--------------------------------------------------------------------------------
/app/components/StoryThumbnail.jsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | const StoryThumbnail = ({ thumbnail, index, setActiveStory, user }) => (
 4 |   <button
 5 |     className="flex  flex-col items-center mx-3"
 6 |     onClick={() => setActiveStory(index)}
 7 |   >
 8 |     <Image
 9 |       width={800}
10 |       height={800}
11 |       className="w-14 h-14 rounded-full ring-1 object-cover hover:ring-2 hover:transition-all duration-200 ease-in-out ring-neutral-600 p-1 "
12 |       src={thumbnail.src}
13 |       alt={thumbnail.alt}
14 |     />
15 |     <span className="text-neutral-600 text-sm mt-2 font-Interegular">
16 |       {user}
17 |     </span>
18 |   </button>
19 | );
20 | 
21 | export default StoryThumbnail;
22 | 


--------------------------------------------------------------------------------
/app/components/Testimonials.jsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import Stars from "./Stars";
 3 | import Image from "next/image";
 4 | 
 5 | function Testimonials() {
 6 |   return (
 7 |     <div>
 8 |       <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
 9 |         <div className="  flex justify-between ">
10 |           <p className="text-white font-Intermedium">Testimonials</p>
11 |         </div>
12 | 
13 |         <div className=" overflow-x-auto mt-3   ">
14 |           <div className=" flex  gap-x-3 w-[1000px] p-2  ">
15 |             <div className=" w-[300px] hover:bg-neutral-800/40 bg-neutral-800 cursor-pointer transition-all ease-in duration-150 p-5  rounded-xl">
16 |               <p className="text-white font-Interegular">
17 |                 Lincoln’s design expertise elevated our product to new heights.
18 |                 A perfect blend of aesthetics and usability. Working with him
19 |                 was a delight!
20 |               </p>
21 |               <Image
22 |                 width={800}
23 |                 height={800}
24 |                 className="w-9 h-9 rounded-full object-cover my-3"
25 |                 src="/images/img9.jpg"
26 |                 alt=""
27 |               />
28 |               <p className="text-white font-Interegular">JoScript</p>
29 |               <span className="text-neutral-500 font-Interegular">
30 |                 Founder, Beta
31 |               </span>
32 |               <Stars num={4} />
33 |             </div>
34 |             <div className=" w-[300px] hover:bg-neutral-800/40 bg-neutral-800 cursor-pointer transition-all ease-in duration-150 p-5  rounded-xl">
35 |               <p className="text-white font-Interegular">
36 |                 Lincoln’s design expertise elevated our product to new heights.
37 |                 A perfect blend of aesthetics and usability. Working with him
38 |                 was a delight!
39 |               </p>
40 |               <Image
41 |                 width={800}
42 |                 height={800}
43 |                 className="w-9 h-9 rounded-full object-cover my-3"
44 |                 src="/images/img9.jpg"
45 |                 alt=""
46 |               />
47 |               <p className="text-white font-Interegular">JoScript</p>
48 |               <span className="text-neutral-500 font-Interegular">
49 |                 Founder, Beta
50 |               </span>
51 |               <Stars num={4} />
52 |             </div>
53 |             <div className=" w-[300px] hover:bg-neutral-800/40 bg-neutral-800 cursor-pointer transition-all ease-in duration-150 p-5  rounded-xl">
54 |               <p className="text-white font-Interegular">
55 |                 Lincoln’s design expertise elevated our product to new heights.
56 |                 A perfect blend of aesthetics and usability. Working with him
57 |                 was a delight!
58 |               </p>
59 |               <Image
60 |                 width={800}
61 |                 height={800}
62 |                 className="w-9 h-9 rounded-full object-cover my-3"
63 |                 src="/images/img9.jpg"
64 |                 alt=""
65 |               />
66 |               <p className="text-white font-Interegular">JoScript</p>
67 |               <span className="text-neutral-500 font-Interegular">
68 |                 Founder, Beta
69 |               </span>
70 |               <Stars num={4} />
71 |             </div>
72 |           </div>
73 |         </div>
74 |       </div>
75 |     </div>
76 |   );
77 | }
78 | 
79 | export default Testimonials;
80 | 


--------------------------------------------------------------------------------
/app/components/YutubeLink.jsx:
--------------------------------------------------------------------------------
 1 | import Link from "next/link";
 2 | import React from "react";
 3 | 
 4 | import {
 5 |   PiDribbbleLogoThin,
 6 |   PiFigmaLogoThin,
 7 |   PiGithubLogoThin,
 8 |   PiInstagramLogoThin,
 9 |   PiLinkedinLogoLight,
10 |   PiTiktokLogoThin,
11 |   PiYoutubeLogoThin,
12 | } from "react-icons/pi";
13 | import { BsTwitterX } from "react-icons/bs";
14 | import { SiEthereum } from "react-icons/si";
15 | 
16 | function Links() {
17 |   return (
18 |     <div className="flex flex-wrap gap-3 lg:gap-1 justify-center   mx-auto my-6 ">
19 |       <Link
20 |         href={"/"}
21 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300 "
22 |       >
23 |         <BsTwitterX />
24 |         <span className="text-sm">@Joscript</span>
25 |       </Link>
26 | 
27 |       <Link
28 |         href={"/"}
29 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-1 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
30 |       >
31 |         <PiGithubLogoThin />
32 |         <span className="text-sm">Joscript</span>
33 |       </Link>
34 | 
35 |       <Link
36 |         href={"/"}
37 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-1 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
38 |       >
39 |         <PiTiktokLogoThin />
40 |         <span className="text-sm">@Joscript</span>
41 |       </Link>
42 | 
43 |       <Link
44 |         href={"/"}
45 |         className="p-1 px-2 w-fit rounded-full flex items-center gap-x-1 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
46 |       >
47 |         <PiYoutubeLogoThin />
48 |         <span className="text-sm">@Joscript</span>
49 |       </Link>
50 |     </div>
51 |   );
52 | }
53 | 
54 | export default Links;
55 | 


--------------------------------------------------------------------------------
/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/app/favicon.ico


--------------------------------------------------------------------------------
/app/globals.css:
--------------------------------------------------------------------------------
  1 | @tailwind base;
  2 | @tailwind components;
  3 | @tailwind utilities;
  4 | 
  5 | @font-face {
  6 |   font-family: Interegular;
  7 |   src: url("../public//font//Interegular.otf");
  8 | }
  9 | @font-face {
 10 |   font-family: Interlight;
 11 |   src: url("../public//font//Interlight.otf");
 12 | }
 13 | @font-face {
 14 |   font-family: Intermedium;
 15 |   src: url("../public//font//Intermedium.otf");
 16 | }
 17 | 
 18 | @layer base {
 19 |   body {
 20 |     @apply bg-[#111111]  transition-all ease-in duration-200;
 21 |   }
 22 | }
 23 | 
 24 | :root {
 25 |   --width: 640px;
 26 |   --animation-timing: 4s;
 27 |   --primary: #118ab2;
 28 |   --white: #fff;
 29 | 
 30 |   --button-size: 40px;
 31 | }
 32 | 
 33 | /* img {
 34 |   vertical-align: middle;
 35 | } */
 36 | 
 37 | button {
 38 |   border: none;
 39 |   background: none;
 40 |   cursor: pointer;
 41 |   padding: 0;
 42 | }
 43 | 
 44 | /* .thumbnail span {
 45 |   display: block;
 46 |   margin-top: 10px;
 47 |   font-weight: 700;
 48 | } */
 49 | 
 50 | .close {
 51 |   position: fixed;
 52 |   top: 10px;
 53 |   right: 10px;
 54 |   z-index: 101;
 55 | }
 56 | 
 57 | .close svg {
 58 |   fill: var(--white);
 59 |   height: 40px;
 60 |   width: 40px;
 61 | }
 62 | 
 63 | .indicator {
 64 |   display: block;
 65 |   width: 100%;
 66 |   height: 2px;
 67 |   border-radius: 12px;
 68 |   background: #ccc;
 69 |   position: relative;
 70 |   overflow: hidden;
 71 | }
 72 | 
 73 | .indicator.active {
 74 |   transition: transform 1s ease;
 75 | }
 76 | 
 77 | .indicator.complete {
 78 |   background: var(--primary);
 79 | }
 80 | 
 81 | .indicator.active::before {
 82 |   content: "";
 83 |   width: 100%;
 84 |   height: 100%;
 85 |   position: absolute;
 86 |   background: rgb(150, 150, 150);
 87 |   animation: fill var(--animation-timing) ease;
 88 | }
 89 | 
 90 | @keyframes fill {
 91 |   from {
 92 |     transform: translateX(-100%);
 93 |   }
 94 | 
 95 |   to {
 96 |     transform: translateX(0%);
 97 |   }
 98 | }
 99 | 
100 | /* .slide {
101 |   min-height: 550px;
102 |   position: relative;
103 | } */
104 | 
105 | /* .user-info span {
106 |   color: var(--white);
107 |   font-weight: 700;
108 | } */
109 | 
110 | .prev-next {
111 |   position: absolute;
112 |   top: calc(50% - var(--button-size) / 2);
113 |   left: 5px;
114 |   right: 5px;
115 | }
116 | 
117 | .prev-next button {
118 |   position: absolute;
119 |   background: var(--white);
120 |   height: var(--button-size);
121 |   width: var(--button-size);
122 |   border-radius: 50%;
123 |   display: flex;
124 |   justify-content: center;
125 |   align-items: center;
126 |   opacity: 0.7;
127 | }
128 | 
129 | .prev-next button:first-child {
130 |   left: 0;
131 | }
132 | 
133 | .prev-next button:last-child {
134 |   right: 0;
135 | }
136 | 
137 | /* Slight repositioning of the elements on mobile */
138 | @media screen and (min-width: 520px) {
139 |   .prev-next {
140 |     left: -50px;
141 |     right: -50px;
142 |   }
143 | }
144 | 


--------------------------------------------------------------------------------
/app/influencer/page.jsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useRef, useState, useEffect } from "react";
  4 | 
  5 | import Link from "next/link";
  6 | import { AnimatePresence, motion, useScroll } from "framer-motion";
  7 | import {
  8 |   PiGlobeSimpleThin,
  9 |   PiUploadThin,
 10 |   PiXCircleLight,
 11 |   PiFacebookLogoLight,
 12 |   PiLinkedinLogoLight,
 13 |   PiLinkLight,
 14 |   PiInstagramLogoThin,
 15 | } from "react-icons/pi";
 16 | 
 17 | import { FcCheckmark } from "react-icons/fc";
 18 | import { FaAngleRight, FaTwitter } from "react-icons/fa";
 19 | import { RiVerifiedBadgeFill } from "react-icons/ri";
 20 | import { TbCopy } from "react-icons/tb";
 21 | import YutubeLink from "@/app/components/YutubeLink";
 22 | import {
 23 |   BsTwitterX,
 24 |   BsThreads,
 25 |   BsWhatsapp,
 26 |   BsMessenger,
 27 |   BsPeople,
 28 | } from "react-icons/bs";
 29 | 
 30 | import { cn } from "@nextui-org/react";
 31 | import { SiBeatport } from "react-icons/si";
 32 | 
 33 | import Location from "@/app/components/Location";
 34 | import Footer from "@/app/components/Footer";
 35 | import Message from "../components/Message";
 36 | import { InfiniteMovingCards } from "../components/InfiniteMovingCards";
 37 | import Store from "../components/Store";
 38 | import Image from "next/image";
 39 | 
 40 | const inviteUrl = `Sam@dev.com`;
 41 | const inviteUrl2 = `SGREEN30`;
 42 | 
 43 | function Header({ value }) {
 44 |   const [copied, setCopied] = useState(false);
 45 |   const [copied2, setCopied2] = useState(false);
 46 |   const [open, setOpen] = useState(false);
 47 |   const [dialog, setDialog] = useState(false);
 48 | 
 49 |   const ref = useRef(null);
 50 | 
 51 |   const { scrollYProgress } = useScroll({
 52 |     target: ref,
 53 |     offset: ["0 0", "1 0"],
 54 |   });
 55 | 
 56 |   const onCopy = () => {
 57 |     navigator.clipboard.writeText(inviteUrl);
 58 |     setCopied(true);
 59 | 
 60 |     setTimeout(() => {
 61 |       setCopied(false);
 62 |     }, 1000);
 63 |   };
 64 |   const onCopy2 = () => {
 65 |     navigator.clipboard.writeText(inviteUrl2);
 66 |     setCopied2(true);
 67 | 
 68 |     setTimeout(() => {
 69 |       setCopied2(false);
 70 |     }, 1000);
 71 |   };
 72 | 
 73 |   const links = [
 74 |     {
 75 |       iconFirst: <PiFacebookLogoLight className="text-2xl" />,
 76 |       name: "Share on Facebook",
 77 | 
 78 |       lastIcon: <FaAngleRight />,
 79 |     },
 80 |     {
 81 |       iconFirst: <PiLinkedinLogoLight className="text-2xl" />,
 82 |       name: "Share on LinkedIn",
 83 |       lastIcon: <FaAngleRight />,
 84 |     },
 85 |     {
 86 |       iconFirst: <FaTwitter className="text-2xl" />,
 87 |       name: "Share on X",
 88 |       lastIcon: <FaAngleRight />,
 89 |     },
 90 |     {
 91 |       iconFirst: <BsThreads className="text-2xl" />,
 92 |       name: "Share on Threads",
 93 |       lastIcon: <FaAngleRight />,
 94 |     },
 95 |     {
 96 |       iconFirst: <BsWhatsapp className="text-2xl" />,
 97 |       name: "Share on Whatsapp",
 98 |       lastIcon: <FaAngleRight />,
 99 |     },
100 |     {
101 |       iconFirst: <BsMessenger className="text-2xl" />,
102 |       name: "Share on Messanger",
103 |       lastIcon: <FaAngleRight />,
104 |     },
105 |     {
106 |       iconFirst: <PiLinkLight className="text-2xl" />,
107 |       name: "josephhjamess46@gmail.com",
108 |       stri: "Copy",
109 |       lastIcon: <FaAngleRight />,
110 |     },
111 |   ];
112 | 
113 |   const options = {
114 |     playerVars: {
115 |       autoplay: 1,
116 |       controls: 1,
117 |     },
118 |   };
119 | 
120 |   const onReady = (e) => {
121 |     e.target.pauseVideo();
122 |   };
123 | 
124 |   return (
125 |     <>
126 |       <motion.div
127 |         ref={ref}
128 |         className={cn(
129 |           `fixed top-11 flex z-20 justify-center w-full
130 | 
131 |           ${dialog && "hidden"}
132 |           `
133 |         )}
134 |         style={{ opacity: scrollYProgress }}
135 |       >
136 |         <div className=" bg-[#161616] border p-2 rounded-lg  border-neutral-800 flex justify-between items-center  w-[640px]">
137 |           <Image
138 |             width={800}
139 |             height={800}
140 |             className="w-9 h-9  rounded-md object-cover"
141 |             src="/images/img3.jpg"
142 |             alt="hello"
143 |           />
144 |           <h1 className="text-white font-Intermedium">Jane Doe</h1>
145 |           <button
146 |             onClick={() => setOpen(true)}
147 |             className="w-9 h-9 rounded-lg bg-neutral-700 text-neutral-300 flex items-center justify-center"
148 |           >
149 |             <PiUploadThin />
150 |           </button>
151 |         </div>
152 |       </motion.div>
153 |       <div className=" h-60 relative  w-full -z-10">
154 |         <Image
155 |           width={800}
156 |           height={800}
157 |           className=" h-full w-full object-cover  absolute opacity-60"
158 |           src="/images/img4.jpg"
159 |           alt="hi"
160 |         />
161 |       </div>
162 | 
163 |       <div className="   w-full flex justify-center z-10 relative -top-9">
164 |         <div className="absolute  p-1 rounded-full bg-[#111111]">
165 |           <Image
166 |             width={800}
167 |             height={800}
168 |             className="w-16 h-16 rounded-full object-cover "
169 |             src="/images/img9.jpg"
170 |             alt="example"
171 |           />
172 |         </div>
173 |       </div>
174 | 
175 |       <div className="bg-[#111111] h-screen p-3">
176 |         <div className="h-screen max-w-lg mx-auto bg-[#111111] pt-14">
177 |           <div>
178 |             <div className="text-center">
179 |               <h3 className="font-Intermedium text-white text-2xl flex justify-center items-center gap-x-2">
180 |                 Jane Doe
181 |                 <RiVerifiedBadgeFill className="text-[#B5924F] text-xl" />
182 |               </h3>
183 |               <div className="mt-3 text-neutral-500 flex justify-center gap-x-2 items-center font-Interegular">
184 |                 <p>Est. 1999</p>
185 |                 <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
186 |                 <p>New York, NY</p>
187 |                 <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
188 |                 <p>He/Him</p>
189 |               </div>
190 |             </div>
191 |             <div>
192 |               <p className="font-Intermedium text-neutral-500 text-center my-3">
193 |                 Sam Brown is a travel vlogger, content creator and small
194 |                 business owner based in New York.
195 |               </p>
196 | 
197 |               <div className="flex justify-center ">
198 |                 <Link
199 |                   href={"https://github.com/joscript/"}
200 |                   className="flex items-center gap-x-2 hover:bg-neutral-900 transition-all ease-in duration-100 p-1 px-2 rounded-xl"
201 |                 >
202 |                   <PiGlobeSimpleThin className=" text-xl text-neutral-500" />
203 |                   <p className="text-white font-Intermedium">Janedoe.com</p>
204 |                 </Link>
205 |               </div>
206 |             </div>
207 | 
208 |             <div className="mt-5">
209 |               <YutubeLink />
210 |             </div>
211 | 
212 |             {/* Latest Post */}
213 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
214 |               <div className=" gap-x-6  flex justify-between ">
215 |                 <div className="flex justify-between items-center w-full p-2">
216 |                   <p className="text-white font-Intermedium">Latest Post</p>
217 |                   <Link
218 |                     href={"/"}
219 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
220 |                   >
221 |                     <BsTwitterX />
222 |                     <span>@Joscript</span>
223 |                   </Link>
224 |                 </div>
225 |               </div>
226 | 
227 |               <div className="bg-[#1C1C1C] p-3 rounded-2xl mt-3 ">
228 |                 <div className="flex gap-x-4">
229 |                   <Image
230 |                     width={800}
231 |                     height={800}
232 |                     className="w-11 h-11 rounded-full"
233 |                     src="/images/img1.jpg"
234 |                     alt="hey"
235 |                   />
236 | 
237 |                   <div>
238 |                     <div className="flex items-center gap-x-2 ">
239 |                       <p className="font-Intermedium text-base text-white">
240 |                         Sammy Brown
241 |                       </p>
242 |                       <RiVerifiedBadgeFill className="text-[#1D9BF0] text-xl" />
243 |                     </div>
244 | 
245 |                     <div className="flex gap-x-2 items-center font-Interegular">
246 |                       <span className="text-neutral-500">@Sahmy</span>
247 |                       <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
248 |                       <button className="text-[#1D9BF0] font-Intermedium text-sm">
249 |                         Follow
250 |                       </button>
251 |                     </div>
252 |                   </div>
253 |                 </div>
254 |                 <div className="">
255 |                   <h3 className="text-base text-white my-3">
256 |                     We Live again, do subscribe
257 |                   </h3>
258 |                   <Image
259 |                     width={800}
260 |                     height={800}
261 |                     className="h-52 w-full object-cover rounded-md"
262 |                     src="/images/img9.jpg"
263 |                     alt=""
264 |                   />
265 |                   <div className="flex items-center gap-x-2 font-Intermedium text-neutral-400 text-sm">
266 |                     <p className="">10:39 PM </p>
267 |                     <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
268 |                     <p>Jul 23, 2023</p>
269 |                   </div>
270 |                 </div>
271 |               </div>
272 |             </div>
273 |             {/* Store */}
274 |             <Store />
275 | 
276 |             {/* Community */}
277 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
278 |               <div className=" gap-x-6  flex justify-between ">
279 |                 <div className="flex justify-between items-center w-full p-2">
280 |                   <p className="text-white font-Intermedium">
281 |                     Join my community
282 |                   </p>
283 |                   <Link
284 |                     href={"/"}
285 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
286 |                   >
287 |                     <BsPeople />
288 |                     <span>Joscript</span>
289 |                   </Link>
290 |                 </div>
291 |               </div>
292 | 
293 |               <InfiniteMovingCards />
294 |             </div>
295 | 
296 |             {/* Shop dicount */}
297 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
298 |               <div className=" gap-x-6  flex justify-between ">
299 |                 <div className="flex justify-between items-center w-full p-2">
300 |                   <p className="text-white font-Intermedium">Get 20% off</p>
301 |                   <Link
302 |                     href={"/"}
303 |                     className="p-1 px-2 w-fit rounded-full flex  gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in  text-neutral-300 items-center"
304 |                   >
305 |                     <SiBeatport className="text-[#FF0000]" />
306 |                     <span className="">@Joscript</span>
307 |                   </Link>
308 |                 </div>
309 |               </div>
310 | 
311 |               <div className=" p-3 rounded-2xl mt-3  bg-[#1C1C1C] cursor-pointer">
312 |                 <div className="">
313 |                   <p className="text-2xl text-center text-white leading-6">
314 |                     SGREEN30
315 |                   </p>
316 |                   <p className="text-center text-neutral-600 my-3">
317 |                     Use this code in my store{" "}
318 |                   </p>
319 | 
320 |                   {/* code to copy */}
321 | 
322 |                   <button
323 |                     onClick={onCopy2}
324 |                     className="w-full gap-x-3  h-10 rounded-lg bg-neutral-800 flex items-center justify-center hover:bg-neutral-700 duration-400 transition-all ease-in"
325 |                   >
326 |                     <span className="font-Intermedium  text-neutral-200 ">
327 |                       {copied2 ? "copied" : "Copy"}
328 |                     </span>
329 |                     <AnimatePresence>
330 |                       {copied2 ? (
331 |                         <motion.span
332 |                           initial={{ scale: 1 }}
333 |                           animate={{ scale: 0.8 }}
334 |                           exit={{ scale: 1 }}
335 |                           transition={{
336 |                             type: "spring",
337 |                             stiffness: 200,
338 |                             damping: 100,
339 |                           }}
340 |                         >
341 |                           <FcCheckmark className="w-4 h-4 " />
342 |                         </motion.span>
343 |                       ) : (
344 |                         <motion.span
345 |                           initial={{ scale: 0.8 }}
346 |                           animate={{ scale: 1 }}
347 |                           exit={{ scale: 0.8 }}
348 |                           transition={{
349 |                             type: "spring",
350 |                             stiffness: 200,
351 |                             damping: 10,
352 |                           }}
353 |                         >
354 |                           <TbCopy className="w-4 h-4 text-neutral-200 " />
355 |                         </motion.span>
356 |                       )}
357 |                     </AnimatePresence>
358 |                   </button>
359 |                 </div>
360 |               </div>
361 |             </div>
362 | 
363 |             <Location />
364 |             {/* Message */}
365 |             <Message />
366 |           </div>
367 |           <Footer />
368 |         </div>
369 |       </div>
370 | 
371 |       <motion.div
372 |         initial={{
373 |           display: !open ? "none" : "block",
374 |         }}
375 |         animate={{
376 |           display: open ? "flex" : "none",
377 |           transition: { duration: !open ? 1 : 0 },
378 |         }}
379 |         transition={{ duration: 0.8 }}
380 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-10 overscroll-y-none right-0 left-0 h-full"
381 |       >
382 |         <div className="max-w-md  bg-[#161616] py-3 px-3 rounded-xl">
383 |           <div className="flex justify-between items-center text-white">
384 |             <p className="text-xl font-Intermedium">Share this profile</p>
385 | 
386 |             <div className="cursor-pointer" onClick={() => setOpen(false)}>
387 |               <PiXCircleLight className="text-2xl text-neutral-300" />
388 |             </div>
389 |           </div>
390 | 
391 |           <div className="mt-3">
392 |             {links.map((link, indx) => (
393 |               <div
394 |                 key={indx}
395 |                 className={`flex items-center justify-between  text-neutral-300 hover:bg-neutral-800 duration-300 ease-in-out transition-all p-2 mt-1 rounded-xl cursor-pointer ${
396 |                   indx === links.length - 1 &&
397 |                   "bg-neutral-950 hover:bg-neutral-950"
398 |                 }`}
399 |               >
400 |                 <div className="flex items-center gap-x-2 ">
401 |                   {link.iconFirst}
402 |                   <p
403 |                     className={` font-Intermedium ${
404 |                       indx === links.length - 1 ? "text-base " : "text-lg"
405 |                     }  `}
406 |                   >
407 |                     {link.name}
408 |                   </p>
409 |                 </div>
410 |                 {indx === links.length - 1 ? (
411 |                   <span
412 |                     onClick={onCopy}
413 |                     className="flex items-center bg-neutral-300  p-1 rounded-lg px-1 gap-x-1 font-Intermedium text-neutral-600 cursor-pointer "
414 |                   >
415 |                     {copied ? "Copied" : link.stri}
416 | 
417 |                     <AnimatePresence>
418 |                       {copied ? (
419 |                         <motion.span
420 |                           initial={{ scale: 1 }}
421 |                           animate={{ scale: 0.8 }}
422 |                           exit={{ scale: 1 }}
423 |                           transition={{
424 |                             type: "spring",
425 |                             stiffness: 200,
426 |                             damping: 100,
427 |                           }}
428 |                         >
429 |                           <FcCheckmark className="w-4 h-4" />
430 |                         </motion.span>
431 |                       ) : (
432 |                         <motion.span
433 |                           initial={{ scale: 0.8 }}
434 |                           animate={{ scale: 1 }}
435 |                           exit={{ scale: 0.8 }}
436 |                           transition={{
437 |                             type: "spring",
438 |                             stiffness: 200,
439 |                             damping: 10,
440 |                           }}
441 |                         >
442 |                           <TbCopy className="w-4 h-4" />
443 |                         </motion.span>
444 |                       )}
445 |                     </AnimatePresence>
446 |                   </span>
447 |                 ) : (
448 |                   link.lastIcon
449 |                 )}
450 |               </div>
451 |             ))}
452 |           </div>
453 |         </div>
454 |       </motion.div>
455 |       {/* divide */}
456 |       <motion.div
457 |         initial={{
458 |           display: !dialog ? "none" : "block",
459 |         }}
460 |         animate={{
461 |           display: dialog ? "flex" : "none",
462 |           transition: { duration: !dialog ? 1 : 0 },
463 |         }}
464 |         transition={{ duration: 0.8 }}
465 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-10 overscroll-y-none right-0 left-0 h-full"
466 |       >
467 |         <div className="max-w-xl w-4/6 lg:w-4/12  bg-[#161616] py-3 px-3 rounded-xl ">
468 |           <div className="flex justify-center relative ">
469 |             <div
470 |               className="cursor-pointer absolute right-2 top-2  "
471 |               onClick={() => setDialog(false)}
472 |             >
473 |               <PiXCircleLight className="text-2xl text-neutral-300" />
474 |             </div>
475 |             <Image
476 |               width={800}
477 |               height={800}
478 |               className="w-14 h-14 rounded-full object-cover "
479 |               src="/images/img9.jpg"
480 |               alt=""
481 |             />
482 |           </div>
483 |           <p className="text-neutral-300 text-center font-Interegular mt-3">
484 |             Subscribe to Sammy
485 |           </p>
486 |           <p className="text-center font-Intermedium text-neutral-600 my-1">
487 |             Stay up to date with everything important
488 |           </p>
489 | 
490 |           <div className="mt-5">
491 |             <form action="">
492 |               <input
493 |                 className="bg-neutral-800 rounded-lg p-2 w-full placeholder:text-neutral-600 mt-2 focus:ring-2 ring-neutral-500 outline-none text-neutral-400 font-Intermedium "
494 |                 type="text"
495 |                 placeholder="Your email"
496 |                 name=""
497 |                 id=""
498 |               />
499 |               <button className="bg-neutral-800 p-2 rounded-lg mt-2.5 w-full text-neutral-200 font-Intermedium">
500 |                 Subscribe
501 |               </button>
502 |             </form>
503 |           </div>
504 |         </div>
505 |       </motion.div>
506 |     </>
507 |   );
508 | }
509 | 
510 | export default Header;
511 | 


--------------------------------------------------------------------------------
/app/layout.js:
--------------------------------------------------------------------------------
 1 | // import { Inter } from 'next/font/google'
 2 | import "./globals.css";
 3 | import StandardLink from "./standard/StandardLink";
 4 | 
 5 | // const inter = Inter({ subsets: ['latin'] })
 6 | 
 7 | export const metadata = {
 8 |   title: "My portfolio",
 9 |   description: "Get to kno more about me",
10 | };
11 | 
12 | export default function RootLayout({ children }) {
13 |   return (
14 |     <html lang="en">
15 |       <body>
16 |         <StandardLink />
17 |         {children}
18 |       </body>
19 |     </html>
20 |   );
21 | }
22 | 


--------------------------------------------------------------------------------
/app/page.js:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | import Header from "@/app/components/Header";
 3 | 
 4 | export default function Home() {
 5 |   return (
 6 |     <div>
 7 |       <Header />
 8 |     </div>
 9 |   );
10 | }
11 | 


--------------------------------------------------------------------------------
/app/podcast/page.jsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useRef, useState, useEffect } from "react";
  4 | 
  5 | import Link from "next/link";
  6 | import { AnimatePresence, motion, useScroll } from "framer-motion";
  7 | import {
  8 |   PiBellSimple,
  9 |   PiGlobeSimpleThin,
 10 |   PiUploadThin,
 11 |   PiArrowSquareOutThin,
 12 |   PiXCircleLight,
 13 |   PiFacebookLogoLight,
 14 |   PiLinkedinLogoLight,
 15 |   PiLinkLight,
 16 |   PiInstagramLogoThin,
 17 |   PiCalendar,
 18 | } from "react-icons/pi";
 19 | 
 20 | import { FcCheckmark } from "react-icons/fc";
 21 | import { FaAngleRight, FaTwitter } from "react-icons/fa";
 22 | import { RiVerifiedBadgeFill } from "react-icons/ri";
 23 | import { TbBrandYoutubeFilled, TbCopy } from "react-icons/tb";
 24 | import YutubeLink from "@/app/components/YutubeLink";
 25 | import {
 26 |   BsTwitterX,
 27 |   BsThreads,
 28 |   BsWhatsapp,
 29 |   BsMessenger,
 30 |   BsPeople,
 31 |   BsYoutube,
 32 |   BsSpotify,
 33 |   BsFileMusic,
 34 | } from "react-icons/bs";
 35 | // import { LiaFlagUsaSolid } from "react-icons/lia";
 36 | import YouTube from "react-youtube";
 37 | import { Spotify } from "react-spotify-embed";
 38 | 
 39 | import Stories from "@/app/components/Stories";
 40 | import stories from "../../data";
 41 | // import Stars from "./Stars";
 42 | import Location from "@/app/components/Location";
 43 | // import Services from "./Services";
 44 | // import Store from "./Store";
 45 | // import Message from "./Message";
 46 | import Footer from "@/app/components/Footer";
 47 | import Message from "../components/Message";
 48 | import { cn } from "@nextui-org/react";
 49 | 
 50 | import CountUp from "react-countup";
 51 | import { InfiniteMovingCards } from "../components/InfiniteMovingCards";
 52 | import {
 53 |   SiApplepodcasts,
 54 |   SiGooglepodcasts,
 55 |   SiOvercast,
 56 |   SiPocketcasts,
 57 | } from "react-icons/si";
 58 | import Image from "next/image";
 59 | 
 60 | const inviteUrl = `Sam@dev.com`;
 61 | 
 62 | function Header({ value }) {
 63 |   const [copied, setCopied] = useState(false);
 64 |   const [open, setOpen] = useState(false);
 65 |   const [dialog, setDialog] = useState(false);
 66 | 
 67 |   const ref = useRef(null);
 68 | 
 69 |   const { scrollYProgress } = useScroll({
 70 |     target: ref,
 71 |     offset: ["0 0", "1 0"],
 72 |   });
 73 | 
 74 |   const onCopy = () => {
 75 |     navigator.clipboard.writeText(inviteUrl);
 76 |     setCopied(true);
 77 | 
 78 |     setTimeout(() => {
 79 |       setCopied(false);
 80 |     }, 1000);
 81 |   };
 82 | 
 83 |   const links = [
 84 |     {
 85 |       iconFirst: <PiFacebookLogoLight className="text-2xl" />,
 86 |       name: "Share on Facebook",
 87 | 
 88 |       lastIcon: <FaAngleRight />,
 89 |     },
 90 |     {
 91 |       iconFirst: <PiLinkedinLogoLight className="text-2xl" />,
 92 |       name: "Share on LinkedIn",
 93 |       lastIcon: <FaAngleRight />,
 94 |     },
 95 |     {
 96 |       iconFirst: <FaTwitter className="text-2xl" />,
 97 |       name: "Share on X",
 98 |       lastIcon: <FaAngleRight />,
 99 |     },
100 |     {
101 |       iconFirst: <BsThreads className="text-2xl" />,
102 |       name: "Share on Threads",
103 |       lastIcon: <FaAngleRight />,
104 |     },
105 |     {
106 |       iconFirst: <BsWhatsapp className="text-2xl" />,
107 |       name: "Share on Whatsapp",
108 |       lastIcon: <FaAngleRight />,
109 |     },
110 |     {
111 |       iconFirst: <BsMessenger className="text-2xl" />,
112 |       name: "Share on Messanger",
113 |       lastIcon: <FaAngleRight />,
114 |     },
115 |     {
116 |       iconFirst: <PiLinkLight className="text-2xl" />,
117 |       name: "Sammy@gmail.com",
118 |       stri: "Copy",
119 |       lastIcon: <FaAngleRight />,
120 |     },
121 |   ];
122 | 
123 |   const options = {
124 |     playerVars: {
125 |       autoplay: 1,
126 |       controls: 1,
127 |     },
128 |   };
129 | 
130 |   const onReady = (e) => {
131 |     e.target.pauseVideo();
132 |   };
133 | 
134 |   // let copiedd = "hey@josephhjamess46@gmail.com";
135 | 
136 |   // console.log(links.at(-1).stri);
137 | 
138 |   return (
139 |     <>
140 |       <motion.div
141 |         ref={ref}
142 |         className={cn(
143 |           `fixed top-11 flex z-20 justify-center w-full
144 | 
145 |           ${dialog && "hidden"}
146 |           `
147 |         )}
148 |         style={{ opacity: scrollYProgress }}
149 |       >
150 |         <div className=" bg-[#161616] border p-2 rounded-lg  border-neutral-800 flex justify-between items-center  w-[640px]">
151 |           <Image
152 |             width={800}
153 |             height={800}
154 |             className="w-9 h-9  rounded-md object-cover"
155 |             src="/images/img9.jpg"
156 |             alt=""
157 |           />
158 |           <h1 className="text-white font-Intermedium">Joscript Podcast</h1>
159 |           <button
160 |             onClick={() => setOpen(true)}
161 |             className="w-9 h-9 rounded-lg bg-neutral-700 text-neutral-300 flex items-center justify-center"
162 |           >
163 |             <PiUploadThin />
164 |           </button>
165 |         </div>
166 |       </motion.div>
167 |       <div className=" h-60 relative  w-full -z-10">
168 |         <Image
169 |           width={800}
170 |           height={800}
171 |           className=" h-full w-full object-cover  absolute opacity-60"
172 |           src="/images/img9.jpg"
173 |           alt="hi"
174 |         />
175 |       </div>
176 | 
177 |       <div className="   w-full flex justify-center z-10 relative -top-9">
178 |         <div className="absolute  p-1 rounded-full bg-[#111111]">
179 |           <Image
180 |             width={800}
181 |             height={800}
182 |             className="w-16 h-16 rounded-full object-cover "
183 |             src="/images/img7.jpg"
184 |             alt=""
185 |           />
186 |         </div>
187 |       </div>
188 | 
189 |       <div className="bg-[#111111] h-screen p-3">
190 |         <div className="h-screen max-w-lg mx-auto bg-[#111111] pt-14">
191 |           <div>
192 |             <div className="text-center">
193 |               <h3 className="font-Intermedium text-white text-2xl flex justify-center items-center gap-x-2">
194 |                 Joscript Pod
195 |                 <RiVerifiedBadgeFill className="text-[#B5924F] text-xl" />
196 |               </h3>
197 |               <div className="mt-3 text-neutral-500 flex justify-center gap-x-2 items-center font-Interegular">
198 |                 <p>Est. 2009</p>
199 |               </div>
200 |             </div>
201 |             <div>
202 |               <p className="font-Intermedium text-neutral-500 text-center my-3">
203 |                 Join JoScript and Sammy Smith as they explore untold narratives,
204 |                 hidden meanings, and fascinating connections that shape our
205 |                 world.tent creator and small business owner based in New York.
206 |               </p>
207 | 
208 |               <div className="flex justify-center gap-x-7">
209 |                 <Link
210 |                   href={"https://github.com/joscript/"}
211 |                   className="flex items-center gap-x-2 hover:bg-neutral-900 transition-all ease-in duration-100 p-1 px-2 rounded-xl"
212 |                 >
213 |                   <PiGlobeSimpleThin className=" text-xl text-neutral-500" />
214 |                   <p className="text-white font-Intermedium">JoScriptdev.com</p>
215 |                 </Link>
216 |                 <div className=" items-center gap-x-2  flex  cursor-pointer hover:bg-neutral-900 transition-all ease-in duration-100 p-1 px-2 rounded-xl">
217 |                   <PiCalendar className=" text-xl text-neutral-500" />
218 |                   <p className="text-white font-Intermedium">
219 |                     {" "}
220 |                     New Videos every week
221 |                   </p>
222 |                 </div>
223 |               </div>
224 |             </div>
225 | 
226 |             <div className="grid md:grid-cols-2 gap-3 my-3 justify-center md:justify-normal">
227 |               <div className="flex items-center bg-neutral-900 hover:bg-neutral-800 transition-colors ease-in-out duration-300 cursor-pointer rounded-md p-1 px-2 gap-x-2 ">
228 |                 <BsSpotify className="text-2xl text-green-500" />
229 | 
230 |                 <div>
231 |                   <p className="uppercase text-neutral-600 text-xs">
232 |                     Listen on
233 |                   </p>
234 |                   <p className="text-base text-neutral-200">Spotify</p>
235 |                 </div>
236 |               </div>
237 |               <div className="flex items-center bg-neutral-900 hover:bg-neutral-800 transition-colors ease-in-out duration-300 cursor-pointer rounded-md p-1 px-2 gap-x-2">
238 |                 <SiApplepodcasts className="text-2xl text-purple-600" />
239 | 
240 |                 <div>
241 |                   <p className="uppercase text-neutral-600 text-xs">
242 |                     Listen on
243 |                   </p>
244 |                   <p className="text-base text-neutral-200">Apple Podcast</p>
245 |                 </div>
246 |               </div>
247 |               <div className="flex items-center bg-neutral-900 hover:bg-neutral-800 transition-colors ease-in-out duration-300 cursor-pointer rounded-md p-1 px-2 gap-x-2">
248 |                 <BsYoutube className="text-2xl text-red-500" />
249 | 
250 |                 <div>
251 |                   <p className="uppercase text-neutral-600 text-xs">
252 |                     Listen on
253 |                   </p>
254 |                   <p className="text-base text-neutral-200">Youtube</p>
255 |                 </div>
256 |               </div>
257 |               <div className="flex items-center bg-neutral-900 hover:bg-neutral-800 transition-colors ease-in-out duration-300 cursor-pointer rounded-md p-1 px-2 gap-x-2">
258 |                 <SiPocketcasts className="text-2xl text-red-500" />
259 | 
260 |                 <div>
261 |                   <p className="uppercase text-neutral-600 text-xs">
262 |                     Listen on
263 |                   </p>
264 |                   <p className="text-base text-neutral-200">Pocket Cast</p>
265 |                 </div>
266 |               </div>
267 |               <div className="flex items-center bg-neutral-900 hover:bg-neutral-800 transition-colors ease-in-out duration-300 cursor-pointer rounded-md p-1 px-2 gap-x-2">
268 |                 <SiOvercast className="text-2xl text-yellow-500" />
269 | 
270 |                 <div>
271 |                   <p className="uppercase text-neutral-600 text-xs">
272 |                     Listen on
273 |                   </p>
274 |                   <p className="text-base text-neutral-200">Overcast</p>
275 |                 </div>
276 |               </div>
277 |               <div className="flex items-center bg-neutral-900 hover:bg-neutral-800 transition-colors ease-in-out duration-300 cursor-pointer rounded-md p-1 px-2 gap-x-2">
278 |                 <SiGooglepodcasts className="text-2xl text-green-500" />
279 | 
280 |                 <div>
281 |                   <p className="uppercase text-neutral-600 text-xs">
282 |                     Listen on
283 |                   </p>
284 |                   <p className="text-base text-neutral-200">Google Podcast</p>
285 |                 </div>
286 |               </div>
287 |             </div>
288 | 
289 |             <div className="flex items-center justify-center gap-x-2 my-6">
290 |               <button
291 |                 onClick={() => setOpen(true)}
292 |                 className="w-10 h-10 rounded-lg bg-slate-50 flex items-center justify-center"
293 |               >
294 |                 <PiUploadThin />
295 |               </button>
296 |               <button
297 |                 onClick={onCopy}
298 |                 className="w-80 gap-x-3  h-10 rounded-lg bg-slate-50 flex items-center justify-center hover:bg-neutral-100 duration-400 transition-all ease-in"
299 |               >
300 |                 <span className="font-Intermedium ">
301 |                   {copied ? "copied" : "Sammy@gmail.com"}
302 |                 </span>
303 |                 <AnimatePresence>
304 |                   {copied ? (
305 |                     <motion.span
306 |                       initial={{ scale: 1 }}
307 |                       animate={{ scale: 0.8 }}
308 |                       exit={{ scale: 1 }}
309 |                       transition={{
310 |                         type: "spring",
311 |                         stiffness: 200,
312 |                         damping: 100,
313 |                       }}
314 |                     >
315 |                       <FcCheckmark className="w-4 h-4" />
316 |                     </motion.span>
317 |                   ) : (
318 |                     <motion.span
319 |                       initial={{ scale: 0.8 }}
320 |                       animate={{ scale: 1 }}
321 |                       exit={{ scale: 0.8 }}
322 |                       transition={{
323 |                         type: "spring",
324 |                         stiffness: 200,
325 |                         damping: 10,
326 |                       }}
327 |                     >
328 |                       <TbCopy className="w-4 h-4" />
329 |                     </motion.span>
330 |                   )}
331 |                 </AnimatePresence>
332 |               </button>
333 |               <button
334 |                 onClick={() => setDialog(true)}
335 |                 className="w-10 h-10 rounded-lg bg-slate-50 flex items-center justify-center"
336 |               >
337 |                 <PiBellSimple />
338 |               </button>
339 |             </div>
340 |             <div className="mt-5">
341 |               <YutubeLink />
342 |             </div>
343 | 
344 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
345 |               <div className=" gap-x-6  flex justify-between ">
346 |                 <div className="flex justify-between items-center w-full p-2">
347 |                   <p className="text-white font-Intermedium">Stats</p>
348 |                   <Link
349 |                     href={"/"}
350 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
351 |                   >
352 |                     <TbBrandYoutubeFilled className="text-red-600" />
353 |                     <span>@Joscript</span>
354 |                   </Link>
355 |                 </div>
356 |               </div>
357 | 
358 |               <YouTube
359 |                 videoId="p69xC3CW7WQ"
360 |                 options={options}
361 |                 onReady={onReady}
362 |                 id="video"
363 |                 iframeClassName={"lg:w-[500px] h-[250px]"}
364 |               />
365 |             </div>
366 | 
367 |             {/* Your host */}
368 | 
369 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
370 |               <div className=" gap-x-6  flex justify-between ">
371 |                 <p className="text-white font-Intermedium">Your Hosts</p>
372 |               </div>
373 | 
374 |               <div className=" p-2 rounded-2xl mt-3  flex  gap-x-5 hover:bg-[#1C1C1C] cursor-pointer">
375 |                 <div className="relative">
376 |                   <Image
377 |                     width={800}
378 |                     height={800}
379 |                     className="w-14 h-14 object-cover rounded-full"
380 |                     src="/images/img4.jpg"
381 |                     alt=""
382 |                   />
383 |                 </div>
384 |                 <div className="leading-8">
385 |                   <p className="text-base text-white leading-6">JoScript</p>
386 | 
387 |                   <p className="text-sm text-neutral-500">
388 |                     Co-host of Joscript{" "}
389 |                   </p>
390 |                 </div>
391 |               </div>
392 |               <div className=" p-2 rounded-2xl  flex i gap-x-5 hover:bg-[#1C1C1C] cursor-pointer">
393 |                 <div className="relative">
394 |                   <Image
395 |                     width={800}
396 |                     height={800}
397 |                     className="w-14 h-14 object-cover rounded-full"
398 |                     src="/images/img3.jpg"
399 |                     alt=""
400 |                   />
401 |                 </div>
402 |                 <div className="leading-8">
403 |                   <p className="text-base text-white leading-6">Real Estate</p>
404 |                   <div className="flex items-center gap-x-2 text-neutral-500 font-semibold ">
405 |                     <p className="text-sm">
406 |                       Co-host of Joscript and Real Estate
407 |                     </p>
408 |                   </div>
409 |                 </div>
410 |               </div>
411 |             </div>
412 | 
413 |             {/* Tweet */}
414 | 
415 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
416 |               <div className=" gap-x-6  flex justify-between ">
417 |                 <div className="flex justify-between items-center w-full p-2">
418 |                   <p className="text-white font-Intermedium">Latest Post</p>
419 |                   <Link
420 |                     href={"/"}
421 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
422 |                   >
423 |                     <BsTwitterX />
424 |                     <span>@Joscript</span>
425 |                   </Link>
426 |                 </div>
427 |               </div>
428 | 
429 |               <div className="bg-[#1C1C1C] p-3 rounded-2xl mt-3 ">
430 |                 <div className="flex gap-x-4">
431 |                   <Image
432 |                     width={800}
433 |                     height={800}
434 |                     className="w-11 h-11 rounded-full"
435 |                     src="/images/img1.jpg"
436 |                     alt=""
437 |                   />
438 | 
439 |                   <div>
440 |                     <div className="flex items-center gap-x-2 ">
441 |                       <p className="font-Intermedium text-base text-white">
442 |                         JoScript Joe
443 |                       </p>
444 |                       <RiVerifiedBadgeFill className="text-[#1D9BF0] text-xl" />
445 |                     </div>
446 | 
447 |                     <div className="flex gap-x-2 items-center font-Interegular">
448 |                       <span className="text-neutral-500 text-sm">@joe</span>
449 |                       <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
450 |                       <button className="text-[#1D9BF0] font-Intermedium text-sm">
451 |                         Follow
452 |                       </button>
453 |                     </div>
454 |                   </div>
455 |                 </div>
456 |                 <div className="">
457 |                   <h3 className=" text-neutral-100 my-3 text-base">
458 |                     We’re joined in the studio by Miss Ella who is a marine
459 |                     biologist and An Author of best selling book. Episode airing
460 |                     soon.
461 |                   </h3>
462 |                   <Image
463 |                     width={800}
464 |                     height={800}
465 |                     className="h-52 w-full object-cover rounded-md"
466 |                     src="/images/img9.jpg"
467 |                     alt=""
468 |                   />
469 |                   <div className="flex items-center gap-x-2 font-Intermedium text-neutral-400 text-sm mt-1">
470 |                     <p className="">10:39 PM </p>
471 |                     <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
472 |                     <p>Jul 23, 2023</p>
473 |                   </div>
474 |                 </div>
475 |               </div>
476 |             </div>
477 | 
478 |             {/* featured video */}
479 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
480 |               <div className=" gap-x-6  flex justify-between ">
481 |                 <div className="flex justify-between items-center w-full p-2">
482 |                   <p className="text-white font-Intermedium">Latest episode</p>
483 |                   <Link
484 |                     href={"/"}
485 |                     className="p-1 px-2 w-fit rounded-full flex  gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in  text-neutral-300 items-center"
486 |                   >
487 |                     <BsFileMusic className="text-[#FF0000]" />
488 |                     <span className="">@Joscript</span>
489 |                   </Link>
490 |                 </div>
491 |               </div>
492 | 
493 |               <Spotify
494 |                 className="w-full h-20 my-3 "
495 |                 link="https://open.spotify.com/playlist/37i9dQZF1DX0A8zVl7p82B?si=c2c06a3f57c24b48"
496 |               />
497 |             </div>
498 | 
499 |             {/* Your community */}
500 | 
501 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
502 |               <div className=" gap-x-6  flex justify-between ">
503 |                 <div className="flex justify-between items-center w-full p-2">
504 |                   <p className="text-white font-Intermedium">
505 |                     Support me on Patreon
506 |                   </p>
507 |                   <Link
508 |                     href={"/"}
509 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
510 |                   >
511 |                     <BsPeople />
512 |                     <span>Joscript</span>
513 |                   </Link>
514 |                 </div>
515 |               </div>
516 | 
517 |               <InfiniteMovingCards />
518 |             </div>
519 | 
520 |             {/* E[isodes] */}
521 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
522 |               <div className=" gap-x-6  flex justify-between ">
523 |                 <div className="flex justify-between items-center w-full p-2">
524 |                   <p className="text-white font-Intermedium">
525 |                     Most popular episodes
526 |                   </p>
527 |                   <Link
528 |                     href={"/"}
529 |                     className="p-1 px-2 w-fit rounded-full flex  gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in  text-neutral-300 items-center"
530 |                   >
531 |                     <BsYoutube className="text-[#FF0000]" />
532 |                     <span className="">@Joscript</span>
533 |                   </Link>
534 |                 </div>
535 |               </div>
536 | 
537 |               <Spotify
538 |                 className="w-full h-20 my-3 "
539 |                 link="https://open.spotify.com/playlist/37i9dQZF1DX0A8zVl7p82B?si=c2c06a3f57c24b48"
540 |               />
541 |               <Spotify
542 |                 className="w-full h-20 my-3 "
543 |                 link="https://open.spotify.com/playlist/37i9dQZF1DX0A8zVl7p82B?si=c2c06a3f57c24b48"
544 |               />
545 |               <Spotify
546 |                 className="w-full h-20 my-3 "
547 |                 link="https://open.spotify.com/playlist/37i9dQZF1DX0A8zVl7p82B?si=c2c06a3f57c24b48"
548 |               />
549 |             </div>
550 | 
551 |             {/* Message */}
552 |             <Message />
553 |           </div>
554 |           <Footer />
555 |         </div>
556 |       </div>
557 | 
558 |       <motion.div
559 |         initial={{
560 |           display: !open ? "none" : "block",
561 |         }}
562 |         animate={{
563 |           display: open ? "flex" : "none",
564 |           transition: { duration: !open ? 1 : 0 },
565 |         }}
566 |         transition={{ duration: 0.8 }}
567 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-40 overscroll-y-none right-0 left-0 h-full px-2"
568 |       >
569 |         <div className="max-w-xl w-full lg:w-4/12   bg-[#161616] py-3 px-3 rounded-xl">
570 |           <div className="flex justify-between items-center text-white">
571 |             <p className="text-xl font-Intermedium">Share this profile</p>
572 | 
573 |             <div className="cursor-pointer" onClick={() => setOpen(false)}>
574 |               <PiXCircleLight className="text-2xl text-neutral-300" />
575 |             </div>
576 |           </div>
577 | 
578 |           <div className="mt-3">
579 |             {links.map((link, indx) => (
580 |               <div
581 |                 key={indx}
582 |                 className={`flex items-center justify-between  text-neutral-300 hover:bg-neutral-800 duration-300 ease-in-out transition-all p-2 mt-1 rounded-xl cursor-pointer ${
583 |                   indx === links.length - 1 &&
584 |                   "bg-neutral-950 hover:bg-neutral-950"
585 |                 }`}
586 |               >
587 |                 <div className="flex items-center gap-x-2 ">
588 |                   {link.iconFirst}
589 |                   <p
590 |                     key={indx}
591 |                     className={` font-Intermedium ${
592 |                       indx === links.length - 1 ? "text-base " : "text-lg"
593 |                     }  `}
594 |                   >
595 |                     {link.name}
596 |                   </p>
597 |                 </div>
598 |                 {indx === links.length - 1 ? (
599 |                   <span
600 |                     onClick={onCopy}
601 |                     className="flex items-center bg-neutral-300  p-1 rounded-lg px-1 gap-x-1 font-Intermedium text-neutral-600 cursor-pointer "
602 |                   >
603 |                     {copied ? "Copied" : link.stri}
604 | 
605 |                     <AnimatePresence>
606 |                       {copied ? (
607 |                         <motion.span
608 |                           initial={{ scale: 1 }}
609 |                           animate={{ scale: 0.8 }}
610 |                           exit={{ scale: 1 }}
611 |                           transition={{
612 |                             type: "spring",
613 |                             stiffness: 200,
614 |                             damping: 100,
615 |                           }}
616 |                         >
617 |                           <FcCheckmark className="w-4 h-4" />
618 |                         </motion.span>
619 |                       ) : (
620 |                         <motion.span
621 |                           initial={{ scale: 0.8 }}
622 |                           animate={{ scale: 1 }}
623 |                           exit={{ scale: 0.8 }}
624 |                           transition={{
625 |                             type: "spring",
626 |                             stiffness: 200,
627 |                             damping: 10,
628 |                           }}
629 |                         >
630 |                           <TbCopy className="w-4 h-4" />
631 |                         </motion.span>
632 |                       )}
633 |                     </AnimatePresence>
634 |                   </span>
635 |                 ) : (
636 |                   link.lastIcon
637 |                 )}
638 |               </div>
639 |             ))}
640 |           </div>
641 |         </div>
642 |       </motion.div>
643 |       {/* divide */}
644 |       <motion.div
645 |         initial={{
646 |           display: !dialog ? "none" : "block",
647 |         }}
648 |         animate={{
649 |           display: dialog ? "flex" : "none",
650 |           transition: { duration: !dialog ? 1 : 0 },
651 |         }}
652 |         transition={{ duration: 0.8 }}
653 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-10 overscroll-y-none right-0 left-0 h-full "
654 |       >
655 |         <div className="max-w-xl w-4/6 lg:w-4/12  bg-[#161616] py-3 px-3 rounded-xl ">
656 |           <div className="flex justify-center relative ">
657 |             <div
658 |               className="cursor-pointer absolute right-2 top-2  "
659 |               onClick={() => setDialog(false)}
660 |             >
661 |               <PiXCircleLight className="text-2xl text-neutral-300" />
662 |             </div>
663 |             <Image
664 |               width={800}
665 |               height={800}
666 |               className="w-14 h-14 rounded-full object-cover "
667 |               src="/images/img10.jpg"
668 |               alt=""
669 |             />
670 |           </div>
671 |           <p className="text-neutral-300 text-center font-Interegular mt-3">
672 |             Don&apos;t miss new episodes
673 |           </p>
674 |           <p className="text-center font-Intermedium text-neutral-600 my-1">
675 |             Subscribe to our email list, and stay up to date when there &apos; s
676 |             a new episode of the Between The Lines Podcast
677 |           </p>
678 | 
679 |           <div className="mt-5">
680 |             <form action="">
681 |               <input
682 |                 className="bg-neutral-800 rounded-lg p-2 w-full placeholder:text-neutral-600 mt-2 focus:ring-2 ring-neutral-500 outline-none text-neutral-400 font-Intermedium "
683 |                 type="text"
684 |                 placeholder="Your email"
685 |                 name=""
686 |                 id=""
687 |               />
688 |               <button className="bg-neutral-800 p-2 rounded-lg mt-2.5 w-full text-neutral-200 font-Intermedium">
689 |                 Subscribe
690 |               </button>
691 |             </form>
692 |           </div>
693 |         </div>
694 |       </motion.div>
695 |     </>
696 |   );
697 | }
698 | 
699 | export default Header;
700 | 


--------------------------------------------------------------------------------
/app/rounded/page.jsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useRef, useState } from "react";
  4 | 
  5 | import Link from "next/link";
  6 | import { usePathname } from "next/navigation";
  7 | import { AnimatePresence, motion, useScroll } from "framer-motion";
  8 | import {
  9 |   PiArrowSquareOutThin,
 10 |   PiXCircleLight,
 11 |   PiFacebookLogoLight,
 12 |   PiLinkedinLogoLight,
 13 |   PiLinkLight,
 14 |   PiInstagramLogoThin,
 15 |   PiRecycleLight,
 16 |   PiCheckLight,
 17 |   PiLaptop,
 18 |   PiGlobe,
 19 |   PiYoutubeLogoLight,
 20 |   PiCaretDownLight,
 21 |   PiMusicNotesThin,
 22 |   PiShoppingCart,
 23 |   PiImageThin,
 24 |   PiImagesThin,
 25 | } from "react-icons/pi";
 26 | 
 27 | import { FcCheckmark } from "react-icons/fc";
 28 | import { FaAngleRight, FaTwitter } from "react-icons/fa";
 29 | import { RiVerifiedBadgeFill } from "react-icons/ri";
 30 | import { TbBrandYoutubeFilled, TbCopy } from "react-icons/tb";
 31 | // import Links from "./Links";
 32 | import { BsTwitterX, BsThreads, BsWhatsapp, BsMessenger } from "react-icons/bs";
 33 | import { LiaFlagUsaSolid } from "react-icons/lia";
 34 | 
 35 | import Stories from "@/app/components/Stories";
 36 | // import stories from "../../data";
 37 | import Stars from "@/app/components/Stars";
 38 | import Location from "@/app/components/Location";
 39 | import Services from "@/app/components/Services";
 40 | import Store from "@/app/components/Store";
 41 | import Message from "@/app/components/Message";
 42 | import Links from "../components/Links";
 43 | 
 44 | import { Accordion, AccordionItem } from "@nextui-org/react";
 45 | 
 46 | const inviteUrl = `hey@josephhjamess46@gmail.com`;
 47 | 
 48 | import { MonitorMobileIcon } from "../components/MonitorMobileIcon";
 49 | import { ShieldSecurityIcon } from "../components/ShieldSecurityIcon";
 50 | import { InfoIcon } from "../components/InfoIcon";
 51 | import { InvalidCardIcon } from "../components/InvalidCardIcon";
 52 | import Testimonials from "../components/Testimonials";
 53 | import Photos from "../components/Photos";
 54 | import Footer from "../components/Footer";
 55 | import LinkRounded from "@/app/components/LinkRounded";
 56 | 
 57 | import YouTube from "react-youtube";
 58 | import Image from "next/image";
 59 | 
 60 | function Rounded() {
 61 |   const [copied, setCopied] = useState(false);
 62 |   const [open, setOpen] = useState(false);
 63 |   const [dialog, setDialog] = useState(false);
 64 | 
 65 |   const ref = useRef(null);
 66 | 
 67 |   const path = usePathname();
 68 | 
 69 |   const itemClasses = {
 70 |     base: "py-0 w-full",
 71 |     title: "font-normal text-medium",
 72 |     trigger:
 73 |       "px-2 py-0 data-[hover=true]:bg-default-100 rounded-md h-14 flex items-center",
 74 |     indicator: "text-medium",
 75 |     content: "text-small px-2",
 76 |   };
 77 | 
 78 |   const options = {
 79 |     playerVars: {
 80 |       autoplay: 1,
 81 |       controls: 1,
 82 |     },
 83 |   };
 84 | 
 85 |   const onReady = (e) => {
 86 |     e.target.pauseVideo();
 87 |   };
 88 | 
 89 |   useScroll({
 90 |     target: ref,
 91 |     offset: ["0 1", "1.33 1"],
 92 |   });
 93 | 
 94 |   const onCopy = () => {
 95 |     navigator.clipboard.writeText(inviteUrl);
 96 |     setCopied(true);
 97 | 
 98 |     setTimeout(() => {
 99 |       setCopied(false);
100 |     }, 1000);
101 |   };
102 | 
103 |   const links = [
104 |     {
105 |       iconFirst: <PiFacebookLogoLight className="text-2xl" />,
106 |       name: "Share on Facebook",
107 | 
108 |       lastIcon: <FaAngleRight />,
109 |     },
110 |     {
111 |       iconFirst: <PiLinkedinLogoLight className="text-2xl" />,
112 |       name: "Share on LinkedIn",
113 |       lastIcon: <FaAngleRight />,
114 |     },
115 |     {
116 |       iconFirst: <FaTwitter className="text-2xl" />,
117 |       name: "Share on X",
118 |       lastIcon: <FaAngleRight />,
119 |     },
120 |     {
121 |       iconFirst: <BsThreads className="text-2xl" />,
122 |       name: "Share on Threads",
123 |       lastIcon: <FaAngleRight />,
124 |     },
125 |     {
126 |       iconFirst: <BsWhatsapp className="text-2xl" />,
127 |       name: "Share on Whatsapp",
128 |       lastIcon: <FaAngleRight />,
129 |     },
130 |     {
131 |       iconFirst: <BsMessenger className="text-2xl" />,
132 |       name: "Share on Messanger",
133 |       lastIcon: <FaAngleRight />,
134 |     },
135 |     {
136 |       iconFirst: <PiLinkLight className="text-2xl" />,
137 |       name: "hey@josephhjamess46@gmail.com",
138 |       stri: "Copy",
139 |       lastIcon: <FaAngleRight />,
140 |     },
141 |   ];
142 | 
143 |   // let copiedd = "hey@josephhjamess46@gmail.com";
144 | 
145 |   // console.log(links.at(-1).stri);
146 | 
147 |   return (
148 |     <>
149 |       {path === "/rounded" && ""}
150 | 
151 |       <div className="   w-full flex justify-center  mt-24">
152 |         <div className="absolute  p-1 rounded-md bg-[#111111]">
153 |           <Image
154 |             width={900}
155 |             height={900}
156 |             className="w-16 h-16 rounded-full object-cover "
157 |             src="/images/img4.png"
158 |             alt=""
159 |           />
160 |         </div>
161 |       </div>
162 | 
163 |       <div className="bg-[#111111] h-screen p-3">
164 |         <div className="h-screen max-w-lg mx-auto bg-[#111111] pt-14">
165 |           <div>
166 |             <div className="text-center">
167 |               <h3 className="font-Intermedium text-white text-2xl flex justify-center items-center gap-x-2">
168 |                 JoScript Joe
169 |                 <RiVerifiedBadgeFill className="text-[#B5924F] text-xl" />
170 |               </h3>
171 |               <div className="mt-3 text-neutral-500 flex justify-center gap-x-2 items-center font-Interegular">
172 |                 <p>Est. 1999</p>
173 |                 <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-md" />
174 |                 <p>Auckland, NZ</p>
175 |                 <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-md" />
176 |                 <p>He/Him</p>
177 |               </div>
178 |             </div>
179 |             <div>
180 |               <p className="font-Intermedium text-neutral-500 text-center my-3">
181 |                 Joscript is a software designer and content creator based in New
182 |                 Zealand.
183 |               </p>
184 | 
185 |               <div className="flex justify-center items-center">
186 |                 <div className="flex items-center gap-x-2   cursor-pointer hover:bg-neutral-900 transition-all ease-in duration-100 p-1 px-2 rounded-md w-fit text-center">
187 |                   <PiGlobe className=" text-xl text-neutral-500" />
188 |                   <p className="text-white font-Intermedium">
189 |                     {" "}
190 |                     JoScriptdev.com
191 |                   </p>
192 |                 </div>
193 |               </div>
194 |             </div>
195 |             <div className="mt-5">{path === "/rounded" && <LinkRounded />}</div>
196 |             <div>
197 |               <div className="bg-[#161616] gap-x-6 p-2.5 rounded-md mt-8 flex justify-between items-center hover:bg-neutral-800 duration-150 ease-out cursor-pointer ">
198 |                 <Image
199 |                   width={900}
200 |                   height={900}
201 |                   className="w-10 h-9 rounded-md object-cover"
202 |                   src="/images/f.jpg"
203 |                   alt=""
204 |                 />
205 |                 <div className="flex-1">
206 |                   <h4 className="font-Interegular text-white text-sm text-center">
207 |                     Ultra
208 |                   </h4>
209 |                 </div>
210 | 
211 |                 <button className="text-white flex items-center gap-x-2 h-fit bg-neutral-800 p-2 rounded-md">
212 |                   <PiArrowSquareOutThin />
213 |                 </button>
214 |               </div>
215 |               <div className="bg-[#161616] gap-x-6 p-2.5 rounded-md mt-2 flex justify-between items-center hover:bg-neutral-800 duration-150 ease-out cursor-pointer">
216 |                 <Image
217 |                   width={900}
218 |                   height={900}
219 |                   className="w-10 h-9 rounded-md object-cover"
220 |                   src="/images/cry.jpg"
221 |                   alt=""
222 |                 />
223 |                 <div className="flex-1">
224 |                   <h4 className="font-Interegular text-white text-sm text-center ">
225 |                     Grainy Gradients
226 |                   </h4>
227 |                 </div>
228 | 
229 |                 <button className="text-white flex items-center gap-x-2 h-fit bg-neutral-800 p-2 rounded-md">
230 |                   <PiArrowSquareOutThin />
231 |                 </button>
232 |               </div>
233 |               <div className="bg-[#161616] gap-x-6 p-2.5 rounded-md mt-2 flex justify-between items-center hover:bg-neutral-800 duration-150 ease-out cursor-pointer">
234 |                 <Image
235 |                   width={900}
236 |                   height={900}
237 |                   className="w-10 h-9 rounded-md object-cover"
238 |                   src="/images/yellow.jpg"
239 |                   alt=""
240 |                 />
241 |                 <div className="flex-1">
242 |                   <h4 className="font-Interegular text-white text-sm text-center ">
243 |                     AR & Design
244 |                   </h4>
245 |                 </div>
246 | 
247 |                 <button className="text-white flex items-center gap-x-2 h-fit bg-neutral-800 p-2 rounded-md">
248 |                   <PiArrowSquareOutThin />
249 |                 </button>
250 |               </div>
251 |             </div>
252 |             <Accordion
253 |               showDivider={false}
254 |               className=" flex flex-col  w-full  mt-2 "
255 |               variant="shadow"
256 |               itemClasses={itemClasses}
257 |               motionProps={{
258 |                 variants: {
259 |                   enter: {
260 |                     y: 0,
261 |                     opacity: 1,
262 |                     height: "auto",
263 |                     transition: {
264 |                       height: {
265 |                         type: "spring",
266 |                         stiffness: 500,
267 |                         damping: 30,
268 |                         duration: 1,
269 |                       },
270 |                       opacity: {
271 |                         easings: "ease",
272 |                         duration: 1,
273 |                       },
274 |                     },
275 |                   },
276 |                   exit: {
277 |                     y: -10,
278 |                     opacity: 0,
279 |                     height: 0,
280 |                     transition: {
281 |                       height: {
282 |                         easings: "ease",
283 |                         duration: 0.25,
284 |                       },
285 |                       opacity: {
286 |                         easings: "ease",
287 |                         duration: 0.3,
288 |                       },
289 |                     },
290 |                   },
291 |                 },
292 |               }}
293 |             >
294 |               <AccordionItem
295 |                 key="1"
296 |                 aria-label="Connected devices"
297 |                 className={`text-white  bg-[#161616] rounded-md
298 |                 } px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer`}
299 |                 startContent={<MonitorMobileIcon className="text-white" />}
300 |                 title="Latest Post"
301 |               >
302 |                 <div className=" p-3 px-0">
303 |                   <div className="flex gap-x-4">
304 |                     <Image
305 |                       width={900}
306 |                       height={900}
307 |                       className="w-11 h-11 rounded-md"
308 |                       src="/images/img1.jpg"
309 |                       alt=""
310 |                     />
311 | 
312 |                     <div>
313 |                       <div className="flex items-center gap-x-2 ">
314 |                         <p className="font-Intermedium text-base text-white">
315 |                           JoScript Joe
316 |                         </p>
317 |                         <RiVerifiedBadgeFill className="text-[#26a8ff] text-xl" />
318 |                       </div>
319 | 
320 |                       <div className="flex gap-x-2 items-center font-Interegular">
321 |                         <span className="text-neutral-400">@joe</span>
322 |                         <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-md" />
323 |                         <button className="text-blue-600 font-Intermedium text-sm">
324 |                           Follow
325 |                         </button>
326 |                       </div>
327 |                     </div>
328 |                   </div>
329 |                   <div className="">
330 |                     <h3 className="text-base text-white my-3">
331 |                       Propting in AI = The new writing
332 |                     </h3>
333 |                     <div className="flex items-center gap-x-2 font-Intermedium text-neutral-400 text-sm">
334 |                       <p className="">10:39 PM </p>
335 |                       <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-md" />
336 |                       <p>Jul 23, 2023</p>
337 |                     </div>
338 |                   </div>
339 |                 </div>
340 |               </AccordionItem>
341 | 
342 |               <AccordionItem
343 |                 key="2"
344 |                 aria-label="Apps Permissions"
345 |                 startContent={<ShieldSecurityIcon />}
346 |                 className="text-white  bg-[#161616]  rounded-md mt-2 px-3  hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
347 |                 title="Latest Video"
348 |               >
349 |                 <YouTube
350 |                   videoId="p69xC3CW7WQ"
351 |                   options={options}
352 |                   onReady={onReady}
353 |                   id="video"
354 |                   iframeClassName={"w-[500px] h-[250px]"}
355 |                 />
356 |               </AccordionItem>
357 |               <AccordionItem
358 |                 key="3"
359 |                 aria-label="Pending tasks"
360 |                 className="text-white bg-[#161616]  rounded-md mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
361 |                 startContent={<PiImagesThin className="text-warning" />}
362 |                 // startContent={<InfoIcon className="text-warning" />}
363 |                 title="Latest Photos"
364 |               >
365 |                 <Photos />
366 |               </AccordionItem>
367 |               <AccordionItem
368 |                 key="4"
369 |                 aria-label="Card expired"
370 |                 className="text-white  bg-[#161616]  rounded-md mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
371 |                 startContent={<PiShoppingCart className="text-danger" />}
372 |                 subtitle="Store"
373 |               >
374 |                 <Store />
375 |               </AccordionItem>
376 |               <AccordionItem
377 |                 key="5"
378 |                 aria-label="Card expired"
379 |                 className="text-white  bg-[#161616]  rounded-md mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
380 |                 startContent={<PiMusicNotesThin className="text-danger" />}
381 |                 subtitle="Latest played"
382 |               >
383 |                 {/* <Store /> */}
384 |                 {/* Music */}
385 |               </AccordionItem>
386 |               <AccordionItem
387 |                 key="6"
388 |                 aria-label="Services"
389 |                 className="text-white  bg-[#161616]  rounded-md mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
390 |                 startContent={<InvalidCardIcon className="text-danger" />}
391 |                 subtitle="Services"
392 |               >
393 |                 <Services />
394 |               </AccordionItem>
395 |               <AccordionItem
396 |                 key="7"
397 |                 aria-label="Card expired"
398 |                 className="text-white  bg-[#161616]  rounded-md mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
399 |                 startContent={<InvalidCardIcon className="text-danger" />}
400 |                 subtitle="Testimonials"
401 |               >
402 |                 <Testimonials />
403 |               </AccordionItem>
404 |               <AccordionItem
405 |                 key="8"
406 |                 aria-label="Card expired"
407 |                 className="text-white  bg-[#161616]  rounded-md mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
408 |                 startContent={<InvalidCardIcon className="text-danger" />}
409 |                 subtitle="Where I'm based"
410 |               >
411 |                 <Location />
412 |               </AccordionItem>
413 |               <AccordionItem
414 |                 key="9"
415 |                 aria-label="Card expired"
416 |                 className="text-white  bg-[#161616]  rounded-md mt-2 px-3 hover:bg-neutral-800 duration-150 ease-out cursor-pointer"
417 |                 startContent={<InvalidCardIcon className="text-danger" />}
418 |                 subtitle="Leave a message"
419 |               >
420 |                 <Message />
421 |               </AccordionItem>
422 |             </Accordion>
423 |           </div>
424 |         </div>
425 |       </div>
426 | 
427 |       <motion.div
428 |         initial={{
429 |           display: !open ? "none" : "block",
430 |         }}
431 |         animate={{
432 |           display: open ? "flex" : "none",
433 |           transition: { duration: !open ? 1 : 0 },
434 |         }}
435 |         transition={{ duration: 0.8 }}
436 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-10 overscroll-y-none right-0 left-0 h-full"
437 |       >
438 |         <div className="max-w-md  bg-[#161616] py-3 px-3 rounded-md">
439 |           <div className="flex justify-between items-center text-white">
440 |             <p className="text-xl font-Intermedium">Share this profile</p>
441 | 
442 |             <div className="cursor-pointer" onClick={() => setOpen(false)}>
443 |               <PiXCircleLight className="text-2xl text-neutral-300" />
444 |             </div>
445 |           </div>
446 | 
447 |           <div className="mt-3">
448 |             {links.map((link, indx) => (
449 |               <div
450 |                 key={indx}
451 |                 className={`flex items-center justify-between  text-neutral-300 hover:bg-neutral-800 duration-300 ease-in-out transition-all p-2 mt-1 rounded-md cursor-pointer ${
452 |                   indx === links.length - 1 &&
453 |                   "bg-neutral-950 hover:bg-neutral-950"
454 |                 }`}
455 |               >
456 |                 <div className="flex items-center gap-x-2 ">
457 |                   {link.iconFirst}
458 |                   <p
459 |                     key={indx}
460 |                     className={` font-Intermedium ${
461 |                       indx === links.length - 1 ? "text-base " : "text-lg"
462 |                     }  `}
463 |                   >
464 |                     {link.name}
465 |                   </p>
466 |                 </div>
467 |                 {indx === links.length - 1 ? (
468 |                   <span
469 |                     onClick={onCopy}
470 |                     className="flex items-center bg-neutral-300  p-1 rounded-md px-1 gap-x-1 font-Intermedium text-neutral-600 cursor-pointer "
471 |                   >
472 |                     {copied ? "Copied" : link.stri}
473 | 
474 |                     <AnimatePresence>
475 |                       {copied ? (
476 |                         <motion.span
477 |                           initial={{ scale: 1 }}
478 |                           animate={{ scale: 0.8 }}
479 |                           exit={{ scale: 1 }}
480 |                           transition={{
481 |                             type: "spring",
482 |                             stiffness: 200,
483 |                             damping: 100,
484 |                           }}
485 |                         >
486 |                           <FcCheckmark className="w-4 h-4" />
487 |                         </motion.span>
488 |                       ) : (
489 |                         <motion.span
490 |                           initial={{ scale: 0.8 }}
491 |                           animate={{ scale: 1 }}
492 |                           exit={{ scale: 0.8 }}
493 |                           transition={{
494 |                             type: "spring",
495 |                             stiffness: 200,
496 |                             damping: 10,
497 |                           }}
498 |                         >
499 |                           <TbCopy className="w-4 h-4" />
500 |                         </motion.span>
501 |                       )}
502 |                     </AnimatePresence>
503 |                   </span>
504 |                 ) : (
505 |                   link.lastIcon
506 |                 )}
507 |               </div>
508 |             ))}
509 |           </div>
510 |         </div>
511 |       </motion.div>
512 |       <motion.div
513 |         initial={{
514 |           display: !dialog ? "none" : "block",
515 |         }}
516 |         animate={{
517 |           display: dialog ? "flex" : "none",
518 |           transition: { duration: !dialog ? 1 : 0 },
519 |         }}
520 |         transition={{ duration: 0.8 }}
521 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-10 overscroll-y-none right-0 left-0 h-full"
522 |       >
523 |         <div className="max-w-md  bg-[#161616] py-3 px-3 rounded-md">
524 |           <div className="flex justify-center relative ">
525 |             <div
526 |               className="cursor-pointer absolute right-2 top-2 "
527 |               onClick={() => setDialog(false)}
528 |             >
529 |               <PiXCircleLight className="text-2xl text-neutral-300" />
530 |             </div>
531 |             <Image
532 |               width={900}
533 |               height={900}
534 |               className="w-14 h-14 rounded-md object-cover "
535 |               src="/images/f.jpg"
536 |               alt=""
537 |             />
538 |           </div>
539 |           <p className="text-neutral-300 text-center font-Interegular mt-3">
540 |             Subscribe to JoScript
541 |           </p>
542 |           <p className="text-center font-Intermedium text-neutral-600 my-1">
543 |             Stay up to date with everything important
544 |           </p>
545 | 
546 |           <form action="">
547 |             <input
548 |               className="bg-neutral-800 rounded-md p-2 w-full placeholder:text-neutral-600 mt-2 focus:ring-2 ring-neutral-500 outline-none text-neutral-400 font-Intermedium "
549 |               type="text"
550 |               placeholder="Your email"
551 |               name=""
552 |               id=""
553 |             />
554 |             <button className="bg-neutral-800 p-2 rounded-md mt-2 w-full text-neutral-200 font-Intermedium">
555 |               Subscribe
556 |             </button>
557 |           </form>
558 |         </div>
559 |       </motion.div>
560 |     </>
561 |   );
562 | }
563 | 
564 | export default Rounded;
565 | 


--------------------------------------------------------------------------------
/app/standard/StandardLink.jsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Link from "next/link";
  4 | import React, { useState } from "react";
  5 | 
  6 | import { motion } from "framer-motion";
  7 | 
  8 | import { PiCaretDoubleUp } from "react-icons/pi";
  9 | import { IoMdClose } from "react-icons/io";
 10 | import cn from "classnames";
 11 | import { usePathname } from "next/navigation";
 12 | 
 13 | function StandardLink() {
 14 |   const [dialog, setDialog] = useState(false);
 15 |   const [dialog2, setDialog2] = useState(false);
 16 |   const path = usePathname();
 17 |   return (
 18 |     <div>
 19 |       <div className="">
 20 |         <div className="fixed bottom-6 left-8 z-10 hidden md:block">
 21 |           <div
 22 |             onClick={() => setDialog(true)}
 23 |             className="flex items-center bg-neutral-900 w-40 rounded-xl h-14 px-2 justify-between cursor-pointer"
 24 |           >
 25 |             <div className="">
 26 |               <p className="text-neutral-600 font-Interegular uppercase text-xs">
 27 |                 Style
 28 |               </p>
 29 |               <p className="text-neutral-200 capitalize">
 30 |                 {path === "/detailed"
 31 |                   ? "Detailed"
 32 |                   : path === "/compact"
 33 |                   ? "compact"
 34 |                   : path === "/rounded"
 35 |                   ? "rounded"
 36 |                   : "detailed"}
 37 |               </p>
 38 |             </div>
 39 |             <PiCaretDoubleUp className="text-white" />
 40 |           </div>
 41 |         </div>
 42 | 
 43 |         <motion.div
 44 |           initial={{
 45 |             display: !dialog ? "none" : "block",
 46 |           }}
 47 |           animate={{
 48 |             display: dialog ? "flex" : "none",
 49 |             transition: { duration: !dialog ? 1 : 0 },
 50 |           }}
 51 |           transition={{ duration: 0.8 }}
 52 |           className="backdrop-blur-lg flex justify-center items-center w-full bg-black/50 fixed top-0 z-30  h-full"
 53 |         >
 54 |           <div className="py-3 px-3 rounded-xl">
 55 |             <div>
 56 |               <p className="text-neutral-600 text-center mb-5 uppercase font-Interegular text-xs">
 57 |                 Style
 58 |               </p>
 59 |             </div>
 60 |             <ul className="text-center w-full">
 61 |               <Link onClick={() => setDialog(false)} href={"/"}>
 62 |                 <li
 63 |                   className={cn(
 64 |                     `font-Interegular text-neutral-500  hover:bg-neutral-700/80 w-screen p-2,
 65 |               ${
 66 |                 path === "/"
 67 |                   ? "bg-neutral-800 p-2"
 68 |                   : "hover:bg-neutral-900/40 p-2"
 69 |               }
 70 |               `
 71 |                   )}
 72 |                 >
 73 |                   Detailed
 74 |                 </li>
 75 |               </Link>
 76 | 
 77 |               <Link onClick={() => setDialog(false)} href={"/compact"}>
 78 |                 <li
 79 |                   className={cn(
 80 |                     `font-Interegular text-neutral-500  hover:bg-neutral-700/80 w-screen p-2,
 81 |               ${
 82 |                 path === "/compact"
 83 |                   ? "bg-neutral-800 p-2"
 84 |                   : "hover:bg-neutral-900/40 p-2"
 85 |               }
 86 |               `
 87 |                   )}
 88 |                 >
 89 |                   Compact
 90 |                 </li>
 91 |               </Link>
 92 |               <Link onClick={() => setDialog(false)} href={"/rounded"}>
 93 |                 <li
 94 |                   className={cn(
 95 |                     `font-Interegular text-neutral-500  hover:bg-neutral-700/80 w-screen p-2,
 96 |               ${
 97 |                 path === "/rounded"
 98 |                   ? "bg-neutral-800 p-2"
 99 |                   : "hover:bg-neutral-900/40 p-2"
100 |               }
101 |               `
102 |                   )}
103 |                 >
104 |                   Rounded
105 |                 </li>
106 |               </Link>
107 |             </ul>
108 | 
109 |             <div className="flex justify-center  ">
110 |               <button
111 |                 className="absolute bottom-16 z-50 w-10 h-10 bg-neutral-800/25  rounded-full flex justify-center items-center"
112 |                 onClick={() => setDialog(false)}
113 |               >
114 |                 <IoMdClose className="w-7 h-7 text-white" />
115 |               </button>
116 |               <span className="uppercase text-xs font-Intermedium absolute bottom-12 text-white z-50">
117 |                 Close
118 |               </span>
119 |             </div>
120 |           </div>
121 |         </motion.div>
122 | 
123 |         {/* Dilog 2 */}
124 |         <div className="fixed bottom-6 left-8 md:left-auto right-8 z-10">
125 |           <div
126 |             onClick={() => setDialog2(true)}
127 |             className="flex items-center bg-neutral-900  md:w-40 rounded-xl h-14 px-2 justify-between cursor-pointer"
128 |           >
129 |             <div className="">
130 |               <p className="text-neutral-600 font-Interegular uppercase text-xs">
131 |                 Profile
132 |               </p>
133 |               <p className="text-neutral-200 capitalize">
134 |                 {path === "/"
135 |                   ? "General"
136 |                   : path === "/youtuber"
137 |                   ? "Youtuber"
138 |                   : path === "/indie-maker"
139 |                   ? "Indie Maker"
140 |                   : path === "/influencer"
141 |                   ? "Influencer"
142 |                   : path === "/podcast"
143 |                   ? "Podcast"
144 |                   : path === "/writer"
145 |                   ? "Writer"
146 |                   : "General"}
147 |               </p>
148 |             </div>
149 |             <PiCaretDoubleUp className="text-white" />
150 |           </div>
151 |         </div>
152 | 
153 |         {/* Dialog 2 */}
154 |         <motion.div
155 |           initial={{
156 |             display: !dialog2 ? "none" : "block",
157 |           }}
158 |           animate={{
159 |             display: dialog2 ? "flex" : "none",
160 |             transition: { duration: !dialog2 ? 1 : 0 },
161 |           }}
162 |           transition={{ duration: 0.8 }}
163 |           className="backdrop-blur-lg flex justify-center items-center w-full bg-black/50 fixed top-0 z-30  h-full"
164 |         >
165 |           <div className="py-3 px-3 rounded-xl">
166 |             <div>
167 |               <p className="text-neutral-600 text-center mb-5 uppercase font-Interegular text-xs">
168 |                 Profile
169 |               </p>
170 |             </div>
171 |             <ul className="text-center w-full">
172 |               <Link onClick={() => setDialog2(false)} href={"/"}>
173 |                 <li
174 |                   className={cn(
175 |                     `font-Interegular text-neutral-500  hover:bg-neutral-700/80 w-screen p-2,
176 |               ${
177 |                 path === "/"
178 |                   ? "bg-neutral-800 p-2"
179 |                   : "hover:bg-neutral-900/40 p-2"
180 |               }
181 |               `
182 |                   )}
183 |                 >
184 |                   General
185 |                 </li>
186 |               </Link>
187 | 
188 |               <Link onClick={() => setDialog2(false)} href={"/youtuber"}>
189 |                 <li
190 |                   className={cn(
191 |                     `font-Interegular text-neutral-500  hover:bg-neutral-700/80 w-screen p-2,
192 |               ${
193 |                 path === "/youTubeber"
194 |                   ? "bg-neutral-800 p-2"
195 |                   : "hover:bg-neutral-900/40 p-2"
196 |               }
197 |               `
198 |                   )}
199 |                 >
200 |                   YouTubeber
201 |                 </li>
202 |               </Link>
203 |               <Link onClick={() => setDialog2(false)} href={"/indie-maker"}>
204 |                 <li
205 |                   className={cn(
206 |                     `font-Interegular text-neutral-500  hover:bg-neutral-700/80 w-screen p-2,
207 |               ${
208 |                 path === "/indie-Maker"
209 |                   ? "bg-neutral-800 p-2"
210 |                   : "hover:bg-neutral-900/40 p-2"
211 |               }
212 |               `
213 |                   )}
214 |                 >
215 |                   Indie Maker
216 |                 </li>
217 |               </Link>
218 |               <Link onClick={() => setDialog2(false)} href={"/influencer"}>
219 |                 <li
220 |                   className={cn(
221 |                     `font-Interegular text-neutral-500  hover:bg-neutral-700/80 w-screen p-2,
222 |               ${
223 |                 path === "/influencer"
224 |                   ? "bg-neutral-800 p-2"
225 |                   : "hover:bg-neutral-900/40 p-2"
226 |               }
227 |               `
228 |                   )}
229 |                 >
230 |                   Influencer
231 |                 </li>
232 |               </Link>
233 |               <Link onClick={() => setDialog2(false)} href={"/podcast"}>
234 |                 <li
235 |                   className={cn(
236 |                     `font-Interegular text-neutral-500  hover:bg-neutral-700/80 w-screen p-2,
237 |               ${
238 |                 path === "/podcast"
239 |                   ? "bg-neutral-800 p-2"
240 |                   : "hover:bg-neutral-900/40 p-2"
241 |               }
242 |               `
243 |                   )}
244 |                 >
245 |                   Podcast
246 |                 </li>
247 |               </Link>
248 |               <Link onClick={() => setDialog2(false)} href={"/writer"}>
249 |                 <li
250 |                   className={cn(
251 |                     `font-Interegular text-neutral-500  hover:bg-neutral-700/80 w-screen p-2,
252 |               ${
253 |                 path === "/writer"
254 |                   ? "bg-neutral-800 p-2"
255 |                   : "hover:bg-neutral-900/40 p-2"
256 |               }
257 |               `
258 |                   )}
259 |                 >
260 |                   Writer
261 |                 </li>
262 |               </Link>
263 |             </ul>
264 | 
265 |             <div className="flex justify-center  ">
266 |               <button
267 |                 className="absolute bottom-16 z-50 w-10 h-10 bg-neutral-800/25  rounded-full flex justify-center items-center"
268 |                 onClick={() => setDialog2(false)}
269 |               >
270 |                 <IoMdClose className="w-7 h-7 text-white" />
271 |               </button>
272 |               <span className="uppercase text-xs font-Intermedium absolute bottom-12 text-white z-50">
273 |                 Close
274 |               </span>
275 |             </div>
276 |           </div>
277 |         </motion.div>
278 |       </div>
279 |     </div>
280 |   );
281 | }
282 | 
283 | export default StandardLink;
284 | 


--------------------------------------------------------------------------------
/app/standard/layout.jsx:
--------------------------------------------------------------------------------
 1 | // const inter = Inter({ subsets: ['latin'] })
 2 | 
 3 | import StandardLink from "./StandardLink";
 4 | 
 5 | export const metadata = {
 6 |   title: "My portfolio footer style",
 7 |   description: "Always visible",
 8 | };
 9 | 
10 | export default function RootLayout({ children }) {
11 |   return (
12 |     <html lang="en">
13 |       <body>
14 |         <StandardLink />
15 |         {children}
16 |       </body>
17 |     </html>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/app/writer/page.jsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useRef, useState } from "react";
  4 | 
  5 | import Link from "next/link";
  6 | import { AnimatePresence, motion, useScroll } from "framer-motion";
  7 | import {
  8 |   PiGlobeSimpleThin,
  9 |   PiUploadThin,
 10 |   PiXCircleLight,
 11 |   PiFacebookLogoLight,
 12 |   PiLinkedinLogoLight,
 13 |   PiLinkLight,
 14 |   PiCalendar,
 15 |   PiReadCvLogoLight,
 16 | } from "react-icons/pi";
 17 | 
 18 | import { FcCheckmark } from "react-icons/fc";
 19 | import { FaAngleRight, FaTwitter } from "react-icons/fa";
 20 | import { RiVerifiedBadgeFill } from "react-icons/ri";
 21 | import { TbBrandYoutubeFilled, TbCopy } from "react-icons/tb";
 22 | import YutubeLink from "@/app/components/YutubeLink";
 23 | import {
 24 |   BsTwitterX,
 25 |   BsThreads,
 26 |   BsWhatsapp,
 27 |   BsMessenger,
 28 |   BsPeople,
 29 | } from "react-icons/bs";
 30 | import YouTube from "react-youtube";
 31 | 
 32 | import Footer from "@/app/components/Footer";
 33 | import Message from "../components/Message";
 34 | import { cn } from "@nextui-org/react";
 35 | 
 36 | import CountUp from "react-countup";
 37 | import { InfiniteMovingCards } from "../components/InfiniteMovingCards";
 38 | import Image from "next/image";
 39 | 
 40 | const inviteUrl = `Franca@dev.com`;
 41 | 
 42 | function Header({ value }) {
 43 |   const [copied, setCopied] = useState(false);
 44 |   const [open, setOpen] = useState(false);
 45 |   const [dialog, setDialog] = useState(false);
 46 | 
 47 |   const ref = useRef(null);
 48 | 
 49 |   const { scrollYProgress } = useScroll({
 50 |     target: ref,
 51 |     offset: ["0 0", "1 0"],
 52 |   });
 53 | 
 54 |   const onCopy = () => {
 55 |     navigator.clipboard.writeText(inviteUrl);
 56 |     setCopied(true);
 57 | 
 58 |     setTimeout(() => {
 59 |       setCopied(false);
 60 |     }, 1000);
 61 |   };
 62 | 
 63 |   const links = [
 64 |     {
 65 |       iconFirst: <PiFacebookLogoLight className="text-2xl" />,
 66 |       name: "Share on Facebook",
 67 | 
 68 |       lastIcon: <FaAngleRight />,
 69 |     },
 70 |     {
 71 |       iconFirst: <PiLinkedinLogoLight className="text-2xl" />,
 72 |       name: "Share on LinkedIn",
 73 |       lastIcon: <FaAngleRight />,
 74 |     },
 75 |     {
 76 |       iconFirst: <FaTwitter className="text-2xl" />,
 77 |       name: "Share on X",
 78 |       lastIcon: <FaAngleRight />,
 79 |     },
 80 |     {
 81 |       iconFirst: <BsThreads className="text-2xl" />,
 82 |       name: "Share on Threads",
 83 |       lastIcon: <FaAngleRight />,
 84 |     },
 85 |     {
 86 |       iconFirst: <BsWhatsapp className="text-2xl" />,
 87 |       name: "Share on Whatsapp",
 88 |       lastIcon: <FaAngleRight />,
 89 |     },
 90 |     {
 91 |       iconFirst: <BsMessenger className="text-2xl" />,
 92 |       name: "Share on Messanger",
 93 |       lastIcon: <FaAngleRight />,
 94 |     },
 95 |     {
 96 |       iconFirst: <PiLinkLight className="text-2xl" />,
 97 |       name: "josephhjamess46@gmail.com",
 98 |       stri: "Copy",
 99 |       lastIcon: <FaAngleRight />,
100 |     },
101 |   ];
102 | 
103 |   const options = {
104 |     playerVars: {
105 |       autoplay: 1,
106 |       controls: 1,
107 |     },
108 |   };
109 | 
110 |   const onReady = (e) => {
111 |     e.target.pauseVideo();
112 |   };
113 | 
114 |   // let copiedd = "hey@josephhjamess46@gmail.com";
115 | 
116 |   // console.log(links.at(-1).stri);
117 | 
118 |   return (
119 |     <>
120 |       <motion.div
121 |         ref={ref}
122 |         className={cn(
123 |           `fixed top-11 flex z-20 justify-center w-full
124 | 
125 |           ${dialog && "hidden"}
126 |           `
127 |         )}
128 |         style={{ opacity: scrollYProgress }}
129 |       >
130 |         <div className=" bg-[#161616] border p-2 rounded-lg  border-neutral-800 flex justify-between items-center  w-[640px]">
131 |           <Image
132 |             width={900}
133 |             height={900}
134 |             className="w-9 h-9  rounded-md object-cover"
135 |             src="/images/img7.jpg"
136 |             alt=""
137 |           />
138 |           <h1 className="text-white font-Intermedium">Franca</h1>
139 |           <button
140 |             onClick={() => setOpen(true)}
141 |             className="w-9 h-9 rounded-lg bg-neutral-700 text-neutral-300 flex items-center justify-center"
142 |           >
143 |             <PiUploadThin />
144 |           </button>
145 |         </div>
146 |       </motion.div>
147 |       <div className=" h-60 relative  w-full -z-10">
148 |         <Image
149 |           width={900}
150 |           height={900}
151 |           // style={{ opacity: scrollYProgress }}
152 | 
153 |           className=" h-full w-full object-cover  absolute opacity-60"
154 |           src="/images/img7.jpg"
155 |           alt=""
156 |         />
157 |       </div>
158 | 
159 |       <div className="   w-full flex justify-center z-10 relative -top-9">
160 |         <div className="absolute  p-1 rounded-full bg-[#111111]">
161 |           <Image
162 |             width={900}
163 |             height={900}
164 |             className="w-16 h-16 rounded-full object-cover "
165 |             src="/images/img9.jpg"
166 |             alt=""
167 |           />
168 |         </div>
169 |       </div>
170 | 
171 |       <div className="bg-[#111111] h-screen p-3">
172 |         <div className="h-screen max-w-lg mx-auto bg-[#111111] pt-14">
173 |           <div>
174 |             <div className="text-center">
175 |               <h3 className="font-Intermedium text-white text-2xl flex justify-center items-center gap-x-2">
176 |                 Franca
177 |                 <RiVerifiedBadgeFill className="text-[#B5924F] text-xl" />
178 |               </h3>
179 |               <div className="mt-3 text-neutral-500 flex justify-center gap-x-2 items-center font-Interegular">
180 |                 <p>Est. 1999</p>
181 |                 <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
182 |                 <p>Syney, AUS</p>
183 |                 <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
184 |                 <p>He/Him</p>
185 |               </div>
186 |             </div>
187 |             <div>
188 |               <p className="font-Intermedium text-neutral-500 text-center my-3">
189 |                 Franca is a newsletter writer, podcaster and essayist based in
190 |                 Austin, Texas.
191 |               </p>
192 | 
193 |               <div className="flex justify-center items-center gap-x-2 ">
194 |                 <Link
195 |                   href={"https://github.com/joscript/"}
196 |                   className="flex items-center gap-x-2 hover:bg-neutral-900 transition-all ease-in duration-100 p-1 px-2 rounded-xl"
197 |                 >
198 |                   <PiGlobeSimpleThin className=" text-xl text-neutral-500" />
199 |                   <p className="text-white font-Intermedium">Franca.com</p>
200 |                 </Link>
201 |                 <span className="w-1 h-1 rounded-full bg-neutral-500" />
202 |                 <div className=" items-center gap-x-2  flex  cursor-pointer hover:bg-neutral-900 transition-all ease-in duration-100 p-1 px-2 rounded-xl">
203 |                   <PiCalendar className=" text-xl text-neutral-500" />
204 |                   <p className="text-white font-Intermedium">
205 |                     {" "}
206 |                     Newsletter every Friday
207 |                   </p>
208 |                 </div>
209 |               </div>
210 |             </div>
211 |             <div className="w-full  my-6">
212 |               <button className=" h-10 rounded-lg bg-slate-50 w-full">
213 |                 Subscribe to my newsletter
214 |               </button>
215 |             </div>
216 |             <div className="mt-5">
217 |               <YutubeLink />
218 |             </div>
219 | 
220 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
221 |               <div className=" gap-x-6  flex justify-between ">
222 |                 <div className="flex justify-between items-center w-full p-2">
223 |                   <p className="text-white font-Intermedium">Stats</p>
224 |                   <Link
225 |                     href={"/"}
226 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
227 |                   >
228 |                     <TbBrandYoutubeFilled className="text-red-600" />
229 |                     <span>@Joscript</span>
230 |                   </Link>
231 |                 </div>
232 |               </div>
233 | 
234 |               <div className="  mt-3  w-full flex bg-[#1C1C1C] justify-around rounded-lg h-24 items-center">
235 |                 <div className="text-center font-Intermedium text-neutral-300 text-2xl">
236 |                   <CountUp duration={7} end={17} />
237 |                   <p className="text-neutral-600  text-sm">issues</p>
238 |                 </div>
239 |                 <div className="text-white text-lg ">
240 |                   <div className="flex justify-center font-Intermedium text-neutral-300 text-2xl">
241 |                     <CountUp duration={10} end={120} className="" />
242 |                     <p>K</p>
243 |                   </div>
244 |                   <p className="text-neutral-600 text-sm">Weekly readers</p>
245 |                 </div>
246 |               </div>
247 | 
248 |               {/* Lates Post */}
249 |               <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
250 |                 <div className=" gap-x-6  flex justify-between ">
251 |                   <div className="flex justify-between items-center w-full p-2">
252 |                     <p className="text-white font-Intermedium">Latest Post</p>
253 |                     <Link
254 |                       href={"/"}
255 |                       className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
256 |                     >
257 |                       <BsTwitterX />
258 |                       <span>@Joscript</span>
259 |                     </Link>
260 |                   </div>
261 |                 </div>
262 | 
263 |                 <div className="bg-[#1C1C1C] p-3 rounded-2xl mt-3 ">
264 |                   <div className="flex gap-x-4">
265 |                     <Image
266 |                       width={900}
267 |                       height={900}
268 |                       className="w-11 h-11 rounded-full"
269 |                       src="/images/img1.jpg"
270 |                       alt=""
271 |                     />
272 | 
273 |                     <div>
274 |                       <div className="flex items-center gap-x-2 ">
275 |                         <p className="font-Intermedium text-base text-white">
276 |                           JoScript Joe
277 |                         </p>
278 |                         <RiVerifiedBadgeFill className="text-[#1D9BF0] text-xl" />
279 |                       </div>
280 | 
281 |                       <div className="flex gap-x-2 items-center font-Interegular">
282 |                         <span className="text-neutral-500">@joe</span>
283 |                         <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
284 |                         <button className="text-blue-600 font-Intermedium text-sm">
285 |                           Follow
286 |                         </button>
287 |                       </div>
288 |                     </div>
289 |                   </div>
290 |                   <div className="">
291 |                     <h3 className="text-base text-white my-3">
292 |                       Just published a new issue of my newsletter!
293 |                     </h3>
294 |                     <div className="flex items-center gap-x-2 font-Intermedium text-neutral-400 text-sm">
295 |                       <p className="">10:39 PM </p>
296 |                       <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
297 |                       <p>Jul 23, 2023</p>
298 |                     </div>
299 |                   </div>
300 |                 </div>
301 |               </div>
302 |             </div>
303 |             {/* Video Stats */}
304 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
305 |               <div className=" gap-x-6  flex justify-between ">
306 |                 <div className="flex justify-between items-center w-full p-2">
307 |                   <p className="text-white font-Intermedium">Stats</p>
308 |                   <Link
309 |                     href={"/"}
310 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
311 |                   >
312 |                     <TbBrandYoutubeFilled className="text-red-600" />
313 |                     <span>@Joscript</span>
314 |                   </Link>
315 |                 </div>
316 |               </div>
317 | 
318 |               <YouTube
319 |                 videoId="p69xC3CW7WQ"
320 |                 options={options}
321 |                 onReady={onReady}
322 |                 id="video"
323 |                 iframeClassName={"lg:w-[500px] h-[250px]"}
324 |               />
325 |             </div>
326 | 
327 |             {/* featured video */}
328 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
329 |               <div className=" gap-x-6  flex justify-between ">
330 |                 <div className="flex justify-between items-center w-full p-2">
331 |                   <p className="text-white font-Intermedium">
332 |                     Most popular issues
333 |                   </p>
334 |                   <Link
335 |                     href={"/"}
336 |                     className="p-1 px-2 w-fit rounded-full flex hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in  text-neutral-300 items-center"
337 |                   >
338 |                     <PiReadCvLogoLight className="text-yellow-500 " />
339 |                     <span className="">/Joscript</span>
340 |                   </Link>
341 |                 </div>
342 |               </div>
343 | 
344 |               <div className=" p-3 rounded-2xl mt-3 bg-[#1C1C1C] cursor-pointer">
345 |                 <div className="leading-8">
346 |                   <p className="text-neutral-500 uppercase text-xs font-semibold">
347 |                     Issue #10 — DEC 3, 2022
348 |                   </p>
349 |                   <p className="text-base text-white leading-6">
350 |                     Unleashing the Power of Community
351 |                   </p>
352 |                   <p className="text-neutral-500">
353 |                     Building Strong Connections for Business Success
354 |                   </p>
355 |                 </div>
356 |               </div>
357 |               <div className=" p-3 rounded-2xl mt-3 bg-[#1C1C1C] cursor-pointer">
358 |                 <div className="leading-8">
359 |                   <p className="text-neutral-500 uppercase text-xs font-semibold">
360 |                     Issue #15 — Dec 3 2021
361 |                   </p>
362 |                   <p className="text-base text-white leading-6">
363 |                     Navigating the Real Estate Market
364 |                   </p>
365 |                   <p className="text-neutral-500">
366 |                     insights and Strategies for Buyers and Sellers
367 |                   </p>
368 |                 </div>
369 |               </div>
370 |             </div>
371 | 
372 |             {/* Community  */}
373 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
374 |               <div className=" gap-x-6  flex justify-between ">
375 |                 <div className="flex justify-between items-center w-full p-2">
376 |                   <p className="text-white font-Intermedium">
377 |                     Join my community
378 |                   </p>
379 |                   <Link
380 |                     href={"/"}
381 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
382 |                   >
383 |                     <BsPeople />
384 |                     <span>Joscript</span>
385 |                   </Link>
386 |                 </div>
387 |               </div>
388 | 
389 |               <InfiniteMovingCards />
390 |             </div>
391 | 
392 |             <Message />
393 |           </div>
394 |           <Footer />
395 |         </div>
396 |       </div>
397 | 
398 |       <motion.div
399 |         initial={{
400 |           display: !open ? "none" : "block",
401 |         }}
402 |         animate={{
403 |           display: open ? "flex" : "none",
404 |           transition: { duration: !open ? 1 : 0 },
405 |         }}
406 |         transition={{ duration: 0.8 }}
407 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-10 overscroll-y-none right-0 left-0 h-full"
408 |       >
409 |         <div className="max-w-md  bg-[#161616] py-3 px-3 rounded-xl">
410 |           <div className="flex justify-between items-center text-white">
411 |             <p className="text-xl font-Intermedium">Share this profile</p>
412 | 
413 |             <div className="cursor-pointer" onClick={() => setOpen(false)}>
414 |               <PiXCircleLight className="text-2xl text-neutral-300" />
415 |             </div>
416 |           </div>
417 | 
418 |           <div className="mt-3">
419 |             {links.map((link, indx) => (
420 |               <div
421 |                 key={indx}
422 |                 className={`flex items-center justify-between  text-neutral-300 hover:bg-neutral-800 duration-300 ease-in-out transition-all p-2 mt-1 rounded-xl cursor-pointer ${
423 |                   indx === links.length - 1 &&
424 |                   "bg-neutral-950 hover:bg-neutral-950"
425 |                 }`}
426 |               >
427 |                 <div className="flex items-center gap-x-2 ">
428 |                   {link.iconFirst}
429 |                   <p
430 |                     key={indx}
431 |                     className={` font-Intermedium ${
432 |                       indx === links.length - 1 ? "text-base " : "text-lg"
433 |                     }  `}
434 |                   >
435 |                     {link.name}
436 |                   </p>
437 |                 </div>
438 |                 {indx === links.length - 1 ? (
439 |                   <span
440 |                     onClick={onCopy}
441 |                     className="flex items-center bg-neutral-300  p-1 rounded-lg px-1 gap-x-1 font-Intermedium text-neutral-600 cursor-pointer "
442 |                   >
443 |                     {copied ? "Copied" : link.stri}
444 | 
445 |                     <AnimatePresence>
446 |                       {copied ? (
447 |                         <motion.span
448 |                           initial={{ scale: 1 }}
449 |                           animate={{ scale: 0.8 }}
450 |                           exit={{ scale: 1 }}
451 |                           transition={{
452 |                             type: "spring",
453 |                             stiffness: 200,
454 |                             damping: 100,
455 |                           }}
456 |                         >
457 |                           <FcCheckmark className="w-4 h-4" />
458 |                         </motion.span>
459 |                       ) : (
460 |                         <motion.span
461 |                           initial={{ scale: 0.8 }}
462 |                           animate={{ scale: 1 }}
463 |                           exit={{ scale: 0.8 }}
464 |                           transition={{
465 |                             type: "spring",
466 |                             stiffness: 200,
467 |                             damping: 10,
468 |                           }}
469 |                         >
470 |                           <TbCopy className="w-4 h-4" />
471 |                         </motion.span>
472 |                       )}
473 |                     </AnimatePresence>
474 |                   </span>
475 |                 ) : (
476 |                   link.lastIcon
477 |                 )}
478 |               </div>
479 |             ))}
480 |           </div>
481 |         </div>
482 |       </motion.div>
483 |       {/* divide */}
484 |       <motion.div
485 |         initial={{
486 |           display: !dialog ? "none" : "block",
487 |         }}
488 |         animate={{
489 |           display: dialog ? "flex" : "none",
490 |           transition: { duration: !dialog ? 1 : 0 },
491 |         }}
492 |         transition={{ duration: 0.8 }}
493 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-10 overscroll-y-none right-0 left-0 h-full"
494 |       >
495 |         <div className="max-w-xl w-4/6 lg:w-4/12  bg-[#161616] py-3 px-3 rounded-xl ">
496 |           <div className="flex justify-center relative ">
497 |             <div
498 |               className="cursor-pointer absolute right-2 top-2  "
499 |               onClick={() => setDialog(false)}
500 |             >
501 |               <PiXCircleLight className="text-2xl text-neutral-300" />
502 |             </div>
503 |             <Image
504 |               width={900}
505 |               height={900}
506 |               className="w-14 h-14 rounded-full object-cover "
507 |               src="/images/img9.jpg"
508 |               alt=""
509 |             />
510 |           </div>
511 |           <p className="text-neutral-300 text-center font-Interegular mt-3">
512 |             Subscribe to Franca
513 |           </p>
514 |           <p className="text-center font-Intermedium text-neutral-600 my-1">
515 |             Stay up to date with everything important
516 |           </p>
517 | 
518 |           <div className="mt-5">
519 |             <form action="">
520 |               <input
521 |                 className="bg-neutral-800 rounded-lg p-2 w-full placeholder:text-neutral-600 mt-2 focus:ring-2 ring-neutral-500 outline-none text-neutral-400 font-Intermedium "
522 |                 type="text"
523 |                 placeholder="Your email"
524 |                 name=""
525 |                 id=""
526 |               />
527 |               <button className="bg-neutral-800 p-2 rounded-lg mt-2.5 w-full text-neutral-200 font-Intermedium">
528 |                 Subscribe
529 |               </button>
530 |             </form>
531 |           </div>
532 |         </div>
533 |       </motion.div>
534 |     </>
535 |   );
536 | }
537 | 
538 | export default Header;
539 | 


--------------------------------------------------------------------------------
/app/youtuber/page.jsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import React, { useRef, useState, useEffect } from "react";
  4 | 
  5 | import Link from "next/link";
  6 | import { AnimatePresence, motion, useScroll } from "framer-motion";
  7 | import {
  8 |   PiBellSimple,
  9 |   PiGlobeSimpleThin,
 10 |   PiUploadThin,
 11 |   PiArrowSquareOutThin,
 12 |   PiXCircleLight,
 13 |   PiFacebookLogoLight,
 14 |   PiLinkedinLogoLight,
 15 |   PiLinkLight,
 16 |   PiInstagramLogoThin,
 17 |   PiCalendar,
 18 | } from "react-icons/pi";
 19 | 
 20 | import { FcCheckmark } from "react-icons/fc";
 21 | import { FaAngleRight, FaTwitter } from "react-icons/fa";
 22 | import { RiVerifiedBadgeFill } from "react-icons/ri";
 23 | import { TbBrandYoutubeFilled, TbCopy } from "react-icons/tb";
 24 | import YutubeLink from "@/app/components/YutubeLink";
 25 | import {
 26 |   BsTwitterX,
 27 |   BsThreads,
 28 |   BsWhatsapp,
 29 |   BsMessenger,
 30 |   BsPeople,
 31 |   BsYoutube,
 32 | } from "react-icons/bs";
 33 | // import { LiaFlagUsaSolid } from "react-icons/lia";
 34 | import YouTube from "react-youtube";
 35 | import { Spotify } from "react-spotify-embed";
 36 | 
 37 | import Stories from "@/app/components/Stories";
 38 | import stories from "../../data";
 39 | // import Stars from "./Stars";
 40 | import Location from "@/app/components/Location";
 41 | // import Services from "./Services";
 42 | // import Store from "./Store";
 43 | // import Message from "./Message";
 44 | import Footer from "@/app/components/Footer";
 45 | import Message from "../components/Message";
 46 | import { cn } from "@nextui-org/react";
 47 | 
 48 | import CountUp from "react-countup";
 49 | import { InfiniteMovingCards } from "../components/InfiniteMovingCards";
 50 | import Image from "next/image";
 51 | 
 52 | const inviteUrl = `Sam@dev.com`;
 53 | 
 54 | function Header({ value }) {
 55 |   const [copied, setCopied] = useState(false);
 56 |   const [open, setOpen] = useState(false);
 57 |   const [dialog, setDialog] = useState(false);
 58 | 
 59 |   const ref = useRef(null);
 60 | 
 61 |   const { scrollYProgress } = useScroll({
 62 |     target: ref,
 63 |     offset: ["0 0", "1 0"],
 64 |   });
 65 | 
 66 |   const onCopy = () => {
 67 |     navigator.clipboard.writeText(inviteUrl);
 68 |     setCopied(true);
 69 | 
 70 |     setTimeout(() => {
 71 |       setCopied(false);
 72 |     }, 1000);
 73 |   };
 74 | 
 75 |   const links = [
 76 |     {
 77 |       iconFirst: <PiFacebookLogoLight className="text-2xl" />,
 78 |       name: "Share on Facebook",
 79 | 
 80 |       lastIcon: <FaAngleRight />,
 81 |     },
 82 |     {
 83 |       iconFirst: <PiLinkedinLogoLight className="text-2xl" />,
 84 |       name: "Share on LinkedIn",
 85 |       lastIcon: <FaAngleRight />,
 86 |     },
 87 |     {
 88 |       iconFirst: <FaTwitter className="text-2xl" />,
 89 |       name: "Share on X",
 90 |       lastIcon: <FaAngleRight />,
 91 |     },
 92 |     {
 93 |       iconFirst: <BsThreads className="text-2xl" />,
 94 |       name: "Share on Threads",
 95 |       lastIcon: <FaAngleRight />,
 96 |     },
 97 |     {
 98 |       iconFirst: <BsWhatsapp className="text-2xl" />,
 99 |       name: "Share on Whatsapp",
100 |       lastIcon: <FaAngleRight />,
101 |     },
102 |     {
103 |       iconFirst: <BsMessenger className="text-2xl" />,
104 |       name: "Share on Messanger",
105 |       lastIcon: <FaAngleRight />,
106 |     },
107 |     {
108 |       iconFirst: <PiLinkLight className="text-2xl" />,
109 |       name: "josephhjamess46@gmail.com",
110 |       stri: "Copy",
111 |       lastIcon: <FaAngleRight />,
112 |     },
113 |   ];
114 | 
115 |   const options = {
116 |     playerVars: {
117 |       autoplay: 1,
118 |       controls: 1,
119 |     },
120 |   };
121 | 
122 |   const onReady = (e) => {
123 |     e.target.pauseVideo();
124 |   };
125 | 
126 |   // let copiedd = "hey@josephhjamess46@gmail.com";
127 | 
128 |   // console.log(links.at(-1).stri);
129 | 
130 |   return (
131 |     <>
132 |       <motion.div
133 |         ref={ref}
134 |         className={cn(
135 |           `fixed top-11 flex z-20 justify-center w-full
136 | 
137 |           ${dialog && "hidden"}
138 |           `
139 |         )}
140 |         style={{ opacity: scrollYProgress }}
141 |       >
142 |         <div className=" bg-[#161616] border p-2 rounded-lg  border-neutral-800 flex justify-between items-center  w-[640px]">
143 |           <Image
144 |             width={900}
145 |             height={900}
146 |             className="w-9 h-9  rounded-md object-cover"
147 |             src="/images/img7.jpg"
148 |             alt=""
149 |           />
150 |           <h1 className="text-white font-Intermedium">Sammy Brown</h1>
151 |           <button
152 |             onClick={() => setOpen(true)}
153 |             className="w-9 h-9 rounded-lg bg-neutral-700 text-neutral-300 flex items-center justify-center"
154 |           >
155 |             <PiUploadThin />
156 |           </button>
157 |         </div>
158 |       </motion.div>
159 |       <div className=" h-60 relative  w-full -z-10">
160 |         <video
161 |           // style={{ opacity: scrollYProgress }}
162 |           autoPlay
163 |           controls
164 |           loop="true"
165 |           className=" h-full w-full object-cover  absolute opacity-60"
166 |           src="/videos/yutube.mp4"
167 |         />
168 |       </div>
169 | 
170 |       <div className="   w-full flex justify-center z-10 relative -top-9">
171 |         <div className="absolute  p-1 rounded-full bg-[#111111]">
172 |           <Image
173 |             width={900}
174 |             height={900}
175 |             className="w-16 h-16 rounded-full object-cover "
176 |             src="/images/img4.png"
177 |             alt=""
178 |           />
179 |         </div>
180 |       </div>
181 | 
182 |       <div className="bg-[#111111] h-screen p-3">
183 |         <div className="h-screen max-w-lg mx-auto bg-[#111111] pt-14">
184 |           <div>
185 |             <div className="text-center">
186 |               <h3 className="font-Intermedium text-white text-2xl flex justify-center items-center gap-x-2">
187 |                 Sammy Brown
188 |                 <RiVerifiedBadgeFill className="text-[#B5924F] text-xl" />
189 |               </h3>
190 |               <div className="mt-3 text-neutral-500 flex justify-center gap-x-2 items-center font-Interegular">
191 |                 <p>Est. 1999</p>
192 |                 <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
193 |                 <p>New York, NY</p>
194 |                 <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
195 |                 <p>He/Him</p>
196 |               </div>
197 |             </div>
198 |             <div>
199 |               <p className="font-Intermedium text-neutral-500 text-center my-3">
200 |                 Sam Brown is a travel vlogger, content creator and small
201 |                 business owner based in New York.
202 |               </p>
203 | 
204 |               <div className="flex justify-center gap-x-7">
205 |                 <Link
206 |                   href={"https://github.com/joscript/"}
207 |                   className="flex items-center gap-x-2 hover:bg-neutral-900 transition-all ease-in duration-100 p-1 px-2 rounded-xl"
208 |                 >
209 |                   <PiGlobeSimpleThin className=" text-xl text-neutral-500" />
210 |                   <p className="text-white font-Intermedium">Sam.com</p>
211 |                 </Link>
212 |                 <div className=" items-center gap-x-2  flex  cursor-pointer hover:bg-neutral-900 transition-all ease-in duration-100 p-1 px-2 rounded-xl">
213 |                   <PiCalendar className=" text-xl text-neutral-500" />
214 |                   <p className="text-white font-Intermedium">
215 |                     {" "}
216 |                     New Videos every week
217 |                   </p>
218 |                 </div>
219 |               </div>
220 |             </div>
221 |             <div className="flex items-center justify-center gap-x-2 my-6">
222 |               <button
223 |                 onClick={() => setOpen(true)}
224 |                 className="w-10 h-10 rounded-lg bg-slate-50 flex items-center justify-center"
225 |               >
226 |                 <PiUploadThin />
227 |               </button>
228 |               <button
229 |                 onClick={onCopy}
230 |                 className="w-80 gap-x-3  h-10 rounded-lg bg-slate-50 flex items-center justify-center hover:bg-neutral-100 duration-400 transition-all ease-in"
231 |               >
232 |                 <span className="font-Intermedium ">
233 |                   {copied ? "copied" : "Sammy@gmail.com"}
234 |                 </span>
235 |                 <AnimatePresence>
236 |                   {copied ? (
237 |                     <motion.span
238 |                       initial={{ scale: 1 }}
239 |                       animate={{ scale: 0.8 }}
240 |                       exit={{ scale: 1 }}
241 |                       transition={{
242 |                         type: "spring",
243 |                         stiffness: 200,
244 |                         damping: 100,
245 |                       }}
246 |                     >
247 |                       <FcCheckmark className="w-4 h-4" />
248 |                     </motion.span>
249 |                   ) : (
250 |                     <motion.span
251 |                       initial={{ scale: 0.8 }}
252 |                       animate={{ scale: 1 }}
253 |                       exit={{ scale: 0.8 }}
254 |                       transition={{
255 |                         type: "spring",
256 |                         stiffness: 200,
257 |                         damping: 10,
258 |                       }}
259 |                     >
260 |                       <TbCopy className="w-4 h-4" />
261 |                     </motion.span>
262 |                   )}
263 |                 </AnimatePresence>
264 |               </button>
265 |               <button
266 |                 onClick={() => setDialog(true)}
267 |                 className="w-10 h-10 rounded-lg bg-slate-50 flex items-center justify-center"
268 |               >
269 |                 <PiBellSimple />
270 |               </button>
271 |             </div>
272 |             <div className="mt-5">
273 |               <YutubeLink />
274 |             </div>
275 |             <div className="flex justify-center  gap-x-5">
276 |               <Stories stories={stories} />
277 |             </div>
278 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
279 |               <div className=" gap-x-6  flex justify-between ">
280 |                 <div className="flex justify-between items-center w-full p-2">
281 |                   <p className="text-white font-Intermedium">Stats</p>
282 |                   <Link
283 |                     href={"/"}
284 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
285 |                   >
286 |                     <TbBrandYoutubeFilled className="text-red-600" />
287 |                     <span>@Joscript</span>
288 |                   </Link>
289 |                 </div>
290 |               </div>
291 | 
292 |               <div className="  mt-3  w-full flex bg-[#1C1C1C] justify-around rounded-lg h-24 items-center">
293 |                 <div className="text-white text-lg ">
294 |                   <div className="flex justify-center font-Intermedium text-neutral-300 text-2xl">
295 |                     <CountUp duration={10} end={60} className="" />
296 |                     <p>m</p>
297 |                   </div>
298 |                   <p className="text-neutral-600 text-sm">Subscribers</p>
299 |                 </div>
300 |                 <div className="text-center font-Intermedium text-neutral-300 text-2xl">
301 |                   <CountUp duration={10} end={17} />
302 |                   <p className="text-neutral-600  text-sm">videos</p>
303 |                 </div>
304 |                 <div className="text-white ">
305 |                   <div className=" flex justify-center font-Intermedium text-neutral-300 text-2xl">
306 |                     <CountUp duration={10} end={48} />
307 |                     <p>m</p>
308 |                   </div>
309 |                   <p className="text-neutral-600">Views</p>
310 |                 </div>
311 |               </div>
312 |             </div>
313 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
314 |               <div className=" gap-x-6  flex justify-between ">
315 |                 <div className="flex justify-between items-center w-full p-2">
316 |                   <p className="text-white font-Intermedium">Stats</p>
317 |                   <Link
318 |                     href={"/"}
319 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
320 |                   >
321 |                     <TbBrandYoutubeFilled className="text-red-600" />
322 |                     <span>@Joscript</span>
323 |                   </Link>
324 |                 </div>
325 |               </div>
326 | 
327 |               <YouTube
328 |                 videoId="p69xC3CW7WQ"
329 |                 options={options}
330 |                 onReady={onReady}
331 |                 id="video"
332 |                 iframeClassName={"lg:w-[500px] h-[250px]"}
333 |               />
334 |             </div>
335 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
336 |               <div className=" gap-x-6  flex justify-between ">
337 |                 <div className="flex justify-between items-center w-full p-2">
338 |                   <p className="text-white font-Intermedium">
339 |                     Join my community
340 |                   </p>
341 |                   <Link
342 |                     href={"/"}
343 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
344 |                   >
345 |                     <BsPeople />
346 |                     <span>Joscript</span>
347 |                   </Link>
348 |                 </div>
349 |               </div>
350 | 
351 |               <InfiniteMovingCards />
352 |             </div>
353 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
354 |               <div className=" gap-x-6  flex justify-between ">
355 |                 <div className="flex justify-between items-center w-full p-2">
356 |                   <p className="text-white font-Intermedium">Latest Post</p>
357 |                   <Link
358 |                     href={"/"}
359 |                     className="p-1 px-2 w-fit rounded-full flex items-center gap-x-3 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in font-Intermedium text-neutral-300"
360 |                   >
361 |                     <BsTwitterX />
362 |                     <span>@Joscript</span>
363 |                   </Link>
364 |                 </div>
365 |               </div>
366 | 
367 |               <div className="bg-[#1C1C1C] p-3 rounded-2xl mt-3 ">
368 |                 <div className="flex gap-x-4">
369 |                   <Image
370 |                     width={900}
371 |                     height={900}
372 |                     className="w-11 h-11 rounded-full"
373 |                     src="/images/img1.jpg"
374 |                     alt=""
375 |                   />
376 | 
377 |                   <div>
378 |                     <div className="flex items-center gap-x-2 ">
379 |                       <p className="font-Intermedium text-base text-white">
380 |                         JoScript Joe
381 |                       </p>
382 |                       <RiVerifiedBadgeFill className="text-[#1D9BF0] text-xl" />
383 |                     </div>
384 | 
385 |                     <div className="flex gap-x-2 items-center font-Interegular">
386 |                       <span className="text-neutral-500">@joe</span>
387 |                       <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
388 |                       <button className="text-blue-600 font-Intermedium text-sm">
389 |                         Follow
390 |                       </button>
391 |                     </div>
392 |                   </div>
393 |                 </div>
394 |                 <div className="">
395 |                   <h3 className="text-base text-white my-3">
396 |                     Stepping into the new season with a mix of earth colors and
397 |                     bold steps
398 |                   </h3>
399 |                   <div className="flex items-center gap-x-2 font-Intermedium text-neutral-400 text-sm">
400 |                     <p className="">10:39 PM </p>
401 |                     <span className="w-[3px] h-[3px]  bg-neutral-600 rounded-full" />
402 |                     <p>Jul 23, 2023</p>
403 |                   </div>
404 |                 </div>
405 |               </div>
406 |             </div>
407 |             {/* featured video */}
408 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
409 |               <div className=" gap-x-6  flex justify-between ">
410 |                 <div className="flex justify-between items-center w-full p-2">
411 |                   <p className="text-white font-Intermedium">Featured videos</p>
412 |                   <Link
413 |                     href={"/"}
414 |                     className="p-1 px-2 w-fit rounded-full flex  gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in  text-neutral-300 items-center"
415 |                   >
416 |                     <BsYoutube className="text-[#FF0000]" />
417 |                     <span className="">@Joscript</span>
418 |                   </Link>
419 |                 </div>
420 |               </div>
421 | 
422 |               <div className=" p-3 rounded-2xl mt-3  flex i gap-x-5 hover:bg-[#1C1C1C] cursor-pointer">
423 |                 <div className="relative">
424 |                   <Image
425 |                     width={900}
426 |                     height={900}
427 |                     className="w-28 h-20 object-cover rounded-lg"
428 |                     src="/images/img7.jpg"
429 |                     alt=""
430 |                   />
431 |                   <div className="absolute bottom-1 right-1 bg-black/60 rounded-md flex justify-center items-center w-9 h-4 px-0.5">
432 |                     <p className="text-[10px] font-semibold text-white">
433 |                       12:06
434 |                     </p>
435 |                   </div>
436 |                 </div>
437 |                 <div className="leading-8">
438 |                   <p className="text-base text-white leading-6">
439 |                     Immersing in the Vibrant Flavors of Mexico
440 |                   </p>
441 |                   <div className="flex items-center gap-x-2 text-neutral-600 font-semibold ">
442 |                     <p className="text-sm">1.3m views</p>
443 |                     <span className="w-1 h-1 rounded-full bg-neutral-600" />
444 |                     <p className="text-sm">5 weeks ago</p>
445 |                   </div>
446 |                 </div>
447 |               </div>
448 |               <div className=" p-3 rounded-2xl mt-3  flex  gap-x-5 hover:bg-[#1C1C1C] cursor-pointer">
449 |                 <div className="relative">
450 |                   <Image
451 |                     width={900}
452 |                     height={900}
453 |                     className="w-28 h-20 object-cover rounded-lg"
454 |                     src="/images/img6.jpg"
455 |                     alt=""
456 |                   />
457 |                   <div className="absolute bottom-1 right-1 bg-black/60 rounded-md flex justify-center items-center w-9 h-4 px-0.5">
458 |                     <p className="text-[10px] font-semibold text-white">
459 |                       18:00
460 |                     </p>
461 |                   </div>
462 |                 </div>
463 |                 <div>
464 |                   <p className="text-base text-white leading-6 ">
465 |                     Discovering the Pacific Coastline of California
466 |                   </p>
467 |                   <div className="flex items-center gap-x-2 text-neutral-600 font-semibold ">
468 |                     <p className="text-sm">922k views</p>
469 |                     <span className="w-1 h-1 rounded-full bg-neutral-600" />
470 |                     <p className="text-sm">1 year ago</p>
471 |                   </div>
472 |                 </div>
473 |               </div>
474 |               <div className=" p-3 rounded-2xl mt-3  flex items-center gap-x-5 hover:bg-[#1C1C1C] cursor-pointer">
475 |                 <div className="relative shrink-0">
476 |                   <Image
477 |                     width={900}
478 |                     height={900}
479 |                     className="w-28 h-20 object-cover rounded-lg"
480 |                     src="/images/img9.jpg"
481 |                     alt=""
482 |                   />
483 |                   <div className="absolute bottom-1 right-1 bg-black/60 rounded-md flex justify-center items-center w-9 h-4 px-0.5">
484 |                     <p className="text-[10px] font-semibold text-white">
485 |                       12:06
486 |                     </p>
487 |                   </div>
488 |                 </div>
489 |                 <div>
490 |                   <p className="text-base text-white leading-6 ">
491 |                     12 things you need to know before visiting Iceland and New
492 |                     York
493 |                   </p>
494 |                   <div className="flex items-center gap-x-2 text-neutral-600 font-semibold ">
495 |                     <p className="text-sm">1.9m views</p>
496 |                     <span className="w-1 h-1 rounded-full bg-neutral-600" />
497 |                     <p className="text-sm">5 months ago</p>
498 |                   </div>
499 |                 </div>
500 |               </div>
501 |             </div>
502 |             <Spotify
503 |               className="w-full h-20 my-3"
504 |               link="https://open.spotify.com/playlist/37i9dQZF1DX0A8zVl7p82B?si=c2c06a3f57c24b48"
505 |             />
506 | 
507 |             <div className="bg-[#161616] p-2 rounded-xl mt-3 ">
508 |               <div className=" gap-x-6  flex justify-between ">
509 |                 <div className="flex justify-between items-center w-full p-2">
510 |                   <p className="text-white font-Intermedium">My channels</p>
511 |                   <Link
512 |                     href={"/"}
513 |                     className="p-1 px-2 w-fit rounded-full flex  gap-x-2 hover:bg-neutral-800 bg-neutral-900 duration-300 transition-all ease-in  text-neutral-300 items-center"
514 |                   >
515 |                     <BsYoutube className="text-[#FF0000]" />
516 |                     <span className="">@Joscript</span>
517 |                   </Link>
518 |                 </div>
519 |               </div>
520 | 
521 |               <div className=" p-2 rounded-2xl mt-3  flex  gap-x-5 hover:bg-[#1C1C1C] cursor-pointer">
522 |                 <div className="relative">
523 |                   <Image
524 |                     width={900}
525 |                     height={900}
526 |                     className="w-14 h-14 object-cover rounded-full"
527 |                     src="/images/img5.jpg"
528 |                     alt=""
529 |                   />
530 |                 </div>
531 |                 <div className="leading-8">
532 |                   <p className="text-base text-white leading-6">JoScript</p>
533 |                   <div className="flex items-center gap-x-2 text-neutral-500 font-semibold ">
534 |                     <p className="text-sm">2m subscribers </p>
535 |                     <span className="w-1 h-1 rounded-full bg-neutral-600" />
536 |                     <p className="text-sm">18 videos</p>
537 |                   </div>
538 |                 </div>
539 |               </div>
540 |               <div className=" p-2 rounded-2xl  flex i gap-x-5 hover:bg-[#1C1C1C] cursor-pointer">
541 |                 <div className="relative">
542 |                   <Image
543 |                     width={900}
544 |                     height={900}
545 |                     className="w-14 h-14 object-cover rounded-full"
546 |                     src="/images/img9.jpg"
547 |                     alt=""
548 |                   />
549 |                 </div>
550 |                 <div className="leading-8">
551 |                   <p className="text-base text-white leading-6">Real Estate</p>
552 |                   <div className="flex items-center gap-x-2 text-neutral-500 font-semibold ">
553 |                     <p className="text-sm">219m subscribers </p>
554 |                     <span className="w-1 h-1 rounded-full bg-neutral-600" />
555 |                     <p className="text-sm">1 videos</p>
556 |                   </div>
557 |                 </div>
558 |               </div>
559 |             </div>
560 |             {/* Latest photos */}
561 |             {/* Store */}
562 |             {/* Services */}
563 |             {/* <Services /> */}
564 |             {/* Location */}
565 |             <Location />
566 |             {/* Message */}
567 |             <Message />
568 |           </div>
569 |           <Footer />
570 |         </div>
571 |       </div>
572 | 
573 |       <motion.div
574 |         initial={{
575 |           display: !open ? "none" : "block",
576 |         }}
577 |         animate={{
578 |           display: open ? "flex" : "none",
579 |           transition: { duration: !open ? 1 : 0 },
580 |         }}
581 |         transition={{ duration: 0.8 }}
582 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-10 overscroll-y-none right-0 left-0 h-full"
583 |       >
584 |         <div className="max-w-md  bg-[#161616] py-3 px-3 rounded-xl">
585 |           <div className="flex justify-between items-center text-white">
586 |             <p className="text-xl font-Intermedium">Share this profile</p>
587 | 
588 |             <div className="cursor-pointer" onClick={() => setOpen(false)}>
589 |               <PiXCircleLight className="text-2xl text-neutral-300" />
590 |             </div>
591 |           </div>
592 | 
593 |           <div className="mt-3">
594 |             {links.map((link, indx) => (
595 |               <div
596 |                 key={indx}
597 |                 className={`flex items-center justify-between  text-neutral-300 hover:bg-neutral-800 duration-300 ease-in-out transition-all p-2 mt-1 rounded-xl cursor-pointer ${
598 |                   indx === links.length - 1 &&
599 |                   "bg-neutral-950 hover:bg-neutral-950"
600 |                 }`}
601 |               >
602 |                 <div className="flex items-center gap-x-2 ">
603 |                   {link.iconFirst}
604 |                   <p
605 |                     key={indx}
606 |                     className={` font-Intermedium ${
607 |                       indx === links.length - 1 ? "text-base " : "text-lg"
608 |                     }  `}
609 |                   >
610 |                     {link.name}
611 |                   </p>
612 |                 </div>
613 |                 {indx === links.length - 1 ? (
614 |                   <span
615 |                     onClick={onCopy}
616 |                     className="flex items-center bg-neutral-300  p-1 rounded-lg px-1 gap-x-1 font-Intermedium text-neutral-600 cursor-pointer "
617 |                   >
618 |                     {copied ? "Copied" : link.stri}
619 | 
620 |                     <AnimatePresence>
621 |                       {copied ? (
622 |                         <motion.span
623 |                           initial={{ scale: 1 }}
624 |                           animate={{ scale: 0.8 }}
625 |                           exit={{ scale: 1 }}
626 |                           transition={{
627 |                             type: "spring",
628 |                             stiffness: 200,
629 |                             damping: 100,
630 |                           }}
631 |                         >
632 |                           <FcCheckmark className="w-4 h-4" />
633 |                         </motion.span>
634 |                       ) : (
635 |                         <motion.span
636 |                           initial={{ scale: 0.8 }}
637 |                           animate={{ scale: 1 }}
638 |                           exit={{ scale: 0.8 }}
639 |                           transition={{
640 |                             type: "spring",
641 |                             stiffness: 200,
642 |                             damping: 10,
643 |                           }}
644 |                         >
645 |                           <TbCopy className="w-4 h-4" />
646 |                         </motion.span>
647 |                       )}
648 |                     </AnimatePresence>
649 |                   </span>
650 |                 ) : (
651 |                   link.lastIcon
652 |                 )}
653 |               </div>
654 |             ))}
655 |           </div>
656 |         </div>
657 |       </motion.div>
658 |       {/* divide */}
659 |       <motion.div
660 |         initial={{
661 |           display: !dialog ? "none" : "block",
662 |         }}
663 |         animate={{
664 |           display: dialog ? "flex" : "none",
665 |           transition: { duration: !dialog ? 1 : 0 },
666 |         }}
667 |         transition={{ duration: 0.8 }}
668 |         className="backdrop-blur-xl flex justify-center items-center w-full bg-black/60 fixed bottom-0 z-10 overscroll-y-none right-0 left-0 h-full"
669 |       >
670 |         <div className="max-w-xl w-4/6 lg:w-4/12  bg-[#161616] py-3 px-3 rounded-xl ">
671 |           <div className="flex justify-center relative ">
672 |             <div
673 |               className="cursor-pointer absolute right-2 top-2  "
674 |               onClick={() => setDialog(false)}
675 |             >
676 |               <PiXCircleLight className="text-2xl text-neutral-300" />
677 |             </div>
678 |             <Image
679 |               width={900}
680 |               height={900}
681 |               className="w-14 h-14 rounded-full object-cover "
682 |               src="/images/img9.jpg"
683 |               alt=""
684 |             />
685 |           </div>
686 |           <p className="text-neutral-300 text-center font-Interegular mt-3">
687 |             Subscribe to Sammy
688 |           </p>
689 |           <p className="text-center font-Intermedium text-neutral-600 my-1">
690 |             Stay up to date with everything important
691 |           </p>
692 | 
693 |           <div className="mt-5">
694 |             <form action="">
695 |               <input
696 |                 className="bg-neutral-800 rounded-lg p-2 w-full placeholder:text-neutral-600 mt-2 focus:ring-2 ring-neutral-500 outline-none text-neutral-400 font-Intermedium "
697 |                 type="text"
698 |                 placeholder="Your email"
699 |                 name=""
700 |                 id=""
701 |               />
702 |               <button className="bg-neutral-800 p-2 rounded-lg mt-2.5 w-full text-neutral-200 font-Intermedium">
703 |                 Subscribe
704 |               </button>
705 |             </form>
706 |           </div>
707 |         </div>
708 |       </motion.div>
709 |     </>
710 |   );
711 | }
712 | 
713 | export default Header;
714 | 


--------------------------------------------------------------------------------
/data.js:
--------------------------------------------------------------------------------
  1 | // import thumb1 from "./images/thumb-1.jpg";
  2 | // import thumb2 from "./images/thumb-2.jpg";
  3 | // import thumb3 from "./images/thumb-3.jpg";
  4 | // import story1 from "./images/story-1.jpg";
  5 | // import story2 from "./images/story-2.jpg";
  6 | // import story3 from "./images/story-3.jpg";
  7 | // import story4 from "./images/story-4.jpg";
  8 | // import story5 from "./images/story-5.jpg";
  9 | // import story6 from "./images/story-6.jpg";
 10 | // import story7 from "./images/story-7.jpg";
 11 | 
 12 | export default [
 13 |   {
 14 |     username: "Board",
 15 |     thumbnail: {
 16 |       src: "/images/yellow.jpg",
 17 |       alt: "thumb 1",
 18 |     },
 19 |     slides: [
 20 |       {
 21 |         text: "My wife and i in Ibizza",
 22 |         image: "/images/img4.jpg",
 23 |       },
 24 |       {
 25 |         text: "My wife photoshoot",
 26 |         image: "/images/img5.jpg",
 27 |       },
 28 |       {
 29 |         text: "Days in the oak",
 30 |         image: "/images/img6.jpg",
 31 |       },
 32 |       {
 33 |         text: "Webly Stadium is lit ",
 34 |         image: "/images/img7.jpg",
 35 |       },
 36 |       {
 37 |         text: "Up  and gratefull",
 38 |         image: "/images/img8.jpg",
 39 |       },
 40 |     ],
 41 |     timer: 4000,
 42 |   },
 43 |   {
 44 |     username: "Travel",
 45 |     thumbnail: {
 46 |       src: "/images/img1.jpg",
 47 |       alt: "thumb 2",
 48 |     },
 49 |     slides: [
 50 |       {
 51 |         text: "Say my name in the dark",
 52 |         image: "/images/f.jpg",
 53 |       },
 54 |       {
 55 |         text: "Secrets are poison",
 56 |         image: "/images/img6.jpg",
 57 |       },
 58 |     ],
 59 |     timer: 4000,
 60 |   },
 61 |   {
 62 |     username: "Happy",
 63 |     thumbnail: {
 64 |       src: "/images/img11.jpg",
 65 |       alt: "thumb 3",
 66 |     },
 67 |     slides: [
 68 |       {
 69 |         text: "Take the bull by the bulls",
 70 |         image: "/images/f.jpg",
 71 |       },
 72 |     ],
 73 |     timer: 4000,
 74 |   },
 75 |   {
 76 |     username: "Toys",
 77 |     thumbnail: {
 78 |       src: "/images/img10.jpg",
 79 |       alt: "thumb 3",
 80 |     },
 81 |     slides: [
 82 |       {
 83 |         text: "Thabanda",
 84 |         image: "/images/f.jpg",
 85 |       },
 86 |     ],
 87 |     timer: 4000,
 88 |   },
 89 |   {
 90 |     username: "Friends",
 91 |     thumbnail: {
 92 |       src: "/images/img9.jpg",
 93 |       alt: "thumb 3",
 94 |     },
 95 |     slides: [
 96 |       {
 97 |         text: "Nice try Boris Johnson",
 98 |         image: "/images/f.jpg",
 99 |       },
100 |     ],
101 |     timer: 4000,
102 |   },
103 | ];
104 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./*"]
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {}
3 | 
4 | module.exports = nextConfig
5 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "dribbble",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@nextui-org/react": "^2.2.9",
13 |     "classnames": "^2.3.2",
14 |     "framer-motion": "^10.16.12",
15 |     "mini-svg-data-uri": "^1.4.4",
16 |     "next": "14.0.3",
17 |     "next-tailwindcss-defaulttheme": "^1.1.10",
18 |     "react": "^18",
19 |     "react-countup": "^6.5.0",
20 |     "react-dom": "^18",
21 |     "react-icons": "^4.12.0",
22 |     "react-spotify-embed": "^2.0.3",
23 |     "react-youtube": "^10.1.0",
24 |     "tailwind-colors": "^1.1.0",
25 |     "tailwind-merge": "^2.1.0"
26 |   },
27 |   "devDependencies": {
28 |     "autoprefixer": "^10.0.1",
29 |     "eslint": "^8",
30 |     "eslint-config-next": "14.0.3",
31 |     "postcss": "^8",
32 |     "tailwindcss": "^3.3.0"
33 |   }
34 | }
35 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/font/Interegular.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/font/Interegular.otf


--------------------------------------------------------------------------------
/public/font/Interlight.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/font/Interlight.otf


--------------------------------------------------------------------------------
/public/font/Intermedium.otf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/font/Intermedium.otf


--------------------------------------------------------------------------------
/public/images/cry.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/cry.jpg


--------------------------------------------------------------------------------
/public/images/f.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/f.jpg


--------------------------------------------------------------------------------
/public/images/img1.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/img1.jpg


--------------------------------------------------------------------------------
/public/images/img10.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/img10.jpg


--------------------------------------------------------------------------------
/public/images/img11.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/img11.jpg


--------------------------------------------------------------------------------
/public/images/img3.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/img3.jpg


--------------------------------------------------------------------------------
/public/images/img4.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/img4.jpg


--------------------------------------------------------------------------------
/public/images/img4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/img4.png


--------------------------------------------------------------------------------
/public/images/img5.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/img5.jpg


--------------------------------------------------------------------------------
/public/images/img6.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/img6.jpg


--------------------------------------------------------------------------------
/public/images/img7.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/img7.jpg


--------------------------------------------------------------------------------
/public/images/img8.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/img8.jpg


--------------------------------------------------------------------------------
/public/images/img9.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/img9.jpg


--------------------------------------------------------------------------------
/public/images/mapp.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/mapp.webp


--------------------------------------------------------------------------------
/public/images/mappp.webp:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/mappp.webp


--------------------------------------------------------------------------------
/public/images/yellow.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/images/yellow.jpg


--------------------------------------------------------------------------------
/public/next.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>


--------------------------------------------------------------------------------
/public/vercel.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 283 64"><path fill="black" d="M141 16c-11 0-19 7-19 18s9 18 20 18c7 0 13-3 16-7l-7-5c-2 3-6 4-9 4-5 0-9-3-10-7h28v-3c0-11-8-18-19-18zm-9 15c1-4 4-7 9-7s8 3 9 7h-18zm117-15c-11 0-19 7-19 18s9 18 20 18c6 0 12-3 16-7l-8-5c-2 3-5 4-8 4-5 0-9-3-11-7h28l1-3c0-11-8-18-19-18zm-10 15c2-4 5-7 10-7s8 3 9 7h-19zm-39 3c0 6 4 10 10 10 4 0 7-2 9-5l8 5c-3 5-9 8-17 8-11 0-19-7-19-18s8-18 19-18c8 0 14 3 17 8l-8 5c-2-3-5-5-9-5-6 0-10 4-10 10zm83-29v46h-9V5h9zM37 0l37 64H0L37 0zm92 5-27 48L74 5h10l18 30 17-30h10zm59 12v10l-3-1c-6 0-10 4-10 10v15h-9V17h9v9c0-5 6-9 13-9z"/></svg>


--------------------------------------------------------------------------------
/public/videos/yutube.mp4:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Joscriptt/multiphaceportfolio/5babb9581969a02ea1eaf35c16bfbe217a5dd9b5/public/videos/yutube.mp4


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | const defaultTheme = require("tailwindcss/defaultTheme");
 2 | 
 3 | const colors = require("tailwindcss/colors");
 4 | const svgToDataUri = require("mini-svg-data-uri");
 5 | const {
 6 |   default: flattenColorPalette,
 7 | } = require("tailwindcss/lib/util/flattenColorPalette");
 8 | 
 9 | /** @type {import('tailwindcss').Config} */
10 | module.exports = {
11 |   content: [
12 |     "./pages/**/*.{js,ts,jsx,tsx}",
13 |     "./components/**/*.{js,ts,jsx,tsx}",
14 |     "./app/**/*.{js,ts,jsx,tsx}",
15 |   ],
16 |   theme: {
17 |     extend: {
18 |       animation: {
19 |         scroll:
20 |           "scroll var(--animation-duration, 40s) var(--animation-direction, forwards) linear infinite",
21 |       },
22 |       keyframes: {
23 |         scroll: {
24 |           to: {
25 |             transform: "translate(calc(-50% - 0.5rem))",
26 |           },
27 |         },
28 |       },
29 |     },
30 | 
31 |     fontFamily: {
32 |       Interegular: "Interegular",
33 |       Interlight: "Interlight",
34 |       Intermedium: "Intermedium",
35 |     },
36 |   },
37 |   plugins: [
38 |     addVariablesForColors, // required for using colors like var(--gray-200)
39 |   ],
40 | };
41 | 
42 | // This plugin adds each Tailwind color as a global CSS variable, e.g. var(--gray-200).
43 | function addVariablesForColors({ addBase, theme }) {
44 |   let allColors = flattenColorPalette(theme("colors"));
45 |   let newVars = Object.fromEntries(
46 |     Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
47 |   );
48 | 
49 |   addBase({
50 |     ":root": newVars,
51 |   });
52 | }
53 | 


--------------------------------------------------------------------------------