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

mobile mockup increase , spline add in hero banner

Browse Source
This commit is contained in:
priyanshuvish
2025-07-17 16:00:38 +05:30
parent aeca21032d
commit 477dbad434
5 changed files with 90 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
App.tsx
View File

@@ -327,7 +327,7 @@ export default function App() {
"/industries": Industries,
"/resources": Resources,
"/company": Company,
"/contact": ContactMain,
// "/contact": ContactMain,
"/web-cloud": WebCloudServices,
"/software-engineering": SoftwareEngineering,
"/design-experience": DesignExperience,

97
components/HeroSection.tsx
View File

@@ -3,6 +3,8 @@ import { GridPattern } from "./GridPattern";
import { Calendar, Briefcase } from "lucide-react";
import { navigateTo } from "../App";
import { motion } from "framer-motion";
import Spline from "@splinetool/react-spline";
export function HeroSection() {
return (
@@ -87,92 +89,17 @@ export function HeroSection() {
</motion.div>
{/* Right Side - Animated Gradient Background */}
<motion.div
className="w-full lg:w-1/2 h-[320px] md:h-[480px] lg:h-[560px] shrink-0 relative"
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<div className="w-full h-full relative overflow-hidden rounded-2xl">
{/* Animated gradient background */}
<div className="absolute inset-0 bg-gradient-to-r from-[#E5195E]/20 via-[#9c40ff]/20 to-[#ffaa40]/20 animate-gradient bg-[length:400%_400%]" />
{/* Floating orbs */}
<div className="absolute inset-0">
<motion.div
className="absolute top-1/4 left-1/4 w-32 h-32 bg-[#E5195E]/30 rounded-full blur-xl"
animate={{
scale: [1, 1.2, 1],
opacity: [0.3, 0.6, 0.3],
}}
transition={{
duration: 4,
repeat: Infinity,
ease: "easeInOut",
}}
/>
<motion.div
className="absolute top-1/2 right-1/4 w-24 h-24 bg-[#9c40ff]/30 rounded-full blur-xl"
animate={{
scale: [1, 1.3, 1],
opacity: [0.3, 0.5, 0.3],
}}
transition={{
duration: 3,
repeat: Infinity,
ease: "easeInOut",
delay: 1,
}}
/>
<motion.div
className="absolute bottom-1/3 left-1/2 w-20 h-20 bg-[#ffaa40]/30 rounded-full blur-xl"
animate={{
scale: [1, 1.1, 1],
opacity: [0.3, 0.7, 0.3],
}}
transition={{
duration: 5,
repeat: Infinity,
ease: "easeInOut",
delay: 2,
}}
/>
</div>
<motion.div
className="w-full lg:w-1/2 h-[320px] md:h-[480px] lg:h-[560px] shrink-0 relative"
initial={{ opacity: 0, x: 50 }}
animate={{ opacity: 1, x: 0 }}
transition={{ duration: 0.8, delay: 0.2 }}
>
<div className="w-full h-full overflow-hidden rounded-2xl">
<Spline scene="https://prod.spline.design/nwCSrO6RnOG0v1GV/scene.splinecode" />
</div>
</motion.div>
{/* Tech grid overlay */}
<div className="absolute inset-0 opacity-10">
<div
className="w-full h-full"
style={{
backgroundImage: `
linear-gradient(rgba(255,255,255,0.1) 1px, transparent 1px),
linear-gradient(90deg, rgba(255,255,255,0.1) 1px, transparent 1px)
`,
backgroundSize: '40px 40px',
}}
/>
</div>
{/* Central focus point */}
<div className="absolute inset-0 flex items-center justify-center">
<motion.div
className="w-3 h-3 bg-white rounded-full shadow-lg"
animate={{
scale: [1, 1.5, 1],
opacity: [0.8, 1, 0.8],
}}
transition={{
duration: 2,
repeat: Infinity,
ease: "easeInOut",
}}
/>
</div>
{/* Subtle border */}
<div className="absolute inset-0 rounded-2xl border border-white/10" />
</div>
</motion.div>
</div>
{/* Floating scroll indicator */}

75
package-lock.json generated
View File

@@ -34,6 +34,7 @@
"@radix-ui/react-toggle-group": "^1.1.10",
"@radix-ui/react-tooltip": "^1.2.7",
"@reduxjs/toolkit": "^2.8.2",
"@splinetool/react-spline": "^4.1.0",
"@tailwindcss/vite": "^4.1.11",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",
@@ -2686,6 +2687,38 @@
"win32"
]
},
"node_modules/@splinetool/react-spline": {
"version": "4.1.0",
"resolved": "https://registry.npmjs.org/@splinetool/react-spline/-/react-spline-4.1.0.tgz",
"integrity": "sha512-Y379gm17gw+1nxT/YXTCJnVIWuu7tsUH1tp/YxsYb0pZnc9Gljk7Om4Kpq7WPq0bZ4zidVCxf6xn6jgDcbHifQ==",
"dependencies": {
"blurhash": "2.0.5",
"lodash.debounce": "4.0.8",
"react-merge-refs": "2.1.1",
"thumbhash": "0.1.1"
},
"peerDependencies": {
"@splinetool/runtime": "*",
"next": ">=14.2.0",
"react": "*",
"react-dom": "*"
},
"peerDependenciesMeta": {
"next": {
"optional": true
}
}
},
"node_modules/@splinetool/runtime": {
"version": "1.10.32",
"resolved": "https://registry.npmjs.org/@splinetool/runtime/-/runtime-1.10.32.tgz",
"integrity": "sha512-SWyhbowdicQVdrXq90bShBf3VOIicn9QM9kQvWzeD/mOrYYCUr1qBuTtZr5Daqu233siVfLFLFTMSW+ECw1Nbw==",
"peer": true,
"dependencies": {
"on-change": "^4.0.0",
"semver-compare": "^1.0.0"
}
},
"node_modules/@standard-schema/spec": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
@@ -3600,6 +3633,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/blurhash": {
"version": "2.0.5",
"resolved": "https://registry.npmjs.org/blurhash/-/blurhash-2.0.5.tgz",
"integrity": "sha512-cRygWd7kGBQO3VEhPiTgq4Wc43ctsM+o46urrmPOiuAe+07fzlSB9OJVdpgDL0jPqXUVQ9ht7aq7kxOeJHRK+w==",
"license": "MIT"
},
"node_modules/brace-expansion": {
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
@@ -5699,6 +5738,19 @@
"node": ">=0.10.0"
}
},
"node_modules/on-change": {
"version": "4.0.2",
"resolved": "https://registry.npmjs.org/on-change/-/on-change-4.0.2.tgz",
"integrity": "sha512-cMtCyuJmTx/bg2HCpHo3ZLeF7FZnBOapLqZHr2AlLeJ5Ul0Zu2mUJJz051Fdwu/Et2YW04ZD+TtU+gVy0ACNCA==",
"license": "MIT",
"peer": true,
"engines": {
"node": "^12.20.0 || ^14.13.1 || >=16.0.0"
},
"funding": {
"url": "https://github.com/sindresorhus/on-change?sponsor=1"
}
},
"node_modules/once": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -6018,6 +6070,16 @@
"integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
"license": "MIT"
},
"node_modules/react-merge-refs": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/react-merge-refs/-/react-merge-refs-2.1.1.tgz",
"integrity": "sha512-jLQXJ/URln51zskhgppGJ2ub7b2WFKGq3cl3NYKtlHoTG+dN2q7EzWrn3hN3EgPsTMvpR9tpq5ijdp7YwFZkag==",
"license": "MIT",
"funding": {
"type": "github",
"url": "https://github.com/sponsors/gregberge"
}
},
"node_modules/react-redux": {
"version": "9.2.0",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
@@ -6410,6 +6472,13 @@
"node": ">=10"
}
},
"node_modules/semver-compare": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/semver-compare/-/semver-compare-1.0.0.tgz",
"integrity": "sha512-YM3/ITh2MJ5MtzaM429anh+x2jiLVjqILF4m4oyQB18W7Ggea7BfqdH/wGMK7dDiMghv/6WG7znWMwUDzJiXow==",
"license": "MIT",
"peer": true
},
"node_modules/set-cookie-parser": {
"version": "2.7.1",
"resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.1.tgz",
@@ -6589,6 +6658,12 @@
"dev": true,
"license": "MIT"
},
"node_modules/thumbhash": {
"version": "0.1.1",
"resolved": "https://registry.npmjs.org/thumbhash/-/thumbhash-0.1.1.tgz",
"integrity": "sha512-kH5pKeIIBPQXAOni2AiY/Cu/NKdkFREdpH+TLdM0g6WA7RriCv0kPLgP731ady67MhTAqrVG/4mnEeibVuCJcg==",
"license": "MIT"
},
"node_modules/tiny-invariant": {
"version": "1.3.3",
"resolved": "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.3.3.tgz",

1
package.json
View File

@@ -36,6 +36,7 @@
"@radix-ui/react-toggle-group": "^1.1.10",
"@radix-ui/react-tooltip": "^1.2.7",
"@reduxjs/toolkit": "^2.8.2",
"@splinetool/react-spline": "^4.1.0",
"@tailwindcss/vite": "^4.1.11",
"class-variance-authority": "^0.7.1",
"clsx": "^2.1.1",

2
pages/MobileAppDevelopment.tsx
View File

@@ -126,7 +126,7 @@ const HeroWithCTA = () => {
<img
src={heroMockupImage}
alt="Mobile App Development Services - Fashion, Social, and Fitness Apps"
className="block transition-all duration-300 hover:scale-105"
className="block transition-all duration-300 scale-120 hover:scale-125"
style={{
width: '100%',
height: '100%',