Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web 25 #13

Merged
merged 5 commits into from
Feb 19, 2025
Merged

Web 25 #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
929a04a
updated content and added expo section
ItsBreaker Feb 17, 2025
92cfbf7
updated gallery, expo & ccnz sections
ItsBreaker Feb 17, 2025
2b5bf4c
minor fix
ItsBreaker Feb 17, 2025
25ac315
Responsive image resizing for CCNZ Section
0xjimmy Feb 19, 2025
2b79065
Merge branch 'main' into web-25
ItsBreaker Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added public/images/CCNZ-bg.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/harry.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/images/hilton-auckland.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
129 changes: 55 additions & 74 deletions src/components/CCNZSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import { FC } from 'react'
import AnimatedGridPattern from './AnimatedGridPattern'
import { FC, useState, useEffect } from 'react'

interface ConsultingFeature {
title: string
Expand All @@ -21,35 +20,47 @@ const consultingFeatures: ConsultingFeature[] = [
}
]

const backgroundImages = ['./images/CCNZ-bg.png', './images/harry.png', './images/expo2024.jpg']

const ConsultingSection: FC = () => {
return (
<div className="relative w-full min-h-[90vh] flex flex-col lg:flex-row items-stretch">
<AnimatedGridPattern />
const [currentImageIndex, setCurrentImageIndex] = useState(0)
const [isTransitioning, setIsTransitioning] = useState(false)

useEffect(() => {
const timer = setInterval(() => {
setIsTransitioning(true)
setTimeout(() => {
setCurrentImageIndex((prevIndex) => (prevIndex === backgroundImages.length - 1 ? 0 : prevIndex + 1))
setIsTransitioning(false)
}, 500)
}, 5000)

return () => clearInterval(timer)
}, [])

return (
<div className="relative w-full min-h-screen flex">
{/* Left Content Side */}
<div className="relative z-10 w-full lg:w-1/2 flex flex-col justify-center px-8 lg:px-16 py-20">
<div className="relative z-10 w-full lg:w-2/5 flex flex-col justify-center px-6 lg:px-12 py-16">
<div className="max-w-xl">
<div className="mb-12">
<h2 className="alegreya text-3xl sm:text-4xl md:text-5xl font-bold mb-6">
Need Professional
<span className="alegreya text-green-500 block mt-2">Crypto Guidance?</span>
</h2>
<p className="text-gray-300 text-lg">Get expert cryptocurrency consulting services designed specifically for New Zealand investors</p>
</div>

<div className="space-y-6 mb-12">
{consultingFeatures.map((feature, index) => (
<div
key={index}
className="border border-green-500/30
rounded-xl p-6 transition-all duration-300
hover:border-green-400/70 hover:bg-green-500/10
hover:shadow-[0_0_25px_rgba(74,222,128,0.3)]"
>
<h3 className="text-xl font-semibold text-white mb-2">{feature.title}</h3>
<p className="text-gray-300">{feature.description}</p>
<div className="flex items-center gap-8">
<h2 className="alegreya text-3xl sm:text-4xl md:text-5xl font-bold">
Need Professional
<span className="alegreya text-green-500 block mt-2">Crypto Guidance?</span>
</h2>
{/* Logo next to title */}
<div className="overflow">
<div
className="w-24 h-24 md:w-32 md:h-32 bg-black/80 rounded-3xl p-6 backdrop-blur-xl
border border-green-500/30 shadow-[0_0_50px_rgba(74,222,128,0.3)]
transform hover:scale-105 transition-transform duration-500"
>
<img src="./images/Crypto-Consulting-NZ.png" alt="Crypto Consulting NZ Logo" className="w-full h-full text-green-500" />
</div>
</div>
))}
</div>
<p className="text-gray-300 text-lg mt-6">Expert cryptocurrency consulting services designed specifically for New Zealand investors</p>
</div>

<div className="flex flex-col sm:flex-row items-start gap-6">
Expand Down Expand Up @@ -77,61 +88,31 @@ const ConsultingSection: FC = () => {
Professional consultants available now
</div>
</div>
</div>
</div>

{/* Right Visual Side */}
<div className="relative w-full lg:w-1/2 min-h-[50vh] lg:min-h-full flex items-center justify-center overflow-hidden">
{/* Gradient Overlay */}
<div className="absolute inset-0 bg-gradient-to-br from-green-500/20 via-transparent to-black/50" />

{/* Decorative Elements */}
<div className="absolute inset-0">
<div className="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[150%] h-[150%] opacity-30">
<svg viewBox="0 0 100 100" className="w-full h-full animate-spin-slow">
<circle cx="50" cy="50" r="40" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-green-500" />
<circle cx="50" cy="50" r="35" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-green-400" />
<circle cx="50" cy="50" r="30" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-green-300" />
</svg>
<div className="space-y-6 mt-12">
{consultingFeatures.map((feature, index) => (
<div
key={index}
className="border border-green-500/30
rounded-xl p-6 transition-all duration-300
hover:border-green-400/70 hover:bg-green-500/10
hover:shadow-[0_0_25px_rgba(74,222,128,0.3)]"
>
<h3 className="text-xl font-semibold text-white mb-2">{feature.title}</h3>
<p className="text-gray-300">{feature.description}</p>
</div>
))}
</div>
</div>
</div>

{/* Main Image Container */}
<div className="relative z-10 flex flex-col items-center gap-8 p-8">
{/* Consulting Logo */}
<div
className="w-32 h-32 bg-black/80 rounded-2xl p-6 backdrop-blur-xl
border border-green-500/30 shadow-[0_0_50px_rgba(74,222,128,0.3)]"
>
<img src="./images/Crypto-Consulting-NZ.png" className="w-full h-full text-green-500" />
</div>

{/* 3D Card Effect */}
<div className="relative group">
<div
className="absolute -inset-1 bg-gradient-to-r from-green-500 to-green-300
rounded-lg blur opacity-50 group-hover:opacity-75 transition duration-1000"
></div>
<div
className="relative bg-black/90 backdrop-blur-xl p-6 rounded-lg
border border-green-500/30"
>
<p className="text-xl font-semibold text-green-400 mb-2">Crypto Consulting NZ</p>
<p className="text-gray-300 text-sm">Professional Guidance for Your Crypto Journey</p>
</div>
</div>
{/* Background Image */}
<div className="absolute inset-0 w-full h-full -z-10">
<div className={`absolute bg-cover inset-0 bg-center transition-opacity duration-1000 ${isTransitioning ? 'opacity-0' : 'opacity-100'}`} style={{ backgroundImage: `url(${backgroundImages[currentImageIndex]})` }}>
<div className="absolute inset-0 bg-gradient-to-r from-black via-black/60 to-transparent" />
<div className="absolute inset-0 bg-gradient-to-br from-green-500/10 via-transparent to-black/30" />
</div>
</div>

<style>{`
@keyframes spin-slow {
from { transform: translate(-50%, -50%) rotate(0deg); }
to { transform: translate(-50%, -50%) rotate(360deg); }
}
.animate-spin-slow {
animation: spin-slow 20s linear infinite;
}
`}</style>
</div>
)
}
Expand Down
60 changes: 36 additions & 24 deletions src/components/ExpoSection.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,19 @@ const expoFeatures: ExpoFeature[] = [

const ExpoSection: FC = () => {
return (
<div className="relative w-full min-h-[90vh] flex flex-col lg:flex-row items-stretch">
<div className="relative w-full min-h-screen flex flex-col lg:flex-row items-stretch">
<AnimatedGridPattern />

{/* Visual Side (Now Left) */}
<div className="relative w-full lg:w-1/2 min-h-[50vh] lg:min-h-full flex items-center justify-center overflow-hidden">
<div className="relative w-full lg:w-3/5 min-h-[60vh] lg:min-h-full flex items-center justify-center overflow-hidden">

{/* Gradient Overlay */}
<div className="absolute inset-0 bg-gradient-to-br from-green-500/20 via-transparent to-black/50" />

{/* Hexagon Grid Background */}
<div className="absolute inset-0 opacity-20">
{[...Array(6)].map((_, i) => (
{[...Array(8)].map((_, i) => (

<div
key={i}
className="absolute"
Expand All @@ -48,7 +50,8 @@ const ExpoSection: FC = () => {
transform: `rotate(${Math.random() * 360}deg)`
}}
>
<svg width="100" height="100" viewBox="0 0 100 100">
<svg width="120" height="120" viewBox="0 0 100 100">

<path d="M50 0 L93.3 25 L93.3 75 L50 100 L6.7 75 L6.7 25 Z" fill="none" stroke="currentColor" strokeWidth="0.5" className="text-green-500" />
</svg>
</div>
Expand All @@ -57,10 +60,10 @@ const ExpoSection: FC = () => {

{/* Floating Elements */}
<div className="absolute inset-0">
{[...Array(3)].map((_, i) => (
{[...Array(5)].map((_, i) => (
<div
key={i}
className="absolute w-4 h-4 bg-green-500/30 rounded-full"
className="absolute w-6 h-6 bg-green-500/30 rounded-full"
style={{
top: `${Math.random() * 100}%`,
left: `${Math.random() * 100}%`,
Expand All @@ -71,21 +74,21 @@ const ExpoSection: FC = () => {
</div>

{/* Main Visual Content */}
<div className="relative z-10 flex flex-col items-center gap-8 p-8">
<div className="relative z-10 flex flex-col items-center gap-8 p-8 w-full h-full">
{/* Expo Logo with Glow Effect */}
<div
className="absolute inset-0 bg-cover bg-center"
style={{
backgroundImage: 'url(./images/expo2024.jpg)',
height: '70vh'
height: '85vh'
}}
>
{/* Gradient overlay */}
<div className="absolute inset-0 bg-gradient-to-b from-black via-black/10 to-black" />
</div>

{/* 3D Card with Animated Border */}
<div className="relative group perspective-1000">
<div className="relative group perspective-1000 mt-16">
{/* Animated Background Glow */}
<div
className="absolute -inset-4 bg-gradient-to-r from-green-500 to-green-300
Expand All @@ -95,7 +98,7 @@ const ExpoSection: FC = () => {

{/* Main Card */}
<div
className="relative bg-black/90 backdrop-blur-xl p-8 rounded-lg
className="relative bg-black/60 p-12 rounded-lg
border border-green-500/30
transform transition-all duration-700
group-hover:rotate-y-12 group-hover:scale-105
Expand All @@ -110,53 +113,62 @@ const ExpoSection: FC = () => {

{/* Corner Accents */}
<div
className="absolute top-0 left-0 w-16 h-16 border-t-2 border-l-2 border-green-500/50
className="absolute top-0 left-0 w-20 h-20 border-t-2 border-l-2 border-green-500/50
rounded-tl-lg transform -translate-x-1 -translate-y-1
group-hover:border-green-400 group-hover:scale-105 transition-all duration-700"
/>
<div
className="absolute bottom-0 right-0 w-16 h-16 border-b-2 border-r-2 border-green-500/50
className="absolute bottom-0 right-0 w-20 h-20 border-b-2 border-r-2 border-green-500/50
rounded-br-lg transform translate-x-1 translate-y-1
group-hover:border-green-400 group-hover:scale-105 transition-all duration-700"
/>

{/* Content Container */}
<div className="relative z-10">
{/* Title with Gradient */}
<div className="mb-6">
<div className="mb-8">
<p
className="alegreya text-3xl font-bold bg-white
bg-clip-text text-transparent transform
group-hover:scale-105 transition-transform duration-700"
>
Decentralized NZ++
</p>
</div>
<div className="mb-8">
<p
className="text-3xl font-bold bg-gradient-to-r from-green-400 to-green-300
className="alegreya text-4xl font-bold bg-gradient-to-r from-green-400 to-green-300
bg-clip-text text-transparent transform
group-hover:scale-105 transition-transform duration-700"
>
NZ Web3 Expo 2025
Crypto & Blockchain Expo 25'
</p>
</div>

{/* Location & Date with Icons */}
<div className="space-y-3">
<div className="space-y-4">
<div
className="flex items-center gap-3 text-gray-300 group-hover:text-gray-200
className="flex items-center gap-4 text-gray-300 group-hover:text-gray-200
transition-colors duration-700"
>
<div className="w-5 h-5 text-green-400">
<div className="w-6 h-6 text-green-400">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z" />
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
</svg>
</div>
<p className="text-lg">Auckland Convention Centre</p>
<p className="text-xl">Auckland Convention Centre</p>
</div>
<div
className="flex items-center gap-3 text-gray-300 group-hover:text-gray-200
className="flex items-center gap-4 text-gray-300 group-hover:text-gray-200
transition-colors duration-700"
>
<div className="w-5 h-5 text-green-400">
<div className="w-6 h-6 text-green-400">
<svg fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
</svg>
</div>
<p className="text-lg">March 15-17</p>
<p className="text-xl">Coming September 2025</p>
</div>
</div>
</div>
Expand All @@ -166,8 +178,8 @@ const ExpoSection: FC = () => {
</div>

{/* Content Side (Now Right) */}
<div className="relative z-10 w-full lg:w-1/2 flex flex-col justify-center px-8 lg:px-16 py-20">
<div className="max-w-xl ml-auto">
<div className="relative z-10 w-full lg:w-2/5 flex flex-col justify-center px-6 lg:px-12 py-16">
<div className="max-w-xl mx-auto">
<div className="mb-12">
<h2 className="alegreya text-3xl sm:text-4xl md:text-5xl font-bold mb-6">
Join NZ's Premier
Expand Down
13 changes: 12 additions & 1 deletion src/components/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const Footer: FC = () => {
</div>
<br />
<div className="w-1/2 h-auto flex items-center justify-center text-gray-600">
<img src="./images/CNZ logo.png" className="w-full h-full text-green-500 ml-10" />
<img src="./images/CNZ logo.png" className="w-full h-full text-green-500 ml-10 animate-shake" />
</div>
</div>

Expand Down Expand Up @@ -158,6 +158,17 @@ const Footer: FC = () => {
</div>
</div>
</div>
<style>{`
@keyframes shake {
0%, 50%, 100% { transform: rotate(0deg); }
5%, 15% { transform: rotate(-5deg); }
10%, 20% { transform: rotate(5deg); }
}

.animate-shake {
animation: shake 10s ease-in-out infinite;
}
`}</style>
</footer>
)
}
Expand Down
Loading
Loading