Goutam/Aaidea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
f8725ababaa36237c840232d7650ee24cd1dd8c2
Aaidea/app/page.tsx
T

597 lines
24 KiB
TypeScript
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
"use client";
import Link from "next/link";
import { useEffect } from "react";
export default function HomePage() {
return (
<>
<section className="ux-hero-section">
<div className="container">
<div className="row justify-content-center text-center">
<div className="col-lg-8">
<h1 className="ux-hero-title" data-aos="fade-up" data-aos-duration="1000">
One Strong Idea.
<br />
Executed Across Every <br />{" "}
<span className="ux-text-highlight">Digital</span> Surface.
</h1>
<p className="ux-hero-subtitle" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
Designing digital homes, brand systems, and scalable content for
modern operators.
</p>
<div className="ux-hero-actions" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
<Link href="/start_project" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</Link>
<Link href="/work" className="btn ux-btn-secondary">
View Case Studies
</Link>
</div>
</div>
</div>
{/* BOTTOM CARDS */}
<div className="row align-items-center mt-5 g-4 ux-bottom-wrapper">
{/* Left Image */}
<div className="col-lg-3" data-aos="fade-right" data-aos-delay="100" data-aos-duration="1000">
<div className="ux-img-card">
<img src="assets/images/Onestrong.png" className="img-fluid" />
</div>
</div>
{/* 400+ */}
<div className="col-lg-2" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
<div className="ux-stat-box ux-light">
<h2 className="ux-counter" data-count={400}>
0
</h2>
<p>
Our Esteemed
<br />
Clients and Partners
</p>
</div>
</div>
{/* Trusted */}
<div className="col-lg-2" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
<div className="ux-stat-box ux-dark">
<h5>
Trusted &amp;
<br />
Transparent
<br />
Growth
</h5>
<div className="ux-icon">
<img src="assets/images/flower.svg" alt="" />
</div>
</div>
</div>
{/* 20+ */}
<div className="col-lg-2" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
<div className="ux-stat-box ux-dark">
<h2>20+</h2>
<p>
Global Enterprise
<br />
Drives Innovation
</p>
</div>
</div>
{/* Right Image */}
<div className="col-lg-3" data-aos="fade-left" data-aos-delay="500" data-aos-duration="1000">
<div className="ux-img-card">
<img src="assets/images/Onestrong1.png" className="img-fluid" />
</div>
</div>
</div>
</div>
</section>
<section className="ux-about-section">
<div className="container">
{/* Top Heading */}
<div className="row mb-5">
<div className="col-lg-3" data-aos="fade-right" data-aos-duration="1000">
<p className="ux-section-label">About AaideA</p>
</div>
<div className="col-lg-9" data-aos="fade-left" data-aos-delay="150" data-aos-duration="1000">
<h2 className="ux-main-heading">
We build digital homes, brand systems, and scalable content engines
designed for clarity and growth. Everything is structured to help{" "}
<span>
{" "}
fast-moving operators stay consistent, move with precision, and
turn attention into lasting momentum.
</span>
</h2>
</div>
</div>
{/* Content Row */}
<div className="row align-items-end mb-5">
{/* Left Counter */}
<div className="col-lg-3 text-center text-lg-start" data-aos="fade-up" data-aos-duration="1000">
<h2 className="ux-big-counter">10+</h2>
<p className="ux-small-text">Years Of Creative Excellence</p>
</div>
{/* Image */}
<div className="col-lg-3 text-center" data-aos="zoom-in" data-aos-delay="200" data-aos-duration="1000">
<img
src="assets/images/digitalabout.png"
className="img-fluid ux-about-img"
/>
</div>
{/* Content */}
<div className="col-lg-6" data-aos="fade-up" data-aos-delay="400" data-aos-duration="1000">
<h4 className="ux-card-title">We build digital homes</h4>
<p className="ux-card-text">
We build digital homes, brand systems, and scalable content engines
designed for clarity and growth.
</p>
<Link href="/start_project" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</Link>
</div>
</div>
<div className="partners-wrapper" data-aos="fade-up" data-aos-duration="1000">
<div className="partner-item">
<img src="assets/images/lutron.png" alt="" />
</div>
<div className="partner-item">
<img src="assets/images/kohler.png" alt="" />
</div>
<div className="partner-item">
<img src="assets/images/samsung.png" alt="" />
</div>
<div className="partner-item">
<img src="assets/images/ring.png" alt="" />
</div>
<div className="partner-item">
<img src="assets/images/nest.png" alt="" />
</div>
<div className="partner-item">
<img src="assets/images/sherwin.png" alt="" />
</div>
</div>
</div>
</section>
<section className="ux-work-section">
<div className="container">
{/* Header */}
<div className="d-flex justify-content-between align-items-center mb-4">
<div className="displayflexhead" data-aos="fade-right" data-aos-duration="1000">
<p className="ux-section-label">Featured Work</p>
<h2 className="ux-main-heading">
We build digital homes, brand systems, and scalable
</h2>
</div>
{/* Arrows */}
<div className="ux-swiper-nav" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
<div className="ux-arrow work-prev">
<img src="assets/images/arrowpre.png" alt="" />
</div>
<div className="ux-arrow work-next">
<img src="assets/images/arrownext.png" alt="" />
</div>
</div>
</div>
{/* Slider */}
<div className="swiper ux-work-swiper" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
<div className="swiper-wrapper">
{/* CARD */}
<div className="swiper-slide">
<div className="ux-work-card">
<img
src="assets/images/Digital Transformation.png"
className="img-fluid"
/>
<h4>HVAC Digital Transformation</h4>
<p>
Turning a legacy service business into a structured digital lead
engine.
</p>
<Link href="/work" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</Link>
</div>
</div>
<div className="swiper-slide">
<div className="ux-work-card">
<img src="assets/images/AchievAR1.png" className="img-fluid" />
<h4>AchievAR</h4>
<p>
Building a brand system for immersive learning in a fragmented
market.
</p>
<Link href="/work" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</Link>
</div>
</div>
<div className="swiper-slide">
<div className="ux-work-card">
<img src="assets/images/pro.png" className="img-fluid" />
<h4>LynkedUp Pro</h4>
<p>
Designing a SaaS platform that bridges vetted talent and
execution.
</p>
<Link href="/work" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</Link>
</div>
</div>
<div className="swiper-slide">
<div className="ux-work-card">
<img src="assets/images/foundation.png" className="img-fluid" />
<h4>LynkedUp Foundation</h4>
<p>
Turning a legacy service business into a structured digital lead
engine.
</p>
<Link href="/work" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</Link>
</div>
</div>
<div className="swiper-slide">
<div className="ux-work-card">
<img
src="assets/images/Digital Transformation.png"
className="img-fluid"
/>
<h4>HVAC Digital Transformation</h4>
<p>
Turning a legacy service business into a structured digital lead
engine.
</p>
<Link href="/work" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</Link>
</div>
</div>
<div className="swiper-slide">
<div className="ux-work-card">
<img src="assets/images/AchievAR1.png" className="img-fluid" />
<h4>AchievAR</h4>
<p>
Building a brand system for immersive learning in a fragmented
market.
</p>
<Link href="/work" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</Link>
</div>
</div>
<div className="swiper-slide">
<div className="ux-work-card">
<img src="assets/images/pro.png" className="img-fluid" />
<h4>LynkedUp Pro</h4>
<p>
Designing a SaaS platform that bridges vetted talent and
execution.
</p>
<Link href="/work" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</Link>
</div>
</div>
<div className="swiper-slide">
<div className="ux-work-card">
<img src="assets/images/foundation.png" className="img-fluid" />
<h4>LynkedUp Foundation</h4>
<p>
Turning a legacy service business into a structured digital lead
engine.
</p>
<Link href="/work" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</Link>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="ux-why-section">
<div className="container">
{/* Heading */}
<div className="displayflexhead" style={{ width: "90%" }} data-aos="fade-up" data-aos-duration="1000">
<p className="ux-section-label">Why AAideA</p>
<h2 className="ux-main-heading main-headingexit">
AAideA exists for decision-makers who value clarity over noise. We
don't chase trends. We build structured execution.
</h2>
</div>
{/* Content */}
<div className="row align-items-center existpadd">
{/* Image */}
<div className="col-lg-4" data-aos="fade-right" data-aos-duration="1000">
<div className="ux-why-img">
<img src="assets/images/Why AAideA.png" className="img-fluid" />
</div>
</div>
{/* Cards */}
<div className="col-lg-8">
<div className="row g-4">
<div className="col-md-4" data-aos="fade-up" data-aos-delay="100" data-aos-duration="900">
<div className="ux-why-card">
<span className="ux-number">01</span>
<h6>Systems over chaos</h6>
</div>
</div>
<div className="col-md-4" data-aos="fade-up" data-aos-delay="200" data-aos-duration="900">
<div className="ux-why-card">
<span className="ux-number">02</span>
<h6>Taste without ego</h6>
</div>
</div>
<div className="col-md-4" data-aos="fade-up" data-aos-delay="300" data-aos-duration="900">
<div className="ux-why-card">
<span className="ux-number">03</span>
<h6>AI as amplifier</h6>
</div>
</div>
<div className="col-md-4" data-aos="fade-up" data-aos-delay="400" data-aos-duration="900">
<div className="ux-why-card">
<span className="ux-number">04</span>
<h6>Built for operators</h6>
</div>
</div>
<div className="col-md-4" data-aos="fade-up" data-aos-delay="500" data-aos-duration="900">
<div className="ux-why-card">
<span className="ux-number">05</span>
<h6>Structured to scale</h6>
</div>
</div>
<div className="col-md-4" data-aos="fade-up" data-aos-delay="600" data-aos-duration="900">
<div className="ux-why-card">
<span className="ux-number">06</span>
<h6>Designed to endure</h6>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="ux-build-section">
<div className="container">
{/* Header */}
<div className="d-flex justify-content-between align-items-center">
<div className="displayflexhead" data-aos="fade-right" data-aos-duration="1000">
<p className="ux-section-label" style={{ color: "white" }}>
What we build.
</p>
<h2 className="ux-main-heading text-white">
We don’t sell services. We build systems that scale.
</h2>
</div>
{/* Arrows */}
<div className="ux-swiper-nav" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
{/* Work section arrows — change to work-prev / work-next */}
<div className="ux-arrow build-prev">
<img src="assets/images/arrowpre.png" />
</div>
<div className="ux-arrow build-next">
<img src="assets/images/arrownext.png" />
</div>
</div>
</div>
</div>
{/* Slider */}
<div className="swiper ux-build-swiper" data-aos="fade-up" data-aos-delay="200" data-aos-duration="1000">
<div className="swiper-wrapper">
{/* CARD */}
<div className="swiper-slide">
<div className="ux-build-card">
<span>
<img src="assets/images/Websitesdesign.svg" alt="" />
</span>
<h5>Websites &amp; Digital Platforms</h5>
<p>
High-performance marketing sites, SaaS platforms, landing
ecosystems.
</p>
</div>
</div>
<div className="swiper-slide">
<div className="ux-build-card">
<span>
{" "}
<img src="assets/images/brandsystem.svg" alt="" />
</span>
<h5>Brand Systems</h5>
<p>
Identity, structure, messaging architecture, scalable visual
language.
</p>
</div>
</div>
{/* ACTIVE CARD */}
<div className="swiper-slide">
<div className="ux-build-card active">
<span>
{" "}
<img src="assets/images/campaignicon.svg" alt="" />
</span>
<h5>Campaign &amp; Performance Creative</h5>
<p>Conversion-led campaigns across web and social.</p>
</div>
</div>
<div className="swiper-slide">
<div className="ux-build-card">
<span>
{" "}
<img src="assets/images/Motion.svg" alt="" />
</span>
<h5>Motion &amp; Content Systems</h5>
<p>Video, reels, explainers, multi-format content packaging.</p>
</div>
</div>
<div className="swiper-slide">
<div className="ux-build-card">
<span>
{" "}
<img src="assets/images/AI-Accelerated.svg" alt="" />
</span>
<h5>AI-Accelerated Production</h5>
<p>Structured workflows that amplify execution speed.</p>
</div>
</div>
<div className="swiper-slide">
<div className="ux-build-card active">
<span>
{" "}
<img src="assets/images/campaignicon.svg" alt="" />
</span>
<h5>Campaign &amp; Performance Creative</h5>
<p>Conversion-led campaigns across web and social.</p>
</div>
</div>
<div className="swiper-slide">
<div className="ux-build-card">
<span>
<img src="assets/images/Motion.svg" alt="" />
</span>
<h5>Motion &amp; Content Systems</h5>
<p>Video, reels, explainers, multi-format content packaging.</p>
</div>
</div>
<div className="swiper-slide">
<div className="ux-build-card">
<span>
{" "}
<img src="assets/images/AI-Accelerated.svg" alt="" />
</span>
<h5>AI-Accelerated Production</h5>
<p>Structured workflows that amplify execution speed.</p>
</div>
</div>
<div className="swiper-slide">
<div className="ux-build-card active">
<span>
{" "}
<img src="assets/images/campaignicon.svg" alt="" />
</span>
<h5>Campaign &amp; Performance Creative</h5>
<p>Conversion-led campaigns across web and social.</p>
</div>
</div>
<div className="swiper-slide">
<div className="ux-build-card">
<span>
{" "}
<img src="assets/images/Motion.svg" alt="" />
</span>
<h5>Motion &amp; Content Systems</h5>
<p>Video, reels, explainers, multi-format content packaging.</p>
</div>
</div>
<div className="swiper-slide">
<div className="ux-build-card">
<span>
<img src="assets/images/AI-Accelerated.svg" alt="" />
</span>
<h5>AI-Accelerated Production</h5>
<p>Structured workflows that amplify execution speed.</p>
</div>
</div>
</div>
</div>
</section>
<section className="ux-process-section">
<div className="container">
{/* Top Header */}
<div className="d-flex justify-content-between align-items-center mb-5 flex-wrap">
<div className="displayflexhead" data-aos="fade-right" data-aos-duration="1000">
<p className="ux-section-label">Structured execution.</p>
<h2 className="ux-main-heading">
Every project follows the same internal discipline.
</h2>
</div>
<Link href="/process" className="btn ux-btn-primary" data-aos="fade-left" data-aos-delay="200" data-aos-duration="1000">
Explore our Process
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</Link>
</div>
{/* Steps */}
<div className="row g-4 align-items-stretch">
{/* STEP 1 */}
<div className="col-lg-4 position-relative" data-aos="fade-up" data-aos-delay="100" data-aos-duration="1000">
<div className="ux-process-card">
<span className="ux-step">STEP 01</span>
<h4>Absorb</h4>
<p>
We dissect the problem before designing the solution. Positioning.
Constraints.
</p>
<img src="assets/images/Absorbhome.png" className="img-fluid" />
</div>
{/* Arrow */}
<div className="ux-step-arrow d-none d-lg-block">
<img src="assets/images/arrowforward.svg" alt="" />
</div>
</div>
{/* STEP 2 */}
<div className="col-lg-4 position-relative" data-aos="fade-up" data-aos-delay="300" data-aos-duration="1000">
<div className="ux-process-card">
<span className="ux-step">STEP 02</span>
<h4>Amplify</h4>
<p>
We build the system. Design language. Digital architecture.
AI-assisted iterations.
</p>
<img src="assets/images/Amplifyhome.png" className="img-fluid" />
</div>
{/* Arrow */}
<div className="ux-step-arrow d-none d-lg-block">
<img src="assets/images/arrowforward.svg" alt="" />
</div>
</div>
{/* STEP 3 */}
<div className="col-lg-4" data-aos="fade-up" data-aos-delay="500" data-aos-duration="1000">
<div className="ux-process-card">
<span className="ux-step">STEP 03</span>
<h4>Activate</h4>
<p>
We ship across formats. Web. Campaign. Motion. Content.
Distribution.
</p>
<img src="assets/images/Activatehome.png" className="img-fluid" />
</div>
</div>
</div>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center" data-aos="zoom-in" data-aos-duration="1000">
<p className="ux-section-label">AAideA</p>
<h2 className="ux-footer-title">
If the idea is strong, we'll scale it.
</h2>
<div className="ux-hero-actions">
<Link href="/start_project" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</Link>
</div>
</div>
</div>
</div>
</>
);
}
Reference in New Issue View Git Blame Copy Permalink