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

added ios spline

Browse Source
This commit is contained in:
priyanshuvish
2025-07-21 17:10:36 +05:30
parent 312c23392c
commit 2109ce79b0
1 changed files with 8 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

76
pages/iOSAppDevelopment.tsx
View File

@@ -47,6 +47,7 @@ import {
} from "lucide-react";
import { Button } from "@/components/ui/button";
import { navigateTo } from "@/App";
import Spline from "@splinetool/react-spline";
// iOS Hero Section with iPhone/iPad mockups
const IOSHeroWithCTA = () => {
@@ -126,75 +127,14 @@ const IOSHeroWithCTA = () => {
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
className="relative flex flex-col items-center"
className="relative flex flex-col items-center w-full"
>
{/* iOS Device Mockups */}
<div className="relative w-full max-w-lg mx-auto">
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.4 }}
className="relative h-[400px] w-full mb-8 flex items-center justify-center"
>
{/* iPhone and iPad mockup representation */}
<div className="relative">
<div className="absolute -right-16 top-8 w-24 h-32 bg-gradient-to-br from-gray-800 to-gray-900 rounded-2xl border border-gray-700 shadow-2xl transform rotate-12">
<div className="w-full h-6 bg-gray-700 rounded-t-2xl flex items-center justify-center">
<div className="w-8 h-1 bg-gray-600 rounded-full"></div>
</div>
<div className="p-2 space-y-1">
<div className="h-2 bg-accent/60 rounded"></div>
<div className="h-1 bg-gray-600 rounded w-3/4"></div>
<div className="h-1 bg-gray-600 rounded w-1/2"></div>
</div>
</div>
<div className="w-48 h-72 bg-gradient-to-br from-gray-800 to-gray-900 rounded-3xl border border-gray-700 shadow-2xl">
<div className="w-full h-8 bg-gray-700 rounded-t-3xl flex items-center justify-center">
<div className="w-12 h-1 bg-gray-600 rounded-full"></div>
</div>
<div className="p-4 space-y-3">
<div className="h-3 bg-accent rounded"></div>
<div className="h-2 bg-gray-600 rounded w-4/5"></div>
<div className="h-2 bg-gray-600 rounded w-3/5"></div>
<div className="grid grid-cols-2 gap-2 mt-4">
<div className="h-8 bg-gray-700 rounded-lg"></div>
<div className="h-8 bg-gray-700 rounded-lg"></div>
</div>
<div className="h-12 bg-accent/20 rounded-lg mt-4 flex items-center justify-center">
<Apple className="w-6 h-6 text-accent" />
</div>
</div>
</div>
</div>
</motion.div>
{/* iOS Technology Badges */}
<motion.div
initial={{ opacity: 0, y: 30 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.8, delay: 0.6 }}
className="flex justify-center gap-4 flex-wrap"
>
<Badge
variant="secondary"
className="bg-blue-500/20 text-blue-300 border-blue-500/30"
>
Swift
</Badge>
<Badge
variant="secondary"
className="bg-orange-500/20 text-orange-300 border-orange-500/30"
>
SwiftUI
</Badge>
<Badge
variant="secondary"
className="bg-gray-500/20 text-gray-300 border-gray-500/30"
>
Xcode
</Badge>
</motion.div>
<div className="w-full h-[400px] overflow-hidden rounded-xl">
{" "}
<Spline
scene="https://prod.spline.design/3GGwAe3v1Q7oobGU/scene.splinecode"
className="w-full h-full"
/>
</div>
</motion.div>
</div>