Remove Tailwind Brand, change the headline, remove some unnecessary deps

Author: sidiDev

README.md

@@ -1,50 +1,34 @@
-<p align="center">
-  <a href="https://floatui.com/" rel="noopener" target="_blank"><img width="200" src="public/logo.svg" alt="Float UI logo"></a>
-</p>
-
-Float UI is collection of modern UI components and website templates built on top of React, and Vue (soon) with Tailwind CSS, the components are beautiful designed, expertly crafted, allow you to build beautiful websites.
-
-## Why Float UI?
-
-First, Float UI is fully free, and open source, you don't need to pay anything to use it, and we are working on it full-time, so we'll keep improving, and adding more UIs, the second thing if you’re working on a large project that requires a high level of UI customization or you find yourself repeating the same UI patterns across projects, consider creating an internal UI library, and in this case Float UI is a great choice. You should definitely use it.
-[![HomePage](readme/1.png)](https://floatui.com)
-<br>
-
-### A collection of professional and beautiful ,aesthetic and modern designed website templates
-
-[![Templates](readme/2.png)](https://floatui.com/templates)
-<br>
-
-### The User Friendly UI Components
-
-[![Components](readme/4.png)](https://floatui.com/components)
-<br>
-
-### Demo
-
-[![Demo](readme/3.png)](https://floatui.com/demo)
-<br>
+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).
 
 ## Getting Started
 
-First, install the dependencies we highly recommend using pnpm, and run the development server:
+First, run the development server:
 
 ```bash
 npm run dev
 # or
 yarn dev
-# or
-pnpm dev
 ```
 
 Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
 
-### Quick start
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
+
+The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
 
-- <strong>[UI components](https://floatui.com/components) :</strong> UI components for React and Vue (soon) with Tailwind, every example support both directions LTR and RTL.
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
 
-- <strong>[Website templates](https://floatui.com/templates) :</strong> A collection of professional and beautifully designed website templates, built on top of React, Next.js and Nuxt (soon) with Tailwind CSS.
+## Deploy on Vercel
 
-## Contributing
+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.
 
-If you're interested in contributing to Float UI, please read our [contributing guide](https://github.com/MarsX-dev/floatui/blob/main/CONTRIBUTING.md) to learn about our development process before submitting a pull request.
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

app/components/[slug]/page.tsx

@@ -15,6 +15,12 @@ type PageDetails = {
   section_name: string;
 };
 
+export async function generateStaticParams() {
+  return sections.map((item) => ({
+    slug: item.slug.slice(1),
+  }));
+}
+
 export async function generateMetadata({
   params: { slug },
 }: {
@@ -25,6 +31,10 @@ export async function generateMetadata({
   ) as PageDetails;
 
   return {
+    metadataBase: new URL("https://floatui.com"),
+    alternates: {
+      canonical: `/components/${slug}`,
+    },
     title: pageDetails
       ? `${pageDetails.section_name} - Tailwind CSS Components`
       : "Page Not Found",

app/layout.tsx

@@ -1,14 +1,30 @@
-"use client";
-
 import { Inter } from "next/font/google";
-import Script from "next/script";
 import "./tailwind.css";
 import "./customize.css";
 import "./prismjs-theme.css";
 import Navbar from "components/ui/Navbar";
-import Footer from "components/ui/Footer/Footer";
-import { usePathname } from "next/navigation";
-import ProgressBarNav from "components/ProgressBarNav";
+import Footer from "components/ui/Footer";
+import UsermavenSetup from "components/UsermavenSetup";
+import metatag from "metatag";
+
+const { title, desc, ogImage } = metatag;
+
+export const metadata = {
+  metadataBase: new URL("https://floatui.com"),
+  title,
+  description: desc,
+  openGraph: {
+    title,
+    description: desc,
+    images: ogImage,
+    url: "https://floatui.com",
+  },
+  twitter: {
+    title,
+    description: desc,
+    images: [ogImage],
+  },
+};
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -22,9 +38,6 @@ export default function RootLayout({
 }: {
   children: React.ReactNode;
 }) {
-  const pathname = usePathname();
-  const isInComponentsPage = pathname.includes("/components");
-
   return (
     <html lang="en" className="bg-zinc-950">
       <head>
@@ -36,44 +49,18 @@ export default function RootLayout({
         <meta name="twitter:site" content="@float_ui" />
         <meta name="twitter:creator" content="@float_ui" />
         <link rel="icon" href="/favicon.ico" />
-        {/* Global Site Tag (gtag.js) - Google Analytics */}
         <meta
           name="google-site-verification"
           content={GOOGLE_SITE_VERIFICATION}
         />
         <meta name="msvalidate.01" content="D00EDAC78FB47DDD869F2C18FD8A6572" />
-        <Script
-          async
-          strategy="lazyOnload"
-          defer
-          src={`https://www.googletagmanager.com/gtag/js?id=${GA_ID}`}
-        />
-        <Script
-          strategy="lazyOnload"
-          dangerouslySetInnerHTML={{
-            __html: `
-              window.dataLayer = window.dataLayer || [];
-              function gtag(){dataLayer.push(arguments);}
-              gtag('js', new Date());
-            
-              gtag('config', '${GA_ID}');
-          `,
-          }}
-        />
+        <meta name="robots" content="index, follow" />
       </head>
+      <UsermavenSetup />
       <body className={inter.className}>
-        <ProgressBarNav />
-        <div
-          className={
-            isInComponentsPage
-              ? "sticky z-50 top-0 bg-zinc-950 border-zinc-800 xl:border-b"
-              : ""
-          }
-        >
-          <Navbar />
-        </div>
+        <Navbar />
         <main>{children}</main>
-        {!isInComponentsPage ? <Footer /> : ""}
+        <Footer />
       </body>
     </html>
   );

app/page.tsx

@@ -3,26 +3,6 @@ import Features from "components/ui/Features/Features";
 import Hero from "components/ui/Hero";
 import SupportedFrameworks from "components/ui/SupportedFrameworks";
 import TemplateCTA from "components/ui/TemplateCTA";
-import metatag from "metatag";
-
-const { title, desc, ogImage } = metatag;
-
-export const metadata = {
-  metadataBase: new URL("https://floatui.com"),
-  title,
-  description: desc,
-  openGraph: {
-    title,
-    description: desc,
-    images: ogImage,
-    url: "https://floatui.com",
-  },
-  twitter: {
-    title,
-    description: desc,
-    images: [ogImage],
-  },
-};
 
 export default () => {
   return (

app/templates/[slug]/page.tsx

@@ -28,6 +28,10 @@ export async function generateMetadata({
   })[0];
 
   return {
+    metadataBase: new URL("https://floatui.com"),
+    alternates: {
+      canonical: `/templates/${slug}`,
+    },
     title: `Float UI - ${template.template_name} Tailwind CSS Template`,
     description: template.description,
     openGraph: {
@@ -55,6 +59,7 @@ export default async ({ params: { slug } }: { params: Params }) => {
       price,
       description,
       details,
+      templateFile,
     } = item.data();
 
     return {
@@ -66,31 +71,12 @@ export default async ({ params: { slug } }: { params: Params }) => {
       price,
       description,
       details,
+      templateFile,
     };
   })[0];
 
   return (
     <>
-      {/* <PaddleLoader />
-      <Head>
-        <meta name='robots' content='index, follow' />
-        <meta property='og:type' content='article' />
-        <meta name='twitter:description' content={template?.description} />
-        <meta property='og:image' content={template?.banner_url} />
-        <meta name='twitter:image' content={template?.banner_url} />
-        <meta
-          name='twitter:title'
-          content={`${template?.template_name} - Float UI`}
-        />
-        <meta
-          property='og:title'
-          content={`${template?.template_name} - Float UI`}
-        />
-        <meta property='og:description' content={""} />
-        <meta name='description' content={template?.description} />
-        <title>{template?.template_name} - Float UI</title>
-      </Head>
-      <Nav /> */}
       <section className="mt-24">
         <div className="max-w-screen max-w-2xl mx-auto lg:max-w-none">
           <div className="gap-12 lg:flex">
@@ -126,35 +112,14 @@ export default async ({ params: { slug } }: { params: Params }) => {
                     <ArrowTopRightOnSquareIcon className="w-4 h-4 duration-200 group-hover:translate-x-1" />
                   </LinkItem>
                   <LinkItem
-                    href="/"
+                    target="_blank"
+                    href={`https://drive.google.com/u/0/uc?id=${template?.templateFile}`}
                     variant="shiny"
                     className="inline-block w-full hover:bg-zinc-700 sm:w-auto"
                   >
                     Download template
                   </LinkItem>
                 </div>
-                {/* <Link
-                    href='/dashboard/templates'
-                    className='flex items-center justify-center gap-1 py-3 px-4 rounded-lg text-center text-white dark:text-white border-none bg-gray-800 dark:bg-indigo-600 shadow w-full hover:bg-gray-700 dark:hover:bg-indigo-700 sm:w-auto md:py-2.5'>
-                    <svg
-                      xmlns='http://www.w3.org/2000/svg'
-                      className='h-5 w-5'
-                      viewBox='0 0 20 20'
-                      fill='currentColor'>
-                      <path
-                        fillRule='evenodd'
-                        d='M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z'
-                        clipRule='evenodd'
-                      />
-                    </svg>
-                    Download template
-                  </Link>
-                <a
-                  href={template?.preview_url}
-                  target='_blank'
-                  className='flex items-center justify-center gap-1 py-3 px-5 rounded-lg text-center text-gray-800 dark:text-gray-300 duration-150 hover:bg-gray-50 dark:bg-gray-800 dark:hover:bg-gray-700 border dark:border-none w-full sm:w-auto md:py-2.5'>
-                  Full preview
-                </a> */}
               </div>
             </div>
           </div>

app/templates/page.tsx

@@ -15,7 +15,6 @@ export const metadata = {
   openGraph: {
     title,
     description: desc,
-    url: "https://floatui.com",
   },
   twitter: {
     title,
@@ -63,7 +62,7 @@ export default async () => {
           </div>
           <ul
             id="templates"
-            className="mt-32 space-y-7 divide-y dark:divide-gray-700 gap-14 grid-cols-2 lg:grid lg:space-y-0 lg:divide-y-0"
+            className="mt-32 space-y-7 divide-y divide-zinc-800 gap-14 grid-cols-2 lg:grid lg:space-y-0 lg:divide-y-0"
           >
             {templates.map((item, idx) => (
               <TemplateCard key={idx} item={item as Templates} />

components/HeroBgGradient.tsx

@@ -12,7 +12,7 @@ export default ({
     viewBox="0 0 653 444"
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
-    className={mergeTW(className, "w-full sm:w-[653px] sm:h-auto")}
+    className={mergeTW(className, "w-full sm:w-[653px]")}
   >
     <g filter="url(#filter0_f_3249_6957)">
       <path

components/ProgressBarNav.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+import { usermavenClient, UsermavenClient } from "@usermaven/sdk-js";
+import { useEffect } from "react";
+
+export default () => {
+  useEffect(() => {
+    // Init Usermaven
+    const usermaven: UsermavenClient = usermavenClient({
+      key: process.env.ANALYTICS_KEY as string,
+      tracking_host: "https://events.usermaven.com",
+    });
+  }, []);
+
+  return <></>;
+};

components/UsermavenSetup.tsx

@@ -1,18 +1,18 @@
 export default () => {
   return (
-    // <div className="bg-orange-600">
+    // <div className="bg-orange-600 relative z-10">
     //   <div className="max-w-screen py-3 items-center gap-x-4 justify-between text-white sm:flex">
     //     <div className="flex items-center">
     //       <img
     //         src="https://user-uploads-unicorn.s3.amazonaws.com/product_hunt_kitty.png"
     //         alt="PH kitty"
     //         className="w-24"
     //       />
-    //       <p>Support our project: Marketsy AI on Product Hunt now</p>
+    //       <p>Support our project: Float UI on Product Hunt now</p>
     //     </div>
     //     <a
     //       className="px-4 rounded-lg text-sm flex-none inline-block w-full mt-3 py-2 text-center text-orange-600 font-medium bg-white duration-150 hover:bg-gray-100 active:bg-gray-200 sm:w-auto sm:mt-0 btnshake"
-    //       href="https://www.producthunt.com/posts/marketsy-ai"
+    //       href="https://www.producthunt.com/posts/float-ui-v2"
     //       target="_blank"
     //     >
     //       <div className="flex items-center justify-center gap-x-1 text-sm">