xlibs-components
Version:
Modern React component library with Aceternity, MagicUI, and ShadCN components for building beautiful web applications
39 lines (38 loc) • 4.81 kB
JavaScript
"use client";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { motion } from "framer-motion";
export function HeroSectionOne() {
return (_jsxs("div", { className: "relative mx-auto my-10 flex max-w-7xl flex-col items-center justify-center", children: [_jsx(Navbar, {}), _jsx("div", { className: "absolute inset-y-0 left-0 h-full w-px bg-neutral-200/80 dark:bg-neutral-800/80", children: _jsx("div", { className: "absolute top-0 h-40 w-px bg-gradient-to-b from-transparent via-blue-500 to-transparent" }) }), _jsx("div", { className: "absolute inset-y-0 right-0 h-full w-px bg-neutral-200/80 dark:bg-neutral-800/80", children: _jsx("div", { className: "absolute h-40 w-px bg-gradient-to-b from-transparent via-blue-500 to-transparent" }) }), _jsx("div", { className: "absolute inset-x-0 bottom-0 h-px w-full bg-neutral-200/80 dark:bg-neutral-800/80", children: _jsx("div", { className: "absolute mx-auto h-px w-40 bg-gradient-to-r from-transparent via-blue-500 to-transparent" }) }), _jsxs("div", { className: "px-4 py-10 md:py-20", children: [_jsx("h1", { className: "relative z-10 mx-auto max-w-4xl text-center text-2xl font-bold text-slate-700 md:text-4xl lg:text-7xl dark:text-slate-300", children: "Launch your website in hours, not days"
.split(" ")
.map((word, index) => (_jsx(motion.span, { initial: { opacity: 0, filter: "blur(4px)", y: 10 }, animate: { opacity: 1, filter: "blur(0px)", y: 0 }, transition: {
duration: 0.3,
delay: index * 0.1,
ease: "easeInOut",
}, className: "mr-2 inline-block", children: word }, index))) }), _jsx(motion.p, { initial: {
opacity: 0,
}, animate: {
opacity: 1,
}, transition: {
duration: 0.3,
delay: 0.8,
}, className: "relative z-10 mx-auto max-w-xl py-4 text-center text-lg font-normal text-neutral-600 dark:text-neutral-400", children: "With AI, you can launch your website in hours, not days. Try our best in class, state of the art, cutting edge AI tools to get your website up." }), _jsxs(motion.div, { initial: {
opacity: 0,
}, animate: {
opacity: 1,
}, transition: {
duration: 0.3,
delay: 1,
}, className: "relative z-10 mt-8 flex flex-wrap items-center justify-center gap-4", children: [_jsx("button", { className: "w-60 transform rounded-lg bg-black px-6 py-2 font-medium text-white transition-all duration-300 hover:-translate-y-0.5 hover:bg-gray-800 dark:bg-white dark:text-black dark:hover:bg-gray-200", children: "Explore Now" }), _jsx("button", { className: "w-60 transform rounded-lg border border-gray-300 bg-white px-6 py-2 font-medium text-black transition-all duration-300 hover:-translate-y-0.5 hover:bg-gray-100 dark:border-gray-700 dark:bg-black dark:text-white dark:hover:bg-gray-900", children: "Contact Support" })] }), _jsx(motion.div, { initial: {
opacity: 0,
y: 10,
}, animate: {
opacity: 1,
y: 0,
}, transition: {
duration: 0.3,
delay: 1.2,
}, className: "relative z-10 mt-20 rounded-3xl border border-neutral-200 bg-neutral-100 p-4 shadow-md dark:border-neutral-800 dark:bg-neutral-900", children: _jsx("div", { className: "w-full overflow-hidden rounded-xl border border-gray-300 dark:border-gray-700", children: _jsx("img", { src: "https://assets.aceternity.com/pro/aceternity-landing.webp", alt: "Landing page preview", className: "aspect-[16/9] h-auto w-full object-cover", height: 1000, width: 1000 }) }) })] })] }));
}
const Navbar = () => {
return (_jsxs("nav", { className: "flex w-full items-center justify-between border-t border-b border-neutral-200 px-4 py-4 dark:border-neutral-800", children: [_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "size-7 rounded-full bg-gradient-to-br from-violet-500 to-pink-500" }), _jsx("h1", { className: "text-base font-bold md:text-2xl", children: "Aceternity UI" })] }), _jsx("button", { className: "w-24 transform rounded-lg bg-black px-6 py-2 font-medium text-white transition-all duration-300 hover:-translate-y-0.5 hover:bg-gray-800 md:w-32 dark:bg-white dark:text-black dark:hover:bg-gray-200", children: "Login" })] }));
};