Skip to content

Commit

Permalink
Working in hero section designs
Browse files Browse the repository at this point in the history
  • Loading branch information
@moovendhan-v
moovendhan-v committed Mar 25, 2024
1 parent 72737e6 commit 00e1ec0
Show file tree
Hide file tree
Showing 3 changed files with 216 additions and 54 deletions.
67 changes: 54 additions & 13 deletions ui_tailwind_shadecn/app/globals.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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%;
Expand Down
43 changes: 43 additions & 0 deletions ui_tailwind_shadecn/src/components/custom_ui/Svg.tsx
View file
Original file line number Diff line number Diff line change
@@ -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}
160 changes: 119 additions & 41 deletions ui_tailwind_shadecn/src/screens/Home.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -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"
Expand All @@ -88,6 +89,7 @@ export function Dashboard() {
>
Components
</Link>

{/* <Link
href="#"
className="text-muted-foreground transition-colors hover:text-foreground"
Expand All @@ -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">
Expand All @@ -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>

Expand Down Expand Up @@ -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" />
Expand All @@ -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>
)
}

0 comments on commit 00e1ec0

Please sign in to comment.