Aravind/nearle-next-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix footer section padding

Browse Source
This commit is contained in:
Aravind
2026-06-25 17:10:35 +05:30
parent b233992f30
commit 7f6b42153a
11 changed files with 497 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

119
src/app/globals.css
View File

@@ -1274,8 +1274,127 @@ main {
overflow-x: hidden;
}
.premium-footer-shell {
width: calc(100% - 24px);
max-width: 1800px;
margin: 32px auto 0;
}
@media (min-width: 768px) {
.premium-footer-shell {
width: calc(100% - 40px);
}
}
@media (min-width: 1024px) {
.premium-footer-shell {
width: calc(100% - 64px);
}
}
@media (min-width: 1440px) {
.premium-footer-shell {
width: calc(100% - 96px);
}
}
/* ─── Feature Cards (BusinessSection) ─── */
.feature-card {
display: flex;
flex-direction: column;
padding: 20px;
}
@media (min-width: 768px) {
.feature-card {
padding: 24px;
}
}
@media (min-width: 1280px) {
.feature-card {
padding: 32px;
}
}
.feature-card__top {
display: grid;
grid-template-columns: 52px minmax(0, 1fr);
column-gap: 14px;
align-items: start;
}
@media (min-width: 640px) {
.feature-card__top {
grid-template-columns: 72px minmax(0, 1fr);
column-gap: 20px;
}
}
.feature-card__icon {
width: 48px;
height: 48px;
flex-shrink: 0;
}
@media (min-width: 640px) {
.feature-card__icon {
width: 64px;
height: 64px;
}
}
.feature-card__icon span {
font-size: 24px !important;
}
@media (min-width: 640px) {
.feature-card__icon span {
font-size: 32px !important;
}
}
.feature-card__content {
min-width: 0;
max-width: none;
}
.feature-card h3 {
margin: 0;
max-width: 100%;
font-family: var(--font-display), sans-serif;
font-weight: 900;
font-size: clamp(20px, 2vw, 32px);
line-height: 1.12;
letter-spacing: -0.03em;
color: var(--brand-dark);
}
@media (min-width: 640px) {
.feature-card h3 {
font-size: clamp(24px, 2vw, 32px);
}
}
.feature-card p {
margin-top: 12px;
max-width: 100%;
font-size: 14px;
line-height: 1.55;
color: var(--on-surface-variant);
}
@media (min-width: 640px) {
.feature-card p {
margin-top: 16px;
font-size: 17px;
}
}
.feature-card__image {
margin-top: 24px;
width: 100%;
overflow: hidden;
border-radius: 1.25rem;
background-color: var(--brand-accent-light);
}

20
src/app/layout.tsx
View File

@@ -1,20 +1,8 @@
import type { Metadata, Viewport } from "next";
import { Jost } from "next/font/google";
import "./globals.css";
const jost = Jost({
subsets: ["latin"],
weight: ["400", "600", "700", "800"],
variable: "--font-display",
display: "swap",
});
const jostBody = Jost({
subsets: ["latin"],
weight: ["400", "600", "700"],
variable: "--font-body",
display: "swap",
});
const jost = { variable: "font-display" };
const jostBody = { variable: "font-body" };
export const metadata: Metadata = {
metadataBase: new URL("https://nearle.in"),
@@ -91,6 +79,10 @@ export default function RootLayout({
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght@400;600;700;800&display=swap"
rel="stylesheet"
/>
</head>
<body className="bg-[#E8DCF2] text-on-surface font-body antialiased" suppressHydrationWarning>
{children}

8
src/app/people/page.tsx
View File

@@ -309,14 +309,14 @@ export default function PeoplePage() {
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
<MaterialIcon icon="phone_iphone" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
<div className="text-left leading-tight">
<div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
<div className="text-sm font-black text-white">App Store</div>
</div>
</div>
<div className="group h-14 w-44 rounded-xl border border-white/10 px-4 py-2 flex items-center gap-3 bg-white/[0.06] backdrop-blur-md text-white hover:bg-white/[0.12] transition-all duration-300 shadow-md">
<MaterialIcon icon="play_arrow" size={24} className="text-brand-accent group-hover:scale-110 transition-transform" />
<div className="text-left leading-tight">
<div className="text-[9px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-[9px] uppercase font-black text-brand-accent/70">Available on</div>
<div className="text-sm font-black text-white">Google Play</div>
</div>
</div>
@@ -511,14 +511,14 @@ export default function PeoplePage() {
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
<MaterialIcon icon="phone_iphone" size={18} className="text-brand-accent" />
<div className="text-left leading-none">
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
<div className="text-xs font-black text-white">App Store</div>
</div>
</div>
<div className="h-12 w-full rounded-xl border border-white/10 px-4 py-2 flex items-center justify-center gap-3 bg-white/[0.06] text-white">
<MaterialIcon icon="play_arrow" size={18} className="text-brand-accent" />
<div className="text-left leading-none">
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Coming Soon</div>
<div className="text-[7.5px] uppercase font-black text-brand-accent/70">Available on</div>
<div className="text-xs font-black text-white">Google Play</div>
</div>
</div>