WDIPL/Wdipl-react
2
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

content update 22 to 32 pages

Browse Source
This commit is contained in:
YasinShaikh123
2026-03-27 11:17:56 +05:30
parent c05c79db78
commit 7545e71b20
13 changed files with 1202 additions and 548 deletions
Download Patch File Download Diff File Expand all files Collapse all files

150
pages/ClickablePrototypes.tsx
View File

@@ -59,26 +59,41 @@ const PrototypesHeroWithCTA = () => {
/>
{/* Canonical Link */}
<link rel="canonical" href="https://www.wdipl.com/services/clickable-prototypes" />
<link
rel="canonical"
href="https://www.wdipl.com/services/clickable-prototypes"
/>
{/* Open Graph Tags (for Facebook, LinkedIn) */}
<meta property="og:title" content="Prototypes | Mobile App Development Visualization | WDI" />
<meta
property="og:title"
content="Prototypes | Mobile App Development Visualization | WDI"
/>
<meta
property="og:description"
content="Test your mobile app idea with WDI’s interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins."
/>
<meta property="og:url" content="https://www.wdipl.com/services" />
<meta property="og:type" content="website" />
<meta property="og:image" content="https://www.wdipl.com/your-preview-image.jpg" />
<meta
property="og:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Twitter Card Tags */}
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:title" content="Prototypes | Mobile App Development Visualization | WDI" />
<meta
name="twitter:title"
content="Prototypes | Mobile App Development Visualization | WDI"
/>
<meta
name="twitter:description"
content="Test your mobile app idea with WDI’s interactive prototypes. Validate user flows and gather insights before full-scale mobile development begins."
/>
<meta name="twitter:image" content="https://www.wdipl.com/your-preview-image.jpg" />
<meta
name="twitter:image"
content="https://www.wdipl.com/your-preview-image.jpg"
/>
{/* Social Profiles (using JSON-LD Schema) */}
<script type="application/ld+json">
@@ -119,12 +134,13 @@ const PrototypesHeroWithCTA = () => {
{/* Main Heading */}
<div className="space-y-6">
<h1 className="text-4xl md:text-5xl lg:text-6xl font-semibold text-white leading-tight">
Interactive Clickable Prototypes
Create Exceptional User Experiences with Research-Driven Design
</h1>
<p className="text-lg text-gray-300 leading-relaxed max-w-lg">
Visualize and test your digital product idea before development,
ensuring flawless user flows and gathering invaluable feedback.
Design solutions that not only look great but also drive
conversion and user engagement through AI-powered design and AI
mobile app thinking.
</p>
</div>
@@ -433,6 +449,11 @@ const PrototypeBenefits = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Why Prototype Before You Build?
</h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Test clickable prototypes early to perfect user flows, catch design
flaws, and gather stakeholder feedback, saving costs before full AI
mobile application development and web development.
</p>
</motion.div>
<motion.div
@@ -524,6 +545,12 @@ const PrototypingProcess = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-foreground mb-6">
Our Process for Bringing Your Idea to Life
</h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
We turn your vision into reality with clickable prototypes,
intuitive user flows, and continuous user feedback to shape an AI
mobile app or web product users truly love, built by an experienced
AI app development company.
</p>
</motion.div>
<div className="relative">
@@ -678,6 +705,12 @@ const PrototypingServices = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-6">
Our Specialized Prototyping Capabilities
</h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Advanced clickable prototypes for seamless user flows, rapid user
feedback loops, and polished interactive prototypes tailored to your
AI mobile app, iOS mobile app development, and web development
roadmap.{" "}
</p>
</motion.div>
<motion.div
@@ -836,8 +869,10 @@ const PrototypingTools = () => {
Prototyping Tools We Use
</h2>
<p className="text-xl text-muted-foreground max-w-3xl mx-auto leading-relaxed">
Utilizing industry-leading tools to create realistic and testable
prototypes.
Utilizing industry‑leading tools like Figma, ProtoPie, and Proto.io
to create realistic, interactive and testable clickable prototypes
that reflect true user interactions for AI mobile app and AI iOS
development projects.
</p>
</motion.div>
@@ -849,40 +884,41 @@ const PrototypingTools = () => {
className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-6 gap-6"
>
{tools.map((tech, index) => {
const IconComponent = tech.icon;
const colorClasses = {
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
green: "bg-green-500/20 text-green-400 border-green-500/30",
red: "bg-red-500/20 text-red-400 border-red-500/30",
};
const IconComponent = tech.icon;
const colorClasses = {
blue: "bg-blue-500/20 text-blue-400 border-blue-500/30",
orange: "bg-orange-500/20 text-orange-400 border-orange-500/30",
green: "bg-green-500/20 text-green-400 border-green-500/30",
red: "bg-red-500/20 text-red-400 border-red-500/30",
};
return (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -5, scale: 1.05 }}
className="group"
>
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
<div
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${colorClasses[tech.color as keyof typeof colorClasses] ||
"bg-accent/20 text-accent border-accent/30"
}`}
>
<IconComponent className="w-6 h-6" />
</div>
<h4 className="font-semibold text-white text-sm mb-1">
{tech.name}
</h4>
<p className="text-xs text-gray-400">{tech.category}</p>
</Card>
</motion.div>
);
})}
return (
<motion.div
key={index}
initial={{ opacity: 0, y: 20 }}
whileInView={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.01 }}
viewport={{ once: true }}
whileHover={{ y: -5, scale: 1.05 }}
className="group"
>
<Card className="bg-gray-900/50 backdrop-blur-md border-gray-800 hover:border-accent/30 transition-all duration-300 shadow-lg hover:shadow-xl rounded-2xl p-4 text-center">
<div
className={`w-12 h-12 rounded-lg flex items-center justify-center mx-auto mb-3 ${
colorClasses[tech.color as keyof typeof colorClasses] ||
"bg-accent/20 text-accent border-accent/30"
}`}
>
<IconComponent className="w-6 h-6" />
</div>
<h4 className="font-semibold text-white text-sm mb-1">
{tech.name}
</h4>
<p className="text-xs text-gray-400">{tech.category}</p>
</Card>
</motion.div>
);
})}
</motion.div>
</div>
</section>
@@ -940,6 +976,12 @@ const PrototypingCaseStudies = () => {
<h2 className="text-4xl lg:text-5xl font-semibold text-white mb-8">
Prototypes That Led to Successful Products
</h2>
<p className="mt-4 text-gray-400 max-w-2xl mx-auto">
Clickable prototypes transformed Dyson vacuums, Apple iPhones, and
Super Soakers into billion‑dollar successes through perfected user
flows and feedback, much like a modern AI mobile app or iOS mobile
app development project would.
</p>
</motion.div>
<motion.div
@@ -1171,8 +1213,9 @@ const HirePrototypeDesigners = () => {
Need Expertise in Interactive Prototyping?
</h2>
<p className="text-xl text-gray-300 max-w-3xl mx-auto leading-relaxed">
Our designers specialize in creating realistic and testable
prototypes for web and mobile applications.
Our AI mobile application developers and designers specialize in
clickable prototypes and realistic, testable user flows for AI
mobile app, iOS mobile app development, and web development
</p>
</motion.div>
@@ -1237,8 +1280,11 @@ const HirePrototypeDesigners = () => {
className="text-center space-y-6"
>
<div className="flex flex-col sm:flex-row gap-4 justify-center">
<ShimmerButton className="text-lg px-8 py-4"
onClick={() => navigate("/hire-talent/clickable-prototypes-developers")}
<ShimmerButton
className="text-lg px-8 py-4"
onClick={() =>
navigate("/hire-talent/clickable-prototypes-developers")
}
>
<div className="inline-flex items-center gap-2">
<Users className="w-5 h-5 flex-shrink-0" />
@@ -1376,8 +1422,10 @@ const PrototypingFinalCTA = () => {
viewport={{ once: true }}
className="text-xl text-muted-foreground mb-12 max-w-2xl mx-auto leading-relaxed"
>
Reduce risk and ensure product-market fit by visualizing and testing
your ideas before coding begins.
Reduce risk and ensure product‑market fit by visualizing and testing
clickable prototypes, refining user flows, and collecting user
feedback before full AI mobile app development, AI iOS development,
or web development begins.
</motion.p>
<motion.div
@@ -1471,9 +1519,7 @@ export const ClickablePrototypes = () => {
</section>
{/* Footer */}
<section className="bg-background">
{/* <Footer /> */}
</section>
<section className="bg-background">{/* <Footer /> */}</section>
</div>
);
};