656 lines
25 KiB
HTML
656 lines
25 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<title>Art Avenue </title>
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<!-- Bootstrap -->
|
||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
|
||
<!-- AOS CSS -->
|
||
<link href="https://unpkg.com/aos@2.3.4/dist/aos.css" rel="stylesheet">
|
||
<!-- Custom CSS -->
|
||
<link rel="stylesheet" href="style.css">
|
||
<link rel="stylesheet" href="responsive.css">
|
||
</head>
|
||
<body>
|
||
<section class="hero-section">
|
||
<!-- Video Background -->
|
||
<img class="hero-video" src="images/MainBackground.png" alt="">
|
||
<!-- Overlay -->
|
||
<div class="overlay"></div>
|
||
<!-- Top Left Logo -->
|
||
<div class="logo">
|
||
<div class="topflex-wrapp">
|
||
<a href="#"><img src="images/logo.png" alt=""></a>
|
||
<a href="#"><img src="images/achiveAR.png" alt=""></a>
|
||
</div>
|
||
</div>
|
||
<!-- Right Vertical Text -->
|
||
<div class="vertical-text">
|
||
<img src="images/ArtAvenueright.svg" alt="">
|
||
</div>
|
||
<!-- Content -->
|
||
<div class="container h-100 d-flex align-items-center justify-content-center text-center" >
|
||
<div class="content text-white">
|
||
<p class="tagline">PROPOSAL — DIGITAL PROTOTYPING</p>
|
||
<h1 class="main-heading">
|
||
Digital Product Prototyping That <br>
|
||
Eliminates Guesswork
|
||
</h1>
|
||
<p class="subtext">
|
||
High-Fidelity Visualization for Faster Decisions, Lower Costs & <br>
|
||
Scalable Product Design
|
||
</p>
|
||
<p class="steps">
|
||
From Idea — Iteration — Approval
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- Scroll Button -->
|
||
<a href="#footer" class="scroll-down">
|
||
<img src="images/heroarrow.svg" alt="">
|
||
</a>
|
||
</section>
|
||
<section class="about-section ">
|
||
<div class="container">
|
||
<div class="row align-items-start">
|
||
<!-- LEFT SIDE -->
|
||
<div class="col-lg-6">
|
||
<div class="heading-main" data-aos="fade-right">
|
||
<h6>ABOUT US</h6>
|
||
<h2>
|
||
Introducing Advanced Digital Product
|
||
Manipulation & Prototyping
|
||
</h2>
|
||
</div>
|
||
<div class="image-wrap" data-aos="fade-up">
|
||
<img src="images/Advanced Digital.png" class="img-fluid img-top" alt="">
|
||
</div>
|
||
</div>
|
||
<!-- RIGHT SIDE -->
|
||
<div class="col-lg-6">
|
||
<div class="experience-box" data-aos="fade-left">
|
||
<h1>10+</h1>
|
||
<span>YEARS OF <br> EXPERIENCE</span>
|
||
</div>
|
||
<hr>
|
||
<div class="content-text">
|
||
<p>
|
||
At AchievAR.ai, we help Art Avenue transform ideas into high-fidelity visual realities instantly.
|
||
</p>
|
||
<p>
|
||
From a single concept, we generate multiple product variations with different materials, textures, and environments without manufacturing a single piece.
|
||
</p>
|
||
<p class="highlight">
|
||
One product concept → Endless variations
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="compare-section">
|
||
<div class="container">
|
||
<div class="top-content">
|
||
<div class="heading-main" data-aos="fade-up">
|
||
<h2>Design Without Limits.<br>Visualize Before You Manufacture.</h2>
|
||
</div>
|
||
<div class="right-text" data-aos="fade-down">
|
||
<p>
|
||
A premium digital prototyping solution crafted for Art Avenue,
|
||
enabling exploration, testing, and scaling of product designs
|
||
without physical sampling.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<div class="wrapper">
|
||
<div class="before">
|
||
<img src="images/beforeslide.png">
|
||
<span class="label">BEFORE</span>
|
||
</div>
|
||
|
||
<div class="after">
|
||
<img src="images/afterslide.png">
|
||
<span class="label">AFTER</span>
|
||
</div>
|
||
|
||
<div class="scroller">
|
||
<div class="circle"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<script>
|
||
const wrapper = document.querySelector(".wrapper");
|
||
const after = document.querySelector(".after");
|
||
const scroller = document.querySelector(".scroller");
|
||
|
||
let isDown = false;
|
||
let targetX = wrapper.offsetWidth / 2;
|
||
let currentX = targetX;
|
||
|
||
// mouse events
|
||
scroller.addEventListener("mousedown", () => isDown = true);
|
||
window.addEventListener("mouseup", () => isDown = false);
|
||
|
||
window.addEventListener("mousemove", (e) => {
|
||
if (!isDown) return;
|
||
|
||
const rect = wrapper.getBoundingClientRect();
|
||
targetX = e.clientX - rect.left;
|
||
|
||
targetX = Math.max(0, Math.min(targetX, rect.width));
|
||
});
|
||
|
||
// smooth animation loop
|
||
function animate() {
|
||
currentX += (targetX - currentX) * 0.15; // 🔥 smoothing factor
|
||
|
||
after.style.width = currentX + "px";
|
||
scroller.style.left = currentX + "px";
|
||
|
||
requestAnimationFrame(animate);
|
||
}
|
||
|
||
animate();
|
||
</script>
|
||
<section class="challenge-section" data-aos="fade-up" data-aos-delay="100">
|
||
<div class="container text-center">
|
||
<!-- Heading -->
|
||
<div class="heading-main mb-5">
|
||
<h2>The Challenge You Face</h2>
|
||
<p>
|
||
Your current product development process involves significant time, cost, and effort,
|
||
especially during the early stages of prototyping and design validation.
|
||
</p>
|
||
</div>
|
||
<!-- Cards Wrapper -->
|
||
<div class="challenge-wrapper">
|
||
<div class="row g-0">
|
||
<!-- Card 1 -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="challenge-card" data-aos="fade-up" data-aos-delay="200">
|
||
<h5>Multiple Physical Samples</h5>
|
||
<img src="images/Multiple.png" alt="">
|
||
<p>
|
||
Creating variations in materials, textures, colors, and patterns requires.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- Card 2 -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="challenge-card" data-aos="fade-up" data-aos-delay="300">
|
||
<h5>Slow Decision-Making</h5>
|
||
<img src="images/Slow.png" alt="">
|
||
<p>
|
||
Waiting for samples delays approvals and extends product development cycles
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- Card 3 -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="challenge-card" data-aos="fade-up" data-aos-delay="400">
|
||
<h5>High Production Costs</h5>
|
||
<img src="images/High.png" alt="">
|
||
<p>
|
||
Every iteration adds manufacturing costs and material waste
|
||
</p>
|
||
</div>
|
||
</div>
|
||
<!-- Card 4 -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="challenge-card" data-aos="fade-up" data-aos-delay="400">
|
||
<h5>Limited Experimentation</h5>
|
||
<img src="images/Limited.png" alt="">
|
||
<p>
|
||
Budget constraints prevent exploring multiple design directions
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="approach-section">
|
||
<div class="container text-center">
|
||
<!-- Heading -->
|
||
<div class="heading-main">
|
||
<h2>Why This Approach Works</h2>
|
||
<p>Delivering Faster Decisions with Smarter Visualization</p>
|
||
</div>
|
||
<div class="row g-4">
|
||
<!-- LEFT: OLD WAY -->
|
||
<div class="col-lg-6">
|
||
<div class="approach-card old-way text-start" data-aos="fade-right">
|
||
<h6 class="label red">TRADITIONAL PROTOTYPING</h6>
|
||
<h2 class="title">The Old Way</h2>
|
||
<div class="steps-grid">
|
||
<div class="step red">→ Design</div>
|
||
<div class="step red">→ Reproduce</div>
|
||
<div class="step red">→ Prototype</div>
|
||
<div class="step red">→ Delay</div>
|
||
<div class="step red">→ Modify</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- RIGHT: NEW WAY -->
|
||
<div class="col-lg-6">
|
||
<div class="approach-card new-way text-start" data-aos="fade-left">
|
||
<h6 class="label gold">OUR APPROACH</h6>
|
||
<h2 class="title">The New Way</h2>
|
||
<div class="steps-grid">
|
||
<div class="step gold">→ Design</div>
|
||
<div class="step gold">→ Digitally Test</div>
|
||
<div class="step gold">→ Refine</div>
|
||
<div class="step gold">→ Approve</div>
|
||
<div class="step gold">→ Produce</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<section class="evolution-section">
|
||
<div class="container">
|
||
<div class="evolutionwrap">
|
||
|
||
<!-- TOP HEADINGS -->
|
||
<div class="evolution-header" data-aos="fade-up">
|
||
<div class="phase phase-left" data-aos="fade-right" data-aos-delay="100">
|
||
<h3>Phase 1 : Raw Sketch</h3>
|
||
<p>IDEA & CONCEPTUALIZATION</p>
|
||
</div>
|
||
|
||
<div class="phase phase-right" data-aos="fade-left" data-aos-delay="200">
|
||
<h3>Phase 2 : Photorealistic Prototype</h3>
|
||
<p>DIGITAL VISUALIZATION & REFINEMENT</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- MAIN IMAGE BOX -->
|
||
<div class="evolution-box" data-aos="zoom-in" data-aos-delay="300">
|
||
|
||
<div class="tag tag-left" data-aos="fade-right" data-aos-delay="400">
|
||
Ideation
|
||
</div>
|
||
|
||
<div class="tag tag-right" data-aos="fade-left" data-aos-delay="400">
|
||
H-FI Visualization
|
||
</div>
|
||
|
||
<img src="images/Sketch.png"
|
||
alt="Evolution Design"
|
||
class="evolution-image"
|
||
data-aos="fade-up"
|
||
data-aos-delay="500">
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section class="services-section">
|
||
<div class="container text-center">
|
||
|
||
<!-- Heading -->
|
||
<div class="heading-main mb-5"
|
||
data-aos="fade-up">
|
||
<h2>What We Do</h2>
|
||
<p>
|
||
We Built Around Your Design Process
|
||
</p>
|
||
</div>
|
||
|
||
<!-- Grid -->
|
||
<div class="row g-4">
|
||
|
||
<!-- 01 -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="service-card"
|
||
data-aos="flip-up"
|
||
data-aos-delay="100"
|
||
data-aos-duration="900">
|
||
<span class="number">01</span>
|
||
<h5>Client Asset Integration</h5>
|
||
<p>
|
||
Integrate your existing textures, fabrics, and 3D models. Apply materials to multiple products and test endless combinations instantly.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 02 -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="service-card"
|
||
data-aos="flip-up"
|
||
data-aos-delay="200"
|
||
data-aos-duration="900">
|
||
<span class="number">02</span>
|
||
<h5>Reference-Based Creation</h5>
|
||
<p>
|
||
Don’t have digital assets? Start from a single image, sketch, or existing product. We build high-quality visual outputs from it.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- IMAGE -->
|
||
<div class="col-lg-3 col-md-6"
|
||
data-aos="zoom-in"
|
||
data-aos-delay="150"
|
||
data-aos-duration="900">
|
||
<div class="image-card">
|
||
<img src="images/Whatwethird.png" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 03 -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="service-card"
|
||
data-aos="flip-up"
|
||
data-aos-delay="300"
|
||
data-aos-duration="900">
|
||
<span class="number">03</span>
|
||
<h5>Material & Texture Swapping</h5>
|
||
<p>
|
||
Seamlessly import existing product images, references, and design assets to start your digital transformation instantly.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 04 -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="service-card"
|
||
data-aos="flip-up"
|
||
data-aos-delay="400"
|
||
data-aos-duration="900">
|
||
<span class="number">04</span>
|
||
<h5>Seamless Pattern Creation</h5>
|
||
<p>
|
||
Create and apply custom patterns, prints, and textures across your entire product line with precision.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- IMAGE -->
|
||
<div class="col-lg-3 col-md-6"
|
||
data-aos="zoom-in"
|
||
data-aos-delay="250"
|
||
data-aos-duration="900">
|
||
<div class="image-card">
|
||
<img src="images/Whatwefi ve.png" alt="">
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 05 -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="service-card"
|
||
data-aos="flip-up"
|
||
data-aos-delay="500"
|
||
data-aos-duration="900">
|
||
<span class="number">05</span>
|
||
<h5>Cross-Product Scaling</h5>
|
||
<p>
|
||
Apply successful design elements across multiple product categories, ensuring cohesive collections.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 06 -->
|
||
<div class="col-lg-3 col-md-6">
|
||
<div class="service-card"
|
||
data-aos="flip-up"
|
||
data-aos-delay="600"
|
||
data-aos-duration="900">
|
||
<span class="number">06</span>
|
||
<h5>Contextual Staging</h5>
|
||
<p>
|
||
Visualize products in realistic interior settings to understand how designs perform in real-world environments.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
|
||
|
||
<!-- VISUAL -->
|
||
<section class="visualprototyping">
|
||
<div class="container">
|
||
<!-- Heading -->
|
||
<div class="heading-main mb-5 text-center">
|
||
<h2>Visual Prototyping in Action</h2>
|
||
<p>
|
||
Comprehensive digital prototyping services tailored to your <br> product development needs
|
||
</p>
|
||
</div>
|
||
<div class="row g-4">
|
||
<!-- CARD 1 -->
|
||
<div class="col-md-6">
|
||
<div class="compare-card">
|
||
<div class="wrapper">
|
||
<div class="before">
|
||
<img src="images/Visualafter.png">
|
||
<span class="label">BEFORE</span>
|
||
</div>
|
||
<div class="after">
|
||
<img src="images/Visualleft.png">
|
||
<span class="label">AFTER</span>
|
||
</div>
|
||
<div class="scroller">
|
||
<div class="circle"></div>
|
||
</div>
|
||
</div>
|
||
<p>Material Transformation</p>
|
||
</div>
|
||
</div>
|
||
<!-- CARD 2 -->
|
||
<div class="col-md-6">
|
||
<div class="compare-card">
|
||
<div class="wrapper">
|
||
<div class="before">
|
||
<img src="images/Visualbeforeright.png">
|
||
<span class="label">BEFORE</span>
|
||
</div>
|
||
<div class="after">
|
||
<img src="images/Visualafterright.png">
|
||
<span class="label">AFTER</span>
|
||
</div>
|
||
<div class="scroller">
|
||
<div class="circle"></div>
|
||
</div>
|
||
</div>
|
||
<p>Design Iteration</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<script>
|
||
document.querySelectorAll(".wrapper").forEach(wrapper => {
|
||
|
||
const after = wrapper.querySelector(".after");
|
||
const scroller = wrapper.querySelector(".scroller");
|
||
|
||
let isDown = false;
|
||
|
||
let targetX = wrapper.offsetWidth / 2;
|
||
let currentX = targetX;
|
||
|
||
// start drag
|
||
scroller.addEventListener("mousedown", () => isDown = true);
|
||
|
||
// stop drag
|
||
window.addEventListener("mouseup", () => isDown = false);
|
||
|
||
// track mouse
|
||
window.addEventListener("mousemove", (e) => {
|
||
if (!isDown) return;
|
||
|
||
const rect = wrapper.getBoundingClientRect();
|
||
targetX = e.clientX - rect.left;
|
||
|
||
targetX = Math.max(0, Math.min(targetX, rect.width));
|
||
});
|
||
|
||
// 🔥 smooth animation loop per slider
|
||
function animate() {
|
||
currentX += (targetX - currentX) * 0.15; // smoothing factor
|
||
|
||
after.style.width = currentX + "px";
|
||
scroller.style.left = currentX + "px";
|
||
|
||
requestAnimationFrame(animate);
|
||
}
|
||
|
||
animate();
|
||
});
|
||
</script>
|
||
<section class="material-section">
|
||
<div class="container">
|
||
|
||
<div class="optionmult">
|
||
|
||
<!-- TITLE -->
|
||
<h3 class="material-title"
|
||
data-aos="fade-up"
|
||
data-aos-duration="900">
|
||
Multiple Material Options
|
||
</h3>
|
||
|
||
<!-- TOP IMAGES -->
|
||
<div class="material-grid top-grid">
|
||
|
||
<div class="material-item"
|
||
data-aos="zoom-in"
|
||
data-aos-delay="100">
|
||
<img src="images/Material1.png">
|
||
</div>
|
||
|
||
<div class="material-item"
|
||
data-aos="zoom-in"
|
||
data-aos-delay="200">
|
||
<img src="images/Material2.png">
|
||
</div>
|
||
|
||
<div class="material-item"
|
||
data-aos="zoom-in"
|
||
data-aos-delay="300">
|
||
<img src="images/Material3.png">
|
||
</div>
|
||
|
||
<div class="material-item"
|
||
data-aos="zoom-in"
|
||
data-aos-delay="400">
|
||
<img src="images/Material4.png">
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CENTER VIDEO -->
|
||
<div class="material-video"
|
||
data-aos="fade-up"
|
||
data-aos-delay="200"
|
||
data-aos-duration="1000">
|
||
|
||
<video class="video-player" autoplay muted loop playsinline>
|
||
<source src="images/Video.mp4" type="video/mp4">
|
||
</video>
|
||
|
||
</div>
|
||
|
||
<!-- BOTTOM IMAGES (if added later they will also animate same way) -->
|
||
|
||
</div>
|
||
</section>
|
||
<!-- SECTION 1 : IMPACT -->
|
||
<section class="impact-section">
|
||
<div class="container text-center">
|
||
<div class="heading-main">
|
||
<h2>Expected Business Impact</h2>
|
||
<p class="impact-subtitle mb-5">
|
||
Drive innovation, reduce risk, and accelerate product success <br> with powerful visualization and design support
|
||
</p>
|
||
</div>
|
||
<div class="impact-grid" >
|
||
<div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
|
||
<h3>50–70%</h3>
|
||
<p>Reduction in prototyping cost</p>
|
||
</div>
|
||
<div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
|
||
<h3>3x</h3>
|
||
<p>Faster product approval cycles</p>
|
||
</div>
|
||
<div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
|
||
<h3>10x</h3>
|
||
<p>Increased design experimentation</p>
|
||
</div>
|
||
<div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
|
||
<h3>100%</h3>
|
||
<p>Better product-market fit</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- SECTION 2 : WHY CHOOSE US -->
|
||
<section class="why-section">
|
||
<div class="container">
|
||
<div class="row align-items-center">
|
||
<!-- LEFT IMAGES -->
|
||
<div class="col-lg-6" >
|
||
<div class="why-images" data-aos="fade-right">
|
||
<img src="images/Choose.png" class="img-small">
|
||
</div>
|
||
</div>
|
||
<!-- RIGHT CONTENT -->
|
||
<div class="col-lg-6">
|
||
<div class="why-content" data-aos="fade-left">
|
||
<h2>Why Choose Us</h2>
|
||
<p class="why-subtext">
|
||
More Than Visualization, We Build Decision Systems
|
||
</p>
|
||
<ul>
|
||
<li>We build decision-making tools, not just pretty visuals</li>
|
||
<li>Focus on business efficiency, not just aesthetics</li>
|
||
<li>Deep expertise in high-fidelity product visualization</li>
|
||
<li>Custom workflows tailored to your product type</li>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- SECTION 3 : CTA -->
|
||
<section class="cta-section">
|
||
<div class="container">
|
||
<div class="cta-box">
|
||
<div class="cta-content">
|
||
<h2>Let's Test This With Your Product</h2>
|
||
<p>
|
||
We'd love to demonstrate what's possible with a quick pilot using your own product.
|
||
</p>
|
||
<div class="cta-buttons">
|
||
<a href="https://fill.boloforms.com/signature/36979d9a-9fa8-4826-a698-0a517e28d186?p=view" class="btn-primary">Schedule a Demo</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<footer id="footer">
|
||
<p>Designed By AchievAR.ai</p>
|
||
</footer>
|
||
<!-- AOS JS -->
|
||
<script src="https://unpkg.com/aos@2.3.4/dist/aos.js"></script>
|
||
<script>
|
||
AOS.init({
|
||
duration: 1000,
|
||
once: true,
|
||
offset: 100
|
||
});
|
||
</script>
|
||
</body>
|
||
</html> |