Created
June 19, 2024 01:35
-
-
Save ridhwaans/f96e08b8ed984925a1c4cfbb9818d962 to your computer and use it in GitHub Desktop.
blend hero section and layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import { Button } from '@/ui/button'; | |
| export default function HeroSectionComponent() { | |
| return ( | |
| <> | |
| <div className="relative overflow-hidden py-24 lg:py-32"> | |
| <div | |
| aria-hidden="true" | |
| className="flex absolute -top-96 start-1/2 transform -translate-x-1/2" | |
| style={{ | |
| backgroundImage: | |
| 'url(https://banner.jpg)', | |
| backgroundSize: 'cover', | |
| backgroundPosition: 'center', | |
| backgroundRepeat: 'no-repeat', | |
| width: '100vw' | |
| height: '100vh' | |
| }} | |
| > | |
| <div className="bg-gradient-to-r from-background/50 to-background blur-3xl w-[25rem] h-[44rem] rotate-[-60deg] transform -translate-x-[10rem]" /> | |
| <div className="blur-3xl w-[90rem] h-[50rem] rounded-full origin-top-left -rotate-12 -translate-x-[15rem]" /> | |
| </div> | |
| <div className="relative z-10"> | |
| <div className="container py-10 lg:py-16"> | |
| <div className="max-w-2xl text-center mx-auto"> | |
| <p className="">Subtitle</p> | |
| <div className="mt-5 max-w-2xl"> | |
| <h1 className="scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl"> | |
| Title | |
| </h1> | |
| </div> | |
| <div className="mt-5 max-w-3xl"> | |
| <p className="text-xl text-muted-foreground">Subtext</p> | |
| </div> | |
| <div className="mt-8 gap-3 flex justify-center"> | |
| <Button size={'lg'}>Get started</Button> | |
| <Button size={'lg'} variant={'outline'}> | |
| Learn more | |
| </Button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </> | |
| ); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import './globals.css'; | |
| import { ThemeProvider } from 'next-themes'; | |
| import type { Metadata } from 'next'; | |
| import { GeistMono } from 'geist/font/mono'; | |
| import { GeistSans } from 'geist/font/sans'; | |
| import { extractRouterConfig } from 'uploadthing/server'; | |
| import { Toaster } from '@/ui/toast'; | |
| import { TRPCReactProvider } from '@/lib/trpc/react'; | |
| import { fileRouter } from './api/uploadthing/core'; | |
| import { | |
| Tooltip, | |
| TooltipContent, | |
| TooltipTrigger, | |
| TooltipProvider, | |
| } from '@/ui/tooltip'; | |
| import { Sheet, SheetContent, SheetTrigger } from '@/ui/sheet'; | |
| import { | |
| DropdownMenu, | |
| DropdownMenuCheckboxItem, | |
| DropdownMenuContent, | |
| DropdownMenuItem, | |
| DropdownMenuLabel, | |
| DropdownMenuSeparator, | |
| DropdownMenuTrigger, | |
| } from '@/ui/dropdown-menu'; | |
| import Image from 'next/image'; | |
| import Link from 'next/link'; | |
| import { Button } from '@/ui/button'; | |
| import { | |
| Home, | |
| LineChart, | |
| Package, | |
| Package2, | |
| PanelLeft, | |
| Search, | |
| Settings, | |
| ShoppingCart, | |
| Users2, | |
| } from '@/ui/icons/lucide-react'; | |
| import { Input } from '@/ui/input'; | |
| import Breadcrumbs from './breadcrumbs'; | |
| import { ThemeSwitcher } from '@/components/ThemeSwitcher'; | |
| import { TailwindIndicator } from './tailwind-indicator'; | |
| export const metadata: Metadata = { | |
| title: 'Create Next App', | |
| description: 'Generated by create next app', | |
| }; | |
| export default function RootLayout({ | |
| children, | |
| }: Readonly<{ | |
| children: React.ReactNode; | |
| }>) { | |
| return ( | |
| <html lang="en" suppressHydrationWarning> | |
| <body className={`${GeistSans.variable} ${GeistMono.variable}`}> | |
| <ThemeProvider attribute="class" enableSystem disableTransitionOnChange> | |
| <TRPCReactProvider> | |
| <TooltipProvider> | |
| <div className="flex min-h-screen w-full flex-col bg-muted/40"> | |
| <aside className="fixed inset-y-0 left-0 z-10 hidden w-14 flex-col border-r bg-background sm:flex"> | |
| <nav className="flex flex-col items-center gap-4 px-2 sm:py-4"> | |
| <Link | |
| href="#" | |
| className="group flex h-9 w-9 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:h-8 md:w-8 md:text-base" | |
| > | |
| <Package2 className="h-4 w-4 transition-all group-hover:scale-110" /> | |
| <span className="sr-only">Acme Inc</span> | |
| </Link> | |
| <Tooltip> | |
| <TooltipTrigger asChild> | |
| <Link | |
| href="#" | |
| className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" | |
| > | |
| <Home className="h-5 w-5" /> | |
| <span className="sr-only">Dashboard</span> | |
| </Link> | |
| </TooltipTrigger> | |
| <TooltipContent side="right">Dashboard</TooltipContent> | |
| </Tooltip> | |
| <Tooltip> | |
| <TooltipTrigger asChild> | |
| <Link | |
| href="#" | |
| className="flex h-9 w-9 items-center justify-center rounded-lg bg-accent text-accent-foreground transition-colors hover:text-foreground md:h-8 md:w-8" | |
| > | |
| <ShoppingCart className="h-5 w-5" /> | |
| <span className="sr-only">Orders</span> | |
| </Link> | |
| </TooltipTrigger> | |
| <TooltipContent side="right">Orders</TooltipContent> | |
| </Tooltip> | |
| <Tooltip> | |
| <TooltipTrigger asChild> | |
| <Link | |
| href="#" | |
| className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" | |
| > | |
| <Package className="h-5 w-5" /> | |
| <span className="sr-only">Products</span> | |
| </Link> | |
| </TooltipTrigger> | |
| <TooltipContent side="right">Products</TooltipContent> | |
| </Tooltip> | |
| <Tooltip> | |
| <TooltipTrigger asChild> | |
| <Link | |
| href="#" | |
| className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" | |
| > | |
| <Users2 className="h-5 w-5" /> | |
| <span className="sr-only">Customers</span> | |
| </Link> | |
| </TooltipTrigger> | |
| <TooltipContent side="right">Customers</TooltipContent> | |
| </Tooltip> | |
| <Tooltip> | |
| <TooltipTrigger asChild> | |
| <Link | |
| href="#" | |
| className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" | |
| > | |
| <LineChart className="h-5 w-5" /> | |
| <span className="sr-only">Analytics</span> | |
| </Link> | |
| </TooltipTrigger> | |
| <TooltipContent side="right">Analytics</TooltipContent> | |
| </Tooltip> | |
| </nav> | |
| <nav className="mt-auto flex flex-col items-center gap-4 px-2 sm:py-4"> | |
| <Tooltip> | |
| <TooltipTrigger asChild> | |
| <Link | |
| href="#" | |
| className="flex h-9 w-9 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:text-foreground md:h-8 md:w-8" | |
| > | |
| <Settings className="h-5 w-5" /> | |
| <span className="sr-only">Settings</span> | |
| </Link> | |
| </TooltipTrigger> | |
| <TooltipContent side="right">Settings</TooltipContent> | |
| </Tooltip> | |
| </nav> | |
| </aside> | |
| <div className="flex flex-col sm:gap-4 sm:py-4 sm:pl-14"> | |
| <header className="sticky top-0 z-30 flex h-14 items-center gap-4 border-b bg-background px-4 sm:static sm:h-auto sm:border-0 sm:bg-transparent sm:px-6"> | |
| <Sheet> | |
| <SheetTrigger asChild> | |
| <Button | |
| size="icon" | |
| variant="outline" | |
| className="sm:hidden" | |
| > | |
| <PanelLeft className="h-5 w-5" /> | |
| <span className="sr-only">Toggle Menu</span> | |
| </Button> | |
| </SheetTrigger> | |
| <SheetContent side="left" className="sm:max-w-xs"> | |
| <nav className="grid gap-6 text-lg font-medium"> | |
| <Link | |
| href="#" | |
| className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base" | |
| > | |
| <Package2 className="h-5 w-5 transition-all group-hover:scale-110" /> | |
| <span className="sr-only">Acme Inc</span> | |
| </Link> | |
| <Link | |
| href="#" | |
| className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground" | |
| > | |
| <Home className="h-5 w-5" /> | |
| Dashboard | |
| </Link> | |
| <Link | |
| href="#" | |
| className="flex items-center gap-4 px-2.5 text-foreground" | |
| > | |
| <ShoppingCart className="h-5 w-5" /> | |
| Orders | |
| </Link> | |
| <Link | |
| href="#" | |
| className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground" | |
| > | |
| <Package className="h-5 w-5" /> | |
| Products | |
| </Link> | |
| <Link | |
| href="#" | |
| className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground" | |
| > | |
| <Users2 className="h-5 w-5" /> | |
| Customers | |
| </Link> | |
| <Link | |
| href="#" | |
| className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground" | |
| > | |
| <LineChart className="h-5 w-5" /> | |
| Settings | |
| </Link> | |
| </nav> | |
| </SheetContent> | |
| </Sheet> | |
| <Breadcrumbs /> | |
| <div className="relative ml-auto flex-1 md:grow-0"> | |
| <Search className="absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground" /> | |
| <Input | |
| type="search" | |
| placeholder="Search..." | |
| className="w-full rounded-lg bg-background pl-8 md:w-[200px] lg:w-[320px]" | |
| /> | |
| </div> | |
| <DropdownMenu> | |
| <DropdownMenuTrigger asChild> | |
| <Button | |
| variant="outline" | |
| size="icon" | |
| className="overflow-hidden rounded-full" | |
| > | |
| <Image | |
| src="/placeholder-user.jpg" | |
| width={36} | |
| height={36} | |
| alt="Avatar" | |
| className="overflow-hidden rounded-full" | |
| /> | |
| </Button> | |
| </DropdownMenuTrigger> | |
| <DropdownMenuContent align="end"> | |
| <DropdownMenuLabel>My Account</DropdownMenuLabel> | |
| <DropdownMenuSeparator /> | |
| <DropdownMenuItem>Settings</DropdownMenuItem> | |
| <DropdownMenuItem>Support</DropdownMenuItem> | |
| <DropdownMenuSeparator /> | |
| <DropdownMenuItem>Logout</DropdownMenuItem> | |
| </DropdownMenuContent> | |
| </DropdownMenu> | |
| <ThemeSwitcher /> | |
| <TailwindIndicator /> | |
| </header> | |
| {children} | |
| </div> | |
| </div> | |
| </TooltipProvider> | |
| </TRPCReactProvider> | |
| <Toaster /> | |
| </ThemeProvider> | |
| </body> | |
| </html> | |
| ); | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| import HeroSectionComponent from '@/components/heroSection'; | |
| const Dashboard = async () => { | |
| return ( | |
| <React.Fragment> | |
| <HeroSectionGradientBackground /> | |
| <main><div>...</div></main> | |
| </React.Fragment> | |
| ); | |
| }; | |
| export default Dashboard; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment