Skip to content

Commit

Permalink
font issue fixed and typography updated
Browse files Browse the repository at this point in the history
  • Loading branch information
@musiur
musiur committed Jul 15, 2024
1 parent 8dd21b2 commit e28d444
Show file tree
Hide file tree
Showing 23 changed files with 86 additions and 117 deletions.
2 changes: 1 addition & 1 deletion src/app/about-us/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -194,7 +194,7 @@ const AboutUS = () => {
: "col-span-1"
}`}
>
<span className="text-6xl font-bold text-white">
<span className="text-6xl font-medium text-white">
{item.numbers}
</span>
<h3 className="text-white text-[16px] md:text-[20px] font-semibold">
Expand Down
12 changes: 6 additions & 6 deletions src/app/case-studies/_previous/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,24 +98,24 @@ const CaseStudies = ({ params }: { params: { slug: string } }) => {
>
{image}
<div className="flex flex-col items-start justify-start small-gap pt-10">
<h3 className="text-[20px] lg:text-[24px] font-bold text-center w-full">
<h3 className="text-[20px] lg:text-[24px] font-medium text-center w-full">
{brand}
</h3>
{item.title ? (
<h4 className="font-bold text-primary text-[16px] md:text-[20px] w-full text-center mb-10">
<h4 className="font-medium text-primary text-[16px] md:text-[20px] w-full text-center mb-10">
{item.title}
</h4>
) : null}
<div className="grid grid-cols-1 small-gap">
<div className="grid grid-cols-1 sm:grid-cols-2 small-gap items-start justify-start">
<div className="grid grid-cols-1 gap-[10px] ">
<h4 className="font-bold text-dimmed flex items-center gap-[5px]">
<h4 className="font-medium text-dimmed flex items-center gap-[5px]">
<Frown /> The Challenge
</h4>
<p>{challenge}</p>
</div>
<div className="grid grid-cols-1 gap-[10px]">
<h4 className="font-bold text-secondary flex items-center gap-[5px]">
<h4 className="font-medium text-secondary flex items-center gap-[5px]">
<Smile className="stroke-secondary" /> {followupH}
</h4>
<p>{followup}</p>
Expand All @@ -124,7 +124,7 @@ const CaseStudies = ({ params }: { params: { slug: string } }) => {
<div className="grid grid-cols-1 sm:grid-cols-2 small-gap ms:pl-[20px]">
{item.before ? (
<div className="flex flex-col justify-start items-start gap-[10px]">
<h4 className="font-bold text-dimmed flex items-center gap-[5px]">
<h4 className="font-medium text-dimmed flex items-center gap-[5px]">
<Frown /> Results Before
</h4>
<p>{item.before}</p>
Expand All @@ -133,7 +133,7 @@ const CaseStudies = ({ params }: { params: { slug: string } }) => {
<div></div>
)}
<div className="flex flex-col items-start justify-start gap-[15px]">
<h4 className="font-bold text-secondary flex items-center gap-[5px]">
<h4 className="font-medium text-secondary flex items-center gap-[5px]">
<Smile className="stroke-secondary" /> After
Sociomatic
</h4>
Expand Down
2 changes: 1 addition & 1 deletion src/app/case-studies/_utils/hero.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ const Hero = ({
className="inline-flex items-center gap-2 [&>svg]:stroke-[2px] [&>svg]:stroke-secondary"
>
{icon}
<p className="inline-flex gap-1 [&>span]:text-primary font-bold text-primary/50">
<p className="inline-flex gap-1 [&>span]:text-primary font-medium text-primary/50">
{text}
</p>
</div>
Expand Down
12 changes: 6 additions & 6 deletions src/app/contact-us/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -184,7 +184,7 @@ const ContactUs = () => {
className="grid grid-cols-1 gap-[10px]"
>
<div className="[&>svg]:stroke-white">{item.icon}</div>
<h3 className="text-[16px] lg:text-[20px] font-bold text-white">
<h3 className="text-[16px] lg:text-[20px] font-medium text-white">
{item.title}
</h3>
{item.id === 2 || item.id === 0 ? (
Expand All @@ -203,12 +203,12 @@ const ContactUs = () => {
className="mx-auto pt-[50px] grid grid-cols-1 large-gap"
>
<div className="flex flex-col small-gap">
<h4 className="text-xl md:text-2xl font-bold text-primary">
<h4 className="text-xl md:text-2xl font-medium text-primary">
Get in Touch With Us
</h4>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="name">
Name <span className="text-pink-600 font-bold">*</span>
Name <span className="text-pink-600 font-medium">*</span>
</Label>
<Input
type="name"
Expand All @@ -223,7 +223,7 @@ const ContactUs = () => {

<div className="grid w-full items-center gap-1.5">
<Label htmlFor="email">
Email <span className="text-pink-600 font-bold">*</span>
Email <span className="text-pink-600 font-medium">*</span>
</Label>
<Input
type="email"
Expand All @@ -238,7 +238,7 @@ const ContactUs = () => {

<div className="grid w-full items-center gap-1.5">
<Label htmlFor="phone">
Phone <span className="text-pink-600 font-bold">*</span>
Phone <span className="text-pink-600 font-medium">*</span>
</Label>
<Input
type="phone"
Expand All @@ -255,7 +255,7 @@ const ContactUs = () => {
<div className="flex flex-col gap-1.5">
<Label htmlFor="message">
Services you are interested on&nbsp;
<span className="text-pink-600 font-bold">*</span>
<span className="text-pink-600 font-medium">*</span>
</Label>
<div className="grid grid-cols-1 lg:grid-cols-2 gap-1.5">
{ServicesList.map((item: any) => {
Expand Down
16 changes: 8 additions & 8 deletions src/app/get-a-quote/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -178,7 +178,7 @@ const GetAQuotePage = () => {
return (
<li
key={index}
className={`px-4 py-2 md:px-8 md:py-3 border font-bold cursor-pointer ${
className={`px-4 py-2 md:px-8 md:py-3 border font-medium cursor-pointer ${
index + 1 === currentTab
? "bg-secondary text-white hover:bg-blue-600 border-secondary "
: "bg-white hover:bg-muted hover:text-secondary border-secondarymuted "
Expand All @@ -200,7 +200,7 @@ const GetAQuotePage = () => {
<div className="flex flex-col small-gap">
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="name">
Name <span className="text-pink-600 font-bold">*</span>
Name <span className="text-pink-600 font-medium">*</span>
</Label>
<Input
type="name"
Expand All @@ -213,7 +213,7 @@ const GetAQuotePage = () => {
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="email">
Email <span className="text-pink-600 font-bold">*</span>
Email <span className="text-pink-600 font-medium">*</span>
</Label>
<Input
type="email"
Expand All @@ -226,7 +226,7 @@ const GetAQuotePage = () => {
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="phone">
Phone <span className="text-pink-600 font-bold">*</span>
Phone <span className="text-pink-600 font-medium">*</span>
</Label>
<Input
type="phone"
Expand All @@ -239,7 +239,7 @@ const GetAQuotePage = () => {
</div>
<div className="grid w-full items-center gap-1.5">
<Label htmlFor="country">
Country <span className="text-pink-600 font-bold">*</span>
Country <span className="text-pink-600 font-medium">*</span>
</Label>
<CountryCombobox onChange={handleOnChange} />
<ErrorMessages errors={errors} name="country" />
Expand Down Expand Up @@ -270,7 +270,7 @@ const GetAQuotePage = () => {
<div className="flex flex-col gap-1.5">
<Label htmlFor="budget">
Probable budget range&nbsp;
<span className="text-pink-600 font-bold">*</span>
<span className="text-pink-600 font-medium">*</span>
</Label>
<Select
onValueChange={(value) => {
Expand All @@ -297,7 +297,7 @@ const GetAQuotePage = () => {
<div className="flex flex-col gap-1.5">
<Label htmlFor="message">
Services you are interested on&nbsp;
<span className="text-pink-600 font-bold">*</span>
<span className="text-pink-600 font-medium">*</span>
</Label>
<ul className="grid grid-cols-1 lg:grid-cols-2 gap-1.5">
{ServicesList.map((item: any) => {
Expand Down Expand Up @@ -333,7 +333,7 @@ const GetAQuotePage = () => {
<div className="grid w-full gap-1.5">
<Label htmlFor="message">
Your message&nbsp;
<span className="text-pink-600 font-bold">*</span>
<span className="text-pink-600 font-medium">*</span>
</Label>
<Textarea
placeholder="Type your message here."
Expand Down
79 changes: 10 additions & 69 deletions src/app/globals.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,6 @@
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');

@layer base {
:root {
--background: 0 0% 100%;
Expand Down Expand Up @@ -71,9 +69,9 @@ $max_width: 1196px;
$p_min_font: 14px;
$p_max_font: 16px;
$h1_min_font: 28px;
$h1_max_font: 49px;
$h1_max_font: 44px;
$h2_min_font: 22px;
$h2_max_font: 39px;
$h2_max_font: 32px;

@layer base {

Expand All @@ -91,90 +89,33 @@ html {
scroll-behavior: smooth !important;
}

.lato-thin {
font-family: "Lato", sans-serif;
font-weight: 100;
font-style: normal;
}

.lato-light {
font-family: "Lato", sans-serif;
font-weight: 300;
font-style: normal;
}

.lato-regular {
font-family: "Lato", sans-serif;
font-weight: 400;
font-style: normal;
}

.lato-bold {
font-family: "Lato", sans-serif;
font-weight: 700;
font-style: normal;
}

.lato-black {
font-family: "Lato", sans-serif;
font-weight: 900;
font-style: normal;
}

.lato-thin-italic {
font-family: "Lato", sans-serif;
font-weight: 100;
font-style: italic;
}

.lato-light-italic {
font-family: "Lato", sans-serif;
font-weight: 300;
font-style: italic;
}

.lato-regular-italic {
font-family: "Lato", sans-serif;
font-weight: 400;
font-style: italic;
}

.lato-bold-italic {
font-family: "Lato", sans-serif;
font-weight: 700;
font-style: italic;
}

.lato-black-italic {
font-family: "Lato", sans-serif;
font-weight: 900;
font-style: italic;
h1,
h2 {
@apply font-[var(--font-lato)];
font-weight: 500;
}


h1 {
@extend .lato-black;
@include fluid-type($min_width, $max_width, $h1_min_font, $h1_max_font);
@apply font-bold;
// @apply font-semibold;
line-height: 120%;

span {
@include fluid-type($min_width, $max_width, $h1_min_font, $h1_max_font);
@apply font-bold;
// @apply font-semibold;
line-height: 120%;
}
}

h2 {
@extend .lato-black;

@include fluid-type($min_width, $max_width, $h2_min_font, $h2_max_font);
@apply font-bold;
// @apply font-semibold;
line-height: 120%;

span {
@include fluid-type($min_width, $max_width, $h2_min_font, $h2_max_font);
@apply font-bold;
// @apply font-semibold;
line-height: 120%;
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/app/joining/_utils/hero.section.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const HeroSectionJoining = ({
<h1 className="h1 text-primary text-center [&>span]:text-secondary [&>span]:mx-4">
{title}
</h1>
<p className="max-w-[640px] text-center [&>span]:font-bold [&>span]:mx-1">
<p className="max-w-[640px] text-center [&>span]:font-medium [&>span]:mx-1">
{body}
</p>
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/app/joining/end/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const Page = ({ searchParams }: { searchParams: { type: "googleads" } }) => {
const { title, paragraphs } = data;
return (
<div className="container section flex flex-col gap-8">
<div className="text-secondary font-bold inline-block text-2xl md:text-3xl lg:text-4xl">
<div className="text-secondary font-medium inline-block text-2xl md:text-3xl lg:text-4xl">
Congratulations!
</div>
<div className="max-w-[800px] space-y-8">
Expand All @@ -21,7 +21,7 @@ const Page = ({ searchParams }: { searchParams: { type: "googleads" } }) => {
{paragraphs.map((paragraph, index) => (
<li
key={index}
className="leading-loose text-gray-600 [&>span]:font-bold [&>span]:mx-1"
className="leading-loose text-gray-600 [&>span]:font-medium [&>span]:mx-1"
>
{paragraph}
</li>
Expand Down
2 changes: 1 addition & 1 deletion src/app/joining/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ const Page = ({
<div className="space-y-12">
<div className="w-full min-h-[300px] max-h-[350px] bg-gray-200 rounded-lg"></div>
<div className="space-y-8">
<h3 className="text-xl md:text-2xl font-bold">
<h3 className="text-xl md:text-2xl font-medium">
Et tempor eu tempor do mollit veniam sit. Et labore magna
</h3>
{[1, 2, 3].map((item) => {
Expand Down
10 changes: 8 additions & 2 deletions src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,12 +9,18 @@ import WhatsApp from "@/components/molecule/whatsapp";
import CookiePolicyNotificationBar from "@/components/molecule/cookie-policy";
import { SpeedInsights } from "@vercel/speed-insights/next";
import PageView from "@/lib/datalayer/page-view";
import { Poppins } from "next/font/google";
import { Poppins, Lato } from "next/font/google";
const poppins = Poppins({
subsets: ["latin"],
weight: ["100", "200", "300", "400", "500", "600", "700", "800", "900"],
});

const lato = Lato({
subsets: ["latin"],
variable: "--font-lato",
weight: ["100", "300", "400", "700", "900"],
});

// Declare the dataLayer object as a global variable
declare global {
interface Window {
Expand Down Expand Up @@ -58,7 +64,7 @@ export default function RootLayout({
/>
</head>

<body className={poppins.className}>
<body className={`${poppins.className} ${lato.variable}`}>
<noscript>
<iframe
src="https://www.googletagmanager.com/ns.html?id=GTM-WP6VXKV"
Expand Down
4 changes: 3 additions & 1 deletion src/app/privacy-policy/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,9 @@ import Link from "next/link";
const Privacy = () => {
return (
<div className="container section">
<h1 className="text-3xl font-bold mb-6 text-blue-900">Privacy Policy</h1>
<h1 className="text-3xl font-medium mb-6 text-blue-900">
Privacy Policy
</h1>

<section className="mb-8">
<h2 className="text-xl font-semibold mb-4 text-blue-900">
Expand Down
Loading

0 comments on commit e28d444

Please sign in to comment.