From c5d46cd04b38d8c319da4680db9f1a1aa4884b63 Mon Sep 17 00:00:00 2001 From: akash Date: Fri, 5 Sep 2025 16:48:28 +0530 Subject: [PATCH] Mobile new structure updated --- app/page.js | 2 + components/sections/home/MobileFeatureCard.js | 63 ++++++ components/sections/home2/Features.js | 112 +++++------ public/assets/css/module-css/feature.css | 182 +++++++++--------- public/assets/css/module-css/solutions.css | 4 +- public/assets/css/style.css | 2 +- 6 files changed, 214 insertions(+), 151 deletions(-) create mode 100644 components/sections/home/MobileFeatureCard.js diff --git a/app/page.js b/app/page.js index d849240..1866d1e 100644 --- a/app/page.js +++ b/app/page.js @@ -16,6 +16,7 @@ import AreaOfInjury from "@/components/sections/home/AreaOfInjury" import News from "@/components/sections/home1/News" import Funfacts from "@/components/sections/home1/Funfacts" import MobileServices from "@/components/sections/home/MobileServicesSection" +import MobileFeatureCard from "@/components/sections/home/MobileFeatureCard" export default function Home() { @@ -24,6 +25,7 @@ export default function Home() { + {/* */} {/* Desktop View */} diff --git a/components/sections/home/MobileFeatureCard.js b/components/sections/home/MobileFeatureCard.js new file mode 100644 index 0000000..d32f3d9 --- /dev/null +++ b/components/sections/home/MobileFeatureCard.js @@ -0,0 +1,63 @@ +import Link from 'next/link'; +import React from 'react'; + +export default function MobileFeatureCard() { + return ( +
+
+
+
+ +
+
+
+
+ Icon +
+

Experienced
Professionals

+ {/*

Lorem ipsum dolor sit amet ctetur adipiscing

*/} +
+
+
+ +
+
+
+
+ Icon +
+

Walk-in
Appointments

+ {/*

Lorem ipsum dolor sit amet ctetur adipiscing

*/} +
+
+
+ +
+
+
+
+ Icon +
+

State-of-the-Art Technology

+ {/*

Lorem ipsum dolor sit amet ctetur adipiscing

*/} +
+
+
+ +
+
+
+
+ Icon +
+

One-on-One
Care

+ {/*

Lorem ipsum dolor sit amet ctetur adipiscing

*/} +
+
+
+ +
+
+
+ ); +}; diff --git a/components/sections/home2/Features.js b/components/sections/home2/Features.js index 23aa32a..47e5369 100644 --- a/components/sections/home2/Features.js +++ b/components/sections/home2/Features.js @@ -2,61 +2,65 @@ import Link from "next/link"; import React from 'react'; export default function Features() { - return ( - <> -
-
-
-
+ return ( + <> +
+
+
+
-
-
-
-
- Icon -
- -

Experienced Professionals

-

Skilled experts deliver trusted professional healthcare with years of proven experience.

-
-
-
- -
-
-
-
Icon
-

Walk-in Appointments

-

Get quick appointments with hassle-free, convenient scheduling today.

-
-
-
- -
-
-
-
Icon
-

State-of-the-Art Technology

-

Advanced tools ensure accurate results with modern, innovative solutions.

-
-
-
- -
-
-
-
Icon
-

One-on-One
Care

-

Tailored attention provides focused treatments designed for unique needs.

- -
-
-
- -
+
+
+
+
+ Icon
+

Experienced
Professionals

+ {/*

Skilled experts deliver trusted professional healthcare with years of proven experience.

*/} +
-
- - ) +
+ +
+
+
+
+ Icon +
+

Walk-in
Appointments

+ {/*

Get quick appointments with hassle-free, convenient scheduling today.

*/} +
+
+
+ +
+
+
+
+ Icon +
+

State-of-the-Art Technology

+ {/*

Advanced tools ensure accurate results with modern, innovative solutions.

*/} +
+
+
+ +
+
+
+
+ Icon +
+

One-on-One
Care

+ {/*

Tailored attention provides focused treatments designed for unique needs.

*/} +
+
+
+ +
+
+ +
+ + ); } diff --git a/public/assets/css/module-css/feature.css b/public/assets/css/module-css/feature.css index 0b06d4e..ab4d607 100644 --- a/public/assets/css/module-css/feature.css +++ b/public/assets/css/module-css/feature.css @@ -1,11 +1,10 @@ - /** feature-section **/ -.feature-section{ +.feature-section { position: relative; } -.feature-block-one .inner-box{ +.feature-block-one .inner-box { position: relative; display: block; background: #fff; @@ -29,31 +28,32 @@ transition: all 500ms ease; } */ -.feature-block-one .inner-box:hover:before{ +.feature-block-one .inner-box:hover:before { height: 100%; top: 0px; } -.feature-block-one .inner-box .icon-box{ +.feature-block-one .inner-box .icon-box { position: relative; - display: inline-block; + display: flex; + justify-content: center; + align-items: center; width: 100px; height: 100px; - line-height: 100px; font-size: 50px; color: var(--secondary-color); background: rgba(249, 49, 59, 0.05); - text-align: center; border-radius: 50%; - margin-bottom: 10px; + margin: 0 auto 10px auto; transition: all 500ms ease; } + /* .feature-block-one .inner-box:hover .icon-box{ background: #fff; } */ -.feature-block-one .inner-box h3{ +.feature-block-one .inner-box h3 { position: relative; display: block; font-size: 20px; @@ -67,11 +67,11 @@ color: var(--title-color); } */ -.feature-block-one .inner-box h3 a:hover{ +.feature-block-one .inner-box h3 a:hover { text-decoration: underline; } -.feature-block-one .inner-box p{ +.feature-block-one .inner-box p { position: relative; transition: all 500ms ease; } @@ -81,7 +81,7 @@ color: #fff; } */ -.feature-section .shape{ +.feature-section .shape { position: absolute; left: 80px; top: 10px; @@ -93,11 +93,11 @@ /** feature-style-two **/ -.feature-style-two{ +.feature-style-two { position: relative; } -.feature-style-two .inner-container{ +.feature-style-two .inner-container { position: relative; display: block; background: #FFFFFF; @@ -114,18 +114,18 @@ } } -.feature-block-two .inner-box{ +.feature-block-two .inner-box { position: relative; display: block; padding: 50px 20px; } -.feature-block-two .inner-box .icon-box{ +.feature-block-two .inner-box .icon-box { position: relative; display: inline-block; width: 100px; height: 100px; - line-height: 100px; + line-height: 80px; font-size: 50px; background: rgba(249, 49, 59, 0.05); color: var(--secondary-color); @@ -136,11 +136,11 @@ transition: all 500ms ease; } -.feature-block-two .inner-box:hover .icon-box{ +.feature-block-two .inner-box:hover .icon-box { color: #fff; } -.feature-block-two .inner-box .icon-box:before{ +.feature-block-two .inner-box .icon-box:before { position: absolute; content: ''; background: var(--theme-color); @@ -150,7 +150,7 @@ top: 0px; z-index: -1; border-radius: 50%; - transform: scale(0,0); + transform: scale(0, 0); transition: all 500ms ease; } @@ -158,7 +158,7 @@ transform: scale(1,1); } */ -.feature-block-two .inner-box h3{ +.feature-block-two .inner-box h3 { display: block; font-size: 26px; line-height: 36px; @@ -166,12 +166,12 @@ margin-bottom: 20px; } -.feature-block-two .inner-box h3 a{ +.feature-block-two .inner-box h3 a { display: inline-block; color: var(--title-color); } -.feature-block-two .inner-box h3 a:hover{ +.feature-block-two .inner-box h3 a:hover { color: var(--theme-color); } @@ -188,97 +188,91 @@ /** RESPONSIVE-CSS **/ -@media only screen and (max-width: 1200px){ - - +@media only screen and (max-width: 1024px) { + .feature-block-two .inner-box h3 a { + font-size: 25px; + display: inline-block; + color: var(--title-color); + } } -@media only screen and (max-width: 991px){ +@media only screen and (max-width: 767px) { - - -} - -@media only screen and (max-width: 767px){ - - .feature-section{ + .feature-section { padding: 70px 0px 40px 0px; } - .feature-section .shape{ + .feature-section .shape { display: none; } } -@media only screen and (max-width: 599px){ +@media only screen and (max-width: 599px) {} + +@media only screen and (max-width: 499px) { + .feature-block-one .inner-box { + position: relative; + display: block; + background: #fff; + box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1); + border-radius: 20px; + overflow: hidden; + padding: 15px; + z-index: 1; + margin-bottom: 20px; + transition: all 500ms ease; + } + + .feature-block-one .inner-box h3 { + font-size: 15px; + line-height: 24px; + margin-bottom: 10px; + text-align: center; + } + } -@media only screen and (max-width: 499px){ - .feature-block-one .inner-box{ - position: relative; + + + +/* show/hide helpers */ +.desktop-only { display: block; - background: #fff; - box-shadow: 0px 2px 70px rgba(0, 0, 0, 0.1); - border-radius: 20px; - overflow: hidden; - padding: 15px; - z-index: 1; - margin-bottom: 20px; - transition: all 500ms ease; } -.feature-block-one .inner-box h3{ - font-size: 16px; - line-height: 24px; - margin-bottom: 10px; +.mobile-only { + display: none; } +@media (max-width: 426px) { + .desktop-only { + display: none !important; + } + + .mobile-only { + display: block !important; + } +} + +@media only screen and (max-width: 768px) { + .feature-block-two .inner-box { + position: relative; + display: block; + padding: 20px 20px; + } } +@media (max-width: 767.98px) { + .feature-section.mobile-only .row.clearfix { + display: flex; + flex-wrap: wrap; + } - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + .feature-section.mobile-only .feature-block { + width: 50%; + } +} \ No newline at end of file diff --git a/public/assets/css/module-css/solutions.css b/public/assets/css/module-css/solutions.css index 3ab263c..122981b 100644 --- a/public/assets/css/module-css/solutions.css +++ b/public/assets/css/module-css/solutions.css @@ -27,8 +27,8 @@ .image_block_two .image-box{ position: relative; display: block; - padding-bottom: 137px; - padding-left: 140px; + /* padding-bottom: 137px; */ + /* padding-left: 140px; */ } .image_block_two .image-box img{ diff --git a/public/assets/css/style.css b/public/assets/css/style.css index 357ae5d..930afb4 100644 --- a/public/assets/css/style.css +++ b/public/assets/css/style.css @@ -1355,7 +1355,7 @@ margin-top: 15px; z-index: 100; display: none; - background: #bc0000; + /* background: #bc0000; */ opacity: 0; visibility: hidden; box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.10);