+ + {/* Background Watermark Number */} +

+ {service.number} +

+ +

+ {/* Title */} +

+ {service.title} +

+ + {/* Bold Statement with left border/line */} +

+ {service.boldStatement} +

+ + {/* Description */} +

+ {service.description} +

+ + {/* Capabilities bullet list */} +

+ » + {capability} +

+ + {/* CTA link at bottom */} +

+ e.target.style.color = '#ffaa00'} + onMouseLeave={(e) => e.target.style.color = '#ffffff'} + > + {service.cta} → + +

+ + ); +} + +export default function App({ previewMode = false }) { + const { content, loading } = useContent(); + const services = content.services?.items ?? []; + const insights = content.insights?.items ?? []; + const metrics = content.metrics ?? []; + const hero = content.hero ?? {}; + const about = content.about ?? {}; + const partners = content.partners ?? { logos: [] }; + const certifications = content.certifications ?? { items: [] }; + const whyUs = content.whyUs ?? { cards: [], images: [] }; + const products = content.products ?? { items: [] }; + const footer = content.footer ?? { cta: {}, quickLinks: [], productLinks: [], social: [], legal: [] }; + + // Tabs for Hero Section + const [activeHeroTab, setActiveHeroTab] = useState('agile'); + // Carousel slide for Products + const [activeProductIndex, setActiveProductIndex] = useState(0); + // Active detail index in Services Section + const [activeServiceIndex, setActiveServiceIndex] = useState(0); + const [isMobile, setIsMobile] = useState(false); + const [isCareersOpen, setIsCareersOpen] = useState(false); + const [activeSection, setActiveSection] = useState('home'); + const [hoveredItem, setHoveredItem] = useState(null); + const [showCareersAcknowledgement, setShowCareersAcknowledgement] = useState(false); + const [isStrategyOpen, setIsStrategyOpen] = useState(false); + const [showStrategyAcknowledgement, setShowStrategyAcknowledgement] = useState(false); + const [mobileMenuOpen, setMobileMenuOpen] = useState(false); + + // Careers Form Fields + const [careersName, setCareersName] = useState(''); + const [careersEmail, setCareersEmail] = useState(''); + const [careersPhone, setCareersPhone] = useState(''); + const [careersFile, setCareersFile] = useState(null); + + // Strategy Form Fields + const [strategyName, setStrategyName] = useState(''); + const [strategyEmail, setStrategyEmail] = useState(''); + const [strategyMobile, setStrategyMobile] = useState(''); + const [strategyDesignation, setStrategyDesignation] = useState(''); + const [strategyDateTime, setStrategyDateTime] = useState(''); + const [strategyInterests, setStrategyInterests] = useState({ + 'AI & Analytics': false, + 'SAP Services': false, + 'XR Platforms': false, + 'Smart Factory': false, + 'Cloud Engineering': false, + 'Enterprise Software': false, + }); + useEffect(() => { + const checkMobile = () => { + setIsMobile(window.innerWidth < 1024); + }; + checkMobile(); + window.addEventListener('resize', checkMobile); + return () => window.removeEventListener('resize', checkMobile); + }, []); + + const [flippingLogo, setFlippingLogo] = useState(null); + + useEffect(() => { + const triggerRandomFlip = () => { + const logoNumbers = [27, 28, 30, 31, 32, 33, 34, 35, 36]; + const randomNum = logoNumbers[Math.floor(Math.random() * logoNumbers.length)]; + setFlippingLogo(randomNum); + + // Clear flip after animation completes + setTimeout(() => { + setFlippingLogo(null); + }, 1000); + }; + + // Trigger random flip every 3.5 seconds + const interval = setInterval(triggerRandomFlip, 3500); + return () => clearInterval(interval); + }, []); + + useEffect(() => { + if (previewMode) return; + + const handleScroll = () => { + const sections = ['home', 'aboutus', 'services', 'whyus', 'products', 'insights', 'contactus']; + const scrollPosition = window.scrollY + 120; // 120px offset for header height and visual center + + // Special case: if at the very bottom of the page, contactus is active + if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 50) { + setActiveSection('contactus'); + return; + } + + for (const sectionId of sections) { + const el = document.getElementById(sectionId); + if (el) { + const top = el.offsetTop; + const height = el.offsetHeight; + if (scrollPosition >= top && scrollPosition < top + height) { + setActiveSection(sectionId); + break; + } + } + } + }; + + window.addEventListener('scroll', handleScroll); + handleScroll(); // run once on mount + return () => window.removeEventListener('scroll', handleScroll); + }, [previewMode]); + + const getActiveNavItem = () => { + switch (activeSection) { + case 'home': + return 'Home'; + case 'aboutus': + case 'services': + case 'whyus': + return 'About Us'; + case 'products': + case 'insights': + return 'Products'; + case 'contactus': + return 'Contact Us'; + default: + return 'Home'; + } + }; + + const servicesScrollRef = useRef(null); + + const scrollServices = (direction) => { + if (servicesScrollRef.current) { + const scrollAmount = isMobile ? 310 : 444; // card width + gap + servicesScrollRef.current.scrollBy({ + left: direction === 'left' ? -scrollAmount : scrollAmount, + behavior: 'smooth' + }); + } + }; + + // Carousel for Insights + const [insightIndex, setInsightIndex] = useState(0); + const blogCarouselRef = useRef(null); + + const scrollBlogCarousel = (dir) => { + if (blogCarouselRef.current) { + const cardWidth = (isMobile ? window.innerWidth * 0.72 : 340) + 24; + blogCarouselRef.current.scrollBy({ left: dir * cardWidth, behavior: 'smooth' }); + } + }; + + const sectionX = isMobile ? '1.25rem' : '8%'; + const navItems = ['Home', 'About Us', 'Products', 'Careers', 'Contact Us']; + const NAV_OFFSET = isMobile ? 72 : 88; + + const scrollToSection = (sectionId) => { + if (sectionId === 'contactus') { + const footer = document.getElementById('contactus'); + if (footer) { + const top = footer.getBoundingClientRect().top + window.scrollY - NAV_OFFSET; + window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' }); + } else { + window.scrollTo({ top: document.documentElement.scrollHeight, behavior: 'smooth' }); + } + setActiveSection('contactus'); + return; + } + + const el = document.getElementById(sectionId); + if (!el) return; + const top = el.getBoundingClientRect().top + window.scrollY - NAV_OFFSET; + window.scrollTo({ top: Math.max(0, top), behavior: 'smooth' }); + setActiveSection(sectionId); + }; + + const handleNavClick = (item) => { + setMobileMenuOpen(false); + if (item === 'Careers') { + setIsCareersOpen(true); + return; + } + const sectionMap = { + Home: 'home', + 'About Us': 'aboutus', + Products: 'products', + 'Contact Us': 'contactus', + }; + const id = sectionMap[item]; + if (!id) return; + setTimeout(() => scrollToSection(id), isMobile ? 150 : 0); + }; + + useEffect(() => { + document.body.style.overflow = mobileMenuOpen ? 'hidden' : ''; + return () => { document.body.style.overflow = ''; }; + }, [mobileMenuOpen]); + + const heroTabs = [ + { id: 'agile', label: 'Agile Dev' }, + { id: 'fullstack', label: 'Full-Stack Tech' }, + { id: 'ai', label: 'AI & Analytics' }, + { id: 'devops', label: 'DevOps' } + ]; + + // Dummy contents for Hero tabs to make it feel alive + const heroTabContent = { + agile: { title: 'Rapid Iterative Delivery', desc: 'Accelerating release cycles through agile management and continuous deployment pipelines.' }, + fullstack: { title: 'Modern Core Architectures', desc: 'Scalable frontend, backend, and database infrastructures designed for ultimate reliability.' }, + ai: { title: 'Intelligent Automation', desc: 'Harnessing ML and LLM integrations to optimize workflows and drive business intelligence.' }, + devops: { title: 'Automated Operations', desc: 'Secure cloud hosting, zero-downtime deployments, and real-time environment monitoring.' } + }; + + const clients = [ + { name: 'TVS', logo: 'TVS' }, + { name: 'Hero', logo: 'Hero' }, + { name: 'V-Guard', logo: 'V-Guard' }, + { name: 'Muthoot', logo: 'Muthoot' }, + { name: 'MRF', logo: 'MRF' }, + { name: 'HDFC', logo: 'HDFC' } + ]; + + const whyChooseUs = [ + { + title: 'Innovation Driven', + desc: 'Integrating state-of-the-art technologies and custom automation architectures into your core workflows to future-proof business value.', + icon: + }, + { + title: 'Industry Expertise', + desc: 'Deep industry knowledge spanning insurance, fintech, operations, logistics, and highly regulated enterprise application suites.', + icon: + }, + { + title: 'Outcome Focused', + desc: 'Committed to delivering measurable business impact, reduced infrastructure overhead, and highly optimized operational metrics.', + icon: + }, + { + title: 'Customer Centric', + desc: 'Collaborating hand-in-hand to build solutions tailored specifically to your unique workflow demands, users, and scaling plans.', + icon: + } + ]; + + if (loading) { + return ( +

+ Loading... +

+ ); + } + + return ( +

+ + {/* Main Content Wrapper with solid background and higher z-index */} +

+ + {/* Background Glows */} +

+ + {/* Navigation Bar */} +

+ + {!isMobile && ( +

+ {navItems.map((item) => { + const isLightSection = activeSection === 'products'; + const activeNavItem = getActiveNavItem(); + const isActive = activeNavItem === item; + const isHovered = hoveredItem === item; + + let linkColor; + if (isLightSection) { + linkColor = (isActive || isHovered) ? '#b45309' : '#1e293b'; + } else { + linkColor = (isActive || isHovered) ? '#ffaa00' : '#a0aec0'; + } + + return ( + { + e.preventDefault(); + handleNavClick(item); + }} + style={{ + color: linkColor, + textDecoration: 'none', + fontSize: '0.95rem', + fontWeight: 500, + transition: 'all 0.3s ease', + cursor: 'pointer' + }} + onMouseEnter={() => setHoveredItem(item)} + onMouseLeave={() => setHoveredItem(null)} + > + {item} + + ); + })} +

+ +

+ )} + + {isMobile && ( + + )} +

+ + {isMobile && mobileMenuOpen && ( +

setMobileMenuOpen(false)} + style={{ + position: 'fixed', + inset: 0, + background: 'rgba(2, 7, 16, 0.75)', + backdropFilter: 'blur(6px)', + zIndex: 60, + display: 'flex', + justifyContent: 'flex-end', + }} + > +

e.stopPropagation()} + style={{ + width: 'min(85vw, 320px)', + height: '100%', + background: '#0a1628', + borderLeft: '1px solid rgba(255,255,255,0.08)', + padding: '1.5rem 1.25rem', + display: 'flex', + flexDirection: 'column', + gap: '0.25rem', + }} + > + {navItems.map((item) => ( + + ))} + +

+ )} + + {/* Hero Section */} +

+ {/* Background Video */} +

+ + + + +

+ + {hero.badge} + +

+ +

+ {hero.headline} + {hero.subheadline?.includes('Technology Partner') ? ( + <>{hero.subheadline.replace('Technology Partner', '').trim()} Technology Partner + ) : hero.subheadline} +

+ +

+ + + {/* Metrics Section */} +

+ {/* Statistics Panel */} + +

+ {/* Metrics from CMS */} + {metrics.map((metric, idx) => ( + + {idx > 0 && !isMobile &&

} +

+ {[, , , ][idx % 4]} +

+ {metric.value} + {metric.label} +

+ + ))} +

+ +

+ + {/* Frost & Sullivan Alliance Section */} +

+ + {/* Subtle center spotlight lighting effect behind badge */} +

+ +

+ {about.heading} +

+ + {/* Frost & Sullivan Badge container */} +

+ +

+ + + {/* Redesigned Trusted Brands Section */} +

+ {/* Subtle grid background */} +

+ + {/* Ambient Glows */} +

+ + + {isMobile ? ( + /* Mobile Layout: Clean vertical hierarchy */ +

+ {partners.heading} +

+ {partners.subheading} +

+ {partners.body} +

+ + {/* Globe Visual */} +

+ + {/* Grid of Logos */} +

+ {partners.logos.map((logo, idx) => ( +

+ ))} +

+ ) : ( + /* Desktop Layout: Orbital Globe Layout as per reference image */ +

+ + {/* Globe in background - Increased Size & Brightness */} + Globe Map

+ + {/* Center Text Panel */} +

+ {partners.heading} +

+ + {partners.subheading} + +

+ {partners.body} +

+ + {/* orbital logos with smooth continuous motion in horizontally elongated oval paths - No Skewing */} + {/* Outer Orbit - Increased size further to radiusX=520, radiusY=320 */} + + + + + + + {/* Inner Orbit - Adjusted size to radiusX=360, radiusY=225 */} + + + + + + +

+ )} + +

+ + + {/* Certifications Section */} +

+ +

+ {certifications.heading} +

+ + +

+ {certifications.items.map((cert, idx) => ( + +

+ + ))} +

+ {/* Services Section */} +

+ {/* Background Ambient Glows */} +

+ +

+ {/* Left Column - Intro Panel */} + +

+ + {content.services.eyebrow} + +

+ {content.services.title} +

+ {content.services.intro} +

+ + {/* Navigation buttons at the bottom */} +

+ + +

+ + + {/* Right Column - Horizontal scroll container */} +

+ +

+ {services.map((service, index) => ( + + ))} +

+ +

+ + {/* Why Cavin Infotech Section */} + {/* Why Cavin Infotech Section */} +

+ + {whyUs.eyebrow} +

{whyUs.title}

+ +

+ + {isMobile ? ( +

+ {/* Innovation Driven */} + +

Innovation Driven

+ We deliver future-ready solutions powered by Gen AI, Agentic AI, automation, IoT, and emerging tech that keep you ahead of the curve. +

+ + + {/* Industry Expertise */} + +

Industry Expertise

+ Deep domain knowledge across manufacturing, enterprise tech, smart manufacturing, and digital operations built from years of real-world implementation. +

+ + + {/* Secure & Reliable */} + +

Secure & Reliable

+ Every solution is built on globally recognized standards with uncompromising focus on security, compliance, and operational excellence. +

+ + + {/* Outcome Focused */} + +

Outcome Focused

+ We don't just implement technology we design every solution to reduce complexity, boost efficiency, and deliver clear, measurable business impact. +

+ +

+ ) : ( +

+ {/* Innovation Driven Card (Col 1, Row 1) */} + +

+ {/* Concentric rings */} +

+ +

+ Innovation Driven +

+ We deliver future-ready solutions powered by Gen AI, Agentic AI, automation, IoT, and emerging tech that keep you ahead of the curve. +

+ + + {/* Collaboration Image (Col 1, Row 2) */} + +

+ + + {/* Industry Expertise Card (Col 2 & 3, Row 1) */} + +

+ +

+ Industry Expertise +

+ Deep domain knowledge across manufacturing, enterprise tech, smart manufacturing, and digital operations built from years of real-world implementation. +

+ + + {/* Secure & Reliable Card (Col 2, Row 2) */} + +

+ +

+ Secure & Reliable +

+ Every solution is built on globally recognized standards with uncompromising focus on security, compliance, and operational excellence. +

+ + + {/* Conference Room Image (Col 3, Row 2) */} + +

+ + + {/* Outcome Focused Tall Card (Col 4, Row 1/2) */} + +

+ Outcome Focused +

+ We don't just implement technology we design every solution to reduce complexity, boost efficiency, and deliver clear, measurable business impact. +

{/* Flex spacer to push text up and reveal team background */} +

+ +

+ )} +

+ + {/* Featured Gallery Section */} + + + + + {/* Products Suite */} +

+ {/* Header */} + +

+ + {products.eyebrow} + +

+ {products.title} +

+ {products.subtitle} +

+ + + {/* Product Cards Grid */} +

+ {products.items.map((item, index) => ( + + ))} +

+ + {/* Insights Section */} +

+ {/* Header */} + +

+ {content.insights.title} +

+ {content.insights.subtitle} +

+ + {/* Nav Arrows */} +

+ + +

+ + + {/* Carousel Container */} + +

+ {insights.map((insight, idx) => ( + +

{ + e.currentTarget.style.borderColor = 'rgba(255,170,0,0.35)'; + e.currentTarget.style.boxShadow = '0 16px 48px rgba(255,170,0,0.12)'; + e.currentTarget.style.transform = 'translateY(-5px)'; + }} + onMouseLeave={e => { + e.currentTarget.style.borderColor = 'rgba(255,255,255,0.08)'; + e.currentTarget.style.boxShadow = '0 4px 30px rgba(0,0,0,0.5)'; + e.currentTarget.style.transform = 'translateY(0)'; + }} + > + {/* Full-bleed image */} +

+ + {/* Subtle top gradient so image top isn't too harsh */} +

+ + {/* Frosted glass panel — pinned to bottom */} +

+ {/* Category */} + + {insight.category} + + + {/* Title */} +

+ {insight.title} +

+ + {/* Read Blog */} +

+ Read Blog +

+ + ))} +

+ +

+ + {/* Brand Logo Divider Section */} +

{/* Close Content Wrapper */} + + + + {/* Careers Modal Popup */} + {isCareersOpen && !previewMode && ( +

+ + {/* Close Button */} + + + {!showCareersAcknowledgement ? ( +

{ + e.preventDefault(); + try { + const serviceId = import.meta.env.VITE_EMAILJS_SERVICE_ID || 'vishva_cavintest'; + const publicKey = import.meta.env.VITE_EMAILJS_PUBLIC_KEY || 'YOUR_EMAILJS_PUBLIC_KEY'; + const templateId = import.meta.env.VITE_EMAILJS_TEMPLATE_ID_CAREERS || 'YOUR_EMAILJS_TEMPLATE_ID_CAREERS'; + + if (publicKey === 'YOUR_EMAILJS_PUBLIC_KEY' || templateId === 'YOUR_EMAILJS_TEMPLATE_ID_CAREERS') { + console.warn('EmailJS Credentials not configured in .env. Please configure VITE_EMAILJS_PUBLIC_KEY and VITE_EMAILJS_TEMPLATE_ID_CAREERS'); + alert('EmailJS credentials are not configured in your .env file.'); + return; + } + + const res = await fetch('https://api.emailjs.com/api/v1.0/email/send', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + service_id: serviceId, + template_id: templateId, + user_id: publicKey, + template_params: { + type: 'careers', + name: careersName, + email: careersEmail, + phone: careersPhone, + mobile: '', + designation: 'N/A', + dateTime: 'N/A', + interests: 'N/A', + resumeName: careersFile ? careersFile.name : 'None', + from_name: careersName, + reply_to: careersEmail, + message: `New Careers Application:\nName: ${careersName}\nEmail: ${careersEmail}\nPhone: ${careersPhone}\nResume File: ${careersFile ? careersFile.name : 'None'}` + } + }) + }); + + if (!res.ok) { + const errMsg = await res.text(); + console.error('EmailJS Error:', errMsg); + alert(`Failed to send email: ${errMsg}`); + return; + } + + setShowCareersAcknowledgement(true); + } catch (err) { + console.error('Error sending application:', err); + alert(`Error sending application: ${err.message}`); + } + }}> +

+ Join Our Team +

+ Submit your details and resume below. Our recruitment team will review your application. +

+ +

+ {/* Name Input */} +

+ Full Name + setCareersName(e.target.value)} + placeholder="John Doe" + style={{ + background: 'rgba(255, 255, 255, 0.03)', + border: '1px solid rgba(255, 255, 255, 0.08)', + borderRadius: '8px', + padding: '0.75rem 1rem', + color: '#ffffff', + fontSize: '0.9rem', + outline: 'none', + transition: 'all 0.3s ease', + }} + onFocus={e => { + e.currentTarget.style.borderColor = '#ffaa00'; + e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; + }} + onBlur={e => { + e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; + e.currentTarget.style.boxShadow = 'none'; + }} + /> +

+ + {/* Email Input */} +

+ Email Address + setCareersEmail(e.target.value)} + placeholder="john@example.com" + style={{ + background: 'rgba(255, 255, 255, 0.03)', + border: '1px solid rgba(255, 255, 255, 0.08)', + borderRadius: '8px', + padding: '0.75rem 1rem', + color: '#ffffff', + fontSize: '0.9rem', + outline: 'none', + transition: 'all 0.3s ease', + }} + onFocus={e => { + e.currentTarget.style.borderColor = '#ffaa00'; + e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; + }} + onBlur={e => { + e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; + e.currentTarget.style.boxShadow = 'none'; + }} + /> +

+ + {/* Phone Input */} +

+ Phone Number + setCareersPhone(e.target.value)} + placeholder="+91 00000 00000" + style={{ + background: 'rgba(255, 255, 255, 0.03)', + border: '1px solid rgba(255, 255, 255, 0.08)', + borderRadius: '8px', + padding: '0.75rem 1rem', + color: '#ffffff', + fontSize: '0.9rem', + outline: 'none', + transition: 'all 0.3s ease', + }} + onFocus={e => { + e.currentTarget.style.borderColor = '#ffaa00'; + e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; + }} + onBlur={e => { + e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; + e.currentTarget.style.boxShadow = 'none'; + }} + /> +

+ + {/* File Attachment Input */} +

+ Resume / CV +

{ + e.currentTarget.style.borderColor = '#ffaa00'; + e.currentTarget.style.background = 'rgba(255, 170, 0, 0.05)'; + }} + onMouseLeave={e => { + e.currentTarget.style.borderColor = 'rgba(255, 170, 0, 0.3)'; + e.currentTarget.style.background = 'rgba(255, 170, 0, 0.02)'; + }} + > + { + const file = e.target.files[0]; + setCareersFile(file); + const fileName = file?.name; + const labelEl = document.getElementById('file-upload-label'); + if (labelEl && fileName) { + labelEl.textContent = fileName; + } + }} + /> + + Click to upload your Resume (.pdf, .doc, .docx) + +

+ + {/* Submit Button */} + +

+ ) : ( + /* Acknowledgement Panel */ +

+ +

+ Application Received! +

+ Thank you for applying to Cavin Infotech. We have received your resume and details successfully. Our recruitment team will review your application and contact you if your qualifications match our current needs. +

+ +

+ )} +

+ )} + + {/* Book a Strategy Call Modal Popup */} + {isStrategyOpen && !previewMode && ( +

+ + {/* Close Button */} + + + {!showStrategyAcknowledgement ? ( +

{ + e.preventDefault(); + const selectedInterests = Object.keys(strategyInterests).filter(key => strategyInterests[key]).join(', '); + try { + const serviceId = import.meta.env.VITE_EMAILJS_SERVICE_ID || 'vishva_cavintest'; + const publicKey = import.meta.env.VITE_EMAILJS_PUBLIC_KEY || 'YOUR_EMAILJS_PUBLIC_KEY'; + const templateId = import.meta.env.VITE_EMAILJS_TEMPLATE_ID_STRATEGY || 'YOUR_EMAILJS_TEMPLATE_ID_STRATEGY'; + + if (publicKey === 'YOUR_EMAILJS_PUBLIC_KEY' || templateId === 'YOUR_EMAILJS_TEMPLATE_ID_STRATEGY') { + console.warn('EmailJS Credentials not configured in .env. Please configure VITE_EMAILJS_PUBLIC_KEY and VITE_EMAILJS_TEMPLATE_ID_STRATEGY'); + alert('EmailJS credentials are not configured in your .env file.'); + return; + } + + const res = await fetch('https://api.emailjs.com/api/v1.0/email/send', { + method: 'POST', + headers: { 'Content-Type': 'application/json' }, + body: JSON.stringify({ + service_id: serviceId, + template_id: templateId, + user_id: publicKey, + template_params: { + type: 'strategy', + name: strategyName, + email: strategyEmail, + phone: strategyMobile, + mobile: strategyMobile, + designation: strategyDesignation, + dateTime: strategyDateTime, + interests: selectedInterests || 'None', + resumeName: 'None', + from_name: strategyName, + reply_to: strategyEmail, + message: `New Strategy Session Booking:\nName: ${strategyName}\nEmail: ${strategyEmail}\nMobile: ${strategyMobile}\nDesignation: ${strategyDesignation}\nPreferred Date & Time: ${strategyDateTime}\nAreas of Interest: ${selectedInterests || 'None'}` + } + }) + }); + + if (!res.ok) { + const errMsg = await res.text(); + console.error('EmailJS Error:', errMsg); + alert(`Failed to send email: ${errMsg}`); + return; + } + + setShowStrategyAcknowledgement(true); + } catch (err) { + console.error('Error scheduling strategy session:', err); + alert(`Error scheduling strategy session: ${err.message}`); + } + }}> +

+ Book a Strategy Call +

+ Fill in the details below to schedule a session with our experts. +

+ +

+ {/* Name Input */} +

+ Full Name + setStrategyName(e.target.value)} + placeholder="John Doe" + style={{ + background: 'rgba(255, 255, 255, 0.03)', + border: '1px solid rgba(255, 255, 255, 0.08)', + borderRadius: '8px', + padding: '0.7rem 0.9rem', + color: '#ffffff', + fontSize: '0.88rem', + outline: 'none', + transition: 'all 0.3s ease', + }} + onFocus={e => { + e.currentTarget.style.borderColor = '#ffaa00'; + e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; + }} + onBlur={e => { + e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; + e.currentTarget.style.boxShadow = 'none'; + }} + /> +

+ + {/* Email Input */} +

+ Email Address + setStrategyEmail(e.target.value)} + placeholder="john@example.com" + style={{ + background: 'rgba(255, 255, 255, 0.03)', + border: '1px solid rgba(255, 255, 255, 0.08)', + borderRadius: '8px', + padding: '0.7rem 0.9rem', + color: '#ffffff', + fontSize: '0.88rem', + outline: 'none', + transition: 'all 0.3s ease', + }} + onFocus={e => { + e.currentTarget.style.borderColor = '#ffaa00'; + e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; + }} + onBlur={e => { + e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; + e.currentTarget.style.boxShadow = 'none'; + }} + /> +

+ + {/* Mobile Input */} +

+ Mobile Number + setStrategyMobile(e.target.value)} + placeholder="+91 00000 00000" + style={{ + background: 'rgba(255, 255, 255, 0.03)', + border: '1px solid rgba(255, 255, 255, 0.08)', + borderRadius: '8px', + padding: '0.7rem 0.9rem', + color: '#ffffff', + fontSize: '0.88rem', + outline: 'none', + transition: 'all 0.3s ease', + }} + onFocus={e => { + e.currentTarget.style.borderColor = '#ffaa00'; + e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; + }} + onBlur={e => { + e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; + e.currentTarget.style.boxShadow = 'none'; + }} + /> +

+ + {/* Designation Input */} +

+ Designation + setStrategyDesignation(e.target.value)} + placeholder="e.g. Chief Technology Officer" + style={{ + background: 'rgba(255, 255, 255, 0.03)', + border: '1px solid rgba(255, 255, 255, 0.08)', + borderRadius: '8px', + padding: '0.7rem 0.9rem', + color: '#ffffff', + fontSize: '0.88rem', + outline: 'none', + transition: 'all 0.3s ease', + }} + onFocus={e => { + e.currentTarget.style.borderColor = '#ffaa00'; + e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; + }} + onBlur={e => { + e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; + e.currentTarget.style.boxShadow = 'none'; + }} + /> +

+ + {/* Preferred Date & Time Input */} +

+ Preferred Date & Time + setStrategyDateTime(e.target.value)} + style={{ + background: 'rgba(255, 255, 255, 0.03)', + border: '1px solid rgba(255, 255, 255, 0.08)', + borderRadius: '8px', + padding: '0.7rem 0.9rem', + color: '#ffffff', + fontSize: '0.88rem', + outline: 'none', + transition: 'all 0.3s ease', + }} + onFocus={e => { + e.currentTarget.style.borderColor = '#ffaa00'; + e.currentTarget.style.boxShadow = '0 0 10px rgba(255, 170, 0, 0.15)'; + }} + onBlur={e => { + e.currentTarget.style.borderColor = 'rgba(255, 255, 255, 0.08)'; + e.currentTarget.style.boxShadow = 'none'; + }} + /> +

+ + {/* Areas of Interest Checkboxes */} +

+ Areas of Interest +

+ {[ + 'AI & Analytics', + 'SAP Services', + 'XR Platforms', + 'Smart Factory', + 'Cloud Engineering', + 'Enterprise Software' + ].map((interest) => ( + + setStrategyInterests(prev => ({ ...prev, [interest]: e.target.checked }))} + style={{ + accentColor: '#ffaa00', + cursor: 'pointer', + width: '16px', + height: '16px', + }} + /> + {interest} + + ))} +

+ + {/* Submit Button */} + +

+ ) : ( + /* Acknowledgement Panel */ +

+ +

+ Strategy Session Scheduled! +

+ Thank you for booking a Strategy Call. We have successfully received your information and areas of interest. A technology consultant from Cavin Infotech will reach out to you within 24 hours with an invitation link and slot confirmation. +

+ +

+ )} +

+ ); +} diff --git a/src/admin/App.jsx b/src/admin/App.jsx new file mode 100644 index 0000000..5b1ce68 --- /dev/null +++ b/src/admin/App.jsx @@ -0,0 +1,624 @@ +import { useEffect, useRef, useState, Component } from 'react'; +import { + LayoutDashboard, + Sparkles, + Building2, + Award, + Layers, + Target, + Images, + Package, + FileText, + Link2, + Settings, + LogOut, + ExternalLink, + Save, + Menu, + X, + CheckCircle2, + AlertCircle, + Clock, +} from 'lucide-react'; +import { adminApi, getToken, setToken, clearToken } from './api'; +import { Field, ImageUpload, ArrayEditor } from './components/FormFields'; +import { SectionPreview } from './components/SectionPreview'; +import { pickSectionData } from './contentHelpers'; +import defaultContent from '../../server/seed/default-content.json'; + +const NAV_GROUPS = [ + { + label: 'Overview', + items: [ + { id: 'dashboard', label: 'Dashboard', icon: LayoutDashboard, desc: 'Overview and quick access to all sections' }, + ], + }, + { + label: 'Page Content', + items: [ + { id: 'hero', label: 'Hero & Metrics', icon: Sparkles, desc: 'Homepage headline, video, and statistics' }, + { id: 'about', label: 'About & Partners', icon: Building2, desc: 'About section and partner logos' }, + { id: 'certifications', label: 'Certifications', icon: Award, desc: 'Certification badges and headings' }, + { id: 'services', label: 'Services', icon: Layers, desc: 'Service cards and section copy' }, + { id: 'whyUs', label: 'Why Us', icon: Target, desc: 'Value propositions and images' }, + { id: 'gallery', label: 'Gallery', icon: Images, desc: 'Featured case studies and gallery items' }, + { id: 'products', label: 'Products', icon: Package, desc: 'Product suite cards and stats' }, + { id: 'insights', label: 'Insights', icon: FileText, desc: 'Blog and insight carousel items' }, + { id: 'footer', label: 'Footer & Links', icon: Link2, desc: 'CTA, social links, and footer navigation' }, + ], + }, + { + label: 'Account', + items: [ + { id: 'settings', label: 'Settings', icon: Settings, desc: 'Password and account preferences' }, + ], + }, +]; + +const ALL_SECTIONS = NAV_GROUPS.flatMap((g) => g.items); + +const SECTION_DESCRIPTIONS = Object.fromEntries(ALL_SECTIONS.map((s) => [s.id, s.desc])); + +function Toast({ message, type }) { + if (!message) return null; + return ( +

+ {type === 'success' ? : } + {message} +

+ ); +} + +function LoginPreview() { + const viewportRef = useRef(null); + const [scale, setScale] = useState(0.5); + const previewWidth = 1280; + const previewHeight = 800; + + useEffect(() => { + const el = viewportRef.current; + if (!el) return; + + const updateScale = () => { + const nextScale = el.clientWidth / previewWidth; + setScale(nextScale); + }; + + updateScale(); + const observer = new ResizeObserver(updateScale); + observer.observe(el); + return () => observer.disconnect(); + }, []); + + return ( +

Content Manager

Preview the live website before you sign in. Edits publish instantly after login.

+ + + Open full site + +

+ +

+ + + + cavininfotech.com +