joshuafhiggins/realm-homepage
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: Update Features component layout and styles

Browse Source
This commit is contained in:
Mauro Balades
2024-08-17 22:53:53 +02:00
parent ef091b51c0
commit 62bb22728d
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/features.tsx
View File

@@ -59,7 +59,7 @@ export default function Features() {
}, []); }, []);
return ( return (
<div className="relative w-full mb-52 p-5 xl:p-0"> <div className="relative w-full mb-52 p-5 xl:p-0">
<div className="w-full xl:w-1/2 p-5 xl:p-0 mx-auto grid mt-52 xl:grid-cols-2 relative xl:border-2 xl:rounded-xl xl:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105"> <div className="w-full md:w-2/3 2xl:w-1/2 p-5 xl:p-0 mx-auto grid mt-52 xl:grid-cols-2 relative xl:border-2 xl:rounded-xl xl:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105">
<div className="flex flex-col xl:p-20 justify-center"> <div className="flex flex-col xl:p-20 justify-center">
<h1 className="text-3xl font-bold">The only limit is your</h1> <h1 className="text-3xl font-bold">The only limit is your</h1>
<SparklesText className="!text-3xl" text="Imagination" /> <SparklesText className="!text-3xl" text="Imagination" />
@@ -116,7 +116,7 @@ export default function Features() {
<p className="text-muted-foreground text-center mx-auto w-3/4 md:w-full p-5 xl:p-0 mb-24"> <p className="text-muted-foreground text-center mx-auto w-3/4 md:w-full p-5 xl:p-0 mb-24">
Discover how Zen Browser can transform your web experience with powerful features that keep you ahead. Discover how Zen Browser can transform your web experience with powerful features that keep you ahead.
Here are<br className="hidden md:block"/> some of the features that Zen offers.</p> Here are<br className="hidden md:block"/> some of the features that Zen offers.</p>
<div className="w-full xl:w-1/2 mx-auto flex flex-col xl:flex-row w-full mt-4 p-5 xl:p-0"> <div className="w-full md:w-2/3 2xl:w-1/2 mx-auto flex flex-col xl:flex-row w-full mt-4 p-5 xl:p-0">
<div className="w-full flex mx-auto xl:mr-8 flex-col xl:mb-24 xl:ml-4 xl:mt-10"> <div className="w-full flex mx-auto xl:mr-8 flex-col xl:mb-24 xl:ml-4 xl:mt-10">
<div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 flex flex-col max-w-xl justify-center rounded-xl md:border-2 xl:p-20 md:shadow-xl hover:scale-105"> <div className="hover:border-blue-500 transition-all duration-100 bg-background relative mx-auto xl:mx-0 flex flex-col max-w-xl justify-center rounded-xl md:border-2 xl:p-20 md:shadow-xl hover:scale-105">
<h1 className="text-5xl font-bold">Split views</h1> <h1 className="text-5xl font-bold">Split views</h1>
@@ -172,7 +172,7 @@ export default function Features() {
borderWidth={2} borderWidth={2}
borderRadius={12} borderRadius={12}
color={["#A07CFE", "#FE8FB5", "#FFBE7B"]} color={["#A07CFE", "#FE8FB5", "#FFBE7B"]}
className="w-full xl:w-1/2 mx-auto mt-52 flex relative flex-col items-start justify-start w-full bg-background xl:p-12 rounded-xl md:shadow-xl" className="w-full md:w-2/3 2xl:w-1/2 mx-auto mt-52 flex relative flex-col items-start justify-start w-full bg-background xl:p-12 rounded-xl md:shadow-xl"
> >
<div className="w-full xl:p-16"> <div className="w-full xl:p-16">
<Table> <Table>
@@ -320,7 +320,7 @@ export default function Features() {
alt="" alt=""
/> />
</div> </div>
<div className="w-full xl:w-1/2 mx-auto p-5 xl:p-0 mx-auto grid mt-24 lg:mt-52 xl:grid-cols-2 relative xl:border-2 xl:rounded-xl xl:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105"> <div className="w-full overflow-hidden md:w-2/3 2xl:w-1/2 mx-auto p-5 xl:p-0 mx-auto grid mt-24 lg:mt-52 xl:grid-cols-2 relative xl:border-2 xl:rounded-xl xl:shadow hover:border-blue-500 transition-all duration-200 hover:scale-105">
<div className="flex flex-col xl:p-20"> <div className="flex flex-col xl:p-20">
<h1 className="text-3xl font-bold">Introducing</h1> <h1 className="text-3xl font-bold">Introducing</h1>
<SparklesText className="!text-3xl" text="Compact Mode" /> <SparklesText className="!text-3xl" text="Compact Mode" />