Compare commits
7 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
| e23d150e99 | |||
| 9e3b0fa1f2 | |||
| a82e816e3a | |||
| e6476929a7 | |||
| 9b09542be4 | |||
| 7f14d6fe60 | |||
| d5b901497e |
@@ -1,58 +1,23 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Halant } from "next/font/google";
|
|
||||||
import { Inter } from "next/font/google";
|
import { Inter } from "next/font/google";
|
||||||
import { Figtree } from "next/font/google";
|
import "./styles/variables.css";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
|
||||||
import Tag from "@/tag/Tag";
|
|
||||||
|
|
||||||
const halant = Halant({
|
const inter = Inter({ subsets: ["latin"] });
|
||||||
variable: "--font-halant", subsets: ["latin"],
|
|
||||||
weight: ["300", "400", "500", "600", "700"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const inter = Inter({
|
|
||||||
variable: "--font-inter", subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const figtree = Figtree({
|
|
||||||
variable: "--font-figtree", subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
export const metadata: Metadata = {
|
||||||
title: "Aayush Visuals | Premium Video Editing & Brand Design", description: "Elite creative studio specializing in viral video editing, thumbnail design, and luxury brand identity. High-retention storytelling engineered for ambitious creators.", keywords: "video editing, thumbnail design, content creation, branding, video production, creator economy", metadataBase: new URL("https://aayushvisuals.com"),
|
title: "Aayush Visuals - Premium Creative Studio", description: "Precision Video Editing. Viral Thumbnail Strategy. Elite Branding."};
|
||||||
alternates: {
|
|
||||||
canonical: "https://aayushvisuals.com"},
|
|
||||||
openGraph: {
|
|
||||||
title: "Aayush Visuals | Redefining The Visual Standard", description: "Precision Video Editing. Viral Thumbnail Strategy. Elite Branding.", url: "https://aayushvisuals.com", siteName: "Aayush Visuals", type: "website", images: [
|
|
||||||
{
|
|
||||||
url: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/a-floating-minimalist-3d-glass-textured--1772694030676-9e5a284a.png", alt: "Aayush Visuals Creative Studio"},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
twitter: {
|
|
||||||
card: "summary_large_image", title: "Aayush Visuals | Premium Creative Studio", description: "Transform your creative vision into viral impact", images: [
|
|
||||||
"https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/a-floating-minimalist-3d-glass-textured--1772694030676-9e5a284a.png"],
|
|
||||||
},
|
|
||||||
robots: {
|
|
||||||
index: true,
|
|
||||||
follow: true,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
}: Readonly<{
|
}: {
|
||||||
children: React.ReactNode;
|
children: React.ReactNode;
|
||||||
}>) {
|
}) {
|
||||||
return (
|
return (
|
||||||
<html lang="en" suppressHydrationWarning>
|
<html lang="en">
|
||||||
<ServiceWrapper>
|
<body className={inter.className}>
|
||||||
<body
|
{children}
|
||||||
className={`${halant.variable} ${inter.variable} ${figtree.variable} antialiased`}
|
|
||||||
>
|
|
||||||
<Tag />
|
|
||||||
{children}
|
|
||||||
|
|
||||||
<script
|
<script
|
||||||
dangerouslySetInnerHTML={{
|
dangerouslySetInnerHTML={{
|
||||||
__html: `
|
__html: `
|
||||||
@@ -1420,7 +1385,6 @@ export default function RootLayout({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</body>
|
</body>
|
||||||
</ServiceWrapper>
|
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
497
src/app/page.tsx
497
src/app/page.tsx
@@ -19,11 +19,11 @@ export default function LandingPage() {
|
|||||||
borderRadius="soft"
|
borderRadius="soft"
|
||||||
contentWidth="small"
|
contentWidth="small"
|
||||||
sizing="medium"
|
sizing="medium"
|
||||||
background="noise"
|
background="none"
|
||||||
cardStyle="layered-gradient"
|
cardStyle="glass-elevated"
|
||||||
primaryButtonStyle="diagonal-gradient"
|
primaryButtonStyle="gradient"
|
||||||
secondaryButtonStyle="glass"
|
secondaryButtonStyle="glass"
|
||||||
headingFontWeight="light"
|
headingFontWeight="bold"
|
||||||
>
|
>
|
||||||
<div id="nav" data-section="nav">
|
<div id="nav" data-section="nav">
|
||||||
<NavbarStyleCentered
|
<NavbarStyleCentered
|
||||||
@@ -40,57 +40,300 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="hero" data-section="hero">
|
<div id="hero" data-section="hero">
|
||||||
<HeroLogo
|
<div className="min-h-screen w-full bg-black relative overflow-hidden flex items-center justify-center">
|
||||||
logoText="AAYUSH VISUALS"
|
<style>{`
|
||||||
description="Precision Video Editing. Viral Thumbnail Strategy. Elite Branding."
|
@keyframes gyroSpin {
|
||||||
buttons={[
|
from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
|
||||||
{ text: "View Portfolio", href: "portfolio" },
|
to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
|
||||||
{ text: "Contact Now", href: "contact" }
|
}
|
||||||
]}
|
@keyframes floatParticle {
|
||||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/a-floating-minimalist-3d-glass-textured--1772694030676-9e5a284a.png?_wi=1"
|
0%, 100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 1; }
|
||||||
imageAlt="Aayush Visuals - Premium Creative Studio"
|
50% { transform: translateY(-20px) translateX(10px) scale(0.8); opacity: 0.6; }
|
||||||
showDimOverlay={true}
|
}
|
||||||
buttonAnimation="slide-up"
|
.gyro-centerpiece {
|
||||||
/>
|
width: 400px;
|
||||||
|
height: 400px;
|
||||||
|
perspective: 1200px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.gyro-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(135deg, rgba(206, 231, 255, 0.1) 0%, rgba(206, 231, 255, 0.05) 100%);
|
||||||
|
border: 2px solid rgba(206, 231, 255, 0.3);
|
||||||
|
border-radius: 20px;
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
animation: gyroSpin 8s linear infinite;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
box-shadow: 0 0 60px rgba(206, 231, 255, 0.2), inset 0 0 60px rgba(206, 231, 255, 0.05);
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.gyro-inner::before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
inset: 0;
|
||||||
|
background: radial-gradient(circle at 30% 30%, rgba(206, 231, 255, 0.15), transparent);
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
.particle {
|
||||||
|
position: absolute;
|
||||||
|
width: 80px;
|
||||||
|
height: 80px;
|
||||||
|
background: linear-gradient(135deg, rgba(206, 231, 255, 0.4), rgba(206, 231, 255, 0.2));
|
||||||
|
border-radius: 50%;
|
||||||
|
backdrop-filter: blur(10px);
|
||||||
|
border: 1px solid rgba(206, 231, 255, 0.3);
|
||||||
|
animation: floatParticle 4s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
.particle:nth-child(1) { top: 20%; left: 15%; animation-delay: 0s; }
|
||||||
|
.particle:nth-child(2) { top: 50%; right: 10%; animation-delay: 1s; }
|
||||||
|
.particle:nth-child(3) { bottom: 15%; left: 25%; animation-delay: 2s; }
|
||||||
|
`}</style>
|
||||||
|
<div className="absolute inset-0 bg-gradient-to-br from-black via-black to-transparent"></div>
|
||||||
|
<div className="relative z-10 text-center">
|
||||||
|
<h1 className="text-6xl md:text-7xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-[#cee7ff] via-[#cee7ff] to-[#a8cce8] mb-8 animate-pulse">
|
||||||
|
AAYUSH VISUALS
|
||||||
|
</h1>
|
||||||
|
<p className="text-lg md:text-xl text-[#cee7ff] mb-12 font-light tracking-wide">
|
||||||
|
Precision Video Editing. Viral Thumbnail Strategy. Elite Branding.
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-col items-center gap-8 mb-16">
|
||||||
|
<div className="gyro-centerpiece">
|
||||||
|
<div className="gyro-inner">
|
||||||
|
<div className="particle"></div>
|
||||||
|
<div className="particle"></div>
|
||||||
|
<div className="particle"></div>
|
||||||
|
<img src="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/a-floating-minimalist-3d-glass-textured--1772694030676-9e5a284a.png?_wi=1" alt="Gyro Centerpiece" className="w-48 h-48 object-cover rounded-full opacity-80" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col md:flex-row gap-4 justify-center">
|
||||||
|
<button className="px-8 py-3 bg-gradient-to-r from-[#cee7ff] to-[#a8cce8] text-black font-semibold rounded-lg hover:shadow-lg hover:shadow-[#cee7ff]/50 transition-all duration-300">
|
||||||
|
View Portfolio
|
||||||
|
</button>
|
||||||
|
<button className="px-8 py-3 border-2 border-[#cee7ff] text-[#cee7ff] font-semibold rounded-lg hover:bg-[#cee7ff]/10 transition-all duration-300">
|
||||||
|
Contact Now
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="services" data-section="services">
|
<div id="services" data-section="services" className="min-h-screen bg-black relative overflow-hidden py-20">
|
||||||
<FeatureCardTwentyThree
|
<style>{`
|
||||||
title="Our Services"
|
@keyframes liquidGlow {
|
||||||
description="Multidisciplinary creative excellence engineered for modern creators and ambitious brands."
|
0%, 100% { background-position: 0% 50%; }
|
||||||
tag="What We Do"
|
50% { background-position: 100% 50%; }
|
||||||
tagIcon={Sparkles}
|
}
|
||||||
tagAnimation="slide-up"
|
.bento-card {
|
||||||
features={[
|
background: linear-gradient(135deg, rgba(206, 231, 255, 0.08) 0%, rgba(206, 231, 255, 0.02) 100%);
|
||||||
{
|
backdrop-filter: blur(30px);
|
||||||
id: "1", title: "Video Editing", tags: ["Cinematic", "High-Retention"],
|
border: 1px solid rgba(206, 231, 255, 0.2);
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/cinematic-video-editing-interface-showca-1772694031298-cfc9d9a1.png", imageAlt: "Video Editing Service"
|
border-radius: 24px;
|
||||||
},
|
padding: 2rem;
|
||||||
{
|
position: relative;
|
||||||
id: "2", title: "Thumbnail Design", tags: ["Psychology-Driven", "High-CTR"],
|
overflow: hidden;
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/eye-catching-youtube-thumbnail-designs-w-1772694033165-f22b28ad.jpg", imageAlt: "Thumbnail Design Service"
|
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
},
|
height: 100%;
|
||||||
{
|
}
|
||||||
id: "3", title: "Content Writing", tags: ["Strategic", "Conversion-Focused"],
|
.bento-card::before {
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/strategic-script-writing-interface-with--1772694031273-3bbe5f6b.png", imageAlt: "Content Writing Service"
|
content: '';
|
||||||
},
|
position: absolute;
|
||||||
{
|
inset: 0;
|
||||||
id: "4", title: "Social Media Creatives", tags: ["Platform-Native", "Rapid Growth"],
|
background: radial-gradient(circle at 0% 0%, rgba(206, 231, 255, 0.1), transparent 50%);
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/platform-native-social-media-assets-show-1772694036896-e5deb2c2.png", imageAlt: "Social Media Creatives"
|
opacity: 0;
|
||||||
},
|
transition: opacity 0.4s ease;
|
||||||
{
|
pointer-events: none;
|
||||||
id: "5", title: "Elite Branding", tags: ["Timeless", "Modern Identity"],
|
}
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/premium-brand-identity-components-logo-v-1772694033720-0ac1608c.png", imageAlt: "Branding Service"
|
.bento-card:hover {
|
||||||
},
|
transform: translateY(-8px) scale(1.02);
|
||||||
{
|
border-color: rgba(206, 231, 255, 0.4);
|
||||||
id: "6", title: "Portfolio Design", tags: ["Custom-Engineered", "Interactive"],
|
box-shadow: 0 0 60px rgba(206, 231, 255, 0.15), inset 0 0 40px rgba(206, 231, 255, 0.05);
|
||||||
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/custom-engineered-digital-portfolio-show-1772694031455-292f1fbb.png", imageAlt: "Portfolio Design Service"
|
}
|
||||||
}
|
.bento-card:hover::before {
|
||||||
]}
|
opacity: 1;
|
||||||
animationType="slide-up"
|
}
|
||||||
textboxLayout="default"
|
.bento-image {
|
||||||
useInvertedBackground={true}
|
width: 100%;
|
||||||
/>
|
height: 200px;
|
||||||
|
border-radius: 16px;
|
||||||
|
object-fit: cover;
|
||||||
|
margin-bottom: 1.5rem;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.bento-title {
|
||||||
|
color: #cee7ff;
|
||||||
|
font-size: 1.25rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.bento-tag {
|
||||||
|
display: inline-block;
|
||||||
|
background: rgba(206, 231, 255, 0.1);
|
||||||
|
border: 1px solid rgba(206, 231, 255, 0.2);
|
||||||
|
color: #cee7ff;
|
||||||
|
padding: 0.4rem 0.8rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
font-size: 0.75rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
<div className="max-w-6xl mx-auto px-4">
|
||||||
|
<div className="text-center mb-16">
|
||||||
|
<span className="text-[#cee7ff] text-sm font-semibold tracking-widest">WHAT WE DO</span>
|
||||||
|
<h2 className="text-5xl md:text-6xl font-bold text-[#cee7ff] mt-4 mb-6">
|
||||||
|
Our Services
|
||||||
|
</h2>
|
||||||
|
<p className="text-[#a8cce8] text-lg max-w-2xl mx-auto">
|
||||||
|
Multidisciplinary creative excellence engineered for modern creators and ambitious brands.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
id: "1", title: "Video Editing", tags: ["Cinematic", "High-Retention"],
|
||||||
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/cinematic-video-editing-interface-showca-1772694031298-cfc9d9a1.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "2", title: "Thumbnail Design", tags: ["Psychology-Driven", "High-CTR"],
|
||||||
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/eye-catching-youtube-thumbnail-designs-w-1772694033165-f22b28ad.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "3", title: "Content Writing", tags: ["Strategic", "Conversion-Focused"],
|
||||||
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/strategic-script-writing-interface-with--1772694031273-3bbe5f6b.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "4", title: "Social Media Creatives", tags: ["Platform-Native", "Rapid Growth"],
|
||||||
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/platform-native-social-media-assets-show-1772694036896-e5deb2c2.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "5", title: "Elite Branding", tags: ["Timeless", "Modern Identity"],
|
||||||
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/premium-brand-identity-components-logo-v-1772694033720-0ac1608c.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "6", title: "Portfolio Design", tags: ["Custom-Engineered", "Interactive"],
|
||||||
|
imageSrc: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/custom-engineered-digital-portfolio-show-1772694031455-292f1fbb.png"
|
||||||
|
}
|
||||||
|
].map((service) => (
|
||||||
|
<div key={service.id} className="bento-card">
|
||||||
|
<img src={service.imageSrc} alt={service.title} className="bento-image" />
|
||||||
|
<h3 className="bento-title">{service.title}</h3>
|
||||||
|
<div className="flex flex-wrap">
|
||||||
|
{service.tags.map((tag, idx) => (
|
||||||
|
<span key={idx} className="bento-tag">{tag}</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="portfolio" data-section="portfolio" className="min-h-screen bg-black relative overflow-hidden py-20">
|
||||||
|
<style>{`
|
||||||
|
.portfolio-overlay {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 0;
|
||||||
|
background: rgba(0, 0, 0, 0.95);
|
||||||
|
backdrop-filter: blur(20px);
|
||||||
|
border-top: 2px solid rgba(206, 231, 255, 0.3);
|
||||||
|
overflow-y: auto;
|
||||||
|
transition: height 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
.portfolio-overlay.active {
|
||||||
|
height: 100vh;
|
||||||
|
}
|
||||||
|
.portfolio-drawer {
|
||||||
|
padding: 4rem 2rem;
|
||||||
|
max-width: 1200px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.portfolio-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 2rem;
|
||||||
|
margin-bottom: 3rem;
|
||||||
|
padding-bottom: 2rem;
|
||||||
|
border-bottom: 1px solid rgba(206, 231, 255, 0.1);
|
||||||
|
}
|
||||||
|
.portfolio-item-image {
|
||||||
|
width: 300px;
|
||||||
|
height: 200px;
|
||||||
|
border-radius: 12px;
|
||||||
|
object-fit: cover;
|
||||||
|
opacity: 0.9;
|
||||||
|
}
|
||||||
|
.portfolio-item-content h3 {
|
||||||
|
color: #cee7ff;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
}
|
||||||
|
.portfolio-item-content p {
|
||||||
|
color: #a8cce8;
|
||||||
|
font-size: 0.95rem;
|
||||||
|
line-height: 1.6;
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
<div className="max-w-6xl mx-auto px-4 text-center mb-16">
|
||||||
|
<span className="text-[#cee7ff] text-sm font-semibold tracking-widest">PORTFOLIO</span>
|
||||||
|
<h2 className="text-5xl md:text-6xl font-bold text-[#cee7ff] mt-4 mb-6">
|
||||||
|
Featured Work
|
||||||
|
</h2>
|
||||||
|
<p className="text-[#a8cce8] text-lg max-w-2xl mx-auto mb-8">
|
||||||
|
Slide up to explore our portfolio showcase
|
||||||
|
</p>
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
const drawer = document.getElementById('portfolio-drawer');
|
||||||
|
if (drawer) drawer.classList.toggle('active');
|
||||||
|
}}
|
||||||
|
className="px-8 py-3 border-2 border-[#cee7ff] text-[#cee7ff] font-semibold rounded-lg hover:bg-[#cee7ff]/10 transition-all duration-300"
|
||||||
|
>
|
||||||
|
View Portfolio
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div id="portfolio-drawer" className="portfolio-overlay">
|
||||||
|
<div className="portfolio-drawer">
|
||||||
|
<button
|
||||||
|
onClick={() => {
|
||||||
|
const drawer = document.getElementById('portfolio-drawer');
|
||||||
|
if (drawer) drawer.classList.remove('active');
|
||||||
|
}}
|
||||||
|
className="mb-8 text-[#cee7ff] hover:text-[#a8cce8] transition-colors"
|
||||||
|
>
|
||||||
|
← Close Portfolio
|
||||||
|
</button>
|
||||||
|
{[
|
||||||
|
{
|
||||||
|
title: "Viral Gaming Content Series", description: "Edited 50+ videos achieving 2M+ views with 45% average retention rate. Specialized in jump cuts, transitions, and psychological hooks.", image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/cinematic-video-editing-interface-showca-1772694031298-cfc9d9a1.png"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "E-Commerce Brand Transformation", description: "Complete branding overhaul including logo, thumbnail strategy, and product video edits. Resulted in 3x CTR improvement.", image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/eye-catching-youtube-thumbnail-designs-w-1772694033165-f22b28ad.jpg"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "Educational Channel Launch", description: "Built entire video editing style from scratch. Implemented data-driven thumbnail psychology and narrative flow optimization.", image: "https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/strategic-script-writing-interface-with--1772694031273-3bbe5f6b.png"
|
||||||
|
}
|
||||||
|
].map((item, idx) => (
|
||||||
|
<div key={idx} className="portfolio-item">
|
||||||
|
<img src={item.image} alt={item.title} className="portfolio-item-image" />
|
||||||
|
<div className="portfolio-item-content">
|
||||||
|
<h3>{item.title}</h3>
|
||||||
|
<p>{item.description}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="about" data-section="about">
|
<div id="about" data-section="about">
|
||||||
@@ -168,19 +411,139 @@ export default function LandingPage() {
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="contact" data-section="contact">
|
<div id="contact" data-section="contact" className="min-h-screen bg-black relative overflow-hidden py-20">
|
||||||
<ContactCenter
|
<style>{`
|
||||||
tag="Ready to Elevate?"
|
.contact-form-container {
|
||||||
tagIcon={Send}
|
max-width: 600px;
|
||||||
tagAnimation="slide-up"
|
margin: 0 auto;
|
||||||
title="Let's Transmit Your Vision"
|
padding: 0 2rem;
|
||||||
description="Share your creative goals and project brief. Our team responds within 12 hours with strategic recommendations tailored to your brand."
|
}
|
||||||
background={{ variant: "rotated-rays-animated-grid" }}
|
.contact-input {
|
||||||
useInvertedBackground={false}
|
width: 100%;
|
||||||
inputPlaceholder="your@email.com"
|
background: transparent;
|
||||||
buttonText="Transmit Vision"
|
border: none;
|
||||||
termsText="We respect your vision. Unsubscribe anytime. Your data is secured."
|
border-bottom: 2px solid rgba(206, 231, 255, 0.3);
|
||||||
/>
|
color: #cee7ff;
|
||||||
|
padding: 1rem 0;
|
||||||
|
font-size: 1rem;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
}
|
||||||
|
.contact-input::placeholder {
|
||||||
|
color: rgba(206, 231, 255, 0.5);
|
||||||
|
}
|
||||||
|
.contact-input:focus {
|
||||||
|
outline: none;
|
||||||
|
border-bottom-color: #cee7ff;
|
||||||
|
box-shadow: 0 2px 0 #cee7ff;
|
||||||
|
}
|
||||||
|
.contact-textarea {
|
||||||
|
width: 100%;
|
||||||
|
background: transparent;
|
||||||
|
border: 2px solid rgba(206, 231, 255, 0.2);
|
||||||
|
border-radius: 8px;
|
||||||
|
color: #cee7ff;
|
||||||
|
padding: 1rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-family: inherit;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
margin-bottom: 2rem;
|
||||||
|
min-height: 150px;
|
||||||
|
resize: vertical;
|
||||||
|
}
|
||||||
|
.contact-textarea:focus {
|
||||||
|
outline: none;
|
||||||
|
border-color: #cee7ff;
|
||||||
|
box-shadow: inset 0 0 20px rgba(206, 231, 255, 0.1);
|
||||||
|
}
|
||||||
|
.contact-submit {
|
||||||
|
width: 100%;
|
||||||
|
padding: 1rem;
|
||||||
|
background: linear-gradient(135deg, #cee7ff, #a8cce8);
|
||||||
|
color: #000;
|
||||||
|
border: none;
|
||||||
|
border-radius: 8px;
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1rem;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
.contact-submit:hover {
|
||||||
|
box-shadow: 0 0 30px rgba(206, 231, 255, 0.4);
|
||||||
|
transform: translateY(-2px);
|
||||||
|
}
|
||||||
|
`}</style>
|
||||||
|
<div className="contact-form-container">
|
||||||
|
<div className="text-center mb-12">
|
||||||
|
<span className="text-[#cee7ff] text-sm font-semibold tracking-widest">READY TO ELEVATE?</span>
|
||||||
|
<h2 className="text-5xl md:text-6xl font-bold text-[#cee7ff] mt-4 mb-6">
|
||||||
|
Let's Transmit Your Vision
|
||||||
|
</h2>
|
||||||
|
<p className="text-[#a8cce8] text-lg">
|
||||||
|
Share your creative goals and project brief. Our team responds within 12 hours with strategic recommendations tailored to your brand.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<form
|
||||||
|
onSubmit={(e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
const formData = new FormData(e.currentTarget);
|
||||||
|
const data = {
|
||||||
|
name: formData.get('name'),
|
||||||
|
email: formData.get('email'),
|
||||||
|
project: formData.get('project'),
|
||||||
|
message: formData.get('message')
|
||||||
|
};
|
||||||
|
|
||||||
|
// Sheet Monkey API endpoint
|
||||||
|
fetch('https://api.sheetmonkey.io/form/YOUR_FORM_ID', {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify(data),
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json'
|
||||||
|
}
|
||||||
|
}).then(() => {
|
||||||
|
alert('Vision transmitted successfully!');
|
||||||
|
e.currentTarget.reset();
|
||||||
|
}).catch(() => {
|
||||||
|
alert('Error transmitting vision. Please try again.');
|
||||||
|
});
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="name"
|
||||||
|
placeholder="Your Name"
|
||||||
|
className="contact-input"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="email"
|
||||||
|
name="email"
|
||||||
|
placeholder="your@email.com"
|
||||||
|
className="contact-input"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<input
|
||||||
|
type="text"
|
||||||
|
name="project"
|
||||||
|
placeholder="Project Type"
|
||||||
|
className="contact-input"
|
||||||
|
required
|
||||||
|
/>
|
||||||
|
<textarea
|
||||||
|
name="message"
|
||||||
|
placeholder="Tell us about your vision and creative goals..."
|
||||||
|
className="contact-textarea"
|
||||||
|
required
|
||||||
|
></textarea>
|
||||||
|
<button type="submit" className="contact-submit">
|
||||||
|
Transmit Vision
|
||||||
|
</button>
|
||||||
|
<p className="text-[#a8cce8] text-xs text-center mt-6">
|
||||||
|
We respect your vision. Unsubscribe anytime. Your data is secured.
|
||||||
|
</p>
|
||||||
|
</form>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="footer" data-section="footer">
|
<div id="footer" data-section="footer">
|
||||||
@@ -219,4 +582,4 @@ export default function LandingPage() {
|
|||||||
</div>
|
</div>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -10,15 +10,15 @@
|
|||||||
--accent: #ffffff;
|
--accent: #ffffff;
|
||||||
--background-accent: #ffffff; */
|
--background-accent: #ffffff; */
|
||||||
|
|
||||||
--background: #0a0a0a;
|
--background: #000000;
|
||||||
--card: #1a1a1a;
|
--card: #0c0c0c;
|
||||||
--foreground: #ffffff;
|
--foreground: #ffffff;
|
||||||
--primary-cta: #e34400;
|
--primary-cta: #cee7ff;
|
||||||
--primary-cta-text: #ffffff;
|
--primary-cta-text: #ffffff;
|
||||||
--secondary-cta: #010101;
|
--secondary-cta: #000000;
|
||||||
--secondary-cta-text: #ffffff;
|
--secondary-cta-text: #ffffff;
|
||||||
--accent: #ff7b05;
|
--accent: #cee7ff;
|
||||||
--background-accent: #e34400;
|
--background-accent: #cee7ff;
|
||||||
|
|
||||||
/* text sizing - set by ThemeProvider */
|
/* text sizing - set by ThemeProvider */
|
||||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||||
|
|||||||
Reference in New Issue
Block a user