Goutam/Genral_prototyping
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-23 14:19:10 +05:30
commit 05a46e5563
37 changed files with 1890 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

650
index.html Normal file
View File

@@ -0,0 +1,650 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Genral </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">
Smarter Product Design Starts with Digital Prototyping
</h1>
<p class="subtext">
Visualize, test, and refine your products with high-quality 3D prototyping, so you can <br> make faster decisions, reduce costs, and move to production with confidence.
</p>
<p class="steps">
From Idea → Design → Iteration → Approval → Production
</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>
Turn Your Product Ideas into Clear, Testable Visuals
</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>2,000+ </h1>
<span>Designs Visualized <br> Across Industries</span>
</div>
<hr>
<div class="content-text">
<p>
We help businesses like yours create high-quality digital prototypes that allow you to see, test, and refine your product before a single unit is manufactured.
</p>
<p>
From materials and textures to colors and finishes, you can explore multiple variations quickly making it easier to choose what works best without wasting time or budget.
</p>
<p class="highlight">
One idea can lead to countless possibilities, when you have the right visualization.
</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>
With digital prototyping, you can explore multiple directions, compare options side by side, and finalize designs faster without delays or added costs.
</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>What’s Slowing Down Your Product Development?</h2>
<p>
If your current process feels slow, expensive, or limiting, you're not alone.
</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">
How digital prototyping improves your costs, <br> speed, and decision-making
</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 Businesses Trust Our Approach</h2>
<p class="why-subtext">
Because better decisions lead to better products and better profits
</p>
<ul>
<li>We built Clarity-Driven Decisions</li>
<li>Focus on Business-Driven Design</li>
<li>High-Fidelity 3D Visualization</li>
<li>Custom Product Workflows</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’ll take one of your products and show you how digital prototyping can help you design faster, avoid costly mistakes, and move forward with confidence.
</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>