Skip to content

Commit

Permalink
Merge pull request #37 from 3um-Group/CompanyPage
Browse files Browse the repository at this point in the history 
Company page
  • Loading branch information
@denzuko
denzuko authored Jul 3, 2024
2 parents 968f308 + 8654493 commit 490f0f4
Show file tree
Hide file tree
Showing 16 changed files with 1,485 additions and 86 deletions.
224 changes: 150 additions & 74 deletions app/(root)/company/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,88 +1,164 @@
import empower from '@/public/assets/empower.png'
import brain from '@/public/assets/brain_image.png'
import road_map from '@/public/assets/road_map.png'
import logo from '@/public/assets/IMG_0701 1.png'
// src/app/(root)/company/page.tsx
'use client';

import Form from '@/components/company_components/Form';
import Career from '@/components/company_components/Career';
import Media from '@/components/company_components/Media';

import Image from 'next/image';
import Link from 'next/link';
import React, { useState, useEffect, useRef } from 'react';
import QuantumCube from '@/components/3DModel/QuantumCube';
import ClientOnly from '@/components/3DModel/ClientOnly';
import { KeyTechnologiesSection, TeamSection } from './utils';

const PageTitle: React.FC<{ title: string }> = ({ title }) => {
return (
<div className="text-center fixed top-40 left-1/2 transform -translate-x-1/2 z-20">
<h1 className="text-4xl font-bold mb-4">{title}</h1>
</div>
);
};

const PageDescriptionAndModel: React.FC<{ description: string }> = ({ description }) => {
const [translateX, setTranslateX] = useState(0);
const [isAbsolute, setIsAbsolute] = useState(true);
const mainDivRef = useRef<HTMLDivElement>(null);

useEffect(() => {
const handleScroll = (event: WheelEvent) => {
if (mainDivRef.current?.contains(event.target as Node)) {
if (event.deltaY > 0) {
setTranslateX((prev) => Math.min(prev + 120, 4000));
} else {
setTranslateX((prev) => Math.max(prev - 120, 0));
}
}
};

window.addEventListener('wheel', handleScroll);

return () => {
window.removeEventListener('wheel', handleScroll);
};
}, []);

useEffect(() => {
if (translateX >= 4000) {
document.body.style.overflowY = 'scroll';
} else {
document.body.style.overflowY = 'hidden';
}
}, [translateX]);

useEffect(() => {
const handleScrollReset = () => {
if (window.scrollY === 0) {
setTranslateX(0);
}

const mainDivHeight = mainDivRef.current?.scrollHeight || 0;
if (window.scrollY + window.innerHeight >= mainDivHeight - 100) {
setIsAbsolute(false);
} else {
setIsAbsolute(true);
}
};

window.addEventListener('scroll', handleScrollReset);

return () => {
window.removeEventListener('scroll', handleScrollReset);
};
}, []);

const page = () => {
return (
<>
<header className='flex flex-col'>
<div className=' flex flex-row my-10 justify-center'>
<div className='image-container rounded-xl'>
<Image alt='empower' src={empower} className="sm:object-contain bg-blend-darken rounded-3xl brightness-75 image min-h-28" />
<div className='text-white absolute self-center text-2xl font-bold left-[10%] sm:top-[30%] top-[10%] z-10 w-2/3'>3UM empowers its <br />interconnected community</div>
</div>
<div
className="relative flex flex-col md:flex-row items-center justify-between gap-8 px-8 pt-32"
style={{ position: isAbsolute ? 'absolute' : 'relative' }}
ref={mainDivRef}
>
<div
className="Company-Description md:w-1/2"
style={{
transform: `translateX(-${translateX}px)`,
opacity: translateX > window.innerWidth / 5 ? 0 : 1,
transition: 'transform 0.8s ease-in-out, opacity 0.8s ease-in-out',
}}
>
<p className="text-lg mb-4 text-justify">{description}</p>
</div>
<div
className="3D-Container md:w-1/2 flex justify-center md:justify-end"
style={{
transform: `translateX(-${translateX / 3}px)`,
transition: 'transform 0.8s ease-in-out',
}}
>
<ClientOnly>
<QuantumCube />
</ClientOnly>
</div>
{translateX >= window.innerWidth / 2 && (
<div
className="Placeholder md:w-1/2 flex justify-center items-center pt-32"
style={{
position: 'absolute',
right: 0,
top: '50%',
transform: `translateY(-50%) translateX(0)`,
transition: 'transform 0.8s ease-in-out, opacity 0.8s ease-in-out',
opacity: 1,
height: '100%',
}}
>
<KeyTechnologiesSection />
</div>

<div className='sm:flex hidden flex-row justify-center gap-16 opacity-70'>
<Link href='#about' className='text-blue-700 font-bold'>About us</Link>
<Link href='#mission'>Mission & Vision</Link>
<Link href='#roadmap'>Roadmap</Link>
<Link href='#career'>Career</Link>
<Link href='#media'>Press & Media</Link>
<Link href='#contact'>Contact us</Link>
)}
{translateX >= 3000 && (
<div
className="TeamSection md:w-full flex justify-center items-center pt-32"
style={{
position: 'absolute',
left: '50%',
transform: `translateX(-50%)`,
transition: 'opacity 0.8s ease-in-out',
opacity: 1,
}}
>
<TeamSection />
</div>
</header>
)}
</div>
);
};

<section id="about" className='flex flex-col my-16 sm:my-16 items-center'>
<div className='text-2xl font-bold opacity-75'>About 3UM</div>
<span className='opacity-75 text-center w-5/6 my-6'>3UM is a groundbreaking technology company revolutionizing how people interact with cutting-edge technologies such as Web3, AI, and quantum computing. As we prepare for our Series A funding and upcoming token launch, our primary focus is to raise capital for a global expansion and attract investors. To achieve this, we need to establish a robust online presence that demonstrates our commitment to making advanced technologies accessible and user-friendly. Our main objective is to create a website that not only showcases our innovative solutions but also provides an exceptional user experience through intuitive interface design and engaging content.</span>
<Image alt='brain' src={brain} width={250} />
</section>
const CompanyPage: React.FC = () => {
const [scrollEnabled, setScrollEnabled] = useState(true);

<section id="mission" className='flex flex-col my-16 items-center'>
<div className='text-2xl font-bold opacity-75'>Mission & Vision</div>
<span className='opacity-75 text-center w-5/6 my-6'>To achieve this, we need to establish a robust online presence that demonstrates our commitment to making advanced technologies accessible and user-friendly. Our main objective is to create a website that not only showcases our innovative solutions but also provides an exceptional user experience through intuitive interface design and engaging content.</span>
</section>
const handleMouseEnter = () => {
setScrollEnabled(false);
};

<section id="roadmap" className='flex flex-col my-16 items-center'>
<div className='text-2xl font-bold opacity-75'>Roadmap</div>
<span className='opacity-75 text-center w-5/6 my-6'>To achieve this, we need to establish a robust online presence that demonstrates our commitment to making advanced technologies accessible and user-friendly. Our main objective is to create a website that not only showcases our innovative solutions but also provides an exceptional user experience through intuitive interface design and engaging content.</span>
<Image alt='roadmap' src={road_map} className='w-2/3' />
</section>

<Career />
const handleMouseLeave = () => {
setScrollEnabled(true);
};

useEffect(() => {
document.body.style.overflowY = scrollEnabled ? 'scroll' : 'hidden';
}, [scrollEnabled]);

<section id="media" className='flex flex-col my-16 items-center'>
<div className='text-2xl font-bold opacity-75'>Press & Media</div>

{/*Mobile */}
<div className='sm:hidden flex flex-col w-3/5 items-center mb-20'>
<Image alt='logo' src={logo} width={100} className='object-contain mt-10' />
<span className=' text-blue-700 text-center cursor-pointer'>Download 3UM Logo Files</span>
<span className='opacity-75 text-center my-6'>Download the 3UM logo including blue, white, and black versions. The blue version is preferred with the other colors available for readability on different backgrounds.</span>
</div>


{/*Desktop */}
<div className='sm:flex hidden flex-row w-3/5 justify-between mb-20'>
<span className='opacity-75 text-start w-2/3 my-6 relative'>Download the 3UM logo including blue, white, and black versions. The blue version is preferred with the other colors available for readability on different backgrounds.
<span className='absolute text-blue-700 -bottom-8 -right-5 cursor-pointer'>Download 3UM Logo Files</span>
</span>
<Image alt='logo' src={logo} width={100} className='object-contain' />
return (
<div
className="main-div min-h-[10000px] bg-white text-black pb-0 overflow-hidden"
onMouseEnter={handleMouseEnter}
onMouseLeave={handleMouseLeave}
>
<section className="px-6 py-16 md:py-24 lg:py-32 fixed w-full top-0 left-0">
<div className="relative mx-auto max-w-container md:lg:max-w-6xl lg:max-w-6xl">
<PageTitle title="The Company" />
<PageDescriptionAndModel
description="At 3UM, we are revolutionizing the future with our intelligent infrastructure. Our mission is to build groundbreaking businesses across key technologies, AI, blockchain, and quantum computing, providing investors and industry with advanced tools and solutions. We aim to create an intelligent ecosystem that empowers users to connect, learn, and grow, driving sustainable progress and creating new opportunities."
/>
</div>

<Media />
</section>
<section className="min-h-screen"></section>
</div>
);
};

<section id="contact" className='flex flex-col my-16 items-center'>
<div className='text-2xl font-bold opacity-75'>Contact us</div>
<span className='opacity-75 text-center sm:w-2/3 w-full my-6'>Thank you for your interest in 3UM.  Please use the form below to submit your inquiry, and our team will respond as soon as we can.</span>
<Form />
</section>


</>
)
}

export default page
export default CompanyPage;
65 changes: 65 additions & 0 deletions app/(root)/company/utils.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@

export const KeyTechnologiesSection: React.FC = () => {
return (
<div className="key-technologies-section bg-gray-200 p-8 rounded-lg shadow-lg">
<h2 className="text-2xl font-bold mb-4">Key Technologies</h2>
<p className="text-lg mb-4">At 3UM, we leverage cutting-edge technologies to drive innovation and create intelligent solutions:</p>
<ul className="list-disc list-inside">
<li className="text-lg mb-2">
<strong>Artificial Intelligence:</strong> Implementing advanced AI algorithms to optimize processes and enhance user experiences.
</li>
<li className="text-lg mb-2">
<strong>Blockchain:</strong> Utilizing blockchain technology for secure and transparent transactions, ensuring data integrity.
</li>
<li className="text-lg mb-2">
<strong>Quantum Computing:</strong> Exploring quantum computing to solve complex problems faster and more efficiently.
</li>
</ul>
</div>
);
};

interface TeamMember {
name: string;
position: string;
photo: string;
}

const teamMembers: TeamMember[] = [
{
name: 'John Doe',
position: 'CEO',
photo: '/assets/team/john_doe.jpg',
},
{
name: 'Jane Smith',
position: 'CTO',
photo: '/assets/team/jane_smith.jpg',
},
{
name: 'Alice Johnson',
position: 'Lead Developer',
photo: '/assets/team/alice_johnson.jpg',
},
];

export const TeamSection: React.FC = () => {
return (
<div className="team-section bg-gray-100 p-8 rounded-lg shadow-lg mt-32">
<h2 className="text-3xl font-bold mb-8 text-center">Meet Our Team</h2>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
{teamMembers.map((member, index) => (
<div key={index} className="team-member text-center">
<img
src={member.photo}
alt={member.name}
className="w-32 h-32 rounded-full mx-auto mb-4"
/>
<h3 className="text-xl font-semibold">{member.name}</h3>
<p className="text-gray-600">{member.position}</p>
</div>
))}
</div>
</div>
);
};
36 changes: 35 additions & 1 deletion app/globals.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
@tailwind base;
@tailwind base;
@tailwind components;
@tailwind utilities;

Expand Down Expand Up @@ -26,6 +26,39 @@
z-index: 1;
}

.carousel-container {
margin: 20px 0;
}

.carousel-slide {
display: flex;
flex-direction: column;
align-items: center;
background: linear-gradient(to right, #a1bee0, #3658ef);
padding: 20px;
border-radius: 8px;
}

.carousel-image {
width: 100%;
height: auto;
border-radius: 8px;
}

.carousel-content {
text-align: center;
margin-top: 16px;
}

.carousel-title {
font-size: 1.5rem;
font-weight: bold;
}

.carousel-text {
font-size: 1rem;
}

.image {

}
Expand Down Expand Up @@ -94,6 +127,7 @@
}
}


@layer base {
* {
@apply border-border;
Expand Down
19 changes: 19 additions & 0 deletions components/3DModel/ClientOnly.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
'use client';

import React, { useEffect, useState } from 'react';

const ClientOnly: React.FC<{ children: React.ReactNode }> = ({ children }) => {
const [hasMounted, setHasMounted] = useState(false);

useEffect(() => {
setHasMounted(true);
}, []);

if (!hasMounted) {
return null;
}

return <>{children}</>;
};

export default ClientOnly;
Loading

0 comments on commit 490f0f4

Please sign in to comment.