From 477dbad4346ddf8f1527505c85216221118c77cf Mon Sep 17 00:00:00 2001 From: priyanshuvish Date: Thu, 17 Jul 2025 16:00:38 +0530 Subject: [PATCH] mobile mockup increase , spline add in hero banner --- App.tsx | 2 +- components/HeroSection.tsx | 97 +++++----------------------------- package-lock.json | 75 ++++++++++++++++++++++++++ package.json | 1 + pages/MobileAppDevelopment.tsx | 2 +- 5 files changed, 90 insertions(+), 87 deletions(-) diff --git a/App.tsx b/App.tsx index c053ebc..a7890e4 100644 --- a/App.tsx +++ b/App.tsx @@ -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, diff --git a/components/HeroSection.tsx b/components/HeroSection.tsx index aa5900c..7618622 100644 --- a/components/HeroSection.tsx +++ b/components/HeroSection.tsx @@ -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() { {/* Right Side - Animated Gradient Background */} - -
- {/* Animated gradient background */} -
- - {/* Floating orbs */} -
- - - -
+ +
+ +
+ - {/* Tech grid overlay */} -
-
-
- - {/* Central focus point */} -
- -
- - {/* Subtle border */} -
-
-
{/* Floating scroll indicator */} diff --git a/package-lock.json b/package-lock.json index 12f22a6..0a0cfda 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 6724e4e..61fe41c 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pages/MobileAppDevelopment.tsx b/pages/MobileAppDevelopment.tsx index 121c91a..0f364d2 100644 --- a/pages/MobileAppDevelopment.tsx +++ b/pages/MobileAppDevelopment.tsx @@ -126,7 +126,7 @@ const HeroWithCTA = () => {