From 00e1ec0520035804d35bc213f7e50034d7c1119e Mon Sep 17 00:00:00 2001
From: agricreations <moovendhanagriculture@gmail.com>
Date: Mon, 25 Mar 2024 08:22:39 +0530
Subject: [PATCH] Working in hero section designs

---
 ui_tailwind_shadecn/app/globals.css           |  67 ++++++--
 .../src/components/custom_ui/Svg.tsx          |  43 +++++
 ui_tailwind_shadecn/src/screens/Home.tsx      | 160 +++++++++++++-----
 3 files changed, 216 insertions(+), 54 deletions(-)
 create mode 100644 ui_tailwind_shadecn/src/components/custom_ui/Svg.tsx

diff --git a/ui_tailwind_shadecn/app/globals.css b/ui_tailwind_shadecn/app/globals.css
index 6a75725..4d2b257 100644
--- a/ui_tailwind_shadecn/app/globals.css
+++ b/ui_tailwind_shadecn/app/globals.css
@@ -2,39 +2,80 @@
 @tailwind components;
 @tailwind utilities;
  
+@layer base {
+ 
+@layer base {
+ 
 @layer base {
   :root {
     --background: 0 0% 100%;
     --foreground: 222.2 84% 4.9%;
-
     --card: 0 0% 100%;
     --card-foreground: 222.2 84% 4.9%;
- 
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
- 
-    --primary: 222.2 47.4% 11.2%;
+    --primary: 221.2 83.2% 53.3%;
     --primary-foreground: 210 40% 98%;
- 
     --secondary: 210 40% 96.1%;
     --secondary-foreground: 222.2 47.4% 11.2%;
- 
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
- 
     --accent: 210 40% 96.1%;
     --accent-foreground: 222.2 47.4% 11.2%;
- 
     --destructive: 0 84.2% 60.2%;
     --destructive-foreground: 210 40% 98%;
-
     --border: 214.3 31.8% 91.4%;
     --input: 214.3 31.8% 91.4%;
-    --ring: 222.2 84% 4.9%;
- 
-    --radius: 0.5rem;
+    --ring: 221.2 83.2% 53.3%;
+    --radius: 0.3rem;
   }
- 
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+    --primary: 217.2 91.2% 59.8%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 224.3 76.3% 48%;
+  }
+}
+
   .dark {
     --background: 222.2 84% 4.9%;
     --foreground: 210 40% 98%;
diff --git a/ui_tailwind_shadecn/src/components/custom_ui/Svg.tsx b/ui_tailwind_shadecn/src/components/custom_ui/Svg.tsx
new file mode 100644
index 0000000..86b4016
--- /dev/null
+++ b/ui_tailwind_shadecn/src/components/custom_ui/Svg.tsx
@@ -0,0 +1,43 @@
+
+
+const Icons = ()=>{
+    return(
+<>
+</>
+    )
+}
+
+const Logo = ()=>{
+    return(
+     <>
+
+        <div className="px-1 ">
+            <svg version="1.0" xmlns="http://www.w3.org/2000/svg"
+            width="24pt" height="24pt" viewBox="0 0 831.000000 595.000000"
+            preserveAspectRatio="xMidYMid meet">
+
+            <g transform="translate(0.000000,595.000000) scale(0.100000,-0.100000)"
+            fill="text-primary" stroke="none">
+            <path d="M1804 5585 c-78 -17 -134 -46 -191 -98 -52 -48 -76 -91 -92 -165 -8
+            -38 -11 -466 -11 -1495 0 -1579 -3 -1508 58 -1607 32 -51 96 -104 150 -121 25
+            -9 143 -14 369 -16 l333 -4 2 1193 3 1193 24 53 c32 72 112 143 187 168 57 18
+            101 19 1232 18 l1174 0 -4 285 c-4 265 -6 290 -26 346 -45 122 -117 200 -224
+            243 -40 16 -150 17 -1483 19 -1171 1 -1451 -1 -1501 -12z"/>
+            <path d="M5868 2708 l-3 -1193 -24 -53 c-32 -72 -112 -143 -187 -168 -57 -18
+            -101 -19 -1232 -18 l-1174 0 4 -285 c4 -265 6 -290 26 -346 45 -122 117 -200
+            224 -243 40 -16 151 -17 1468 -20 1001 -2 1444 0 1490 8 121 21 237 95 280
+            180 40 79 40 94 40 1583 0 1579 3 1508 -58 1607 -32 51 -96 104 -150 121 -25
+            9 -143 14 -369 16 l-333 4 -2 -1193z"/>
+            <path d="M3533 3845 c-123 -33 -200 -91 -245 -183 l-33 -66 -7 -511 c-3 -280
+            -9 -621 -12 -758 l-6 -247 718 2 717 3 89 45 c111 56 205 140 242 216 34 70
+            33 40 38 857 l4 657 -727 -1 c-593 0 -736 -3 -778 -14z"/>
+            </g>
+            </svg>
+        </div>
+
+     </>
+    )
+}
+
+export default Icons;
+export {Logo}
\ No newline at end of file
diff --git a/ui_tailwind_shadecn/src/screens/Home.tsx b/ui_tailwind_shadecn/src/screens/Home.tsx
index 71f62ba..f15294b 100644
--- a/ui_tailwind_shadecn/src/screens/Home.tsx
+++ b/ui_tailwind_shadecn/src/screens/Home.tsx
@@ -11,7 +11,8 @@ import {
 } from "lucide-react"
 
 import { Button } from "@/components/ui/button"
-
+import { Moon, Sun } from "lucide-react"
+import { useTheme } from "@/components/theme-provider"
 
 import {
     NavigationMenu,
@@ -64,18 +65,18 @@ import { Link } from "react-router-dom"
 
 import Grid from "@/components/custom_ui/Grid"
 
+import { Input } from "@/components/ui/input"
+import { Mail } from "lucide-react" 
+
+import {Logo} from "@/components/custom_ui/Svg"
+
 export function Dashboard() {
+    const { setTheme } = useTheme()
     return (
         <div className="flex min-h-screen w-full flex-col">
             <header className="sticky top-0 flex h-16 items-center gap-4 border-b bg-background px-4 md:px-6">
                 <nav className="hidden flex-col gap-6 text-lg font-medium md:flex md:flex-row md:items-center md:gap-5 md:text-sm lg:gap-6">
-                    <Link
-                        href="#"
-                        className="flex items-center gap-2 text-lg font-semibold md:text-base"
-                    >
-                        <Package2 className="h-6 w-6" />
-                        <span className="sr-only">Acme Inc</span>
-                    </Link>
+                <Logo />
                     <Link
                         href="#"
                         className="text-foreground transition-colors hover:text-foreground"
@@ -88,6 +89,7 @@ export function Dashboard() {
                     >
                         Components
                     </Link>
+
                     {/* <Link
             href="#"
             className="text-muted-foreground transition-colors hover:text-foreground"
@@ -100,39 +102,39 @@ export function Dashboard() {
                     >
                         <NavigationMenu>
                             <NavigationMenuList>
-                            <NavigationMenuItem>
-                                                <NavigationMenuTrigger className="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
-                                                    More{' '}
-                                                    {/* <CaretDownIcon
+                                <NavigationMenuItem>
+                                    <NavigationMenuTrigger className="text-violet11 hover:bg-violet3 focus:shadow-violet7 group flex select-none items-center justify-between gap-[2px] rounded-[4px] px-3 py-2 text-[15px] font-medium leading-none outline-none focus:shadow-[0_0_0_2px]">
+                                        More{' '}
+                                        {/* <CaretDownIcon
                                                         className="text-violet10 relative top-[1px] transition-transform duration-[250] ease-in group-data-[state=open]:-rotate-180"
                                                         aria-hidden
                                                     /> */}
-                                                </NavigationMenuTrigger>
-                                                <NavigationMenuContent className="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto">
-                                                    <ul className="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
-                                                        <li className="row-span-3 grid">
-                                                            <NavigationMenuLink asChild>
-                                                                <a
-                                                                    className="focus:shadow-violet7 from-purple9 to-indigo9 flex
+                                    </NavigationMenuTrigger>
+                                    <NavigationMenuContent className="data-[motion=from-start]:animate-enterFromLeft data-[motion=from-end]:animate-enterFromRight data-[motion=to-start]:animate-exitToLeft data-[motion=to-end]:animate-exitToRight absolute top-0 left-0 w-full sm:w-auto">
+                                        <ul className="one m-0 grid list-none gap-x-[10px] p-[22px] sm:w-[500px] sm:grid-cols-[0.75fr_1fr]">
+                                            <li className="row-span-3 grid">
+                                                <NavigationMenuLink asChild>
+                                                    <a
+                                                        className="focus:shadow-violet7 from-purple9 to-indigo9 flex
                     h-full w-full select-none flex-col justify-end rounded-[6px] bg-gradient-to-b p-[25px] no-underline outline-none focus:shadow-[0_0_0_2px]"
-                                                                    href="/"
-                                                                >
-                                                                    <svg aria-hidden width="38" height="38" viewBox="0 0 25 25" fill="white">
-                                                                        <path d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"></path>
-                                                                        <path d="M12 0H4V8H12V0Z"></path>
-                                                                        <path d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"></path>
-                                                                    </svg>
-                                                                    <div className="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] text-white">
-                                                                        Radix Primitives
-                                                                    </div>
-                                                                    <p className="text-mauve4 text-[14px] leading-[1.3]">
-                                                                        Unstyled, accessible components for React.
-                                                                    </p>
-                                                                </a>
-                                                            </NavigationMenuLink>
-                                                        </li>
-
-                                                        {/* <ListItem href="https://stitches.dev/" title="Stitches">
+                                                        href="/"
+                                                    >
+                                                        <svg aria-hidden width="38" height="38" viewBox="0 0 25 25" fill="white">
+                                                            <path d="M12 25C7.58173 25 4 21.4183 4 17C4 12.5817 7.58173 9 12 9V25Z"></path>
+                                                            <path d="M12 0H4V8H12V0Z"></path>
+                                                            <path d="M17 8C19.2091 8 21 6.20914 21 4C21 1.79086 19.2091 0 17 0C14.7909 0 13 1.79086 13 4C13 6.20914 14.7909 8 17 8Z"></path>
+                                                        </svg>
+                                                        <div className="mt-4 mb-[7px] text-[18px] font-medium leading-[1.2] ">
+                                                            Radix Primitives
+                                                        </div>
+                                                        <p className="text-mauve4 text-[14px] leading-[1.3]">
+                                                            Unstyled, accessible components for React.
+                                                        </p>
+                                                    </a>
+                                                </NavigationMenuLink>
+                                            </li>
+
+                                            {/* <ListItem href="https://stitches.dev/" title="Stitches">
                                                             CSS-in-JS with best-in-class developer experience.
                                                         </ListItem>
                                                         <ListItem href="/colors" title="Colors">
@@ -141,9 +143,9 @@ export function Dashboard() {
                                                         <ListItem href="https://icons.radix-ui.com/" title="Icons">
                                                             A crisp set of 15x15 icons, balanced and consistent.
                                                         </ListItem> */}
-                                                    </ul>
-                                                </NavigationMenuContent>
-                                            </NavigationMenuItem>
+                                        </ul>
+                                    </NavigationMenuContent>
+                                </NavigationMenuItem>
                             </NavigationMenuList>
                         </NavigationMenu>
 
@@ -205,12 +207,32 @@ export function Dashboard() {
                             <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" />
                             <Input
                                 type="search"
-                                placeholder="Search products..."
+                                placeholder="Search components..."
                                 className="pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px]"
                             />
                         </div>
                     </form>
                     <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <Sun className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme("light")}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("dark")}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme("system")}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+                    <DropdownMenu>
                         <DropdownMenuTrigger asChild>
                             <Button variant="secondary" size="icon" className="rounded-full">
                                 <CircleUser className="h-5 w-5" />
@@ -230,8 +252,64 @@ export function Dashboard() {
             </header>
 
             <main>
+                <div className="py-6">
+                    <h1 className="scroll-m-20 text-7xl font-semibold tracking-tight lg:text-7xl text-center leading-10">
+                        Open Source Awesome Ui-Componenets
+                        <br />
+                        for your next projects
+                    </h1>
+                </div>
+                <h4 className="scroll-m-20 text-xl font-semibold tracking-tight text-center">
+                    Save and share your creative designes to open source
+                </h4>
+
+
+                <div className="w-screen flex justify-center py-4">
+                    {/* <input
+                className="rounded-full bg-background text-xl border-2 border-gray-500 p-4 placeholder-gray-400 focus:text-gray-900 focus:border-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                placeholder="Explore all ui Components"
+            /> */}
+                </div>
+
+                <div>
+
+                    <div className="w-full flex justify-center">
+                        <div className="w-8/12 relative mt-2 rounded-md shadow-sm flex justify-center py-4 ">
+                            <input
+                                type="text"
+                                name="price"
+                                id="price"
+                                className="w-full rounded-full bg-background text-xl border-2 border-gray-500 p-4 placeholder-gray-400 focus:text-gray-900 focus:border-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500"
+                                placeholder="Explore all ui Components"
+                            />
+
+                            <button className="absolute px-6 inset-y-0 flex right-0 items-center">
+                                search
+                            </button>
+
+                        </div>
+                    </div>
+
+                    <div className="flex justify-center ">
+                    <Button>
+                            <Logo /> Explore More Components
+                    </Button>
+                    </div>
+
+                </div>
+
+
             </main>
 
         </div>
     )
 }
+
+
+export function TypographyH4() {
+    return (
+        <h4 className="scroll-m-20 text-xl font-semibold tracking-tight">
+            People stopped telling jokes
+        </h4>
+    )
+}