mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
Update landing-hero-section.tsx
This commit is contained in:
parent
2057b5edbe
commit
e6d09ca656
@ -6,9 +6,17 @@ import { LandingHeroAnimation } from "./landing-hero-animation";
|
|||||||
import { LandingCopyCommandButton } from "./landing-copy-command-button";
|
import { LandingCopyCommandButton } from "./landing-copy-command-button";
|
||||||
import Link from "@docusaurus/Link";
|
import Link from "@docusaurus/Link";
|
||||||
import { LandingHeroShowcaseSection } from "./landing-hero-showcase-section";
|
import { LandingHeroShowcaseSection } from "./landing-hero-showcase-section";
|
||||||
import Typical from 'react-typical';
|
import { useTypewriter, Cursor } from 'react-simple-typewriter';
|
||||||
|
|
||||||
export const LandingHeroSection = ({ className }: { className?: string }) => {
|
export const LandingHeroSection = ({ className }: { className?: string }) => {
|
||||||
|
const [text] = useTypewriter({
|
||||||
|
words: ['Hosting Panel', 'WP Manager', 'User Isolation'],
|
||||||
|
loop: 0, // 0 = infinite
|
||||||
|
typeSpeed: 70,
|
||||||
|
deleteSpeed: 50,
|
||||||
|
delaySpeed: 1000,
|
||||||
|
});
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
className={clsx(
|
className={clsx(
|
||||||
@ -61,12 +69,11 @@ export const LandingHeroSection = ({ className }: { className?: string }) => {
|
|||||||
>
|
>
|
||||||
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#0FBDBD] to-[#26D97F]">
|
<span className="text-transparent bg-clip-text bg-gradient-to-r from-[#0FBDBD] to-[#26D97F]">
|
||||||
Next Generation
|
Next Generation
|
||||||
</span>
|
</span>
|
||||||
<Typical
|
<span>
|
||||||
steps={['Hosting Panel', 2000, 'WP Manager', 2000, 'User Isolation', 2000]}
|
{text}
|
||||||
loop={Infinity}
|
<Cursor />
|
||||||
wrapper="span"
|
</span>
|
||||||
/>
|
|
||||||
</h1>
|
</h1>
|
||||||
<p
|
<p
|
||||||
className={clsx(
|
className={clsx(
|
||||||
@ -76,7 +83,7 @@ export const LandingHeroSection = ({ className }: { className?: string }) => {
|
|||||||
"landing-xs:max-w-[384px]",
|
"landing-xs:max-w-[384px]",
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
Deliver a VPS-like experience to your users at a fraction of the cost, with all-inclusive features such as resource limiting, and enhanced security seamlessly integrated for worry-free hosting.
|
Deliver a VPS-like experience to your users at a fraction of the cost, with all-inclusive features such as resource limiting, and enhanced security seamlessly integrated for worry-free hosting.
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
Loading…
Reference in New Issue
Block a user