2.6.5

src/app/aboutus/page.tsx

@@ -45,7 +45,7 @@ export default function AboutPage() {
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <h1 className="text-4xl font-bold mb-8">About Our Company</h1>
+
 
       {/* Company History */}
       <Card className="mb-8 bg-[#000000]">

src/app/browse/page.tsx

@@ -16,6 +16,18 @@ import {
   SelectValue,
 } from "@/components/ui/select";
 import { SearchIcon, StarIcon } from "lucide-react";
+import {
+  MoonIcon,
+  SunIcon,
+  FileTextIcon,
+  LaptopIcon,
+  CalendarIcon,
+  EnvelopeClosedIcon,
+  FaceIcon,
+  GearIcon,
+  MagnifyingGlassIcon,
+  PersonIcon,
+} from "@radix-ui/react-icons";
 import Image from "next/image";
 
 export default function BrowsePage() {
@@ -78,49 +90,19 @@ export default function BrowsePage() {
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <div className="flex flex-col md:flex-row gap-8">
+      <div className="flex flex-col  justify-center md:flex-row gap-8">
         {/* Sidebar */}
-        <div className="w-full md:w-1/4">
-          <div className="mb-6">
-            <Input
-              type="text"
-              placeholder="Search software..."
-              className="w-full"
-            />
-          </div>
-          <div className="mb-6">
-            <h2 className="text-lg font-semibold mb-2">Categories</h2>
-            <div className="space-y-2">
-              {categories.map((category) => (
-                <div key={category} className="flex items-center">
-                  <Checkbox id={category} />
-                  <label
-                    htmlFor={category}
-                    className="ml-2 text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-                  >
-                    {category}
-                  </label>
-                </div>
-              ))}
-            </div>
-          </div>
-          <div className="mb-6">
-            <h2 className="text-lg font-semibold mb-2">Price Range</h2>
-            <div className="flex items-center space-x-2">
-              <Input type="number" placeholder="Min" className="w-1/2" />
-              <span>-</span>
-              <Input type="number" placeholder="Max" className="w-1/2" />
-            </div>
-          </div>
-          <Button className="w-full">Apply Filters</Button>
-        </div>
+
 
         {/* Main Content */}
         <div className="w-full md:w-3/4">
-          <div className="flex justify-between items-center mb-6">
-            <h1 className="text-2xl font-bold">Browse Music Software</h1>
+          <div className="flex justify-between gap-[3rem] items-center mb-6">
+          <div className="relative w-full">
+            <Input type="text" placeholder="Search for favorite songs" className="w-full pl-[3rem] placeholder:text-[#7c7c7c]" />
+            <MagnifyingGlassIcon width="21" height="21" className="absolute left-[16px] top-1/2 -translate-y-1/2 " />
+            </div>
             <Select>
-              <SelectTrigger className="w-[180px]">
+              <SelectTrigger className="w-[200px]">
                 <SelectValue placeholder="Sort by" />
               </SelectTrigger>
               <SelectContent>
@@ -144,7 +126,7 @@ export default function BrowsePage() {
                     alt={product.name}
                     width={"200"}
                     height={"300"}
-                    className="w-full h-32 object-cover mb-4 rounded"
+                    className="w-full h-[12rem] object-cover mb-4 rounded"
                   />
                   <p className="text-sm text-muted-foreground mb-2">
                     {product.category}

src/app/community/page.tsx

@@ -76,7 +76,7 @@ export default function CommunityPage() {
 
   return (
     <div className="container mx-auto px-4 py-8">
-      <h1 className="text-4xl font-bold mb-8">Community Hub</h1>
+
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
         {/* Recent Discussions */}

src/app/home/page.tsx

@@ -127,28 +127,123 @@ import { Dot } from "lucide-react";
 import DownloadButton from "./components/DownloadButton";
 import { BorderBeam } from "@/components/magicui/border-beam";
 import Meteors from "@/components/magicui/meteors";
+import { CalendarIcon } from "@radix-ui/react-icons"
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@/components/ui/avatar"
+import {
+  HoverCard,
+  HoverCardContent,
+  HoverCardTrigger,
+} from "@/components/ui/hover-card"
 export default function Home() {
   const { theme, systemTheme, setTheme } = useTheme();
   const [position, setPosition] = React.useState("benoit");
   return (
     <main className="flex GeistSans overflow-x-hidden  relative w-full min-h-screen gap-[3rem] dark:bg-black dark:[color-scheme:dark] flex-col items-center justify-between  py-0">
       <div className="w-ful mt-[3rem] flex gap-[3.5rem] items-center mx-[5rem]">
         <div className=" flex flex-col items-start gap-[2.5rem]">
-          <div className="flex gap-[0rem] items-center">
+          <div className="flex gap-[1rem] items-center">
             <Button
               variant="outline"
-              className="font-medium relative  text-center  w-fit rounded-md px-3 text-black dark:text-white text-[1rem]"
+              className="font-medium relative h-[2rem] text-sm  text-center  w-fit rounded-md px-3 text-black dark:text-white text-[1rem]"
             >
-              Lasted Version <Minus className="h-4 w-4 mx-2" /> v2.5.3
-              <BorderBeam
-                size={50}
-                colorFrom="#06b6d4"
-                colorTo="#3b82f6"
-                duration={3}
-                delay={0}
-                borderWidth={1.5}
-              />
+              v2.5.3
+
             </Button>
+            <div className="flex items-center gap-[0.5rem]">
+
+               <HoverCard>
+      <HoverCardTrigger asChild>
+      <a href="https://x.com/DeveloperPlus24">
+                 <Button variant="ghost" className="px-2 dark:hover:bg-[#161616]"  size="icon">
+                 <Image src="/x.svg" width="50" height="50" alt="x-icon" className="max-w-[50px] dark:invert-[1]  max-height-[50px] "/>
+                </Button>
+               </a>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-[16rem]" side="top">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage className="dark:invert-[1] rounded-[0px]" src="/x.svg" />
+            <AvatarFallback>IG</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@x</h4>
+            <p className="text-sm">
+              Pham Quang Truong An
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
+              <span className="text-xs text-muted-foreground">
+                Joined Jun 2024
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+                <HoverCard>
+      <HoverCardTrigger asChild>
+      <a href="">
+                  <Button variant="ghost" className="px-2 dark:hover:bg-[#161616]"  size="icon">
+                   <Image src="/instagram.svg" width="50" height="50" alt="instagram-icon" className="max-w-[50px] dark:invert-[1]  max-height-[50px] "/>
+                </Button>
+                </a>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-[16rem]" side="top">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage className="dark:invert-[1] rounded-[0px]" src="/instagram.svg" />
+            <AvatarFallback>IG</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@instagram</h4>
+            <p className="text-sm">
+              Pham Quang Truong An
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
+              <span className="text-xs text-muted-foreground">
+                Joined August 2024
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+                <HoverCard>
+      <HoverCardTrigger asChild>
+      <a href="https://www.facebook.com/phamquangtruongan" >
+                  <Button variant="ghost" className="px-2 dark:hover:bg-[#161616]" size="icon">
+                  <Image src="/facebook.svg" width="50" height="50" alt="youtube-icon" className="max-w-[50px] dark:invert-[1]  max-height-[50px] "/>
+                 </Button>
+                </a>
+      </HoverCardTrigger>
+      <HoverCardContent className="w-[16rem]" side="top">
+        <div className="flex justify-between space-x-4">
+          <Avatar>
+            <AvatarImage className="dark:invert-[1] rounded-[0px]" src="/facebook.svg" />
+            <AvatarFallback>FB</AvatarFallback>
+          </Avatar>
+          <div className="space-y-1">
+            <h4 className="text-sm font-semibold">@facebook</h4>
+            <p className="text-sm">
+              Pham Quang Truong An
+            </p>
+            <div className="flex items-center pt-2">
+              <CalendarIcon className="mr-2 h-4 w-4 opacity-70" />{" "}
+              <span className="text-xs text-muted-foreground">
+                Joined December 2023
+              </span>
+            </div>
+          </div>
+        </div>
+      </HoverCardContent>
+    </HoverCard>
+
+            </div>
           </div>
           <h1 className=" leading-[2.6rem]  text-[2.5rem] font-bold">
             Experience the Ultimate Music Journey with Our Innovative Software
@@ -161,7 +256,7 @@ export default function Home() {
           <div className="flex  gap-[2rem]">
             <DownloadButton />
             <Link href="/webapp">
-              <Button variant={"outline"}>
+              <Button variant={"outline"} className="dark:hover:bg-[#1a1a1a] hover:bg-accent">
                 <Globe className="mr-2 h-4 w-4" />
                 Try On The Web
               </Button>
@@ -207,7 +302,6 @@ export default function Home() {
               delay={0}
               borderWidth={1.8}
             />
-            <Meteors number={50} />
           </div>
         </div>
       </div>

src/components/CommandMenu.tsx

@@ -100,7 +100,7 @@ export function CommandMenu() {
           <p className="text-sm select-none">Search documetion...</p>
         </div>
         <p className="text-sm text-muted-foreground">
-          <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
+          <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border  px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
             <span className="text-xs">⌘</span>K
           </kbd>
         </p>