convert-next.js
This commit is contained in:
R-Bharathraj
125
src/app/contacts/page.tsx
Normal file
125
src/app/contacts/page.tsx
Normal file
@@ -0,0 +1,125 @@
|
||||
'use client';
|
||||
|
||||
import React from 'react';
|
||||
import GSAPAnimator from '@/components/GSAPAnimator';
|
||||
import dynamic from 'next/dynamic';
|
||||
|
||||
const MapSection = dynamic(() => import('@/components/MapSection'), { ssr: false });
|
||||
|
||||
export default function ContactsPage() {
|
||||
return (
|
||||
<main style={{ background: '#ffffff', minHeight: '100vh', overflowX: 'hidden' }}>
|
||||
<GSAPAnimator />
|
||||
|
||||
{/* ── HERO ── */}
|
||||
<section style={{
|
||||
padding: '120px 8% 100px', background: '#07070d',
|
||||
margin: '0 20px 20px', borderRadius: '0 0 24px 24px',
|
||||
position: 'relative', overflow: 'hidden',
|
||||
display: 'flex', alignItems: 'center',
|
||||
}}>
|
||||
{/* Grid texture */}
|
||||
<div style={{
|
||||
position: 'absolute', inset: 0, pointerEvents: 'none',
|
||||
backgroundImage: 'linear-gradient(rgba(244,190,40,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(244,190,40,0.025) 1px,transparent 1px)',
|
||||
backgroundSize: '60px 60px',
|
||||
}} />
|
||||
|
||||
<div style={{ position: 'relative', zIndex: 2, width: '100%', display: 'grid', gridTemplateColumns: '1fr auto', alignItems: 'center', gap: '6vw' }}>
|
||||
<div style={{ maxWidth: 680 }}>
|
||||
<div style={{
|
||||
fontSize: 11, fontWeight: 700, letterSpacing: '0.2em', textTransform: 'uppercase',
|
||||
color: '#f4be28', fontFamily: 'Manrope, sans-serif', marginBottom: 28,
|
||||
display: 'flex', alignItems: 'center', gap: 12,
|
||||
}}>
|
||||
<span style={{ width: 32, height: 1, background: '#f4be28', display: 'block' }} />Contact
|
||||
</div>
|
||||
<h1 data-gsap="heading" style={{
|
||||
fontSize: 'clamp(48px, 8vw, 120px)', fontWeight: 900,
|
||||
letterSpacing: '-0.05em', lineHeight: 0.9,
|
||||
color: '#fff', margin: '0 0 28px', fontFamily: 'Sora, sans-serif',
|
||||
}}>
|
||||
Let's build<br />
|
||||
<span style={{ color: '#f4be28' }}>something smart.</span>
|
||||
</h1>
|
||||
<p data-gsap="text" style={{
|
||||
fontSize: 'clamp(16px, 1.5vw, 20px)', lineHeight: 1.75,
|
||||
color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif',
|
||||
maxWidth: 540, margin: 0,
|
||||
}}>
|
||||
Tell us about your store and your goals. Our team will get back to you within one business day.
|
||||
</p>
|
||||
|
||||
{/* Quick contact chips */}
|
||||
<div style={{ display: 'flex', flexWrap: 'wrap', gap: 12, marginTop: 44 }}>
|
||||
{[
|
||||
{ label: 'loyalydigital@gmail.com', href: 'mailto:loyalydigital@gmail.com' },
|
||||
{ label: 'Coimbatore, TN', href: undefined },
|
||||
].map((c) => {
|
||||
const inner = (
|
||||
<span style={{
|
||||
display: 'inline-flex', alignItems: 'center', gap: 8,
|
||||
padding: '10px 18px', borderRadius: 100,
|
||||
background: 'rgba(255,255,255,0.05)', border: '1px solid rgba(255,255,255,0.1)',
|
||||
fontSize: 14, fontWeight: 600, color: 'rgba(255,255,255,0.7)',
|
||||
fontFamily: 'Manrope, sans-serif',
|
||||
}}>
|
||||
<span style={{ width: 6, height: 6, borderRadius: '50%', background: '#f4be28', display: 'block' }} />
|
||||
{c.label}
|
||||
</span>
|
||||
);
|
||||
return c.href
|
||||
? <a key={c.label} href={c.href} style={{ textDecoration: 'none' }}>{inner}</a>
|
||||
: <span key={c.label}>{inner}</span>;
|
||||
})}
|
||||
</div>
|
||||
</div>
|
||||
{/* Message preview widget */}
|
||||
<div className="pw-widget-col" style={{ flexShrink: 0, width: 320 }}>
|
||||
<div style={{
|
||||
borderRadius: 24, padding: '24px',
|
||||
background: 'linear-gradient(145deg,#0e0e13 0%,#16161d 100%)',
|
||||
border: '1px solid rgba(244,190,40,0.15)',
|
||||
boxShadow: '0 40px 100px rgba(0,0,0,0.6)',
|
||||
}}>
|
||||
{/* Header */}
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 18, paddingBottom: 16, borderBottom: '1px solid rgba(255,255,255,0.06)' }}>
|
||||
<div>
|
||||
<div style={{ fontSize: 13, fontWeight: 700, color: '#fff', fontFamily: 'Manrope, sans-serif' }}>New Message</div>
|
||||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.28)', fontFamily: 'Manrope, sans-serif', marginTop: 2 }}>loyalydigital@gmail.com</div>
|
||||
</div>
|
||||
<span style={{ fontSize: 10, color: '#4ade80', fontWeight: 700, background: 'rgba(74,222,128,0.1)', border: '1px solid rgba(74,222,128,0.28)', padding: '4px 10px', borderRadius: 100, fontFamily: 'Manrope, sans-serif' }}>● LIVE</span>
|
||||
</div>
|
||||
{/* Incoming message */}
|
||||
<div style={{ background: 'rgba(255,255,255,0.04)', borderRadius: 16, padding: '14px 16px', marginBottom: 12, border: '1px solid rgba(255,255,255,0.07)' }}>
|
||||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)', fontFamily: 'Manrope, sans-serif', marginBottom: 8 }}>From: A Retail Partner</div>
|
||||
<div style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.65 }}>"We'd love to explore how Loyaly.ai can drive footfall and loyalty for our chain of stores..."</div>
|
||||
</div>
|
||||
{/* Reply */}
|
||||
<div style={{ background: 'rgba(244,190,40,0.07)', borderRadius: 16, padding: '14px 16px', marginBottom: 20, border: '1px solid rgba(244,190,40,0.2)' }}>
|
||||
<div style={{ fontSize: 11, color: 'rgba(255,255,255,0.3)', fontFamily: 'Manrope, sans-serif', marginBottom: 8 }}>Loyaly.ai</div>
|
||||
<div style={{ fontSize: 13, color: 'rgba(255,255,255,0.68)', fontFamily: 'Manrope, sans-serif', lineHeight: 1.65 }}>We'll be in touch within one business day. Let's build something great together! ✦</div>
|
||||
</div>
|
||||
{/* Contact details */}
|
||||
{[
|
||||
{ icon: '📍', text: 'Coimbatore, Tamil Nadu' },
|
||||
{ icon: '✉️', text: 'loyalydigital@gmail.com' },
|
||||
{ icon: '⏱', text: 'Response within 24 hours' },
|
||||
].map((c, i) => (
|
||||
<div key={i} style={{ display: 'flex', alignItems: 'center', gap: 10, padding: '9px 0', borderTop: i > 0 ? '1px solid rgba(255,255,255,0.05)' : 'none' }}>
|
||||
<span style={{ fontSize: 14, width: 20, textAlign: 'center' }}>{c.icon}</span>
|
||||
<span style={{ fontSize: 12, color: 'rgba(255,255,255,0.42)', fontFamily: 'Manrope, sans-serif' }}>{c.text}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* ── MAP ── */}
|
||||
<MapSection />
|
||||
|
||||
{/* The Get in Touch form is rendered globally above the footer via layout.tsx */}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user