feat: add some main page adaptive

umidullo · Aug 20, 2023 · 0b315cc · 0b315cc
1 parent 38cd309
commit 0b315cc
Show file tree

Hide file tree

Showing 11 changed files with 56 additions and 40 deletions.
diff --git a/components/clients.tsx b/components/clients.tsx
@@ -8,14 +8,14 @@ const Clients = () => {
   const { t } = useTranslation();
 
   return (
-    <div className="mb-20">
+    <div className="lg:mb-20">
       <BlockTitle>{t('b_titles.clients')}</BlockTitle>
       <div>
         <Marquee
           autoFill
           pauseOnHover
-          gradient
-          gradientColor={[0, 0, 0]}
+          // gradient
+          // gradientColor={[0, 0, 0]}
           className="my-3"
           speed={30}
         >

diff --git a/components/footer.tsx b/components/footer.tsx
@@ -126,16 +126,16 @@ const footer_nav = [
 const Footer = () => {
   return (
     <footer className="pt-10 pb-12 text-[#888888]">
-      <Wrapper className="flex items-center justify-between">
-        <div className="w-full max-w-sm">
+      <Wrapper className="flex items-center justify-between flex-col lg:flex-row gap-10 lg:gap-0">
+        <div className="w-full max-w-sm order-last lg:order-none flex items-center flex-col">
           <Image
             src="/logo.png"
             alt="footer logo"
             width={193}
             height={31}
             quality={100}
           />
-          <h6 className="mt-3">
+          <h6 className="mt-3 text-center lg:text-start">
             Мы профессиональная команда дизайнеров с более чем 5-летним опытом
             работы в области анимации, дизайна, 3D-моделирования и визуализации.
           </h6>
@@ -168,7 +168,9 @@ const Footer = () => {
         </div>
         {footer_nav.map((block, i) => (
           <div key={i}>
-            <h5 className="mb-3 text-white text-xl font-bold">{block.title}</h5>
+            <h5 className="mb-3 text-white text-xl font-bold text-center lg:text-start">
+              {block.title}
+            </h5>
             <ul className="space-y-1">
               {block.nav_items.map((item, j) => (
                 <li key={j}>

diff --git a/components/header.tsx b/components/header.tsx
@@ -46,7 +46,7 @@ const Header = () => {
           />
         </Link>
         <Nav />
-        <div className="flex gap-3">
+        <div className="hidden lg:flex gap-3">
           <LocaleSwitcher />
           <Button
             icon={<SparklesIcon className="w-5 h-5" />}

diff --git a/components/layout.tsx b/components/layout.tsx
@@ -8,7 +8,7 @@ const inter = Inter({ subsets: ['latin'] });
 const Layout = ({ children }: PropsWithChildren) => {
   return (
     <div className={`${inter.className} relative`}>
-      <BlurCircle className="bg-blue-500 top-8 left-10 delay-200" />
+      {/* <BlurCircle className="bg-blue-500 top-8 left-10 delay-200" /> */}
       <Header />
       <main>{children}</main>
 

diff --git a/components/nav.tsx b/components/nav.tsx
@@ -50,7 +50,7 @@ const Nav = () => {
     },
   ];
   return (
-    <nav className="absolute left-1/2 -translate-x-1/2 w-fit flex items-center gap-6">
+    <nav className="hidden absolute left-1/2 -translate-x-1/2 w-fit lg:flex items-center gap-6">
       {nav.map((item) => {
         if (item.sub_menu.length) {
           return (

diff --git a/components/portfolio-card.tsx b/components/portfolio-card.tsx
@@ -21,7 +21,7 @@ const PortfolioCard = ({
   return (
     <Link
       key={id}
-      className="relative col-span-1 rounded-lg h-[25vw] flex items-end justify-start overflow-hidden group"
+      className="relative col-span-1 rounded-lg aspect-[2/1] flex items-end justify-start overflow-hidden lg:group"
       href={'/' + slug}
     >
       {!!is_video ? (
@@ -42,10 +42,12 @@ const PortfolioCard = ({
           className="w-full h-full object-cover"
         />
       )}
-      <div className="p-10 z-[2] opacity-0 w-full h-full bg-gradient-to-b from-black/30 to-black/60 flex items-end transition-opacity group-hover:opacity-100">
+      <div className="p-4 lg:p-10 z-[2] lg:opacity-0 w-full h-full bg-gradient-to-b from-black/30 to-black/60 flex items-end transition-opacity lg:group-hover:opacity-100">
         <div className="max-w-sm">
-          <p className="text-base mb-2">Website</p>
-          <h4 className="text-3xl font-medium">{title}</h4>
+          <p className="text-base mb-1 lg:mb-2">Website</p>
+          <h4 className="text-xl lg:text-3xl font-semibold lg:font-medium">
+            {title}
+          </h4>
         </div>
       </div>
     </Link>

diff --git a/components/portfolio.tsx b/components/portfolio.tsx
@@ -10,7 +10,7 @@ const Portfolio = ({ posts }: { posts: Record<string, unknown>[] }) => {
   return (
     <Wrapper className="max-w-[100vw]">
       <BlockTitle>{t('b_titles.recents')}</BlockTitle>
-      <div className="grid grid-cols-2 gap-4">
+      <div className="grid grid-cols-1 lg:grid-cols-2 gap-4 py-4">
         {posts.map((post: any) => (
           <PortfolioCard
             key={post.id}

diff --git a/components/promo.tsx b/components/promo.tsx
@@ -9,9 +9,9 @@ const Promo = () => {
 
   return (
     <Wrapper className="flex justify-between">
-      <div className="relative bg-blue-900 overflow-hidden w-full h-[calc(100vh-106px)] max-h-[600px] my-4 rounded-3xl flex items-center justify-center">
-        <div className="w-1/2 flex items-center flex-col justify-center gap-8 z-[3]">
-          <h1 className="font-medium text-4xl uppercase text-center leading-normal">
+      <div className="relative bg-blue-900 overflow-hidden w-full h-[400px] lg:h-[calc(100vh-106px)] max-h-[600px] my-4 rounded-3xl flex items-center justify-center">
+        <div className="w-1/2 flex items-center flex-col justify-center gap-3 lg:gap-8 z-[3]">
+          <h1 className="font-medium text-lg lg:text-4xl uppercase text-center leading-normal">
             разрабатываем и создаем эффективный цифровой опыт
           </h1>
           <Button icon={<PlayIcon className="w-5 h-5 stroke-2" />}>

diff --git a/components/services.tsx b/components/services.tsx
@@ -10,42 +10,50 @@ const Services = () => {
   const { t } = useTranslation();
 
   return (
-    <Wrapper className="mb-4 relative">
-      <BlurCircle className="bg-lime-500 top-12 left-1/2 -translate-x-96" />
-      <BlurCircle className="bg-fuchsia-500 -top-52 right-0" />
+    <Wrapper className="relative">
+      {/* <BlurCircle className="bg-lime-500 top-12 left-1/2 -translate-x-96" /> */}
+      {/* <BlurCircle className="bg-fuchsia-500 -top-52 right-0" /> */}
       <BlockTitle>{t('b_titles.services')}</BlockTitle>
-      <div className="grid grid-cols-3 grid-rows-2 gap-4 h-[calc(100vh-132px)] max-h-[730px]">
-        <div className="col-start-1 col-end-2 row-start-1 row-end-3 bg-blue-900 rounded-3xl p-10">
-          <h3 className="text-3xl font-semibold">UX/UI дизайн</h3>
-          <h4 className="mt-3 mb-6 text-base line-clamp-3">
+      <div className="grid grid-cols-2 lg:grid-cols-3 grid-rows-2 gap-4 aspect-square lg:aspect-auto lg:h-[calc(100vh-132px)] max-h-[730px] py-4 mx-auto">
+        <div className="lg:col-start-1 lg:col-end-2 lg:row-start-1 lg:row-end-3 bg-blue-900 rounded-3xl lg:p-10 grid justify-items-center content-center">
+          <h3 className="text-base lg:text-3xl font-semibold">UX/UI дизайн</h3>
+          <h4 className="hidden lg:block mt-3 mb-6 text-base line-clamp-3">
             Advanced training in executing an effective background inbound
             marketing strategy.
           </h4>
-          <Button icon={<ArrowIcon />}>{t('buttons.goto')}</Button>
+          <Button className="hidden lg:block" icon={<ArrowIcon />}>
+            {t('buttons.goto')}
+          </Button>
         </div>
-        <div className="col-start-2 col-end-4 row-start-1 row-end-2 bg-blue-900 rounded-3xl p-10">
-          <h3 className="text-3xl font-semibold">UX/UI дизайн</h3>
-          <h4 className="mt-3 mb-6 text-base line-clamp-3 w-[320px]">
+        <div className="lg:col-start-2 lg:col-end-4 lg:row-start-1 lg:row-end-2 bg-blue-900 rounded-3xl lg:p-10 grid justify-items-center content-center">
+          <h3 className="text-base lg:text-3xl font-semibold">UX/UI дизайн</h3>
+          <h4 className="hidden lg:block mt-3 mb-6 text-base line-clamp-3 w-[320px]">
             Advanced training in executing an effective background inbound
             marketing strategy.
           </h4>
-          <Button icon={<ArrowIcon />}>{t('buttons.goto')}</Button>
+          <Button className="hidden lg:block" icon={<ArrowIcon />}>
+            {t('buttons.goto')}
+          </Button>
         </div>
-        <div className="col-start-2 col-end-3 row-start-2 row-end-3 bg-blue-900 rounded-3xl p-10">
-          <h3 className="text-3xl font-semibold">UX/UI дизайн</h3>
-          <h4 className="mt-3 mb-6 text-base line-clamp-3 w-fit">
+        <div className="lg:col-start-2 lg:col-end-3 lg:row-start-2 lg:row-end-3 bg-blue-900 rounded-3xl lg:p-10 grid justify-items-center content-center">
+          <h3 className="text-base lg:text-3xl font-semibold">UX/UI дизайн</h3>
+          <h4 className="hidden lg:block mt-3 mb-6 text-base line-clamp-3 w-fit">
             Advanced training in executing an effective background inbound
             marketing strategy.
           </h4>
-          <Button icon={<ArrowIcon />}>{t('buttons.goto')}</Button>
+          <Button className="hidden lg:block" icon={<ArrowIcon />}>
+            {t('buttons.goto')}
+          </Button>
         </div>
-        <div className="col-start-3 col-end-4 row-start-2 row-end-3 bg-blue-900 rounded-3xl p-10">
-          <h3 className="text-3xl font-semibold">UX/UI дизайн</h3>
-          <h4 className="mt-3 mb-6 text-base line-clamp-3 w-fit">
+        <div className="lg:col-start-3 lg:col-end-4 lg:row-start-2 lg:row-end-3 bg-blue-900 rounded-3xl lg:p-10 grid justify-items-center content-center">
+          <h3 className="text-base lg:text-3xl font-semibold">UX/UI дизайн</h3>
+          <h4 className="hidden lg:block mt-3 mb-6 text-base line-clamp-3 w-fit">
             Advanced training in executing an effective background inbound
             marketing strategy.
           </h4>
-          <Button icon={<ArrowIcon />}>{t('buttons.goto')}</Button>
+          <Button className="hidden lg:block" icon={<ArrowIcon />}>
+            {t('buttons.goto')}
+          </Button>
         </div>
       </div>
     </Wrapper>

diff --git a/components/ui/block-title.tsx b/components/ui/block-title.tsx
@@ -1,7 +1,11 @@
 import React, { PropsWithChildren } from 'react';
 
 const BlockTitle = ({ children }: PropsWithChildren) => {
-  return <h2 className="text-center py-10 text-3xl font-bold">{children}</h2>;
+  return (
+    <h2 className="text-center pt-6 pb-1 lg:py-10 text-xl lg:text-3xl font-bold">
+      {children}
+    </h2>
+  );
 };
 
 export default BlockTitle;
diff --git a/pages/index.tsx b/pages/index.tsx
@@ -25,8 +25,8 @@ export default function Home({
     <Layout>
       <Promo />
       <Services />
-      <Clients />
       <Portfolio posts={posts} />
+      <Clients />
     </Layout>
   );
 }