ourworld_web/www_ourverse_new
21
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update colors

Browse Source
This commit is contained in:
sasha-astiadi
2024-10-01 20:09:05 +02:00
parent e48ec49452
commit 18b3ca26d0
87 changed files with 1439 additions and 811 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/(main)/page.jsx
View File

@@ -4,16 +4,19 @@ import Events from '@/components/Events'
import { Product } from '@/components/Product'
import { Sponsors } from '@/components/Sponsors'
import BentoSection from '@/components/Bentosection'
import { Phasesdark } from '@/components/Phases'
import HeroFeature from '@/components/HeroFeature'
import Eventbanner from '@/components/Eventbanner'
export default function Home() {
return (
<>
<Homepage />
<Sponsors />
<Hero />
<Phasesdark />
<HeroFeature />
<BentoSection />
<Product />
<Events />
<Eventbanner />
</>
)
}

4
src/components/Banner.jsx
View File

@@ -4,12 +4,12 @@ export default function Example() {
return (
<div className="flex items-center gap-x-6 btn-gradient-dark px-6 py-2.5 sm:px-3.5 sm:before:flex-1">
<p className="text-sm leading-6 text-white">
<a href="/events/versefest">
<a href="/events/versefest.html">
<strong className="font-semibold">OurVerse FutureFest 2024</strong>
<svg viewBox="0 0 2 2" aria-hidden="true" className="mx-2 inline h-0.5 w-0.5 fill-current">
<circle r={1} cx={1} cy={1} />
</svg>
Join us from Oct 25 – 27 to see what’s coming next&nbsp;<span aria-hidden="true">&rarr;</span>
Join us from Nov 22 – 24 to see what’s coming next&nbsp;<span aria-hidden="true">&rarr;</span>
</a>
</p>
<div className="flex flex-1 justify-end">

8
src/components/Bentosection.jsx
View File

@@ -59,16 +59,17 @@ export default function BentoSection() {
return (
<Container>
<div className="relative pt-24 z-10 mx-auto max-w-2xl lg:mx-0 lg:max-w-5xl lg:pr-24">
<div className=' pt-12 pb-24'>
<div className="relative z-10 mx-auto max-w-2xl lg:mx-0 lg:max-w-5xl lg:pr-24">
<h2 className="text-base font-medium font-mono leading-7 text-cyan-700">Features</h2>
<h2 className="mt-2 h3-title">
Collaboration & Creation Tools
</h2>
<p className="mt-4 section-text">
Transform how you and your team work together with our innovative, real-time creative tools.
Transform how you and your team work together with our innovative creative tools and explore diverse scenarios where they empower users to collaborate in immersive virtual environments.
</p>
</div>
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
<div className="mt-10 grid grid-cols-1 gap-4 sm:mt-16 lg:grid-cols-6 lg:grid-rows-2">
<BentoCard
eyebrow="Creativity"
title="3D Collaboration Tools"
@@ -124,6 +125,7 @@ export default function BentoSection() {
link="/features"
/>
</div>
</div>
</Container>
)
}

40
src/components/Bottom.jsx Normal file
View File

@@ -0,0 +1,40 @@
export default function Bottom() {
return (
<div className="relative isolate overflow-hidden bg-gray-900">
<div className="px-6 py-24 sm:px-6 sm:py-32 lg:px-8">
<div className="mx-auto max-w-2xl text-center">
<h2 className="text-3xl font-bold tracking-tight text-gradient lg:text-5xl">
The Future of Collaboration
<br />
is now.
</h2>
<p className="mx-auto mt-6 max-w-xl text-lg leading-8 text-gray-300">
Join OurVerse and experience the future of collaboration and creation tools beyond your imagination.
</p>
<div className="mt-10 flex items-center justify-center gap-x-6">
<a
href="#"
className="rounded-md btn-gradient-dark2 px-3.5 py-2.5 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
>
Sign Up Now
</a>
</div>
</div>
</div>
<svg
viewBox="0 0 1024 1024"
aria-hidden="true"
className="absolute left-1/2 top-1/2 -z-10 h-[64rem] w-[64rem] -translate-x-1/2 [mask-image:radial-gradient(closest-side,white,transparent)]"
>
<circle r={512} cx={512} cy={512} fill="url(#8d958450-c69f-4251-94bc-4e091a323369)" fillOpacity="0.7" />
<defs>
<radialGradient id="8d958450-c69f-4251-94bc-4e091a323369">
<stop stopColor="#7775D6" />
<stop offset={1} stopColor="#E935C1" />
</radialGradient>
</defs>
</svg>
</div>
)
}

38
src/components/Eventbanner.jsx Normal file
View File

@@ -0,0 +1,38 @@
export default function Eventbanner() {
return (
<div className="mx-auto max-w-2xl px-4 pb-24 sm:px-6 lg:max-w-7xl ">
<h2 className="text-base font-medium font-mono leading-7 text-cyan-700">Community</h2>
<h2 className="mt-2 mb-4 h3-title">
Events
</h2>
<div className="relative overflow-hidden rounded-lg lg:h-96">
<div className="absolute inset-0">
<img
alt=""
src="/images/eventbg.jpg"
className="h-full w-full object-cover object-center"
/>
</div>
<div aria-hidden="true" className="relative h-96 w-full lg:hidden" />
<div aria-hidden="true" className="relative h-32 w-full lg:hidden" />
<div className="absolute py-4 inset-x-0 bottom-0 rounded-bl-lg rounded-br-lg bg-purple-950 bg-opacity-90 p-6 backdrop-blur backdrop-filter sm:flex sm:items-center sm:justify-between lg:inset-x-auto lg:inset-y-0 lg:w-96 lg:flex-col lg:items-start lg:rounded-br-none lg:rounded-tl-lg">
<div>
<h2 className="mt-4 lg:text-3xl text-xl font-bold text-gradient">OurVerse </h2>
<h2 className="lg:text-3xl text-xl font-bold text-gradient">FutureFest 2024</h2>
<h3 className="text-xl font-bold text-gradient">Nov 22 - 24</h3>
<p className="mt-4 text-md text-gray-300">
OurVerse's OurFutureFest connects freelancers, innovators, and businesses in the Metaverse, empowering them to explore new technologies and collaborate seamlessly across boundaries.
</p>
</div>
<a
href="/events/versefest.html"
className="mt-6 flex flex-shrink-0 items-center justify-center rounded-md btn-gradient-dark bg-opacity-0 px-4 py-3 text-base font-medium text-white hover:bg-opacity-10 sm:ml-8 sm:mt-0 lg:ml-0 lg:w-full"
>
Register Now
</a>
</div>
</div>
</div>
)
}

80
src/components/Hero.jsx
View File

@@ -2,43 +2,7 @@ import { BackgroundImage } from '@/components/BackgroundImage'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
const timeline = [
{
name: 'Early Online Collaboration',
description:
'In the early days, digital collaboration was limited to basic tools like email and simple chat platforms. Communication was often slow, and interactions were minimal.',
date: 'Phase I',
dateTime: '2021-08',
},
{
name: 'The Rise of Video Conferencing',
description:
'With the advent of video conferencing tools like Zoom and Microsoft Teams, people could interact face-to-face online.',
date: 'Phase II',
dateTime: '2021-12',
},
{
name: 'Persistent Barriers',
description:
'Despite technological advances, many still struggle to meet and collaborate due to lack of access to reliable tools or infrastructure.',
date: 'Phase III',
dateTime: '2022-02',
},
{
name: 'The OurVerse Solution',
description:
'OurVerse introduces a fully immersive metaverse platform that makes collaboration accessible to all, enabling dynamic interactions and creativity beyond borders.',
date: 'Phase IV',
dateTime: '2022-12',
},
{
name: 'Unlimited Possibilities',
description:
"With OurVerse, you can create your own immersive virtual world as you envision it, making collaboration inclusive and without limits—the future is now.",
date: 'Phase V',
dateTime: '2022-12',
},
]
export function Hero() {
return (
@@ -54,13 +18,14 @@ export function Hero() {
</h1>
<div className="mt-4 space-y-6 mx-4 font-display section-text">
<p>
<span className='emphasis'>OurVerse</span> empowers users to build, manage, and monetize their unique virtual experiences by blending the latest advancements
in blockchain technology with immersive virtual reality, built on top of the <span className='emphasis'>ThreeFold Grid</span>.
</p>
<p>Our mission is to make the metaverse accessible to all, fostering a creative, collaborative, and equitable digital community. By leveraging <span className='emphasis'>ThreeFold Grid</span>'s decentralized infrastructure,
we aim to provide a platform where data confidentiality, scalability, and independence are paramount.</p>
<span className='emphasis'>OurVerse</span> is a fully immersive metaverse platform, offering a space where virtual interactions
feel real, engaging, and limitless.</p>
<p>Our mission is to break down the barriers to meaningful connection and collaboration. We believe that everyone, regardless of location or resources,
should have access to immersive and engaging spaces where they can meet, create, and innovate together.</p>
</div>
<dl className="mt-10 grid grid-cols-2 gap-x-10 gap-y-4 gap-x-16 gap-y-10 text-center lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start lg:text-left">
<dl className="mt-10 grid grid-cols-2 gap-x-10 gap-y-4 lg:auto-cols-auto lg:grid-flow-col lg:grid-cols-none lg:justify-start text-center lg:text-left">
{[
['3D Assets', '100000+'],
['Users', '5000+'],
@@ -75,35 +40,6 @@ export function Hero() {
</div>
))}
</dl>
</div>
<div className="pt-6 pb-24"></div>
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<h2 className="lg:text-4xl font-semibold tracking-tight leading-normal text-gradient-dark text-xl">A Journey to The Future</h2>
<div className="mt-4 mb-12 space-y-6 font-display section-text">
A journey through five transformative phases of digital collaboration, culminating in OurVerse—the immersive
metaverse platform breaking down barriers and unlocking unlimited possibilities for global connection.
</div>
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-5">
{timeline.map((item) => (
<div key={item.name}>
<time
dateTime={item.dateTime}
className="flex items-center text-sm font-semibold leading-6 text-cyan-600"
>
<svg viewBox="0 0 4 4" aria-hidden="true" className="mr-4 h-1 w-1 flex-none">
<circle r={2} cx={2} cy={2} fill="currentColor" />
</svg>
{item.date}
<div
aria-hidden="true"
className="absolute -ml-2 h-px w-screen -translate-x-full bg-purple-900/10 sm:-ml-4 lg:static lg:-mr-6 lg:ml-8 lg:w-auto lg:flex-auto lg:translate-x-0"
/>
</time>
<p className="mt-6 text-lg font-semibold leading-6 tracking-tight text-purple-700">{item.name}</p>
<p className="mt-4 text-sm leading-6 text-purple-900">{item.description}</p>
</div>
))}
</div>
</div>
</Container>
</div>

77
src/components/HeroFeature.jsx Normal file
View File

@@ -0,0 +1,77 @@
import {
ArrowPathIcon,
CloudArrowUpIcon,
Cog6ToothIcon,
FingerPrintIcon,
LockClosedIcon,
ServerIcon,
CubeIcon,
DocumentMagnifyingGlassIcon,
CpuChipIcon,
ShieldCheckIcon,
FilmIcon,
GlobeAltIcon,
RocketLaunchIcon,
} from '@heroicons/react/20/solid'
export default function HeroFeature() {
return (
<div className="bg-gradient-to-b from-purple-50/80 to-purple-50/10 pt-32 pb-12">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-4xl sm:text-center">
<btn className="items-center rounded-2xl px-12 btn-gradient-dark2 py-2.5 text-md font-semibold"
>
NEW
</btn>
<p className="mt-8 h2-title text-center">Introducing: OurHero Verse 3D</p>
<p className="mt-4 items-center align-center text-center section-text-ct">
First Generative AI 3D Tools for the Metaverse and Beyond
</p>
</div>
</div>
<div className="relative overflow-hidden pt-16">
<div className="mx-auto max-w-6xl px-6 lg:px-8">
{/* embed Video */}
<video
autoPlay
loop
muted
playsInline
className="relative w-full h-full overflow-hidden rounded-lg shadow-lg"
>
<source src="/videos/ourverse3.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<div aria-hidden="true" className="relative">
<div className="absolute -inset-x-20 bottom-0 bg-gradient-to-t from-white pt-[7%]" />
</div>
</div>
</div>
<div className="mt-4 mx-auto lg:mt-16 max-w-5xl px-6 mt-20 md:mt-24 lg:px-8 text-center items-center">
<h2 className="text-base font-medium font-mono leading-7 text-cyan-700">Generative AI 3D Tool</h2>
<p className="mt-4 h3-title text-center">Transform your Imagination into Immersive Reality </p>
<p className="mt-8 items-center align-center section-text-ct">
Our team has developed a cutting-edge system allowing users to generate with AI, full 3D virtual environments using text input alone,
by eliminating traditional barriers such as high technical skill requirements or expensive software.
</p>
<p className="mt-4 items-center align-center section-text-ct">
Anyone, regardless of their background, skill level, or geographical location, can use the system to create complex 3D interactives environments tailored to their needs,
simply by describing them.
</p>
</div>
<div className="mt-10 pb-8 flex items-center justify-center gap-x-6">
<a
href="#"
className="rounded-2xl btn-gradient-dark px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500"
>
Try Now
</a>
<a href="#" className="text-sm font-semibold leading-6 text-purple-900 hover:text-purple-500">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
)
}

23
src/components/Homepage.jsx
View File

@@ -5,7 +5,7 @@ import { ChevronRightIcon } from '@heroicons/react/20/solid'
export function Homepage() {
return (
<Gradient className="lg:pt-24 pt-20 pb-12">
<div className="lg:pt-24 pt-24 pb-12 min-h-screen flex items-center justify-center relative">
<Container>
{/* Background Video */}
<video
@@ -15,34 +15,29 @@ export function Homepage() {
playsInline
className="absolute inset-0 w-full h-full object-cover -z-10"
>
<source src="/videos/ourverse5.mp4" type="video/mp4" />
<source src="/videos/hero.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
<div className="mx-auto max-w-xl lg:max-w-6xl">
<h1 className="font-display lg:max-w-2xl font-bold tracking-tighter text-gradient-dark lg:text-7xl text-5xl">
The Future of Collaboration is Now.
<div className="mx-auto max-w-xl lg:max-w-6xl text-center">
<h1 className="font-display lg:max-w-3xl font-bold text-white tracking-tighter lg:text-7xl text-5xl">
The Future of <span className='text-gradient'>Collaboration is Now.</span>
</h1>
<div className="lg:max-w-3xl max-w-2xl my-6 space-y-6 font-display font-medium lg:text-2xl text-xl tracking-tight leading-normal text-purple-800">
<p>At <span className='bg-gradient3 font-semibold'>OurVerse</span>, we go beyond traditional video calls.
Our immersive metaverse platform brings people together in a dynamic, interactive environment where meetings
and events feel real.</p>
<p>Built on the decentralized ThreeFold Grid, we empower global collaboration with enhanced security,
flexibility, and freedom.</p>
</div>
<div className="mt-10 pb-8 flex items-center gap-x-6">
<div className="mt-10 pb-8 flex items-center justify-center gap-x-6">
<a
href="#"
className="rounded-2xl btn-gradient-dark px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm hover:bg-purple-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-purple-500"
>
Join OurVerse
</a>
<a href="#" className="text-sm font-semibold leading-6 text-purple-900 hover:text-purple-700">
<a href="#" className="text-sm font-semibold leading-6 text-white hover:text-purple-200">
Learn more <span aria-hidden="true">→</span>
</a>
</div>
</div>
</Container>
</Gradient>
</Container>
</div>
);
}

4
src/components/Layout.jsx
View File

@@ -1,5 +1,5 @@
import { Footer } from '@/components/Footer'
import { Newsletter } from '@/components/Newsletter'
import Bottom from '@/components/Bottom'
import Banner from '@/components/Banner'
import { Header } from '@/components/Header'
import Footer2 from './Footer2'
@@ -10,7 +10,7 @@ export function Layout({ children, showFooter = true }) {
<Header />
<Banner />
<main className="flex-auto">{children}</main>
<Newsletter />
<Bottom />
{showFooter && <Footer2 />}
</>
)

87
src/components/Phases.jsx Normal file
View File

@@ -0,0 +1,87 @@
import { BackgroundImage } from '@/components/BackgroundImage'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
const timeline = [
{
name: 'Early Online Collaboration',
description:
'In the early days, digital collaboration was limited to basic tools like email and simple chat platforms. Communication was often slow, and interactions were minimal.',
date: 'Phase I',
dateTime: '2021-08',
},
{
name: 'The Rise of Video Conferencing',
description:
'With the advent of video conferencing tools like Zoom and Microsoft Teams, people could interact face-to-face online.',
date: 'Phase II',
dateTime: '2021-12',
},
{
name: 'Persistent Barriers',
description:
'Despite technological advances, many still struggle to meet and collaborate due to lack of access to reliable tools or infrastructure.',
date: 'Phase III',
dateTime: '2022-02',
},
{
name: 'The OurVerse Solution',
description:
'OurVerse introduces a fully immersive metaverse platform that makes collaboration accessible to all, enabling dynamic interactions and creativity beyond borders.',
date: 'Phase IV',
dateTime: '2022-12',
},
{
name: 'Unlimited Possibilities',
description:
"With OurVerse, you can create your own immersive virtual world as you envision it, making collaboration inclusive and without limits—the future is now.",
date: 'Phase V',
dateTime: '2022-12',
},
]
export function Phasesdark() {
return (
<div className="bg-gradient-dark min-h-screen">
<div className="mx-auto max-w-7xl py-24 px-6 lg:px-8">
<h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-gradient text-3xl">
Experience True Collaboration
</h2>
<p className="mt-4 mb-4 text-purple-100 lg:text-xl space-y-6 font-display">
We’ve all experienced different ways to connect and collaborate online—through chat, video conferences, and shared platforms. But the reality is, not everyone has equal access.
Many people around the world still face barriers due to limited tools, infrastructure, or platforms. Geographic, technical, and economic challenges make it hard for businesses,
educators, and creators to collaborate effectively.
</p>
<p className="mt-4 mb-20 text-purple-100 lg:text-xl space-y-6 font-display">
Our journey through five transformative phases of digital collaboration leads to OurVerse—an immersive metaverse platform
designed to break down these barriers and unlock limitless opportunities for global connection and innovation.
</p>
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-5">
{timeline.map((item) => (
<div key={item.name}>
<time
dateTime={item.dateTime}
className={`flex items-center text-md font-semibold leading-6 ${
item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt lg:text-xl' : 'text-purple-200'
}`}
>
<svg viewBox="0 0 4 4" aria-hidden="true" className="mr-4 h-1 w-1 flex-none">
<circle r={2} cx={2} cy={2} fill="currentColor" />
</svg>
{item.date}
</time>
<p
className={`mt-6 text-lg font-semibold leading-6 tracking-tight ${
item.date === 'Phase IV' || item.date === 'Phase V' ? 'text-purple-lt' : 'text-purple-200'
}`}
>
{item.name}
</p>
<p className="mt-4 text-sm leading-6 text-purple-100">{item.description}</p>
</div>
))}
</div>
</div>
</div>
)
}

72
src/components/Phasesdark.jsx Normal file
View File

@@ -0,0 +1,72 @@
import { BackgroundImage } from '@/components/BackgroundImage'
import { Button } from '@/components/Button'
import { Container } from '@/components/Container'
const timeline = [
{
name: 'Early Online Collaboration',
description:
'In the early days, digital collaboration was limited to basic tools like email and simple chat platforms. Communication was often slow, and interactions were minimal.',
date: 'Phase I',
dateTime: '2021-08',
},
{
name: 'The Rise of Video Conferencing',
description:
'With the advent of video conferencing tools like Zoom and Microsoft Teams, people could interact face-to-face online.',
date: 'Phase II',
dateTime: '2021-12',
},
{
name: 'Persistent Barriers',
description:
'Despite technological advances, many still struggle to meet and collaborate due to lack of access to reliable tools or infrastructure.',
date: 'Phase III',
dateTime: '2022-02',
},
{
name: 'The OurVerse Solution',
description:
'OurVerse introduces a fully immersive metaverse platform that makes collaboration accessible to all, enabling dynamic interactions and creativity beyond borders.',
date: 'Phase IV',
dateTime: '2022-12',
},
{
name: 'Unlimited Possibilities',
description:
"With OurVerse, you can create your own immersive virtual world as you envision it, making collaboration inclusive and without limits—the future is now.",
date: 'Phase V',
dateTime: '2022-12',
},
]
export function Phasesdark() {
return (
<div className="mx-auto max-w-7xl px-6 lg:px-8 bg-purple-900 text-white">
<h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-white text-xl">
A Journey to The Future
</h2>
<p className="mt-4 mb-12 space-y-6 font-display section-text text-white">
A journey through five transformative phases of digital collaboration, culminating in OurVerse—the immersive
metaverse platform breaking down barriers and unlocking unlimited possibilities for global connection.
</p>
<div className="mx-auto grid max-w-2xl grid-cols-1 gap-8 overflow-hidden lg:mx-0 lg:max-w-none lg:grid-cols-5">
{timeline.map((item) => (
<div key={item.name}>
<time
dateTime={item.dateTime}
className="flex items-center text-sm font-semibold leading-6 text-cyan-400"
>
<svg viewBox="0 0 4 4" aria-hidden="true" className="mr-4 h-1 w-1 flex-none">
<circle r={2} cx={2} cy={2} fill="currentColor" />
</svg>
{item.date}
</time>
<p className="mt-6 text-lg font-semibold leading-6 tracking-tight text-white">{item.name}</p>
<p className="mt-4 text-sm leading-6 text-gray-300">{item.description}</p>
</div>
))}
</div>
</div>
)
}

BIN
src/images/2.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 813 KiB

62
src/styles/tailwind.css
View File

@@ -95,7 +95,7 @@
/* Darker button purple green version */
.btn-gradient-dark {
background-color: #2e2542;
background-image: linear-gradient(45deg, #5e4589 0%, #5fa69b 100%);
background-image: linear-gradient(45deg, #5e4589 0%, #b532ac 100%);
color: white;
padding: 8px 15px;
border: none;
@@ -103,19 +103,52 @@
transition: background-image 0.3s ease;
}
.btn-gradient-dark2 {
background-color: #2e2542;
background-image: linear-gradient(45deg, #5e4589 0%, #b532ac 100%);
color: white;
padding: 8px 32px;
border: none;
cursor: pointer;
transition: background-image 0.3s ease;
}
.btn-gradient-dark:hover {
background-image: linear-gradient(45deg, #3e2e5d 0%, #487d76 100%);
background-image: linear-gradient(45deg, #3e2e5d 0%, #9a2a93 100%);
}
.text-gradient-dark {
background-color: #5e4589;
background-image: linear-gradient(45deg, #5e4589 0%, #5fa69b 25%, #5e4589 100%);
background-image: linear-gradient(45deg, #5e4589 0%, #b532ac 25%, #5e4589 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.text-purple-lt {
background-color: #cf5af8;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.text-gradient {
background-color: #704fa8;
background-image: linear-gradient(45deg, #703bca 0%, #d33bc9 25%, #703bca 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}
.bg-gradient-dark {
background-color: #704fa8;
background-image: radial-gradient(circle, #302b4b 0%, #211d34 100%);
}
.btn-gradient-lt {
background-color: #7c65a9;
background-image: linear-gradient(45deg, #7c65a9 0%, #96d4ca 100%);
@@ -180,7 +213,7 @@
line-height: 1.2; /* Equivalent to leading-normal */
font-size: 2.25rem; /* Default for text-4xl */
background-color: #5e4589;
background-image: linear-gradient(45deg, #5e4589 0%, #5fa69b 25%, #5e4589 100%);
background-image: linear-gradient(45deg, #703bca 0%, #d33bc9 25%, #703bca 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -201,7 +234,7 @@
line-height: 1.2; /* Equivalent to leading-normal */
font-size: 1.25rem; /* Equivalent to text-xl */
background-color: #5e4589;
background-image: linear-gradient(45deg, #5e4589 0%, #5fa69b 25%, #5e4589 100%);
background-image: linear-gradient(45deg, #703bca 0%, #d33bc9 25%, #703bca 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
@@ -231,4 +264,23 @@
line-height: 1.85rem; /* matches 'leading-tight' */
}
}
/* H2,H3 Section texts */
.section-text-ct {
font-size: 1rem; /* matches 'text-lg', adjust to match 'lg:text-xl' for responsive design */
letter-spacing: -0.015em; /* matches 'tracking-tight' */
line-height: 1.5rem; /* matches 'leading-tight' */
color: #525763;
text-align: center;
}
@media (min-width: 1024px) {
.section-text-ct {
font-size: 1.25rem; /* matches 'lg:text-xl' for large screens */
line-height: 1.85rem; /* matches 'leading-tight' */
text-align: center;
}
}