bender/bcc4944f-99fb-452d-8e6d-a6dbdb2effa5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge version_2 into main

Browse Source 
Merge version_2 into main
This commit was merged in pull request #3.
This commit is contained in:
bender
2026-03-21 18:02:49 +00:00
parent 9220827ae8 35a68d4463
commit d7ae649425
2 changed files with 133 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

126
src/app/page.tsx
View File

@@ -55,6 +55,132 @@ export default function LandingPage() {
/>
</div>
<div id="cta" data-section="cta" style={{
background: '#000000',
padding: 'var(--padding-hero-page-padding)',
position: 'relative',
overflow: 'hidden'
}}>
<div style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
background: 'radial-gradient(circle at 20% 50%, rgba(30, 144, 255, 0.1) 0%, transparent 50%), radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.1) 0%, transparent 50%)',
pointerEvents: 'none'
}} />
<div style={{
position: 'absolute',
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundImage: 'radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.05) 1px, transparent 1px)',
backgroundSize: '40px 40px',
pointerEvents: 'none'
}} />
<div style={{
position: 'relative',
zIndex: 1,
maxWidth: 'var(--width-content-width)',
margin: '0 auto',
textAlign: 'center',
animation: 'fadeInUp 1s ease-out'
}}>
<h2 style={{
fontSize: 'clamp(2.5rem, 6vw, 4.5rem)',
fontWeight: 700,
color: '#ffffff',
marginBottom: '1.5rem',
lineHeight: 1.2,
animation: 'slideInDown 0.8s ease-out',
background: 'linear-gradient(135deg, #ffffff 0%, #cee7ff 100%)',
backgroundClip: 'text',
WebkitBackgroundClip: 'text',
WebkitTextFillColor: 'transparent'
}}>
See Your Growth In Motion
</h2>
<p style={{
fontSize: 'clamp(1rem, 2vw, 1.25rem)',
color: '#cccccc',
marginBottom: '2rem',
lineHeight: 1.6,
animation: 'slideInUp 0.8s ease-out 0.1s backwards',
maxWidth: '800px',
margin: '0 auto 2rem'
}}>
Strategic campaigns engineered for 3D impact. Watch your brand transform through data-driven storytelling and cutting-edge digital experiences.
</p>
<div style={{
display: 'flex',
gap: '1.5rem',
justifyContent: 'center',
flexWrap: 'wrap',
animation: 'slideInUp 0.8s ease-out 0.2s backwards'
}}>
<button style={{
padding: '1rem 2.5rem',
fontSize: '1rem',
fontWeight: 600,
background: 'linear-gradient(135deg, #1e90ff 0%, #b366ff 100%)',
color: '#ffffff',
border: 'none',
borderRadius: '50px',
cursor: 'pointer',
transition: 'all 0.3s ease',
boxShadow: '0 8px 32px rgba(30, 144, 255, 0.3)',
transform: 'translateZ(0)',
position: 'relative',
overflow: 'hidden'
}}
onMouseEnter={(e) => {
e.currentTarget.style.transform = 'translateY(-2px)';
e.currentTarget.style.boxShadow = '0 12px 48px rgba(30, 144, 255, 0.5)';
}}
onMouseLeave={(e) => {
e.currentTarget.style.transform = 'translateY(0)';
e.currentTarget.style.boxShadow = '0 8px 32px rgba(30, 144, 255, 0.3)';
}}>
Let's Create Magic
</button>
</div>
</div>
<style>{`
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
`}</style>
</div>
<div id="portfolio" data-section="portfolio">
<ProductCardFour
title="Campaign Showcase"

14
src/app/styles/variables.css
View File

@@ -10,15 +10,15 @@
--accent: #ffffff;
--background-accent: #ffffff; */
--background: #0a0a0a;
--card: #1a1a1a;
--foreground: #f5f5f5;
--primary-cta: #dfff1c;
--background: #000000;
--card: #0c0c0c;
--foreground: #ffffff;
--primary-cta: #1e90ff;
--primary-cta-text: #0a0a0a;
--secondary-cta: #1a1a1a;
--secondary-cta: #000000;
--secondary-cta-text: #ffffff;
--accent: #8b9a1b;
--background-accent: #5d6b00;
--accent: #b366ff;
--background-accent: #1e90ff;
/* text sizing - set by ThemeProvider */
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);