Merge version_2 into main #4
@@ -1,58 +1,23 @@
|
||||
import type { Metadata } from "next";
|
||||
import { Halant } from "next/font/google";
|
||||
import { Inter } from "next/font/google";
|
||||
import { Figtree } from "next/font/google";
|
||||
import "./styles/variables.css";
|
||||
import "./globals.css";
|
||||
import { ServiceWrapper } from "@/components/ServiceWrapper";
|
||||
import Tag from "@/tag/Tag";
|
||||
|
||||
const halant = Halant({
|
||||
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"],
|
||||
});
|
||||
const inter = Inter({ subsets: ["latin"] });
|
||||
|
||||
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"),
|
||||
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,
|
||||
},
|
||||
};
|
||||
title: "Aayush Visuals - Premium Creative Studio", description: "Precision Video Editing. Viral Thumbnail Strategy. Elite Branding."};
|
||||
|
||||
export default function RootLayout({
|
||||
children,
|
||||
}: Readonly<{
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
}) {
|
||||
return (
|
||||
<html lang="en" suppressHydrationWarning>
|
||||
<ServiceWrapper>
|
||||
<body
|
||||
className={`${halant.variable} ${inter.variable} ${figtree.variable} antialiased`}
|
||||
>
|
||||
<Tag />
|
||||
{children}
|
||||
|
||||
<html lang="en">
|
||||
<body className={inter.className}>
|
||||
{children}
|
||||
|
||||
<script
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: `
|
||||
@@ -1420,7 +1385,6 @@ export default function RootLayout({
|
||||
}}
|
||||
/>
|
||||
</body>
|
||||
</ServiceWrapper>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
|
||||
500
src/app/page.tsx
500
src/app/page.tsx
@@ -10,6 +10,9 @@ import TestimonialCardOne from '@/components/sections/testimonial/TestimonialCar
|
||||
import ContactCenter from '@/components/sections/contact/ContactCenter';
|
||||
import FooterMedia from '@/components/sections/footer/FooterMedia';
|
||||
import { Sparkles, Zap, Rocket, Eye, Clock, Award, TrendingUp, Quote, Send } from 'lucide-react';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const GyroTiltComponent = dynamic(() => import('@/components/custom/GyroTilt'), { ssr: false });
|
||||
|
||||
export default function LandingPage() {
|
||||
return (
|
||||
@@ -19,11 +22,11 @@ export default function LandingPage() {
|
||||
borderRadius="soft"
|
||||
contentWidth="small"
|
||||
sizing="medium"
|
||||
background="noise"
|
||||
cardStyle="layered-gradient"
|
||||
primaryButtonStyle="diagonal-gradient"
|
||||
background="none"
|
||||
cardStyle="glass-elevated"
|
||||
primaryButtonStyle="gradient"
|
||||
secondaryButtonStyle="glass"
|
||||
headingFontWeight="light"
|
||||
headingFontWeight="bold"
|
||||
>
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
@@ -40,57 +43,300 @@ export default function LandingPage() {
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<HeroLogo
|
||||
logoText="AAYUSH VISUALS"
|
||||
description="Precision Video Editing. Viral Thumbnail Strategy. Elite Branding."
|
||||
buttons={[
|
||||
{ text: "View Portfolio", href: "portfolio" },
|
||||
{ text: "Contact Now", href: "contact" }
|
||||
]}
|
||||
imageSrc="https://webuild-dev.s3.eu-north-1.amazonaws.com/users/user_3AW2GWwgaNIGNQpBrm2UP4gSiXd/a-floating-minimalist-3d-glass-textured--1772694030676-9e5a284a.png?_wi=1"
|
||||
imageAlt="Aayush Visuals - Premium Creative Studio"
|
||||
showDimOverlay={true}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
<div className="min-h-screen w-full bg-black relative overflow-hidden flex items-center justify-center">
|
||||
<style>{`
|
||||
@keyframes gyroSpin {
|
||||
from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
|
||||
to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); }
|
||||
}
|
||||
@keyframes floatParticle {
|
||||
0%, 100% { transform: translateY(0px) translateX(0px) scale(1); opacity: 1; }
|
||||
50% { transform: translateY(-20px) translateX(10px) scale(0.8); opacity: 0.6; }
|
||||
}
|
||||
.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 id="services" data-section="services">
|
||||
<FeatureCardTwentyThree
|
||||
title="Our Services"
|
||||
description="Multidisciplinary creative excellence engineered for modern creators and ambitious brands."
|
||||
tag="What We Do"
|
||||
tagIcon={Sparkles}
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
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", imageAlt: "Video Editing Service"
|
||||
},
|
||||
{
|
||||
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", imageAlt: "Thumbnail Design Service"
|
||||
},
|
||||
{
|
||||
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", imageAlt: "Content Writing Service"
|
||||
},
|
||||
{
|
||||
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", imageAlt: "Social Media Creatives"
|
||||
},
|
||||
{
|
||||
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"
|
||||
},
|
||||
{
|
||||
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", imageAlt: "Portfolio Design Service"
|
||||
}
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
/>
|
||||
<div id="services" data-section="services" className="min-h-screen bg-black relative overflow-hidden py-20">
|
||||
<style>{`
|
||||
@keyframes liquidGlow {
|
||||
0%, 100% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
}
|
||||
.bento-card {
|
||||
background: linear-gradient(135deg, rgba(206, 231, 255, 0.08) 0%, rgba(206, 231, 255, 0.02) 100%);
|
||||
backdrop-filter: blur(30px);
|
||||
border: 1px solid rgba(206, 231, 255, 0.2);
|
||||
border-radius: 24px;
|
||||
padding: 2rem;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
height: 100%;
|
||||
}
|
||||
.bento-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: radial-gradient(circle at 0% 0%, rgba(206, 231, 255, 0.1), transparent 50%);
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
.bento-card:hover {
|
||||
transform: translateY(-8px) scale(1.02);
|
||||
border-color: rgba(206, 231, 255, 0.4);
|
||||
box-shadow: 0 0 60px rgba(206, 231, 255, 0.15), inset 0 0 40px rgba(206, 231, 255, 0.05);
|
||||
}
|
||||
.bento-card:hover::before {
|
||||
opacity: 1;
|
||||
}
|
||||
.bento-image {
|
||||
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 id="about" data-section="about">
|
||||
@@ -168,19 +414,139 @@ export default function LandingPage() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="contact" data-section="contact">
|
||||
<ContactCenter
|
||||
tag="Ready to Elevate?"
|
||||
tagIcon={Send}
|
||||
tagAnimation="slide-up"
|
||||
title="Let's Transmit Your Vision"
|
||||
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" }}
|
||||
useInvertedBackground={false}
|
||||
inputPlaceholder="your@email.com"
|
||||
buttonText="Transmit Vision"
|
||||
termsText="We respect your vision. Unsubscribe anytime. Your data is secured."
|
||||
/>
|
||||
<div id="contact" data-section="contact" className="min-h-screen bg-black relative overflow-hidden py-20">
|
||||
<style>{`
|
||||
.contact-form-container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
padding: 0 2rem;
|
||||
}
|
||||
.contact-input {
|
||||
width: 100%;
|
||||
background: transparent;
|
||||
border: none;
|
||||
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 id="footer" data-section="footer">
|
||||
@@ -219,4 +585,4 @@ export default function LandingPage() {
|
||||
</div>
|
||||
</ThemeProvider>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
--accent: #ffffff;
|
||||
--background-accent: #ffffff; */
|
||||
|
||||
--background: #0a0a0a;
|
||||
--card: #1a1a1a;
|
||||
--background: #000000;
|
||||
--card: #0c0c0c;
|
||||
--foreground: #ffffff;
|
||||
--primary-cta: #e34400;
|
||||
--primary-cta: #cee7ff;
|
||||
--primary-cta-text: #ffffff;
|
||||
--secondary-cta: #010101;
|
||||
--secondary-cta: #000000;
|
||||
--secondary-cta-text: #ffffff;
|
||||
--accent: #ff7b05;
|
||||
--background-accent: #e34400;
|
||||
--accent: #cee7ff;
|
||||
--background-accent: #cee7ff;
|
||||
|
||||
/* text sizing - set by ThemeProvider */
|
||||
/* --text-2xs: clamp(0.465rem, 0.62vw, 0.62rem);
|
||||
|
||||
Reference in New Issue
Block a user