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

add about page

Browse Source
This commit is contained in:
sasha-astiadi
2024-10-04 16:22:32 +02:00
parent dfbc3a771f
commit b10eaec8de
113 changed files with 480 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -18,8 +18,6 @@ export default function Home() {
<HeroFeature />
<BentoSection />
<Eventbanner />
<CTA />
</>
)
}

5
src/app/about/layout.jsx Normal file
View File

@@ -0,0 +1,5 @@
import { Layout } from '@/components/Layout'
export default function FeaturesLayout({ children }) {
return <Layout>{children}</Layout>
}

18
src/app/about/page.jsx Normal file
View File

@@ -0,0 +1,18 @@
import Abouthero from '@/components/Abouthero'
import Aboutco from '@/components/Aboutco'
import Aboutvalues from '@/components/Aboutvalues'
import CTA from '@/components/Cta'
import Aboutnodes from '@/components/Aboutnodes'
export default function about() {
return (
<>
<Abouthero />
<CTA />
<Aboutco />
<Aboutvalues />
<Aboutnodes />
</>
)
}

39
src/components/Aboutco.jsx Normal file
View File

@@ -0,0 +1,39 @@
export default function Aboutcof() {
return (
<section className="bg-gradient-to-b from-purple-50/10 to-purple-50/80 py-24 sm:py-32">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto grid max-w-2xl grid-cols-1 lg:mx-0 lg:max-w-none lg:grid-cols-2">
<div className="flex flex-col pb-10 sm:pb-16 lg:pb-0 lg:pr-8 xl:pr-20">
<h1 className="lg:mt-2 mt-0 text-3xl font-bold tracking-tight text-gradient lg:text-4xl text-gradient-dark">
Our Vision
</h1>
<figure className="mt-8 flex flex-auto flex-col justify-between">
<div>
<p className="section-text lg:text-lg text-md">
We envision a world where virtual collaboration is as natural and effective as working together in person. <br/>
Our platform aims to be the go-to solution for the future of collaboration, offering businesses, creators,
and communities a dynamic space to connect, create, and thrive. <br/> <br/>We are building a metaverse where opportunities
for innovation and connection are boundless, empowering people to collaborate beyond the limits of the physical world.
</p>
</div>
</figure>
</div>
<div className="flex flex-col border-t border-gray-900/10 pt-10 sm:pt-16 lg:border-l lg:border-t-0 lg:pl-8 lg:pt-0 xl:pl-20">
<h1 className="lg:mt-2 mt-0 text-3xl font-bold tracking-tight text-gradient lg:text-4xl text-gradient-dark">
Our Mission
</h1>
<figure className="mt-8 flex flex-auto flex-col justify-between">
<div>
<p className="section-text lg:text-lg text-md">
Our mission is to create the future of collaboration by providing an immersive metaverse where people can meet and innovate together as if they were in the same room.
We break down the barriers of distance, technology, and resources to make global collaboration seamless and meaningful. <br/> <br/>
Powered by the ThreeFold Grid, our platform offers secure, flexible spaces where users have full control over their virtual experiences, making every interaction engaging and productive.
</p>
</div>
</figure>
</div>
</div>
</div>
</section>
)
}

31
src/components/Abouthero.jsx Normal file
View File

@@ -0,0 +1,31 @@
import { LifebuoyIcon, NewspaperIcon, PhoneIcon } from '@heroicons/react/20/solid'
export default function Abouthero() {
return (
<div className="relative isolate overflow-hidden bg-purple-900 py-24 sm:py-32">
<img
alt=""
src="/images/bgimage.jpg"
className="absolute inset-0 -z-10 h-full w-full object-cover object-right md:object-center"
/>
{/* Gradient Overlay from left to right */}
<div className="absolute inset-0 bg-gradient-to-r from-[#302b4b] to-white/0 -z-10"></div>
<div className="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl">
<div className="absolute inset-0 bg-gradient-to-b from-[#302b4b] via-[#b5b1d7] to-white"></div>
</div>
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0">
<h2 className="lg:text-6xl font-semibold tracking-tight lg:max-w-xl max-w-md leading-tight text-gradient text-3xl">At OurVerse, <br/>
we go beyond traditional video calls. </h2>
<p className="mt-6 section-text-light lg:text-lg text-sm">
Our immersive decentralized metaverse platform brings people together in a dynamic, interactive environment where meetings and events feel REAL.
</p>
<p className='mt-4 section-text-light text-lg font-semibold'>Break the barriers. Experience true collaboration. Build your own World.
</p>
</div>
</div>
</div>
)
}

44
src/components/Aboutnodes.jsx Normal file
View File

@@ -0,0 +1,44 @@
export default function Aboutnodes() {
return (
<div className="relative pt-12 pb-36 bg-gradient-to-b from-purple-50/10 to-purple-50/80">
<div className="relative mx-auto max-w-7xl lg:px-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
{/* Text Section */}
<div className="pl-6 pr-6 lg:pr-12 xl:pr-12">
<h2 className="text-intro">Join the Expansion</h2>
<p className="mt-2 text-3xl font-bold tracking-tight text-gradient sm:text-4xl">
Host our Metaverse
</p>
<p className="mt-6 text-base leading-7 text-gray-900">
As our metaverse expands, it's crucial that our decentralized grid scales with it.
This grid forms the backbone of our virtual world, and more nodes mean a stronger, faster, and more efficient ecosystem—not just for us,
but for all decentralized projects relying on it.
<br />
<br />
By owning a node, you become a vital part of this growth, enhancing the stability, speed,
and potential of the metaverse. You help shape the future of decentralized virtual worlds while contributing
to the infrastructure that makes limitless interactions and creations possible.
</p>
<div className="mt-8">
<a
href="/community.html"
className="inline-flex rounded-2xl bg-white/10 px-3.5 py-2.5 text-sm font-semibold text-white shadow-sm btn-gradient-dark2"
>
Host a Node
</a>
</div>
</div>
{/* Image Section */}
<div className="relative h-90 overflow-hidden">
<img
alt=""
src="images/node.png"
className="h-full w-full object-cover object-center"
/>
</div>
</div>
</div>
);
}

57
src/components/Aboutvalues.jsx Normal file
View File

@@ -0,0 +1,57 @@
const features = [
{
name: 'Accessibility for All',
description:
'We believe everyone, regardless of location or resources, should have access to immersive virtual spaces. Our decentralized platform bridges gaps, enabling seamless global collaboration.',
},
{
name: 'Decentralization & Freedom',
description:
'Powered by the ThreeFold Grid, our metaverse is fully decentralized, giving users ownership, security, and control over their digital experiences, free from centralized interference.',
},
{
name: 'Innovation & Opportunity',
description:
'Our platform empowers creators to innovate, build, and monetize their ideas in a decentralized economy, fostering limitless creativity and opportunities.',
},
{
name: 'Global Collaboration',
description:
'We enable real-time, lifelike interactions that break down geographic and technical barriers, making virtual collaboration as effective and engaging as in-person meetings.',
},
{
name: 'Equity & Inclusion',
description:
'We are committed to providing an inclusive space where people from all backgrounds can connect and thrive, removing barriers related to economic or technological privilege.',
},
{
name: 'Security & Privacy',
description:
'Our decentralized infrastructure ensures user data and assets are protected, giving users complete control and privacy over their virtual identities.',
},
]
export default function Aboutvalues() {
return (
<div className="bg-gradient-to-b from-purple-50/80 to-purple-50/10 pt-12 pb-24">
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0">
<h2 className="text-3xl font-bold tracking-tight text-gradient-dark sm:text-4xl">Our Values</h2>
<p className="mt-6 text-lg leading-8 text-gray-600">
Our values represent the unwavering principles that guide every decision we make in fostering a culture of integrity, innovation, and respect for all.
</p>
</div>
<dl className="mx-auto mt-16 grid max-w-2xl grid-cols-1 gap-x-8 gap-y-16 text-base leading-7 sm:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
{features.map((feature) => (
<div key={feature.name}>
<dt className="font-semibold text-gradient-dark">{feature.name}</dt>
<dd className="mt-1 text-gray-600">{feature.description}</dd>
</div>
))}
</dl>
</div>
</div>
)
}

2
src/components/Bottom.jsx
View File

@@ -3,7 +3,7 @@ export default function Bottom() {
<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">
<h2 className="text-3xl font-bold tracking-tight text-gradient-light lg:text-5xl">
The Future of Collaboration
<br />
is now.

15
src/components/Cta.jsx
View File

@@ -1,7 +1,8 @@
export default function CTA() {
return (
<div className="relative bg-gradient-to-b from-white to-purple-50/80">
<div className="relative h-90 overflow-hidden md:absolute md:left-0 md:h-full md:w-1/3 lg:w-1/2">
<div className="relative pt-36 pb-12 bg-gradient-to-b from-purple-50/80 to-purple-50/10 ">
<div className="relative mx-auto max-w-7xl lg:px-8">
<div className="relative h-90 overflow-hidden md:absolute md:left-0 lg:left-2 md:h-full md:w-1/3 lg:w-1/2">
<img
alt=""
src="images/tf.png"
@@ -9,14 +10,13 @@ export default function CTA() {
/>
</div>
<div className=" relative mx-auto max-w-7xl pt-32 pb-44 lg:px-8">
<div className="pl-6 pr-6 md:ml-auto md:w-2/3 md:pl-16 lg:w-1/2 lg:pl-24 lg:pr-0 xl:pl-32">
<div className=" relative mx-auto max-w-7xl lg:px-8">
<div className="pl-6 pr-6 md:ml-auto md:w-2/3 md:pl-16 lg:w-1/2 lg:pl-12 lg:pr-0 xl:pl-12">
<h2 className="text-intro">True Decentralized Metaverse</h2>
<p className="mt-2 text-3xl font-bold tracking-tight text-gradient sm:text-4xl">Powered by ThreeFold</p>
<p className="mt-6 text-base leading-7 text-gray-900">
At OurVerse, we go beyond traditional video calls. Our immersive metaverse platform brings people together in a dynamic, interactive environment where meetings and events feel <span className="text-gradient font-semibold">REAL</span>.
Built on the decentralized ThreeFold Grid, we empower global collaboration
with enhanced security, flexibility, and freedom.</p>
OurVerse is powered by the ThreeFold Grid, a decentralized infrastructure that ensures your metaverse experience is secure, scalable and truly independent.<br/><br/>
By leveraging this innovative technology, we provide a fully decentralized platform where data confidentiality is paramount, and your interactions remain free from centralized control.</p>
<div className="mt-8">
<a
href="/community.html"
@@ -27,6 +27,7 @@ export default function CTA() {
</div>
</div>
</div>
</div>
</div>
)
}

10
src/components/Eventbanner.jsx
View File

@@ -1,6 +1,7 @@
export default function Eventbanner() {
return (
<div className="mx-auto max-w-2xl px-4 pb-24 sm:px-6 lg:max-w-7xl ">
<div className="bg-gradient-to-b from-purple-50/10 to-purple-50/80">
<div className="mx-auto max-w-2xl px-4 pb-24 sm:px-6 lg:max-w-7xl">
<h2 className="text-intro">Community</h2>
<h2 className="mt-2 mb-4 h3-title">
Events
@@ -17,9 +18,9 @@ export default function Eventbanner() {
<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>
<h2 className="mt-4 lg:text-3xl text-xl font-bold text-gradient-light">OurVerse </h2>
<h2 className="lg:text-3xl text-xl font-bold text-gradient-light">FutureFest 2024</h2>
<h3 className="text-xl font-bold text-gradient-light">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>
@@ -32,6 +33,7 @@ export default function Eventbanner() {
</a>
</div>
</div>
</div>
</div>
)
}

7
src/components/Featurehero.jsx
View File

@@ -18,9 +18,10 @@ export default function Featurehero() {
<div className="mx-auto max-w-7xl px-6 lg:px-8">
<div className="mx-auto max-w-2xl lg:mx-0">
<h2 className="lg:text-6xl font-semibold tracking-tight text-gradient text-xl">The Future of Collaboration</h2>
<p className="mt-6 text-lg leading-8 text-purple-100">
Unlock the future of communication and collaboration inside immersive virtual environments.
OurVerse offers cutting-edge tools designed to bring your events, meetings, and creative projects to life in new and exciting ways.
<p className="mt-6 section-text-light">
Step into the future of communication and collaboration with immersive virtual environments.
OurVerse provides innovative tools that transform your events, meetings, and creative projects,
offering fresh and exciting ways to bring your vision to life.
</p>
</div>
</div>

3
src/components/Header.jsx
View File

@@ -9,6 +9,7 @@ import { Bars3Icon, XMarkIcon } from '@heroicons/react/24/outline';
// Example navigation items
const navigationItems = [
{ name: 'Home', href: '/' },
{ name: 'About', href: '/about.html' },
{ name: 'Features', href: '/features.html' },
{ name: 'Usecases', href: '/usecases.html' },
{ name: 'Community', href: '/community.html' },
@@ -26,7 +27,7 @@ export function Header() {
<div className="hidden lg:flex lg:items-center lg:gap-8 lg:grow lg:basis-0">
<div className="flex gap-8 mx-auto">
{navigationItems.map((item) => (
<a key={item.name} href={item.href} className="text-purple-700 font-semibold hover:text-purple-400">
<a key={item.name} href={item.href} className="text-purple-700 font-semibold hover:text-purple-600">
{item.name}
</a>
))}

2
src/components/Homepage.jsx
View File

@@ -21,7 +21,7 @@ export function Homepage() {
<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>
The Future of <span className='text-gradient-light'>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">
</div>

2
src/components/Phases.jsx
View File

@@ -44,7 +44,7 @@ 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">
<h2 className="lg:text-4xl pt-20 font-semibold tracking-tight leading-normal text-gradient-light text-3xl">
Experience True Collaboration
</h2>
<p className="mt-4 mb-4 text-purple-100 lg:text-xl space-y-6 font-display">

17
src/styles/tailwind.css
View File

@@ -143,6 +143,16 @@
text-fill-color: transparent;
}
.text-gradient-light {
background-color: #704fa8;
background-image: linear-gradient(45deg, #763ed7 0%, #e848de 25%, #763ed7 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%);
@@ -257,6 +267,13 @@
line-height: 1.5rem; /* matches 'leading-tight' */
color: #525763
}
.section-text-light {
font-size: 1.25rem; /* 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: #ffffff
}
@media (min-width: 1024px) {
.section-text {