Goutam/Aaidea
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Goutam
2026-04-30 20:22:49 +05:30
parent b710d5e6a1
commit 1fd65261b4
104 changed files with 5443 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/about/page.txt
View File
app/ai_powered/page.tsx
+190
View File
@@ -0,0 +1,190 @@
export default function AiPowered() {
return (
<>
<section className="ux-project-hero ux-project-heropad">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">
Intelligent Production. <br /> Built For Speed.
</h1>
<p className="ux-project-subtitle">
We integrate automation and AI workflows to reduce cost, <br />{" "}
increase output, and maintain precision.
</p>
</div>
<div className="ux-hero-actions">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
<a href="#" className="btn ux-btn-secondary">
View Case Studies
</a>
</div>
<div className="row align-items-center g-5 ux-growth-section">
{/* Left Content */}
<div className="col-lg-7">
<span className="ux-growth-label">Philosophy</span>
<h2 className="ux-growth-title">Manual Processes Slow Growth</h2>
<p className="ux-growth-subtitle">Teams waste time on:</p>
<div className="row">
<div className="col-md-6">
<ul className="ux-growth-list">
<li>Repetitive asset creation</li>
<li>Inefficient content workflows</li>
</ul>
</div>
<div className="col-md-6">
<ul className="ux-growth-list">
<li>Manual resizing and formatting</li>
<li>Fragmented production tools</li>
</ul>
</div>
</div>
<p className="ux-growth-bottom">Growth requires velocity.</p>
</div>
{/* Right Image */}
<div className="col-lg-5">
<div className="ux-growth-image-box">
<img
src="assets/images/Intelligent.png"
alt="Intelligent Production"
/>
</div>
</div>
</div>
</div>
</section>
<section className="ux-approach-section">
<div className="container">
<div className="row align-items-end mb-5">
<div className="col-lg-6">
<span className="ux-label">Our Approach</span>
<h2 className="ux-section-title">
We treat brand as infrastructure.
</h2>
</div>
<div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
<p className="ux-section-desc">
We Build Intelligent Production Systems.
</p>
</div>
</div>
<div className="row g-4">
{/* Card 1 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Architecture.svg" alt="" />
</span>
<span className="ux-num">01</span>
</div>
<h4>Workflow Automation</h4>
<p>Connect tools to eliminate repetitive steps.</p>
</div>
</div>
{/* Card 2 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Built.svg" alt="" />
</span>
<span className="ux-num">02</span>
</div>
<h4>AI-Assisted Creation</h4>
<p>
Use intelligent generation where speed matters — without
compromising quality.
</p>
</div>
</div>
{/* Card 3 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Designed.svg" alt="" />
</span>
<span className="ux-num">03</span>
</div>
<h4>Scalable Asset Systems</h4>
<p>Templates and component libraries built for rapid deployment.</p>
</div>
</div>
</div>
</div>
</section>
<section className="ux-deliver-section">
<div className="container">
<h2 className="ux-deliver-title">What We Deliver</h2>
<div className="row g-5">
{/* Left List */}
<div className="col-lg-7">
<div className="ux-deliver-list active">
<span>01</span>
Production workflow audits
</div>
<div className="ux-deliver-list">
<span>02</span>
Automation setup
</div>
<div className="ux-deliver-list">
<span>03</span>
AI tool integration
</div>
<div className="ux-deliver-list">
<span>04</span>
Template systems
</div>
<div className="ux-deliver-list">
<span>05</span>
Asset libraries
</div>
<div className="ux-deliver-list">
<span>06</span>
SOP documentation
</div>
</div>
{/* Right Snapshot */}
<div className="col-lg-5">
<div className="ux-snapshot-box">
<small>CASE SNAPSHOT</small>
<hr />
<span className="ux-mini-title">CHALLENGE</span>
<h4>High production cost and turnaround time</h4>
<span className="ux-mini-title mt-4 d-block">OUTCOME</span>
<h2>60% faster</h2>
<p>Output with automation layer</p>
</div>
</div>
</div>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
}
app/api/submit/route.ts
+15
View File
@@ -0,0 +1,15 @@
import { NextResponse } from "next/server";
export async function POST(req: Request) {
try {
const body = await req.json();
console.log("FORM DATA:", body);
return NextResponse.json({ success: true });
} catch (error) {
console.error(error);
return NextResponse.json({ error: "Something went wrong" }, { status: 500 });
}
}
app/brand-architecture/page.tsx
+196
View File
@@ -0,0 +1,196 @@
export default function Brandarchiture() {
return (
<>
<section className="ux-project-hero ux-project-heropad">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">Brands Built As Systems</h1>
<p className="ux-project-subtitle">
We don't just design logos. We design structured identity ecosystems
that scale across channels.
</p>
</div>
<div className="ux-hero-actions">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
<a href="#" className="btn ux-btn-secondary">
View Case Studies
</a>
</div>
<div className="row align-items-center g-5 ux-growth-section">
{/* Left Content */}
<div className="col-lg-7">
<span className="ux-growth-label">Philosophy</span>
<h2 className="ux-growth-title">
Most Brands Are Visual Collections — Not Strategic Systems
</h2>
<p className="ux-growth-subtitle">They struggle with:</p>
<div className="row">
<div className="col-md-6">
<ul className="ux-growth-list">
<li>Inconsistent messaging</li>
<li>Visual fragmentation</li>
</ul>
</div>
<div className="col-md-6">
<ul className="ux-growth-list">
<li>Weak positioning</li>
<li>Rebranding cycles every few years</li>
</ul>
</div>
</div>
<p className="ux-growth-bottom">
Without structure, brand becomes decoration.
</p>
</div>
{/* Right Image */}
<div className="col-lg-5">
<div className="ux-growth-image-box">
<img src="assets/images/brandart.png" alt="Brand System" />
</div>
</div>
</div>
</div>
</section>
<section className="ux-approach-section">
<div className="container">
<div className="row align-items-end mb-5">
<div className="col-lg-6">
<span className="ux-label">Our Approach</span>
<h2 className="ux-section-title">
We treat brand as infrastructure.
</h2>
</div>
<div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
<p className="ux-section-desc">
Brand Should Feel Consistent Whether It's On A Billboard Or A Mobile
App.
</p>
</div>
</div>
<div className="row g-4">
{/* Card 1 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Architecture.svg" alt="" />
</span>
<span className="ux-num">01</span>
</div>
<h4>Positioning First</h4>
<p>Clear category, audience, and narrative foundation.</p>
</div>
</div>
{/* Card 2 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Built.svg" alt="" />
</span>
<span className="ux-num">02</span>
</div>
<h4>Identity With Structure</h4>
<p>
Typography, color systems, spacing logic, scalable visual
patterns.
</p>
</div>
</div>
{/* Card 3 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Designed.svg" alt="" />
</span>
<span className="ux-num">03</span>
</div>
<h4>Messaging Framework</h4>
<p>
Voice principles, brand language rules, modular copy structure.
</p>
</div>
</div>
</div>
</div>
</section>
<section className="ux-deliver-section">
<div className="container">
<h2 className="ux-deliver-title">What We Deliver</h2>
<div className="row g-5">
{/* Left List */}
<div className="col-lg-7">
<div className="ux-deliver-list active">
<span>01</span>
Market and positioning analysis
</div>
<div className="ux-deliver-list">
<span>02</span>
Logo and identity design
</div>
<div className="ux-deliver-list">
<span>03</span>
Brand guidelines
</div>
<div className="ux-deliver-list">
<span>04</span>
Asset system for scale
</div>
<div className="ux-deliver-list">
<span>05</span>
Brand narrative development
</div>
<div className="ux-deliver-list">
<span>06</span>
Typography and color systems
</div>
<div className="ux-deliver-list">
<span>07</span>
Messaging architecture
</div>
</div>
{/* Right Snapshot */}
<div className="col-lg-5">
<div className="ux-snapshot-box">
<small>CASE SNAPSHOT</small>
<hr />
<span className="ux-mini-title">CHALLENGE</span>
<h4>Generic positioning in competitive market</h4>
<span className="ux-mini-title mt-4 d-block">OUTCOME</span>
<h2>3x Engagement</h2>
<p>Growth after structured rebrand</p>
</div>
</div>
</div>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
}
app/brand-build/page.tsx
+196
View File
@@ -0,0 +1,196 @@
export default function brand_build() {
return (
<>
<section className="ux-project-hero ux-project-heropad">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">Brand Built As Systems</h1>
<p className="ux-project-subtitle">
We don't just design logos. We design structured identity ecosystems
that scale across channels.
</p>
</div>
<div className="ux-hero-actions">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
<a href="#" className="btn ux-btn-secondary">
View Case Studies
</a>
</div>
<div className="row align-items-center g-5 ux-growth-section">
{/* Left Content */}
<div className="col-lg-7">
<span className="ux-growth-label">Philosophy</span>
<h2 className="ux-growth-title">
Most Brands Are Visual Collections — Not Strategic Systems
</h2>
<p className="ux-growth-subtitle">They struggle with:</p>
<div className="row">
<div className="col-md-6">
<ul className="ux-growth-list">
<li>Inconsistent messaging</li>
<li>Weak positioning</li>
</ul>
</div>
<div className="col-md-6">
<ul className="ux-growth-list">
<li>Visual fragmentation</li>
<li>Rebranding cycles every few years</li>
</ul>
</div>
</div>
<p className="ux-growth-bottom">
Without structure, brand becomes decoration.
</p>
</div>
{/* Right Image */}
<div className="col-lg-5">
<div className="ux-growth-image-box">
<img src="assets/images/Philosophy.png" alt="Brand System" />
</div>
</div>
</div>
</div>
</section>
<section className="ux-approach-section">
<div className="container">
<div className="row align-items-end mb-5">
<div className="col-lg-6">
<span className="ux-label">Our Approach</span>
<h2 className="ux-section-title">
We treat brand as infrastructure.
</h2>
</div>
<div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
<p className="ux-section-desc">
Brand Should Feel Consistent Whether It's On A Billboard Or A Mobile
App.
</p>
</div>
</div>
<div className="row g-4">
{/* Card 1 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Architecture.svg" alt="" />
</span>
<span className="ux-num">01</span>
</div>
<h4>Positioning First</h4>
<p>Clear category, audience, and narrative foundation.</p>
</div>
</div>
{/* Card 2 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Built.svg" alt="" />
</span>
<span className="ux-num">02</span>
</div>
<h4>Identity With Structure</h4>
<p>
Typography, color systems, spacing logic, scalable visual
patterns.
</p>
</div>
</div>
{/* Card 3 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Designed.svg" alt="" />
</span>
<span className="ux-num">03</span>
</div>
<h4>Messaging Framework</h4>
<p>
Voice principles, brand language rules, modular copy structure.
</p>
</div>
</div>
</div>
</div>
</section>
<section className="ux-deliver-section">
<div className="container">
<h2 className="ux-deliver-title">What We Deliver</h2>
<div className="row g-5">
{/* Left List */}
<div className="col-lg-7">
<div className="ux-deliver-list active">
<span>01</span>
Market and positioning analysis
</div>
<div className="ux-deliver-list">
<span>02</span>
Brand narrative development
</div>
<div className="ux-deliver-list">
<span>03</span>
Logo and identity design
</div>
<div className="ux-deliver-list">
<span>04</span>
Typography and color systems
</div>
<div className="ux-deliver-list">
<span>05</span>
Brand guidelines
</div>
<div className="ux-deliver-list">
<span>06</span>
Messaging architecture
</div>
<div className="ux-deliver-list">
<span>07</span>
Asset system for scale
</div>
</div>
{/* Right Snapshot */}
<div className="col-lg-5">
<div className="ux-snapshot-box">
<small>CASE SNAPSHOT</small>
<hr />
<span className="ux-mini-title">CHALLENGE</span>
<h4>Generic positioning in competitive market</h4>
<span className="ux-mini-title mt-4 d-block">OUTCOME</span>
<h2>3x Engagement</h2>
<p>Growth after structured rebrand</p>
</div>
</div>
</div>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
}
app/campaign_strategy/page.tsx
+192
View File
@@ -0,0 +1,192 @@
export default function Campaign() {
return (
<>
<section className="ux-project-hero ux-project-heropad">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">Campaigns Built To Perform</h1>
<p className="ux-project-subtitle">
We design campaign systems that drive measurable growth, not temporary
attention.
</p>
</div>
<div className="ux-hero-actions">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
<a href="#" className="btn ux-btn-secondary">
View Case Studies
</a>
</div>
<div className="row align-items-center g-5 ux-growth-section">
{/* Left Content */}
<div className="col-lg-7">
<span className="ux-growth-label">Philosophy</span>
<h2 className="ux-growth-title">
Most Campaigns Look Impressive But Lack Structure
</h2>
<p className="ux-growth-subtitle">They fail because:</p>
<div className="row">
<div className="col-md-6">
<ul className="ux-growth-list">
<li>Messaging doesn't connect to positioning</li>
<li>Funnel logic is unclear</li>
</ul>
</div>
<div className="col-md-6">
<ul className="ux-growth-list">
<li>Creative isn't built for testing</li>
<li>Data isn't used to iterate</li>
</ul>
</div>
</div>
<p className="ux-growth-bottom">
Attention without performance is wasted spend.
</p>
</div>
{/* Right Image */}
<div className="col-lg-5">
<div className="ux-growth-image-box">
<img src="assets/images/Philosophy.png" alt="Campaign System" />
</div>
</div>
</div>
</div>
</section>
<section className="ux-approach-section">
<div className="container">
<div className="row align-items-end mb-5">
<div className="col-lg-6">
<span className="ux-label">Our Approach</span>
<h2 className="ux-section-title">
We build campaigns like structured systems.
</h2>
</div>
<div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
<p className="ux-section-desc">
Campaigns Must Be Scalable, Measurable, And Repeatable.
</p>
</div>
</div>
<div className="row g-4">
{/* Card 1 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Architecture.svg" alt="" />
</span>
<span className="ux-num">01</span>
</div>
<h4>Campaign Architecture</h4>
<p>
Clear objective, defined funnel stages, creative mapped to
journey.
</p>
</div>
</div>
{/* Card 2 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Built.svg" alt="" />
</span>
<span className="ux-num">02</span>
</div>
<h4>Performance-Ready Creative</h4>
<p>
Ad structures, messaging variants, testing logic built into the
design.
</p>
</div>
</div>
{/* Card 3 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Designed.svg" alt="" />
</span>
<span className="ux-num">03</span>
</div>
<h4>Data-Driven Optimization</h4>
<p>We track performance and refine creative, not guess.</p>
</div>
</div>
</div>
</div>
</section>
<section className="ux-deliver-section">
<div className="container">
<h2 className="ux-deliver-title">What We Deliver</h2>
<div className="row g-5">
{/* Left List */}
<div className="col-lg-7">
<div className="ux-deliver-list active">
<span>01</span>
Campaign strategy blueprint
</div>
<div className="ux-deliver-list">
<span>02</span>
Creative direction
</div>
<div className="ux-deliver-list">
<span>03</span>
Ad creative production
</div>
<div className="ux-deliver-list">
<span>04</span>
Landing page alignment
</div>
<div className="ux-deliver-list">
<span>05</span>
Performance funnel mapping
</div>
<div className="ux-deliver-list">
<span>06</span>
Optimization frameworks
</div>
</div>
{/* Right Snapshot */}
<div className="col-lg-5">
<div className="ux-snapshot-box">
<small>CASE SNAPSHOT</small>
<hr />
<span className="ux-mini-title">CHALLENGE</span>
<h4>High ad spend, low conversion</h4>
<span className="ux-mini-title mt-4 d-block">OUTCOME</span>
<h2>38% lower CPA</h2>
<p>After restructuring campaign system</p>
</div>
</div>
</div>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
}
app/components/Footer.tsx
+56
View File
@@ -0,0 +1,56 @@
import Link from 'next/link';
import Image from 'next/image';
export default function Footer() {
return (
<footer className="ux-main-footer">
<div className="container">
<div className="ux-footer-grid">
{/* LEFT */}
<div className="ux-footer-left">
<Link href="#"><Image src="/assets/images/footerlogo.png" alt="Logo" width={120} height={40} /></Link>
<p className="ux-footer-desc">
We build digital homes, brand systems, and scalable
content engines designed for clarity and growth.
Everything is structured to help fast
</p>
</div>
{/* RIGHT */}
<div className="ux-footer-right">
<div className="ux-footer-links">
<h6>POPULAR</h6>
<Link href="/work">Work</Link>
<Link href="/services">Services</Link>
<Link href="/about">About</Link>
</div>
<div className="ux-footer-links">
<h6>HELP</h6>
<Link href="/process">Process</Link>
<Link href="/start_project">Start a Project</Link>
<Link href="/hvac">HVAC</Link>
</div>
<div className="ux-footer-links">
<h6>LEGAL</h6>
<Link href="#">Terms and Conditions</Link>
<Link href="#">Privacy Policy</Link>
<Link href="#">FAQ's</Link>
</div>
</div>
</div>
{/* BOTTOM */}
<div className="ux-footer-bottom">
<p>© 2026 AAideA by Insignia Consultancy Solutions. All rights reserved.</p>
<div className="ux-footer-social">
<Link href="#"><Image src="/assets/images/facebook.svg" alt="facebook" width={20} height={20} /></Link>
<Link href="#"><Image src="/assets/images/linkdien.svg" alt="linkedin" width={20} height={20} /></Link>
<Link href="#"><Image src="/assets/images/instagram.svg" alt="instagram" width={20} height={20} /></Link>
<Link href="#"><Image src="/assets/images/twitter.svg" alt="twitter" width={20} height={20} /></Link>
<Link href="#"><Image src="/assets/images/youtube.svg" alt="youtube" width={20} height={20} /></Link>
</div>
</div>
</div>
</footer>
);
}
app/components/Header.tsx
+80
View File
@@ -0,0 +1,80 @@
'use client';
import { useState } from 'react';
import Link from 'next/link';
import Image from 'next/image';
export default function Header() {
const [open, setOpen] = useState(false);
return (
<>
<header className="ux-header">
<div className="container">
<div className="ux-navbar">
<Link href="/">
<Image
src="/assets/images/footerlogo.png"
alt="Logo"
width={120}
height={40}
/>
</Link>
<ul className="ux-nav">
<li><Link href="/work">Work</Link></li>
<li><Link href="/services">Services</Link></li>
<li><Link href="/about">About</Link></li>
<li><Link href="/process">Process</Link></li>
{/* ⚠️ FIX */}
<li className="ux-nav-cta">
<Link href="/start_project">Start a Project</Link>
</li>
</ul>
{/* TOGGLE BUTTON */}
<div
className="ux-menu"
onClick={() => setOpen(!open)}
>
<Image
className="icon open-icon"
src="/assets/images/menutoggle.svg"
alt="menu"
width={30}
height={30}
/>
</div>
</div>
</div>
</header>
{/* RIGHT PANEL */}
<div className={`contact-panel ${open ? 'active' : ''}`}>
<h4>
<Image src="/assets/images/hello.svg" alt="hello" width={24} height={24} />
Say hello!
</h4>
<div className="images">
<Image src="/assets/images/popup1.png" alt="" width={80} height={80} />
<Image src="/assets/images/popup2.png" alt="" width={80} height={80} />
<Image src="/assets/images/popup3.png" alt="" width={80} height={80} />
</div>
<p>
<Image src="/assets/images/location.svg" alt="location" width={18} height={18} />
<span>410 Sandtown, California 94001, USA</span>
</p>
<p>
<Image src="/assets/images/email.svg" alt="email" width={18} height={18} />
<span> info@example.com</span>
</p>
</div>
</>
);
}
app/content_motion/page.tsx
+188
View File
@@ -0,0 +1,188 @@
export default function Content() {
return (
<>
<section className="ux-project-hero ux-project-heropad">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">
Content Built For <br /> Consistency And Scale
</h1>
<p className="ux-project-subtitle">
Structured storytelling across video, motion, and digital channels.
</p>
</div>
<div className="ux-hero-actions">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
<a href="#" className="btn ux-btn-secondary">
View Case Studies
</a>
</div>
<div className="row align-items-center g-5 ux-growth-section">
{/* Left Content */}
<div className="col-lg-7">
<span className="ux-growth-label">Philosophy</span>
<h2 className="ux-growth-title">Content Often Becomes Reactive</h2>
<p className="ux-growth-subtitle">Teams struggle with:</p>
<div className="row">
<div className="col-md-6">
<ul className="ux-growth-list">
<li>Irregular posting</li>
<li>Inconsistent quality</li>
</ul>
</div>
<div className="col-md-6">
<ul className="ux-growth-list">
<li>No narrative cohesion</li>
<li>Burnout from constant creation</li>
</ul>
</div>
</div>
<p className="ux-growth-bottom">
Without structure, content becomes noise.
</p>
</div>
{/* Right Image */}
<div className="col-lg-5">
<div className="ux-growth-image-box">
<img src="assets/images/Content.png" alt="Content System" />
</div>
</div>
</div>
</div>
</section>
<section className="ux-approach-section">
<div className="container">
<div className="row align-items-end mb-5">
<div className="col-lg-6">
<span className="ux-label">Our Approach</span>
<h2 className="ux-section-title">
We design repeatable content engines.
</h2>
</div>
<div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
<p className="ux-section-desc">
We Design Repeatable Content Engines.
</p>
</div>
</div>
<div className="row g-4">
{/* Card 1 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Architecture.svg" alt="" />
</span>
<span className="ux-num">01</span>
</div>
<h4>Narrative Framework</h4>
<p>Define core story themes and recurring pillars.</p>
</div>
</div>
{/* Card 2 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Built.svg" alt="" />
</span>
<span className="ux-num">02</span>
</div>
<h4>Motion &amp; Visual Identity</h4>
<p>Create motion language and visual consistency across formats.</p>
</div>
</div>
{/* Card 3 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Designed.svg" alt="" />
</span>
<span className="ux-num">03</span>
</div>
<h4>Production System</h4>
<p>
Template-driven design, repeatable workflows, batch production
models.
</p>
</div>
</div>
</div>
</div>
</section>
<section className="ux-deliver-section">
<div className="container">
<h2 className="ux-deliver-title">What We Deliver</h2>
<div className="row g-5">
{/* Left List */}
<div className="col-lg-7">
<div className="ux-deliver-list active">
<span>01</span>
Content strategy framework
</div>
<div className="ux-deliver-list">
<span>02</span>
Editorial calendar architecture
</div>
<div className="ux-deliver-list">
<span>03</span>
Video and motion templates
</div>
<div className="ux-deliver-list">
<span>04</span>
Visual storytelling systems
</div>
<div className="ux-deliver-list">
<span>05</span>
Social content design patterns
</div>
<div className="ux-deliver-list">
<span>06</span>
Production workflows
</div>
</div>
{/* Right Snapshot */}
<div className="col-lg-5">
<div className="ux-snapshot-box">
<small>CASE SNAPSHOT</small>
<hr />
<span className="ux-mini-title">CHALLENGE</span>
<h4>Inconsistent brand voice on social</h4>
<span className="ux-mini-title mt-4 d-block">OUTCOME</span>
<h2>4x Engagement</h2>
<p>Growth with structured content system</p>
</div>
</div>
</div>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
}
app/digital_platform/page.tsx
+270
View File
@@ -0,0 +1,270 @@
export default function Digital() {
return (
<>
<section className="ux-project-hero ux-project-heropad">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">
Digital Platforms Built <br /> to Scale
</h1>
<p className="ux-project-subtitle">
Web architecture designed for growth, integration, and performance —
not just design awards.
</p>
</div>
<div className="ux-hero-actions">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
<a href="#" className="btn ux-btn-secondary">
View Case Studies
</a>
</div>
<div className="row align-items-center g-5 ux-growth-section">
{/* Left Content */}
<div className="col-lg-7">
<span className="ux-growth-label">Philosophy</span>
<h2 className="ux-growth-title">Most Websites Break Under Growth</h2>
<p className="ux-growth-subtitle">
Most websites look polished at launch — and collapse under growth.
</p>
<p className="ux-growth-small">They aren't structured for:</p>
<div className="row">
<div className="col-md-6">
<ul className="ux-growth-list">
<li>Traffic spikes</li>
<li>Campaign scale</li>
<li>Data flow</li>
</ul>
</div>
<div className="col-md-6">
<ul className="ux-growth-list">
<li>CRM integrations</li>
<li>Multi-region expansion</li>
</ul>
</div>
</div>
<p className="ux-growth-bottom">
Design without architecture becomes technical debt.
<br />
Growth exposes weak foundations.
</p>
</div>
{/* Right Image */}
<div className="col-lg-5">
<div className="ux-growth-image-box">
<img src="assets/images/Philosophy.png" alt="UI Design" />
</div>
</div>
</div>
</div>
</section>
{/* ===========================
APPROACH SECTION
=========================== */}
<section className="ux-approach-section">
<div className="container">
<div className="row align-items-end mb-3">
<div className="col-lg-6">
<span className="ux-label">Our Approach</span>
<h2 className="ux-section-title">
We don't design pages.
<br />
We design digital infrastructure.
</h2>
</div>
<div className="col-lg-6 text-lg-end mt-4 mt-lg-0">
<p className="ux-section-desc">
The Result Is A Platform That Evolves With The Business.
</p>
</div>
</div>
<div className="row g-4">
{/* Card 1 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Architecture.svg" alt="" />
</span>
<span className="ux-num">01</span>
</div>
<h4>Architecture First</h4>
<p>
We map user journeys, conversion paths, and information
hierarchies before visual design begins.
</p>
</div>
</div>
{/* Card 2 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Built.svg" alt="" />
</span>
<span className="ux-num">02</span>
</div>
<h4>Built for Integration</h4>
<p>
CRM, automation, analytics, payment systems — all planned into the
structure.
</p>
</div>
</div>
{/* Card 3 */}
<div className="col-lg-4 col-md-6">
<div className="ux-card">
<div className="ux-card-top">
<span className="ux-icon">
<img src="assets/images/Designed.svg" alt="" />
</span>
<span className="ux-num">03</span>
</div>
<h4>Designed for Scale</h4>
<p>Modular components, flexible CMS logic, multi-site readiness.</p>
</div>
</div>
</div>
</div>
</section>
{/* ===========================
DELIVER SECTION
=========================== */}
<section className="ux-deliver-section">
<div className="container">
<h2 className="ux-deliver-title">What We Deliver</h2>
<div className="row g-5">
{/* Left List */}
<div className="col-lg-7">
<div className="ux-deliver-list active">
<span>01</span>
UX strategy and journey mapping
</div>
<div className="ux-deliver-list">
<span>02</span>
Wireframes and structural prototypes
</div>
<div className="ux-deliver-list">
<span>03</span>
Design systems (tokens, components, patterns)
</div>
<div className="ux-deliver-list">
<span>04</span>
Development-ready UI
</div>
<div className="ux-deliver-list">
<span>05</span>
Headless or CMS implementation
</div>
<div className="ux-deliver-list">
<span>06</span>
Performance optimization
</div>
<div className="ux-deliver-list">
<span>07</span>
Technical documentation
</div>
</div>
{/* Right Snapshot */}
<div className="col-lg-5">
<div className="ux-snapshot-box">
<small>CASE SNAPSHOT</small>
<hr />
<span className="ux-mini-title">CHALLENGE</span>
<h4>Disconnected marketing + outdated web structure</h4>
<span className="ux-mini-title mt-4 d-block">OUTCOME</span>
<h2>42% increase</h2>
<p>in qualified conversions within 90 days</p>
</div>
</div>
</div>
</div>
</section>
<section className="connect-section">
<div className="container">
{/* HEADING */}
<h2>How We Work</h2>
<p className="subtitle">
We design and build high-performance digital platforms structured for
conversion, scale, and integration.
</p>
{/* FLOW */}
<div className="connect-flow">
<div className="flow-item">
<div className="icon">
<img src="assets/images/Brand1.png" alt="" />
</div>
<span>Discovery</span>
</div>
<div className="arrow">
<img src="assets/images/Everything.svg" alt="" />
</div>
<div className="flow-item">
<div className="icon">
<img src="assets/images/Platform.svg" alt="" />
</div>
<span>Architecture</span>
</div>
<div className="arrow">
<img src="assets/images/Everything.svg" alt="" />
</div>
<div className="flow-item">
<div className="icon">
<img src="assets/images/Campaign1.svg" alt="" />
</div>
<span>Design</span>
</div>
<div className="arrow">
<img src="assets/images/Everything.svg" alt="" />
</div>
<div className="flow-item">
<div className="icon">
<img src="assets/images/content1.svg" alt="" />
</div>
<span>Build</span>
</div>
<div className="arrow">
<img src="assets/images/Everything.svg" alt="" />
</div>
<div className="flow-item">
<div className="icon">
<img src="assets/images/Automation.png" alt="" />
</div>
<span>Optimize</span>
</div>
</div>
{/* BOTTOM TEXT */}
<p className="bottom-text">
No rushed mockups. No disconnected freelancers. Everything is structured
from day one.
</p>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
}
app/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 25 KiB

app/globals.css
-26
View File
@@ -1,26 +0,0 @@
@import "tailwindcss";
:root {
--background: #ffffff;
--foreground: #171717;
}
@theme inline {
--color-background: var(--background);
--color-foreground: var(--foreground);
--font-sans: var(--font-geist-sans);
--font-mono: var(--font-geist-mono);
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
body {
background: var(--background);
color: var(--foreground);
font-family: Arial, Helvetica, sans-serif;
}
app/hvac/page.tsx
+130
View File
@@ -0,0 +1,130 @@
export default function Hvac() {
return (
<>
<section className="ux-project-hero">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">HVAC</h1>
<p className="ux-project-subtitle">
Legacy reputation. Fragmented digital presence.
</p>
</div>
<div className="breacampoffline">
<p style={{ textAlign: "right" }}>
HVAC operated with strong offline credibility but weak digital
structure. Leads were inconsistent. Messaging lacked positioning
clarity.
</p>
<p>
Transform a traditional service provider into a modern, conversion-led
digital engine — without losing trust.
</p>
</div>
</div>
</section>
{/* ===========================
CASE RESULT SECTION
=========================== */}
<section className="ux-result-section">
<div className="container">
{/* TOP BOX */}
<div className="ux-result-box">
{/* LEFT */}
<div className="ux-result-left">
<p className="ux-step-label">Amplify</p>
<h3 className="ux-result-heading">WE BUILT:</h3>
<div className="ux-build-grid">
<div className="ux-mini-card active">
<span>01</span>
<p>Clear positioning architecture</p>
</div>
<div className="ux-mini-card active">
<span>02</span>
<p>Structured service segmentation</p>
</div>
<div className="ux-mini-card active">
<span>03</span>
<p>Conversion-led landing framework</p>
</div>
<div className="ux-mini-card active">
<span>04</span>
<p>Content packaging system</p>
</div>
</div>
</div>
{/* RIGHT */}
<div className="ux-result-right">
<p className="ux-step-label">Amplify</p>
<h3 className="ux-result-heading">AI WAS USED TO:</h3>
<div className="ux-ai-grid">
<div className="ux-mini-card">
<span>01</span>
<p>Rapidly test messaging variations</p>
</div>
<div className="ux-mini-card">
<span>02</span>
<p>Produce scaled content formats</p>
</div>
<div className="ux-mini-card">
<span>03</span>
<p>Optimize landing copy iterations</p>
</div>
</div>
</div>
</div>
{/* BOTTOM BOX */}
<div className="ux-deliver-box">
{/* LEFT */}
<div className="ux-deliver-left">
<p className="ux-step-label">Activate</p>
<h3 className="ux-result-heading">DELIVERED:</h3>
<ul className="ux-deliver-list">
<li>Marketing Website</li>
<li>Service Landing Funnels</li>
<li>Paid Campaign Creatives</li>
<li>Short-form Video Scripts</li>
<li>Structured Content System</li>
</ul>
</div>
{/* CENTER */}
<div className="ux-deliver-center">
<img src="assets/images/Delivered.png" alt="" />
</div>
{/* RIGHT */}
<div className="ux-deliver-right">
<h3 className="ux-result-heading">RESULT:</h3>
<p>
Clear digital authority. Improved lead capture flow. Scalable
marketing infrastructure.
</p>
<a href="#" className="ux-result-btn">
Build your digital engine
</a>
</div>
</div>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
}
app/layout.tsx
+52 -29
View File
@@ -1,33 +1,56 @@
import type { Metadata } from "next";
import { Geist, Geist_Mono } from "next/font/google";
import "./globals.css";
const geistSans = Geist({
variable: "--font-geist-sans",
subsets: ["latin"],
});
const geistMono = Geist_Mono({
variable: "--font-geist-mono",
subsets: ["latin"],
});
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
};
import "bootstrap/dist/css/bootstrap.min.css"
import "swiper/css"
import "aos/dist/aos.css"
import { Toaster } from "react-hot-toast";
import Header from "./components/Header"
import Footer from "./components//Footer"
import Script from "next/script"
export default function RootLayout({
children,
}: Readonly<{
children: React.ReactNode;
}>) {
}: {
children: React.ReactNode
}) {
return (
<html
lang="en"
className={`${geistSans.variable} ${geistMono.variable} h-full antialiased`}
>
<body className="min-h-full flex flex-col">{children}</body>
<html lang="en">
{/* ✅ YAHAN */}
<head>
<link rel="stylesheet" href="/assets/css/style.css" />
<link rel="stylesheet" href="/assets/css/responsive.css" />
</head>
<body>
<Toaster position="top-right" />
<Header />
{children}
<Footer />
{/* ✅ 1. Bootstrap */}
<Script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
strategy="afterInteractive"
/>
{/* ✅ 2. Swiper JS (MISSING THA) */}
<Script
src="https://cdn.jsdelivr.net/npm/swiper@10/swiper-bundle.min.js"
strategy="afterInteractive"
/>
{/* ✅ 3. AOS JS */}
<Script
src="https://unpkg.com/aos@2.3.4/dist/aos.js"
strategy="afterInteractive"
/>
{/* ✅ 4. TERA main.js (LAST) */}
<Script
src="/assets/js/main.js"
strategy="afterInteractive"
/>
</body>
</html>
);
}
)
}
app/linkedin_uppro/page.tsx
+127
View File
@@ -0,0 +1,127 @@
export default function linkedin_uppro() {
return (
<>
<section className="ux-project-hero">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">LynkedUp Pro</h1>
<p className="ux-project-subtitle">Trust vs. Scale.</p>
</div>
<div className="breacampoffline">
<p style={{ textAlign: "right" }}>
The market lacked a structured bridge between vetted talent and field
execution. Trust and scale needed to coexist.
</p>
<p>
Design a platform that manages high-level talent while remaining
accessible for enterprise scale with seamless global collaboration
infrastructure.
</p>
</div>
</div>
</section>
{/* ===========================
CASE RESULT SECTION
=========================== */}
<section className="ux-result-section">
<div className="container">
{/* TOP BOX */}
<div className="ux-result-box">
{/* LEFT */}
<div className="ux-result-left">
<p className="ux-step-label">Amplify</p>
<h3 className="ux-result-heading">WE BUILT:</h3>
<div className="ux-build-grid">
<div className="ux-mini-card active">
<span>01</span>
<p>Product UX architecture</p>
</div>
<div className="ux-mini-card active">
<span>02</span>
<p>Modular UI system</p>
</div>
<div className="ux-mini-card active">
<span>03</span>
<p>Marketing website</p>
</div>
<div className="ux-mini-card active">
<span>04</span>
<p>Onboarding flows</p>
</div>
</div>
</div>
{/* RIGHT */}
<div className="ux-result-right">
<p className="ux-step-label">Amplify</p>
<h3 className="ux-result-heading">AI WAS USED TO:</h3>
<div className="ux-ai-grid">
<div className="ux-mini-card">
<span>01</span>
<p>UI variation testing</p>
</div>
<div className="ux-mini-card">
<span>02</span>
<p>Content system expansion</p>
</div>
<div className="ux-mini-card">
<span>03</span>
<p>Workflow acceleration</p>
</div>
</div>
</div>
</div>
{/* BOTTOM BOX */}
<div className="ux-deliver-box">
{/* LEFT */}
<div className="ux-deliver-left">
<p className="ux-step-label">Activate</p>
<h3 className="ux-result-heading">DELIVERED:</h3>
<ul className="ux-deliver-list">
<li>SaaS Interface</li>
<li>Marketing Site</li>
<li>Demo Video</li>
<li>System UI Kit</li>
</ul>
</div>
{/* CENTER */}
<div className="ux-deliver-center">
<img src="assets/images/Delivered.png" alt="" />
</div>
{/* RIGHT */}
<div className="ux-deliver-right">
<h3 className="ux-result-heading">RESULT: </h3>
<p>
Professional-grade platform. Structured user journey. Scalable
product foundation.
</p>
<a href="#" className="ux-result-btn">
Design your platform
</a>
</div>
</div>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
}
app/page.tsx
+587 -56
View File
@@ -1,65 +1,596 @@
import Image from "next/image";
"use client";
import Link from "next/link";
import { useEffect } from "react";
export default function HomePage() {
export default function Home() {
return (
<div className="flex flex-col flex-1 items-center justify-center bg-zinc-50 font-sans dark:bg-black">
<main className="flex flex-1 w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
<Image
className="dark:invert"
src="/next.svg"
alt="Next.js logo"
width={100}
height={20}
priority
/>
<div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
<h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
To get started, edit the page.tsx file.
</h1>
<p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
Looking for a starting point or more instructions? Head over to{" "}
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Templates
</a>{" "}
or the{" "}
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="font-medium text-zinc-950 dark:text-zinc-50"
>
Learning
</a>{" "}
center.
</p>
<>
<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">
One Strong Idea.
<br />
Executed Across Every <br />{" "}
<span className="ux-text-highlight">Digital</span> Surface.
</h1>
<p className="ux-hero-subtitle">
Designing digital homes, brand systems, and scalable content for
modern operators.
</p>
<div className="ux-hero-actions">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
<a href="#" className="btn ux-btn-secondary">
View Case Studies
</a>
</div>
</div>
</div>
<div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
<a
className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className="dark:invert"
src="/vercel.svg"
alt="Vercel logomark"
width={16}
height={16}
{/* BOTTOM CARDS */}
<div className="row align-items-center mt-5 g-4 ux-bottom-wrapper">
{/* Left Image */}
<div className="col-lg-3">
<div className="ux-img-card">
<img src="assets/images/Onestrong.png" className="img-fluid" />
</div>
</div>
{/* 400+ */}
<div className="col-lg-2">
<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">
<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">
<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">
<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">
<p className="ux-section-label">About AaideA</p>
</div>
<div className="col-lg-9">
<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">
<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">
<img
src="assets/images/digitalabout.png"
className="img-fluid ux-about-img"
/>
Deploy Now
</a>
<a
className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
Documentation
</div>
{/* Content */}
<div className="col-lg-6">
<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>
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
<div className="partners-wrapper">
<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">
<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">
<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">
<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>
<a href="#" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</a>
</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>
<a href="#" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</a>
</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>
<a href="#" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</a>
</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>
<a href="#" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</a>
</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>
<a href="#" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</a>
</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>
<a href="#" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</a>
</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>
<a href="#" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</a>
</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>
<a href="#" className="ux-link">
Learn Case <img src="assets/images/arrowlearn.svg" alt="" />
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<section className="ux-why-section">
<div className="container">
{/* Heading */}
<div className="displayflexhead" style={{ width: "90%" }}>
<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">
<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">
<div className="ux-why-card">
<span className="ux-number">01</span>
<h6>Systems over chaos</h6>
</div>
</div>
<div className="col-md-4">
<div className="ux-why-card">
<span className="ux-number">02</span>
<h6>Taste without ego</h6>
</div>
</div>
<div className="col-md-4">
<div className="ux-why-card">
<span className="ux-number">03</span>
<h6>AI as amplifier</h6>
</div>
</div>
<div className="col-md-4">
<div className="ux-why-card">
<span className="ux-number">04</span>
<h6>Built for operators</h6>
</div>
</div>
<div className="col-md-4">
<div className="ux-why-card">
<span className="ux-number">05</span>
<h6>Structured to scale</h6>
</div>
</div>
<div className="col-md-4">
<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">
<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">
{/* 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">
<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">
<p className="ux-section-label">Structured execution.</p>
<h2 className="ux-main-heading">
Every project follows the same internal discipline.
</h2>
</div>
<a href="#" className="btn ux-btn-primary">
Explore our Process
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</main>
{/* Steps */}
<div className="row g-4 align-items-stretch">
{/* STEP 1 */}
<div className="col-lg-4 position-relative">
<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">
<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">
<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">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
}
app/process/page.tsx
+166
View File
@@ -0,0 +1,166 @@
export default function Process() {
return (
<>
<>
<section className="ux-project-hero">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">Structured Execution.</h1>
<p className="ux-project-subtitle">
Every project follows a disciplined internal model.{" "}
</p>
</div>
</div>
</section>
{/* ===========================
PROCESS STEP CARD
=========================== */}
<section className="ux-process-step-section">
<div className="container">
<div className="ux-process-step-box">
{/* TOP */}
<span className="ux-process-number">01</span>
<h2 className="ux-process-title">Absorb</h2>
<p className="ux-process-subtitle">
Deep dive into research, positioning, clarity.
</p>
{/* CONTENT */}
<div className="ux-process-grid">
{/* IMAGE */}
<div className="ux-process-image">
<img src="assets/images/Absorb.png" alt="" />
</div>
{/* RIGHT TEXT */}
<div className="ux-process-content">
<div className="ux-process-item">
<h4>Research &amp; Discovery</h4>
<p>
We dissect the problem before designing the solution. Market
analysis, competitor mapping, audience profiling, and commercial
constraints all feed into our strategic foundation.
</p>
</div>
<div className="ux-process-item">
<h4>Positioning</h4>
<p>
Clarity beats cleverness. We define the core idea that
everything else extends from—one narrative that survives scale
and translation across every surface.
</p>
</div>
<div className="ux-process-item">
<h4>Strategic Framework</h4>
<p>
Commercial logic. Content architecture. Messaging hierarchy. We
build the invisible structure that makes execution possible.
</p>
</div>
</div>
</div>
</div>
<div className="ux-process-step-box">
{/* TOP */}
<span className="ux-process-number">02</span>
<h2 className="ux-process-title">Amplify</h2>
<p className="ux-process-subtitle">
System building. Design logic. AI acceleration.
</p>
{/* CONTENT */}
<div className="ux-process-grid">
{/* IMAGE */}
<div className="ux-process-image">
<img src="assets/images/Amplify.png" alt="" />
</div>
{/* RIGHT TEXT */}
<div className="ux-process-content">
<div className="ux-process-item">
<h4>Design Systems</h4>
<p>
We don't create isolated deliverables. We build scalable visual
languages—typography, color, components, motion—that maintain
consistency across platforms without creative compromise.{" "}
</p>
</div>
<div className="ux-process-item">
<h4>Digital Architecture</h4>
<p>
Information structure. User flows. Interface logic. Every screen
is intentional. Every interaction is justified.
</p>
</div>
<div className="ux-process-item">
<h4>AI-Assisted Iteration</h4>
<p>
We leverage AI to accelerate production without sacrificing
taste. Rapid variations. Content expansion. Format adaptation.
Speed with structure.
</p>
</div>
</div>
</div>
</div>
<div className="ux-process-step-box">
{/* TOP */}
<span className="ux-process-number">03</span>
<h2 className="ux-process-title">Activate</h2>
<p className="ux-process-subtitle">Deployment across formats.</p>
{/* CONTENT */}
<div className="ux-process-grid">
{/* IMAGE */}
<div className="ux-process-image">
<img src="assets/images/Activate.png" alt="" />
</div>
{/* RIGHT TEXT */}
<div className="ux-process-content">
<div className="ux-process-item">
<h4>Multi-Format Execution</h4>
<p>
Website. Campaign assets. Motion. Content. Social. The core idea
adapts seamlessly to every channel while maintaining structural
integrity.{" "}
</p>
</div>
<div className="ux-process-item">
<h4>Distribution Strategy</h4>
<p>
Launch planning. Platform optimization. Performance tracking. We
ensure the work reaches the right audience with maximum impact.
</p>
</div>
<div className="ux-process-item">
<h4>Ongoing Refinement</h4>
<p>
Digital isn't static. We monitor, iterate, and optimize based on
real-world performance—refining without rebuilding from scratch.{" "}
</p>
</div>
</div>
</div>
</div>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
</>
);
}
app/services/page.tsx
+196
View File
@@ -0,0 +1,196 @@
import Link from "next/link";
export default function Services() {
return (
<>
<section className="ux-project-hero">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">
We Don't Offer Services. <br />
We Build Systems.
</h1>
<p className="ux-project-subtitle">
Each vertical is designed to scale brands, revenue, and operations —{" "}
<br />
not just deliver assets.
</p>
</div>
<div className="ux-hero-actions">
<a href="#" className="btn ux-btn-primary">
View Digital Platforms
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
<a href="#" className="btn ux-btn-secondary">
Explore Brand Systems →
</a>
</div>
</div>
</section>
<section className="systems-section">
<div className="container systems-wrapper">
{/* LEFT (STICKY) */}
<div className="systems-left">
<p className="small-label">Systems We Build</p>
<h2>Engineered for measurable growth.</h2>
<p className="desc">
We don’t just deliver assets. We build interlocked systems designed to
scale your operations and revenue.
</p>
</div>
{/* RIGHT (CARDS) */}
<div className="systems-right">
{/* CARD 1 */}
<div className="system-card light">
<img src="assets/images/Digital.svg" alt="" />
<h4>Digital Platforms &amp; Experience Architecture</h4>
<p>
We design and build high-performance digital platforms structured
for conversion, scale, and integration.
</p>
<span>Includes:</span>
<ul>
<li>UX architecture</li>
<li>Scalable CMS builds</li>
<li>SaaS integrations</li>
<li>Conversion systems</li>
</ul>
<Link href="/digital_platform">
View Digital Platforms →
</Link>
</div>
{/* CARD 2 (DARK) */}
<div className="system-card dark">
<img src="assets/images/Brand.svg" alt="" />
<h4>Brand Architecture &amp; Identity Systems</h4>
<p>
We design brands as structured systems — from positioning to
scalable visual identity.
</p>
<span>Includes:</span>
<ul>
<li>Positioning</li>
<li>Messaging frameworks</li>
<li>Identity design</li>
<li>Brand guidelines</li>
</ul>
<Link href="/brand_architecture">
Explore Brand Systems →
</Link>
</div>
{/* CARD 3 */}
<div className="system-card light">
<img src="assets/images/Campaign.svg" alt="" />
<h4>Campaign Strategy &amp; Performance Systems</h4>
<p>Campaign thinking engineered for measurable growth, not noise.</p>
<span>Includes:</span>
<ul>
<li>Campaign architecture</li>
<li>Creative direction</li>
<li>Performance funnel systems</li>
<li>Paid creative frameworks</li>
</ul>
<Link href="/campaign_strategy">View Platform Systems →</Link>
</div>
{/* CARD 4 (DARK) */}
<div className="system-card dark">
<img src="assets/images/Content.svg" alt="" />
<h4>Content, Motion &amp; Story Systems</h4>
<p>
Narrative-driven content structured to build consistency and
velocity.
</p>
<span>Includes:</span>
<ul>
<li>Video systems</li>
<li>Motion design</li>
<li>Social content engines</li>
<li>Editorial frameworks</li>
</ul>
<Link href="/content_motion">View Platform Systems →</Link>
</div>
{/* CARD 5 (GREEN) */}
<div className="system-card highlight">
<img src="assets/images/AI-Powered.svg" alt="" />
<h4>AI-Powered Production &amp; Automation</h4>
<p>
We integrate intelligent workflows to increase speed, scale, and
precision.
</p>
<span>Includes:</span>
<ul>
<li>Automation frameworks</li>
<li>AI-assisted production</li>
<li>Workflow optimization</li>
<li>Toolchain integration</li>
</ul>
<Link href="/ai_powered">View Platform Systems →</Link>
</div>
</div>
</div>
</section>
<section className="connect-section">
<div className="container">
{/* HEADING */}
<h2>How Everything Connects</h2>
<p className="subtitle">
We design and build high-performance digital platforms structured for
conversion, scale, and integration.
</p>
{/* FLOW */}
<div className="connect-flow">
<div className="flow-item">
<div className="icon">
<img src="assets/images/Brand1.png" alt="" />
</div>
<span>Brand</span>
</div>
<div className="arrow">
<img src="assets/images/Everything.svg" alt="" />
</div>
<div className="flow-item">
<div className="icon">
<img src="assets/images/Platform.svg" alt="" />
</div>
<span>Platform</span>
</div>
<div className="arrow">
<img src="assets/images/Everything.svg" alt="" />
</div>
<div className="flow-item">
<div className="icon">
<img src="assets/images/Campaign1.svg" alt="" />
</div>
<span>Campaign</span>
</div>
<div className="arrow">
<img src="assets/images/Everything.svg" alt="" />
</div>
<div className="flow-item">
<div className="icon">
<img src="assets/images/content1.svg" alt="" />
</div>
<span>Content</span>
</div>
<div className="arrow">
<img src="assets/images/Everything.svg" alt="" />
</div>
<div className="flow-item">
<div className="icon">
<img src="assets/images/Automation.png" alt="" />
</div>
<span>Automation</span>
</div>
</div>
{/* BOTTOM TEXT */}
<p className="bottom-text">
Our systems are designed to interlock. Each strengthens the next.
</p>
</div>
</section>
</>
);
}
app/start_project/page.tsx
+264
View File
@@ -0,0 +1,264 @@
'use client';
import { useState } from "react";
import toast from "react-hot-toast";
export default function Start() {
const [form, setForm] = useState({
name: "",
company: "",
website: "",
project_type: "",
budget: "",
timeline: "",
description: ""
});
const [loading, setLoading] = useState(false);
const handleChange = (e: any) => {
setForm({ ...form, [e.target.name]: e.target.value });
};
const handleSubmit = async (e: any) => {
e.preventDefault();
setLoading(true);
try {
const res = await fetch("/api/submit", {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify(form),
});
const data = await res.json();
console.log(data);
toast.success("Form Submitted Successfully 🚀");
setForm({
name: "",
company: "",
website: "",
project_type: "",
budget: "",
timeline: "",
description: ""
});
} catch (err) {
console.error(err);
toast.error("Something went wrong ❌");
}
setLoading(false);
};
return (
<>
<section className="ux-project-hero">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">Start A Project</h1>
<p className="ux-project-subtitle">
Tell us what you're building. We'll structure the rest.
</p>
</div>
{/* joined users */}
<div className="ux-joined-box">
<div className="ux-avatar-group">
<img src="assets/images/user1.png" alt="" />
<img src="assets/images/user2.png" alt="" />
<img src="assets/images/user3.png" alt="" />
</div>
<p>
100+ people already joined
<br />
the AAideA
</p>
</div>
</div>
</section>
{/* ===========================
CONTACT FORM SECTION
=========================== */}
<section className="ux-contact-section">
<div className="container">
<div className="row g-4">
{/* LEFT INFO */}
<div className="col-lg-4">
<div className="ux-contact-left">
<a href="tel:+1236662343" className="ux-contact-link">
(123) 666-2343
</a>
<a href="mailto:hello@ovela.com" className="ux-contact-email">
hello@ovela.com
</a>
<div className="ux-social-list">
<a href="#">
Twitter <img src="assets/images/witterarrow.svg" alt="" />
</a>
<a href="#">
Facebook <img src="assets/images/witterarrow.svg" alt="" />
</a>
<a href="#">
Instagram <img src="assets/images/witterarrow.svg" alt="" />
</a>
<a href="#">
Linkedin <img src="assets/images/witterarrow.svg" alt="" />
</a>
<a href="#">
Youtube <img src="assets/images/witterarrow.svg" alt="" />
</a>
</div>
</div>
</div>
{/* RIGHT FORM */}
<div className="col-lg-8">
<div className="ux-contact-box">
<p className="ux-contact-mini">Let's Build it Properly.</p>
<h2 className="ux-contact-title">
Tell us what you're building. We'll structure the rest.
</h2>
<form onSubmit={handleSubmit}>
<div className="row g-4">
{/* Name */}
<div className="col-md-6">
<label>Name</label>
<input
name="name"
value={form.name}
onChange={handleChange}
type="text"
className="form-control ux-input active"
placeholder="John"
required
/>
</div>
{/* Company */}
<div className="col-md-6">
<label>Company Name</label>
<input
name="company"
value={form.company}
onChange={handleChange}
type="text"
className="form-control ux-input"
placeholder="enter name"
/>
</div>
{/* Website */}
<div className="col-md-6">
<label>Website</label>
<input
name="website"
value={form.website}
onChange={handleChange}
type="text"
className="form-control ux-input"
placeholder="enter website"
/>
</div>
{/* Project Type */}
<div className="col-md-6">
<label>Project Type</label>
<select
name="project_type"
value={form.project_type}
onChange={handleChange}
className="form-select ux-input"
>
<option value="">select type</option>
<option value="Web App">Web App</option>
<option value="Mobile App">Mobile App</option>
</select>
</div>
{/* Budget */}
<div className="col-md-6">
<label>Budget Range</label>
<select
name="budget"
value={form.budget}
onChange={handleChange}
className="form-select ux-input"
>
<option value="">select range</option>
<option value="$10K - $25K">$10K - $25K</option>
<option value="$25K+">$25K+</option>
</select>
</div>
{/* Timeline */}
<div className="col-md-6">
<label>Timeline</label>
<input
name="timeline"
value={form.timeline}
onChange={handleChange}
type="text"
className="form-control ux-input"
placeholder="estimated weeks"
/>
</div>
{/* Description */}
<div className="col-12">
<label>Brief Description</label>
<textarea
name="description"
value={form.description}
onChange={handleChange}
className="form-control ux-textarea"
rows={6}
placeholder="What are we building?"
/>
</div>
{/* Submit */}
<div className="col-12 text-end">
<button type="submit" className="ux-btn-primary" disabled={loading}>
{loading ? "Submitting..." : "Start a Project"}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
}
app/work/page.tsx
+231
View File
@@ -0,0 +1,231 @@
export default function WorkPage() {
return (
<>
<section className="ux-project-hero">
<div className="container">
{/* center content */}
<div className="ux-project-content text-center">
<h1 className="ux-project-title">Work</h1>
<p className="ux-project-subtitle">
Each project begins with one idea. Everything else extends from it.
</p>
</div>
{/* joined users */}
<div className="ux-joined-box">
<div className="ux-avatar-group">
<img src="assets/images/user1.png" alt="" />
<img src="assets/images/user2.png" alt="" />
<img src="assets/images/user3.png" alt="" />
</div>
<p>
100+ people already joined
<br />
the AAideA
</p>
</div>
</div>
</section>
{/* ===========================
CASE STUDY ACCORDION
=========================== */}
<section className="ux-case-section">
<div className="container">
<div className="accordion ux-case-accordion" id="uxCaseAccordion">
{/* ITEM 1 */}
<div className="accordion-item ux-case-item">
<h2 className="accordion-header">
<button
className="accordion-button collapsed ux-case-btn"
type="button"
data-bs-toggle="collapse"
data-bs-target="#caseOne"
>
<div className="ux-case-head">
<h3>HVAC</h3>
<p>
Idea: Modernize a legacy service brand into a digital-first
lead engine.
</p>
</div>
<div className="ux-case-right">
<span>
Full Case <img src="assets/images/fullcasearrow.svg" alt="" />
</span>
</div>
</button>
</h2>
<div
id="caseOne"
className="accordion-collapse collapse"
data-bs-parent="#uxCaseAccordion"
>
<div className="accordion-body ux-case-body">
<div className="ux-case-inner">
<img src="assets/images/AchievAR.png" className="ux-case-img" />
<div className="ux-case-grid">
<div>
<small>Component</small>
<strong>Brand Identity</strong>
</div>
<div>
<small>Component</small>
<strong>Website</strong>
</div>
<div>
<small>Component</small>
<strong>Pitch System</strong>
</div>
<div>
<small>Component</small>
<strong>Content Deck</strong>
</div>
<div>
<small>Component</small>
<strong>Demo Motion</strong>
</div>
</div>
</div>
</div>
</div>
</div>
{/* ITEM 2 OPEN */}
<div className="accordion-item ux-case-item">
<h2 className="accordion-header">
<button
className="accordion-button ux-case-btn"
type="button"
data-bs-toggle="collapse"
data-bs-target="#caseTwo"
>
<div className="ux-case-head">
<h3>AchievAR</h3>
<p>
Idea: Position immersive learning as structured transformation
— not novelty tech.
</p>
</div>
<div className="ux-case-right">
<span>
Full Case <img src="assets/images/fullcasearrow.svg" alt="" />
</span>
</div>
</button>
</h2>
<div
id="caseTwo"
className="accordion-collapse collapse show"
data-bs-parent="#uxCaseAccordion"
>
<div className="accordion-body ux-case-body">
<div className="ux-case-inner">
<img src="assets/images/AchievAR.png" className="ux-case-img" />
<div className="ux-case-grid">
<div>
<small>Component</small>
<strong>Brand Identity</strong>
</div>
<div>
<small>Component</small>
<strong>Website</strong>
</div>
<div>
<small>Component</small>
<strong>Pitch System</strong>
</div>
<div>
<small>Component</small>
<strong>Content Deck</strong>
</div>
<div>
<small>Component</small>
<strong>Demo Motion</strong>
</div>
</div>
</div>
</div>
</div>
</div>
{/* ITEM 3 */}
<div className="accordion-item ux-case-item">
<h2 className="accordion-header">
<button
className="accordion-button collapsed ux-case-btn"
type="button"
data-bs-toggle="collapse"
data-bs-target="#caseThree"
>
<div className="ux-case-head">
<h3>LynkedUp Pro</h3>
<p>
Idea: Design a verified talent ecosystem that balances trust
with scale.
</p>
</div>
<div className="ux-case-right">
<span>
Full Case <img src="assets/images/fullcasearrow.svg" alt="" />
</span>
</div>
</button>
</h2>
<div
id="caseThree"
className="accordion-collapse collapse"
data-bs-parent="#uxCaseAccordion"
>
<div className="accordion-body ux-case-body">
<div className="ux-case-inner">
<img src="assets/images/AchievAR.png" className="ux-case-img" />
<div className="ux-case-grid">
<div>
<small>Component</small>
<strong>Brand Identity</strong>
</div>
<div>
<small>Component</small>
<strong>Website</strong>
</div>
<div>
<small>Component</small>
<strong>Pitch System</strong>
</div>
<div>
<small>Component</small>
<strong>Content Deck</strong>
</div>
<div>
<small>Component</small>
<strong>Demo Motion</strong>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
{/* TOP CTA */}
<div className="ux-footer-hero">
<div className="container">
<div className="ux-footer-hero-content text-center">
<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">
<a href="#" className="btn ux-btn-primary">
Start a Project{" "}
<span className="ux-btn-icon">
<img src="assets/images/arrowbuttonwhite.svg" alt="" />
</span>
</a>
</div>
</div>
</div>
</div>
</>
);
}