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

first commit

Browse Source
This commit is contained in:
Goutam
2026-04-20 16:56:53 +05:30
commit 3eeb6c7344
35 changed files with 1604 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

537
index.html Normal file
View File

@@ -0,0 +1,537 @@
<!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">
<!-- 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">
Art Avenue
</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 -->
<div class="scroll-down" class="cta-section">
<img src="images/heroarrow.svg" alt="">
</div>
</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">
<h6>ABOUT US</h6>
<h2>
Introducing Advanced Digital Product
Manipulation & Prototyping
</h2>
</div>
<div class="image-wrap">
<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">
<h1>2K+</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">
<h2>Design Without Limits.<br>Visualize Before You Manufacture.</h2>
</div>
<div class="right-text">
<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>
let isDown = false;
const wrapper = document.querySelector(".wrapper");
const after = document.querySelector(".after");
const scroller = document.querySelector(".scroller");
scroller.addEventListener("mousedown", () => isDown = true);
window.addEventListener("mouseup", () => isDown = false);
window.addEventListener("mousemove", (e) => {
if (!isDown) return;
let rect = wrapper.getBoundingClientRect();
let x = e.clientX - rect.left;
x = Math.max(0, Math.min(x, rect.width));
after.style.width = x + "px";
scroller.style.left = x + "px";
});
</script>
<section class="challenge-section">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<div class="phase phase-left">
<h3>Phase 1 : Raw Sketch</h3>
<p>IDEA & CONCEPTUALIZATION</p>
</div>
<div class="phase phase-right">
<h3>Phase 2 : Photorealistic Prototype</h3>
<p>DIGITAL VISUALIZATION & REFINEMENT</p>
</div>
</div>
<!-- MAIN IMAGE BOX -->
<div class="evolution-box">
<!-- LEFT LABEL -->
<div class="tag tag-left">Ideation</div>
<!-- RIGHT LABEL -->
<div class="tag tag-right">H-FI Visualization</div>
<!-- CENTER IMAGE -->
<img src="images/Sketch.png" alt="Evolution Design" class="evolution-image">
</div>
</div>
</div>
</section>
<section class="services-section">
<div class="container text-center">
<!-- Heading -->
<div class="heading-main mb-5">
<h2>What We Do</h2>
<p>
Comprehensive digital prototyping services tailored to your
product development needs
</p>
</div>
<!-- Grid -->
<div class="row g-4">
<!-- 01 -->
<div class="col-lg-3 col-md-6">
<div class="service-card">
<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">
<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">
<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">
<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">
<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">
<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">
<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">
<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/Visualafterright.png">
<span class="label">BEFORE</span>
</div>
<div class="after">
<img src="images/Visualbeforeright.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 => {
let isDown = false;
const after = wrapper.querySelector(".after");
const scroller = wrapper.querySelector(".scroller");
scroller.addEventListener("mousedown", () => isDown = true);
window.addEventListener("mouseup", () => isDown = false);
window.addEventListener("mousemove", (e) => {
if (!isDown) return;
let rect = wrapper.getBoundingClientRect();
let x = e.clientX - rect.left;
x = Math.max(0, Math.min(x, rect.width));
after.style.width = x + "px";
scroller.style.left = x + "px";
});
});
</script>
<section class="material-section">
<div class="container">
<div class="optionmult">
<!-- TITLE -->
<h3 class="material-title">Multiple Material Options</h3>
<!-- TOP IMAGES -->
<div class="material-grid top-grid">
<div class="material-item"><img src="images/Material1.png"></div>
<div class="material-item"><img src="images/Material2.png"></div>
<div class="material-item"><img src="images/Material3.png"></div>
<div class="material-item"><img src="images/Material4.png"></div>
</div>
</div>
<!-- CENTER VIDEO -->
<div class="material-video">
<img src="/images/Material5.png" class="video-thumb">
<div class="play-btn">
▶
</div>
</div>
<!-- BOTTOM IMAGES -->
<div class="material-grid bottom-grid">
<!--
<button class="nav-btn left">←</button> -->
<div class="material-item"><img src="images/Material9.png"></div>
<div class="material-item"><img src="images/Material7.png"></div>
<div class="material-item"><img src="images/Material8.png"></div>
<div class="material-item"><img src="images/Material9.png"></div>
<!--
<button class="nav-btn right">→</button> -->
</div>
</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">
What this means for your bottom line and product <br> development efficiency
</p>
</div>
<div class="impact-grid">
<div class="impact-card">
<h3>50–70%</h3>
<p>Reduction in prototyping cost</p>
</div>
<div class="impact-card">
<h3>3x</h3>
<p>Faster product approval cycles</p>
</div>
<div class="impact-card">
<h3>10x</h3>
<p>Increased design experimentation</p>
</div>
<div class="impact-card">
<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">
<img src="images/Choose.png" class="img-small">
</div>
</div>
<!-- RIGHT CONTENT -->
<div class="col-lg-6">
<div class="why-content">
<h2>Why Choose Us</h2>
<p class="why-subtext">
What this means for your bottom line and product development efficiency
</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="#" class="btn-primary">Schedule a Demo</a>
<a href="#" class="btn-outline"><img src="images/email.svg" alt="">Start Your Free Pilot</a>
</div>
</div>
</div>
</div>
</section>
<footer>
<p>Designed By AchievAR.ai</p>
</footer>
</body>
</html>