Customers

src/app/(dashboard)/u/[username]/messages/page.tsx

@@ -1,9 +1,9 @@
 import { getSelf } from "@/lib/valid-user"
-import MessageBox from "./_components/mssage-box"
 import { getAllMessages } from "@/lib/msg"
 import { MessageShow } from "@/components/message-show"
 import { PageHeader, PageHeaderHeading, PageHeaderDescription } from "@/components/page-header"
-
+import Link from 'next/link'
+import { Separator } from "@/components/ui/separator"
 
 export const metadata = {
     title: "One time messages",
@@ -13,9 +13,8 @@ export const metadata = {
 const Messages = async () => {
     const self = await getSelf()
     const messages = await getAllMessages(self.id)
-
     return (
-        <div className='p-10'>
+        <div className='p-10 h-full'>
             <PageHeader
                 id="account-header"
                 aria-labelledby="account-header-heading"
@@ -26,6 +25,17 @@ const Messages = async () => {
                     Explore your private dm from Chacha Jema
                 </PageHeaderDescription>
             </PageHeader>
+            <Separator className="w-full h-3" />
+            {!messages.length && (
+                <div className=" flex flex-col gap-2 justify-center items-center">
+                    <h1 className="text-3xl font-bold font-heading md:text-5xl">No Messages :)</h1>
+                    <p className="mx-auto max-w-full text-center text-gray-500 md:text-xl/relaxed lg:text-base/relaxed xl:text-xl/relaxed dark:text-gray-400">
+                        You can hit up on  <Link href='/streams' className="underline underline-offset-1">streams</Link>  to make your self as <span className='font-semibold'>bold</span> as possible
+
+                    </p>
+
+                </div>
+            )}
             <div className="w-full flex flex-wrap gap-3 items-center">
 
                 {messages.map((r) => {

src/app/(web)/(home)/_components/get-started.tsx

@@ -11,7 +11,7 @@ import styles from "./styles"
 
 const GetStarted = () => (
   <section
-    className={`${styles.paddings}  relative z-10 mx-10  overflow-hidden rounded-t-3xl  bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(192,132,252,0.3),rgba(255,255,255,0))]  `}
+    className={`${styles.paddings}  relative mx-10  overflow-hidden rounded-t-3xl  bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(192,132,252,0.3),rgba(255,255,255,0))]  `}
   >
     <motion.div
       //   variants={staggerContainer}
@@ -26,7 +26,7 @@ const GetStarted = () => (
       >
         <img
           src="/visions/rockets.svg"
-          alt="get-started"
+          alt="rockets"
           className="h-[90%] w-[90%] object-contain text-white"
         />
       </motion.div>
@@ -86,7 +86,7 @@ const GetStarted = () => (
       >
         <img
           src="/visions/podcast.svg"
-          alt="get-started"
+          alt="podcasts"
           className="h-[90%] w-[90%] object-contain text-white"
         />
       </motion.div>
@@ -105,7 +105,7 @@ const GetStarted = () => (
       >
         <img
           src="/visions/stereo.svg"
-          alt="get-started"
+          alt="stereo"
           className="h-[90%]  animate-in w-[90%] object-contain text-white"
         />
       </motion.div>
@@ -158,7 +158,7 @@ const GetStarted = () => (
       >
         <img
           src="/visions/richs.svg"
-          alt="get-started"
+          alt="rich"
           className="h-[90%] w-[90%] object-contain text-white"
         />
       </motion.div>

src/app/(web)/(home)/page.tsx

@@ -1,10 +1,13 @@
+import Contacts from "../_components/contacts"
+import { LauchText } from "../_components/lauch"
 import { Customers } from "./_components/customers"
 import ForFree from "./_components/for-free"
 import GetStarted from "./_components/get-started"
 import Hero from "./_components/hero"
 import { HorizontalScrollCarousel } from "./_components/horizontal-crsl"
 import World from "./_components/people-around"
 
+
 const LandingPage = () => {
   return (
     <div className="">
@@ -26,13 +29,19 @@ const LandingPage = () => {
       <div className="">
         <Customers />
       </div>
-
+      <div className='overflow-hidden'>
+        <Contacts />
+      </div>
+      <div className='relative overflow-hidden'>
+        <LauchText />
+      </div>
       <div className="relative">
         <World />
       </div>
       <div className="mb-0">
         <ForFree />
       </div>
+
     </div>
   )
 }

src/app/(web)/_components/contacts/contact.module.css

@@ -0,0 +1,54 @@
+.container {
+    height: 100vh;
+    width: 100vw;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    background-color: transparent;
+    overflow: hidden;
+}
+
+.textContainer {
+    position: relative;
+    cursor: pointer;
+    transition: transform 0.4s;
+    text-align: center;
+    transform-style: preserve-3d;
+}
+
+.textContainer p {
+
+    font-weight: 700;
+    margin: 0px;
+    transition: all 0.4s;
+
+    line-height: 8vw;
+    text-align: center;
+}
+
+.textContainer .secondary {
+    transform: rotateX(-90deg) translateY(3.5vw);
+    transform-origin: bottom center;
+    position: absolute;
+    top: 0;
+    text-align: center;
+
+    opacity: 0;
+}
+
+.textContainer:hover {
+    transform: rotateX(90deg);
+    text-align: center;
+}
+
+.textContainer:hover .secondary {
+    opacity: 1;
+    text-align: center;
+}
+
+.textContainer:hover .primary {
+    transform: translateY(-100%);
+    text-align: center;
+    opacity: 0;
+}

src/app/(web)/_components/contacts/index.tsx

@@ -0,0 +1,41 @@
+'use client'
+
+
+import { cn } from '@/lib/utils';
+import styles from './contact.module.css'
+import Text3d from './text-3d';
+import { useRef } from 'react';
+
+export default function Contacts() {
+
+    const plane = useRef(null);
+    const maxRotate = 45;
+
+    const manageMouseMove = (e: any) => {
+        const x = e.clientX / window.innerWidth
+        const y = e.clientY / window.innerHeight
+        const perspective = window.innerWidth * 4;
+        const rotateX = maxRotate * x - maxRotate / 2;
+        const rotateY = (maxRotate * y - maxRotate / 2) * - 1;
+        // @ts-ignore
+        plane.current.style.transform = `perspective(${perspective}px) rotateX(${rotateY}deg) rotateY(${rotateX}deg)`
+    }
+
+    return (
+        <div onMouseMove={(e) => { manageMouseMove(e) }} className={cn(styles.container, 'overflow-hidden relative')}>
+            <div className="absolute bottom-10 -z-10 flex w-full justify-center">
+                <div className="animate-pulse-slow h-[400px] w-[400px] max-w-full rounded-full bg-gradient-to-tr from-purple-600 to-[#8057e9] opacity-20 blur-[100px]" />
+            </div>
+            <div className="absolute bottom-0 -z-10 flex w-full justify-center">
+                <div className="animate-pulse-slow h-[310px] w-[310px] max-w-full rounded-full bg-[#8678F9] opacity-20 blur-[100px]" />
+            </div>
+            <div ref={plane} className={styles.body}>
+
+                <Text3d primary={"POLISH"} secondary={"TURNING"} />
+                <Text3d primary={"IDEA "} secondary={"IDEA"} />
+                <Text3d primary={"Into "} secondary={"Into"} />
+                <Text3d primary={"Shapes"} secondary={"Shapes"} />
+            </div>
+        </div>
+    )
+}

src/app/(web)/_components/contacts/text-3d.tsx

@@ -0,0 +1,17 @@
+import React, { useRef } from 'react'
+import styles from './contact.module.css';
+import { cn } from '@/lib/utils';
+
+
+export default function Text3d({ primary, secondary }: { primary: string, secondary: string }) {
+
+    const text1 = useRef(null);
+    const text2 = useRef(null);
+
+    return (
+        <div className={cn(styles.textContainer, 'font-heading text-[6vw] md:text-[8vw] lg:text-[9vw] py-2')}>
+            <p className={cn(styles.primary, 'bg-gradient-to-br from-purple-600 via-purple-500/90 to-white text-transparent bg-clip-text')} ref={text1}>{primary}</p>
+            <p className={cn(styles.secondary, 'bg-gradient-to-tr from-purple-400 to-red-200 bg-clip-text text-transparent')} ref={text2}>{secondary}</p>
+        </div>
+    )
+}

src/app/(web)/_components/lauch.tsx

@@ -0,0 +1,60 @@
+// @ts-nocheck
+'use client'
+
+import React, { useEffect, useRef } from "react";
+
+export const LauchText = () => {
+    const containerRef = useRef(null);
+    const textRef = useRef(null);
+
+    useEffect(() => {
+        resizeText();
+
+        window.addEventListener("resize", resizeText);
+
+        return () => {
+            window.removeEventListener("resize", resizeText);
+        };
+    }, []);
+
+    const resizeText = () => {
+        const container = containerRef.current;
+        const text = textRef.current;
+
+        if (!container || !text) {
+            return;
+        }
+
+        const containerWidth = container.offsetWidth;
+        let min = 1;
+        let max = 2500;
+
+        while (min <= max) {
+            const mid = Math.floor((min + max) / 2);
+            text.style.fontSize = mid + "px";
+
+            if (text.offsetWidth <= containerWidth) {
+                min = mid + 1;
+            } else {
+                max = mid - 1;
+            }
+        }
+
+        text.style.fontSize = max + "px";
+    };
+
+    return (
+        <div
+            className="flex h-screen w-full items-center overflow-hidden border-b-2 border-white/20 backdrop-blur-md  rounded-t-full  bg-[radial-gradient(ellipse_80%_80%_at_50%_-20%,rgba(192,132,252,0.3),rgba(255,255,255,0))] to-red-200/5"
+            ref={containerRef}
+        >
+            <div className="absolute inset-0 bg-[url(https://snippets.alexandru.so/grid.svg)] bg-fixed w-screen  h-screen overflow-hidden"></div>
+            <span
+                className="absolute text-left font-heading  bottom-0 left-0 mx-auto whitespace-nowrap  font-bold uppercase text-whute"
+                ref={textRef}
+            >
+                JUST TO <span className="bg-gradient-to-tr hover:bg-gradient-to-tr hover:from-purple-400 hover:to-red-200 hover:bg-clip-text  duration-500 transition-color ease-in-out  hover:text-transparent from-purple-500 to-red-300 text-black/90 pt-5 rounded-lg px-2 ">LAUNCH</span> SOON.
+            </span>
+        </div>
+    );
+};

src/app/(web)/streams/_components/StreamLists.tsx

@@ -9,7 +9,7 @@ export const Streams = async () => {
   return (
     <div>
       <h2 className="mb-4 text-lg font-semibold">
-        We cooked for you... Check them out
+        What other cooked for you... Check them out
       </h2>
       {data.length === 0 && (
         <div className="text-sm text-muted-foreground">No streams found.</div>

src/app/(web)/streams/page.tsx

@@ -1,7 +1,4 @@
 import { Suspense } from "react"
-import { UserButton } from "@clerk/nextjs"
-
-import { ModeToggle } from "@/components/mode-toggle"
 
 import { Streams, StreamSkeleton } from "./_components/StreamLists"