Zac boost UI

app/layout.tsx

@@ -1,8 +1,8 @@
 import "./globals.css";
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
-import { ThemeProvider } from "@/components/providers/theme-provider";
-import { ToasterProvider } from "@/components/providers/toast-provider";
+import { ThemeProvider } from "@/components/providers/ThemeProvider";
+import { ToasterProvider } from "@/components/providers/ToastProvider";
 import TanStackProvider from "@/components/providers/TanstackProvider";
 
 const inter = Inter({ subsets: ["latin"] });

app/page.tsx

@@ -1,21 +1,23 @@
 import ScrollToTop from "@/components/ui/back-to-top";
 import { Hero } from "@/components/landing/hero";
 import { Navigation } from "@/components/landing/navigation";
-import SiteCounter from "@/components/landing/site-counter";
+import SiteCounter from "@/components/landing/stats";
 import AboutTailspin from "@/components/landing/about-tailspin";
 import FAQ from "@/components/landing/faq";
 import Timeline from "@/components/landing/timeline";
 import ThanksPage from "@/components/landing/thanks";
 import StepperCard from "@/components/ui/useCode/StepperCard";
 import RatingBody from "@/components/core/rating-area/rating-component";
+import GrowOnScroll from "@/components/ui/grow-on-scroll";
+import Footer from "@/components/landing/footer";
+import ComponentCarousel from "@/components/ui/component-carousel";
+import { Separator } from "@/components/ui/separator";
 
 export default function Home() {
     return (
         <main className='mx-auto h-full w-full overflow-clip'>
             <ScrollToTop />
-
             <Navigation />
-
             <section
                 id='landing'
                 className='h-screen w-full bg-gradient-to-b from-[#493b6c] via-[#14243a] to-[#000000]'
@@ -29,27 +31,41 @@ export default function Home() {
             </section>
             <section
                 id='stepper'
-                className='flex h-screen items-center justify-center'
+                className='relative flex h-screen items-center justify-center bg-gradient-to-r from-orange-400 to-pink-500'
             >
-                <StepperCard />
-            </section>
-            <section className='container'>
-                <div>
-                    <SiteCounter />
+                <div className='pointer-events-auto absolute inset-0 z-20 bg-white bg-opacity-50 xl:hidden' />
+                <div className='absolute inset-0 z-30 flex items-center justify-center xl:hidden'>
+                    <div className='w-3/4 max-w-lg rounded-xl bg-black p-6 shadow-lg'>
+                        <h2 className='mb-4 text-center text-xl font-bold text-white'>
+                            It looks like you&quot;re on a small screen
+                        </h2>
+                        <p className='text-sm font-semibold text-gray-400'>
+                            We hate to be non-inclusive towards phones and
+                            tablets, however we want to provide you with the
+                            best experience possible!
+                        </p>
+                    </div>
                 </div>
+                <StepperCard />
             </section>
-            <section>
-                <FAQ />
-            </section>
-            <section>
+            <GrowOnScroll className='flex flex-col md:flex-row'>
+                <SiteCounter />
                 <Timeline />
-            </section>
+            </GrowOnScroll>
+            <Separator />
             <section>
-                <ThanksPage />
+                <ComponentCarousel
+                    nodes={[<FAQ key='faq' />, <ThanksPage key='thanksPage' />]}
+                    title='Some useless information'
+                />
             </section>
+            <Separator />
             <section>
                 <RatingBody />
             </section>
+            <section>
+                <Footer />
+            </section>
         </main>
     );
 }

components/core/rating-area/rating-component.tsx

@@ -27,8 +27,8 @@ For example:
 */
 const RatingBody = () => {
     return (
-        <div className='flex min-h-screen items-center justify-center lg:m-6'>
-            <Card className='w-1/2 border-white'>
+        <div className='m-2 flex min-h-[60vh] items-center justify-center lg:m-6'>
+            <Card className='border-white lg:w-1/2'>
                 <CardHeader>
                     <CardTitle>Rate Tailspin</CardTitle>
                     <CardDescription>

components/landing/about-tailspin.tsx

@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { BarChartBig } from "lucide-react";
+import FlipOnScroll from "../ui/flip-on-scroll";
 
 type AboutTailSpinBoxesProps = {
     title: string;
@@ -14,7 +15,7 @@ const AboutTailSpinBoxes: React.FC<AboutTailSpinBoxesProps> = ({
     footer,
 }) => {
     return (
-        <figure className='relative m-2 flex flex-col items-center justify-center rounded-xl border-2 border-white p-8 text-center'>
+        <FlipOnScroll>
             <blockquote className='mx-auto mb-4 max-w-2xl text-gray-500 dark:text-gray-400 lg:mb-8'>
                 <h3 className='text-lg font-semibold text-gray-900 dark:text-white'>
                     {title}
@@ -26,19 +27,22 @@ const AboutTailSpinBoxes: React.FC<AboutTailSpinBoxesProps> = ({
                     {footer}
                 </figcaption>
             )}
-        </figure>
+        </FlipOnScroll>
     );
 };
 
 const AboutTailspin = () => {
     return (
         <div
-            className='relative flex min-h-screen flex-col items-center justify-center rounded-lg bg-black p-6'
+            className='relative flex h-full flex-col items-center justify-center rounded-lg bg-black p-6'
             id='about-section'
         >
+            <p className='mb-5 bg-gradient-to-r from-orange-400 to-pink-500 bg-clip-text text-center text-4xl font-bold text-transparent'>
+                Tailspin
+            </p>
             <div className='grid rounded-lg md:grid-cols-2'>
                 <AboutTailSpinBoxes
-                    title='Tailwind has revolutioned frontend development.'
+                    title='Tailwind has revolutionized frontend development.'
                     paragraphComponent={
                         <p>
                             Show off your skills and compete against the world
@@ -134,18 +138,3 @@ const AboutTailspin = () => {
 };
 
 export default AboutTailspin;
-// footer={
-//     <>
-//         <img
-//             className='h-9 w-9 rounded-full'
-//             src='https://flowbite.s3.amazonaws.com/blocks/marketing-ui/avatars/karen-nelson.png'
-//             alt='profile picture'
-//         />
-//         <div className='space-y-0.5 text-left font-medium dark:text-white'>
-//             <div>Bonnie Green</div>
-//             <div className='text-sm text-gray-500 dark:text-gray-400'>
-//                 Developer at Open AI
-//             </div>
-//         </div>
-//     </>
-// }

components/landing/faq.tsx

@@ -11,7 +11,7 @@ import Link from "next/link";
 const FAQ = () => {
     return (
         <div
-            className='flex min-h-screen min-w-full flex-col items-center justify-center'
+            className='flex min-w-full flex-col items-center justify-center'
             id='accordion'
         >
             <span className='bold text-center text-2xl italic'>FAQ</span>
@@ -157,7 +157,7 @@ const FAQ = () => {
                         </Link>
                     </AccordionContent>
                 </AccordionItem>
-                <AccordionItem value='item-3'>
+                <AccordionItem value='item-4'>
                     <AccordionTrigger>
                         Not an FAQ, but in the spirit of transparency...
                     </AccordionTrigger>

components/landing/footer.tsx

@@ -0,0 +1,47 @@
+import Link from "next/link";
+import { TailspinLogo } from "../ui/spinning-logo";
+
+const Footer = () => {
+    return (
+        <footer className='rounded-lg bg-white shadow dark:bg-gray-900'>
+            <div className='mx-auto w-full max-w-screen-xl p-4 md:py-8'>
+                <div className='sm:flex sm:items-center sm:justify-between'>
+                    <Link
+                        href='/'
+                        className='mb-4 flex items-center space-x-3 rtl:space-x-reverse sm:mb-0'
+                    >
+                        <TailspinLogo outershellClassname='w-6 h-6' />
+                        <span className='self-center whitespace-nowrap text-2xl font-semibold dark:text-white'>
+                            Tailspin
+                        </span>
+                    </Link>
+                    <ul className='mb-6 flex flex-wrap items-center text-sm font-medium text-gray-500 dark:text-gray-400 sm:mb-0'>
+                        <li>
+                            <a
+                                href='#about-section'
+                                className='me-4 hover:underline md:me-6'
+                            >
+                                About
+                            </a>
+                        </li>
+                        <li>
+                            <a href='#' className='hover:underline'>
+                                Contact
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+                <hr className='my-6 border-gray-200 dark:border-gray-700 sm:mx-auto lg:my-8' />
+                <span className='block text-sm text-gray-500 dark:text-gray-400 sm:text-center'>
+                    No © 2023{" "}
+                    <Link href='/' className='hover:underline'>
+                        Tailspin
+                    </Link>
+                    . No Rights Reserved.
+                </span>
+            </div>
+        </footer>
+    );
+};
+
+export default Footer;

components/landing/hero.tsx

@@ -1,36 +1,41 @@
 import { ArrowHead } from "@/components/ui/arrow";
-import { cn } from "@/lib/utils";
-import { Montserrat } from "next/font/google";
 import { HeroSubText } from "@/components/ui/typewriter-effect";
-import { TailspinLogo } from "@/components/ui/spinning-logo";
 import HeroPageToast from "./hero-page-toast";
-
-const font = Montserrat({ weight: "700", subsets: ["latin"] });
+import { Button } from "../ui/button";
+import Link from "next/link";
 
 export const Hero = () => {
     return (
         <div className='relative space-y-5 py-36 text-center font-bold text-white'>
-            <h1
-                className={cn(
-                    "font-bol inline-flex items-center text-9xl",
-                    font.className
-                )}
-                style={{
-                    textShadow:
-                        "0px 0px 10px rgba(128, 128, 128, 0.5), 0px 0px 20px rgba(128, 128, 128, 0.5), 0px 0px 30px rgba(128, 128, 128, 0.5)",
-                }}
-            >
-                <div className='inline-flex items-center'>
-                    <TailspinLogo outershellClassname='z-[0] mr-3 h-[4rem] w-[4rem] animate-spin hidden md:block' />
-                    <span className='text-orange-400'>Tailspin</span>
+            <div className='flex flex-col space-y-5 text-4xl font-extrabold sm:text-5xl md:text-6xl lg:text-7xl'>
+                <h1>Competitive TailwindCSS</h1>
+                <h2>Learn, Practice, Develop</h2>
+                <div className='bg-gradient-to-r from-orange-200 to-orange-900 bg-clip-text text-transparent'>
+                    <HeroSubText />
                 </div>
-            </h1>
-            <div className='bg-clip-text text-xl font-semibold text-orange-700'>
-                <HeroSubText />
             </div>
-            <a
+            <div className='text-sm font-light text-zinc-400 md:text-xl'>
+                Show off your Tailwind skills and build community.
+            </div>
+            <div>
+                <Link href='#stepper'>
+                    <Button className='rounded-full border-0 bg-gradient-to-r from-orange-500 via-yellow-700 to-pink-500 p-4 font-semibold text-white hover:cursor-pointer md:p-6 md:text-lg'>
+                        Try our Playground
+                    </Button>
+                </Link>
+            </div>
+            <div className='text-xs font-normal text-zinc-400 md:text-sm'>
+                Forever free. Not affiliated with{" "}
+                <Link
+                    href='https://tailwindcss.com'
+                    className='text-blue-500 underline'
+                >
+                    The Tailwind Org
+                </Link>
+            </div>
+            <Link
                 href='#stepper'
-                className='flex cursor-pointer flex-col items-center'
+                className='flex cursor-pointer flex-col items-center hover:cursor-pointer'
             >
                 <div className='h-12 w-12 animate-bounce'>
                     <ArrowHead
@@ -50,7 +55,7 @@ export const Hero = () => {
                         strokeWidth='4'
                     />
                 </div>
-            </a>
+            </Link>
             <HeroPageToast />
         </div>
     );