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

update

Browse Source
This commit is contained in:
Goutam
2026-04-20 19:58:32 +05:30
parent 3eeb6c7344
commit c859db18a6
19 changed files with 273 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

335
index.html
View File

@@ -7,6 +7,8 @@
<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">
@@ -26,10 +28,10 @@
</div>
<!-- Right Vertical Text -->
<div class="vertical-text">
Art Avenue
<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="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">
@@ -46,29 +48,29 @@
</div>
</div>
<!-- Scroll Button -->
<div class="scroll-down" class="cta-section">
<a href="#footer" class="scroll-down">
<img src="images/heroarrow.svg" alt="">
</div>
</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">
<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">
<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">
<div class="experience-box" data-aos="fade-left">
<h1>2K+</h1>
<span>YEARS OF <br> EXPERIENCE</span>
</div>
@@ -91,10 +93,10 @@
<section class="compare-section">
<div class="container">
<div class="top-content">
<div class="heading-main">
<div class="heading-main" data-aos="fade-up">
<h2>Design Without Limits.<br>Visualize Before You Manufacture.</h2>
</div>
<div class="right-text">
<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
@@ -104,41 +106,57 @@
</div>
<div class="wrapper">
<div class="before">
<img src="images/beforeslide.png">
<span class="label">BEFORE</span>
<img src="images/beforeslide.png">
<span class="label">BEFORE</span>
</div>
<div class="after">
<img src="images/afterslide.png">
<span class="label">AFTER</span>
<img src="images/afterslide.png">
<span class="label">AFTER</span>
</div>
<div class="scroller">
<div class="circle"></div>
<div class="circle"></div>
</div>
</div>
</div>
</div>
</section>
<script>
let isDown = false;
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;
if (!isDown) return;
let rect = wrapper.getBoundingClientRect();
let x = e.clientX - rect.left;
const rect = wrapper.getBoundingClientRect();
targetX = e.clientX - rect.left;
x = Math.max(0, Math.min(x, rect.width));
after.style.width = x + "px";
scroller.style.left = x + "px";
targetX = Math.max(0, Math.min(targetX, rect.width));
});
</script>
<section class="challenge-section">
// 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">
@@ -153,7 +171,7 @@
<div class="row g-0">
<!-- Card 1 -->
<div class="col-lg-3 col-md-6">
<div class="challenge-card">
<div class="challenge-card" data-aos="fade-up" data-aos-delay="200">
<h5>Multiple Physical Samples</h5>
<img src="images/Multiple.png" alt="">
<p>
@@ -163,7 +181,7 @@
</div>
<!-- Card 2 -->
<div class="col-lg-3 col-md-6">
<div class="challenge-card">
<div class="challenge-card" data-aos="fade-up" data-aos-delay="300">
<h5>Slow Decision-Making</h5>
<img src="images/Slow.png" alt="">
<p>
@@ -173,7 +191,7 @@
</div>
<!-- Card 3 -->
<div class="col-lg-3 col-md-6">
<div class="challenge-card">
<div class="challenge-card" data-aos="fade-up" data-aos-delay="400">
<h5>High Production Costs</h5>
<img src="images/High.png" alt="">
<p>
@@ -183,7 +201,7 @@
</div>
<!-- Card 4 -->
<div class="col-lg-3 col-md-6">
<div class="challenge-card">
<div class="challenge-card" data-aos="fade-up" data-aos-delay="400">
<h5>Limited Experimentation</h5>
<img src="images/Limited.png" alt="">
<p>
@@ -205,7 +223,7 @@
<div class="row g-4">
<!-- LEFT: OLD WAY -->
<div class="col-lg-6">
<div class="approach-card old-way text-start">
<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">
@@ -219,7 +237,7 @@
</div>
<!-- RIGHT: NEW WAY -->
<div class="col-lg-6">
<div class="approach-card new-way text-start">
<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">
@@ -237,44 +255,65 @@
<section class="evolution-section">
<div class="container">
<div class="evolutionwrap">
<!-- TOP HEADINGS -->
<div class="evolution-header">
<div class="phase phase-left">
<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">
<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">
<!-- 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 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">
<div class="heading-main mb-5"
data-aos="fade-up">
<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">
<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>
@@ -282,9 +321,13 @@
</p>
</div>
</div>
<!-- 02 -->
<div class="col-lg-3 col-md-6">
<div class="service-card">
<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>
@@ -292,15 +335,23 @@
</p>
</div>
</div>
<!-- IMAGE -->
<div class="col-lg-3 col-md-6">
<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">
<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>
@@ -308,9 +359,13 @@
</p>
</div>
</div>
<!-- 04 -->
<div class="col-lg-3 col-md-6">
<div class="service-card">
<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>
@@ -318,15 +373,23 @@
</p>
</div>
</div>
<!-- IMAGE -->
<div class="col-lg-3 col-md-6">
<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">
<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>
@@ -334,9 +397,13 @@
</p>
</div>
</div>
<!-- 06 -->
<div class="col-lg-3 col-md-6">
<div class="service-card">
<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>
@@ -344,9 +411,13 @@
</p>
</div>
</div>
</div>
</div>
</section>
<!-- VISUAL -->
<section class="visualprototyping">
<div class="container">
@@ -382,11 +453,11 @@
<div class="compare-card">
<div class="wrapper">
<div class="before">
<img src="images/Visualafterright.png">
<img src="images/Visualbeforeright.png">
<span class="label">BEFORE</span>
</div>
<div class="after">
<img src="images/Visualbeforeright.png">
<img src="images/Visualafterright.png">
<span class="label">AFTER</span>
</div>
<div class="scroller">
@@ -402,60 +473,105 @@
<script>
document.querySelectorAll(".wrapper").forEach(wrapper => {
let isDown = false;
const after = wrapper.querySelector(".after");
const scroller = wrapper.querySelector(".scroller");
const after = wrapper.querySelector(".after");
const scroller = wrapper.querySelector(".scroller");
scroller.addEventListener("mousedown", () => isDown = true);
window.addEventListener("mouseup", () => isDown = false);
let isDown = false;
window.addEventListener("mousemove", (e) => {
if (!isDown) return;
let targetX = wrapper.offsetWidth / 2;
let currentX = targetX;
let rect = wrapper.getBoundingClientRect();
let x = e.clientX - rect.left;
// start drag
scroller.addEventListener("mousedown", () => isDown = true);
x = Math.max(0, Math.min(x, rect.width));
// stop drag
window.addEventListener("mouseup", () => isDown = false);
after.style.width = x + "px";
scroller.style.left = x + "px";
// 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">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>
</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>
<!-- CENTER VIDEO -->
<div class="material-video">
<img src="/images/Material5.png" class="video-thumb">
<div class="play-btn">
▶
</div>
<div class="material-item"
data-aos="zoom-in"
data-aos-delay="200">
<img src="images/Material2.png">
</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 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>
</section>
</div>
<!-- CENTER VIDEO -->
<div class="material-video"
data-aos="fade-up"
data-aos-delay="200"
data-aos-duration="1000">
<img src="/images/Material5.png" class="video-thumb">
<div class="play-btn"
data-aos="pulse"
data-aos-delay="500">
▶
</div>
</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">
@@ -465,20 +581,20 @@
What this means for your bottom line and product <br> development efficiency
</p>
</div>
<div class="impact-grid">
<div class="impact-card">
<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">
<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">
<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">
<div class="impact-card" data-aos="zoom-in" data-aos-delay="100">
<h3>100%</h3>
<p>Better product-market fit</p>
</div>
@@ -490,14 +606,14 @@
<div class="container">
<div class="row align-items-center">
<!-- LEFT IMAGES -->
<div class="col-lg-6">
<div class="why-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">
<div class="why-content" data-aos="fade-left">
<h2>Why Choose Us</h2>
<p class="why-subtext">
What this means for your bottom line and product development efficiency
@@ -530,8 +646,17 @@
</div>
</div>
</section>
<footer>
<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>