bing | footer | more

app/public/BingSiteAuth.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0"?>
+<users>
+	<user>50D575324B09D3BA4B8E40A743D0BD10</user>
+</users>

app/src/app/layout.tsx

@@ -10,6 +10,7 @@ import { joinPaths } from "@/lib/utils";
 import { siteConfig } from "@/lib/site-config";
 import { RiTwitterXLine, RiGithubFill } from "react-icons/ri";
 import { TbMail } from "react-icons/tb";
+import DisplayContainer from "@/components/display-container";
 
 const inter = Inter({ subsets: ["latin"] });
 
@@ -44,6 +45,12 @@ export const metadata: Metadata = {
   alternates: {
     canonical: { url: siteConfig.url, title: "Home" },
     languages: { en: [{ url: siteConfig.url, title: "Home" }] },
+    types: {
+      "Home" : siteConfig.url,
+      "NPM Package": siteConfig.npm,
+      "GitHub Repository": siteConfig.github,
+      "Docs": siteConfig.docs
+    }
   },
   openGraph: {
     type: "website",
@@ -111,7 +118,7 @@ export default async function RootLayout({
             <ThemeEditor />
           </main>
           <GithubCorner />
-          <footer className="py-8 flex md:flex-row flex-col items-center md:px-8 px-4 lg:px-12 max-w-[1700px] mx-auto bg-accent text-accent-foreground mt-10 md:mt-16">
+          <DisplayContainer As="footer" waveColors={{c1: "fill-accent"}} bottom className="pb-8 pt-1 flex md:flex-row flex-col items-center md:px-8 px-4 lg:px-12 max-w-[1700px] mx-auto bg-accent text-accent-foreground" containerClassName="mt-10 md:mt-16">
               {/* <Container> */}
               <p>Built with <span className="text-destructive-foreground font-extrabold text-red-500" title="love" aria-label="love" style={{fontFamily: '"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol"'}}>♥️</span> by <a href='https://github.com/programming-with-ia' className="underline underline-offset-1" target="_blank">immi</a></p>
               <div className="flex items-center mt-4 sm:mt-0 md:ml-auto">
@@ -129,7 +136,7 @@ export default async function RootLayout({
                 ))}
               </div>
               {/* </Container> */}
-            </footer>
+            </DisplayContainer>
         </ThemeProvider>
       </body>
     </html>

app/src/app/sitemap.ts

@@ -0,0 +1,11 @@
+import { siteConfig } from "@/lib/site-config";
+import { MetadataRoute } from "next";
+
+export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
+  return [
+    siteConfig.url,
+    siteConfig.github,
+    siteConfig.npm,
+    siteConfig.docs,
+  ].map((url) => ({ url }));
+}

app/src/components/display-container.tsx

@@ -1,18 +1,20 @@
-import { cn } from "@/lib/utils";
+import { clsx, cn } from "@/lib/utils";
 import React, { SVGProps } from "react";
 
-function DisplayContainer({ children, className }: { children: React.ReactNode, className?: string }) {
+function DisplayContainer({ children, className, bottom, As='div', containerClassName, waveColors }: { children: React.ReactNode, className?: string, bottom?:boolean, As?: keyof JSX.IntrinsicElements, containerClassName?:string, waveColors?: SVGWaveColors }) {
   return (
-    <div className=" drop-shadow-xl xl:w-4/5 mx-auto">
-      <div className={cn("p-8 md:p-16 lg:p-24 w-[98.6%] bg-card mx-auto rounded-t-xl drop-shadow-lg relative -z-10 flex flex-col items-center", className)}>
+    <As className={clsx("drop-shadow-xl xl:w-4/5 mx-auto flex relative group", bottom ? 'flex-col-reverse' : 'flex-col', containerClassName)}>
+      <div className={cn("w-[98.6%] bg-card mx-auto drop-shadow-lg relative flex flex-col items-center -z-[1]", bottom ? 'rounded-b-xl':'rounded-t-xl', className)}>
         {children}
       </div>
-      <SVGComponent className="-mt-1" />
-    </div>
+      <SVGWave className={clsx(bottom ?"-mb-1 -scale-y-100 -scale-x-100":"-mt-1")} {...waveColors} />
+    </As>
   );
 }
 
-const SVGComponent = (props: SVGProps<SVGSVGElement>) => (
+type SVGWaveColors = {c1?:string, c2?:string, c3?:string}
+
+export const SVGWave = ({c1, c2, c3, ...props}: SVGProps<SVGSVGElement> & SVGWaveColors) => (
   <svg
     id="Layer_1"
     data-name="Layer 1"
@@ -23,22 +25,22 @@ const SVGComponent = (props: SVGProps<SVGSVGElement>) => (
   >
     <path
       d="m1062.77,24.16s-43.27,280.48-802.45-.54l802.45.54Z"
-      className="fill-primary drop-shadow-xl"
+      className={c3 || "fill-primary drop-shadow-xl"}
       fillRule="evenodd"
       strokeMiterlimit={10}
       strokeWidth={1.73}
     />
     <path
       d="m1444.65,112.37s-282.25,85.09-532.85-45.77l-1.82-31.45L1438.4,4.55l6.24,107.82Z"
-      className="fill-secondary drop-shadow-md"
+      className={c2 || "fill-secondary drop-shadow-md"}
       fillRule="evenodd"
       strokeWidth={0}
     />
     <path
       d="m1447,136.18V0H0v71.23h0c0,12.62,8.46,23.69,20.65,27,388.24,105.43,592.19,42.39,769.5-2.3,180.93-45.61,334.11-84.22,627.06,58.08,13.44,6.53,29.8-2.88,29.8-17.82Z"
       fillRule="evenodd"
       // strokeWidth={0}
-      className="fill-card drop-shadow-xl"
+      className={c1 || "fill-card drop-shadow-xl"}
     />
   </svg>
 );

app/src/components/pages/home/display.tsx

@@ -4,10 +4,11 @@ import { IoLogoGithub } from "react-icons/io";
 import { CgNpm } from "react-icons/cg";
 import DisplayContainer from "@/components/display-container";
 import { siteConfig } from "@/lib/site-config";
+import { ChevronRight } from "lucide-react";
 
 function Display() {
   return (
-    <DisplayContainer className="text-center gap-1">
+    <DisplayContainer className="text-center gap-1 p-8 md:p-16 lg:p-24">
       <Heading size="xl" className={"primaryText font-bold"}>
         {siteConfig.name}
       </Heading>
@@ -19,16 +20,24 @@ function Display() {
         the process of managing and customizing theme colors in Shadcn-based
         projects
       </p>
-      <div className="mt-10 flex flex-wrap md:gap-x-6 gap-3 justify-center">
-        <Button asChild className="w-32 gap-1 rounded-xl" variant={"default"}>
-          <a target="_blank" href={siteConfig.github}>
-            <IoLogoGithub size={22} /> Github
-          </a>
-        </Button>
-        <Button asChild className="w-32 gap-1 rounded-xl" variant={"default"}>
-          <a target="_blank" href={siteConfig.npm}>
-            <CgNpm size={22} />
-            Npm
+      <div className="mt-10 flex flex-wrap md:gap-x-1 gap-3 justify-center">
+          <div className="absolute top-2 right-2 hidden md:inline-flex gap-2 opacity-0 transition-opacity group-hover:opacity-70 hover:!opacity-100">
+
+          <Button asChild className="rounded-xl" variant={"outline"} size={"icon"}>
+            <a target="_blank" href={siteConfig.github}>
+              <IoLogoGithub size={20} />
+            </a>
+          </Button>
+          <Button asChild className="rounded-xl" variant={"outline"} size={"icon"}>
+            <a target="_blank" href={siteConfig.npm}>
+              <CgNpm size={20} />
+            </a>
+          </Button>
+          </div>
+        <Button asChild className="w-32 gap-1 rounded-xl group/docs" variant={"default"}>
+          <a target="_blank" href={siteConfig.docs}>
+            Get Started
+            <ChevronRight className="group-hover/docs:translate-x-2 transition" size={22} />
           </a>
         </Button>
       </div>

app/src/components/theme-editor.tsx

@@ -26,10 +26,11 @@ function ThemeEditor() {
           aria-label={(isOpen? 'Close': "Open")+' Editor'}
           variant={isOpen ? "secondary" : "default"}
           className={clsx(
-            "rounded-full px-3 py-3 fixed bottom-2 right-2 border shadow-md drop-shadow-sm z-20", !isOpen && 'opacity-70 hover:opacity-100 animate-bounce hover:animate-none'
+            "rounded-full px-3 py-3 fixed transition-all duration-300 border shadow-md drop-shadow-sm z-20 group overflow-hidden bottom-2 left-1/2 -translate-x-1/2", isOpen ? 'opacity-0': ''
           )}
         >
           <ColorPalette size={24} />
+          <span className="group-hover:w-40 group-hover:opacity-100 w-0 opacity-0 transition-all duration-300">Shadcn Theme Editor</span>
         </Button>
       </SheetTrigger>
       <SheetContent

app/src/lib/site-config.ts

@@ -51,6 +51,7 @@ export const siteConfig = {
   },
   github: "https://github.com/programming-with-ia/shadcn-theme-editor/",
   npm: "https://www.npmjs.com/package/shadcn-theme-editor",
+  docs: "https://github.com/programming-with-ia/shadcn-theme-editor#readme",
   images: [
     { width: 1200, height: 630 },
     { width: 1024, height: 512 },