feature: Responsive on all views

limanmys · Nov 21, 2023 · 677b026 · 677b026
1 parent 17b46b2
commit 677b026
Show file tree

Hide file tree

Showing 7 changed files with 29 additions and 20 deletions.
diff --git a/components/footer.tsx b/components/footer.tsx
@@ -10,9 +10,9 @@ export function SiteFooter({ className }: React.HTMLAttributes<HTMLElement>) {
   return (
     <footer className={cn(className)}>
       <div className="z-50 w-full border-y bg-background/5 py-10 backdrop-blur">
-        <div className="container flex flex-col items-center justify-between md:h-24 md:flex-row md:py-0">
+        <div className="container flex flex-col items-center justify-between gap-8 md:h-24 md:flex-row md:py-0">
           <Link
-            className="flex flex-col gap-4 md:gap-2 md:px-0"
+            className="flex flex-col md:gap-2 md:px-0"
             href="https://havelsan.com.tr"
             target="_blank"
           >

diff --git a/components/home/contact.tsx b/components/home/contact.tsx
@@ -8,7 +8,7 @@ export default function ContactSection() {
   return (
     <section id="contact" className="border-t">
       <div className="container py-12">
-        <div className="grid grid-cols-5 gap-8">
+        <div className="grid-cols-5 gap-8 md:grid">
           <div className="col-span-2 flex flex-col justify-center">
             <h5
               className={cn(
@@ -20,12 +20,15 @@ export default function ContactSection() {
               iletişime geçin
             </h5>
 
-            <p className="mt-6 leading-relaxed text-muted-foreground">
+            <p className="mb-5 mt-6 leading-relaxed text-muted-foreground md:mb-0">
               Ücretsiz Demo İsteyin! BT süreçlerinizde aksaklığa sebep olmadan
               kavram ispat çalışması sunuyoruz. Sistem yönetimi projenizin ilk
               adımını risk almadan Liman Merkezi Yönetim Sistemi ile
               başlayabilirsiniz. Kavram ispat çalışması sonrası 30 gün ücretsiz
-              deneme sürümünü sizler de test edebilirsiniz. <br /> <br />
+              deneme sürümünü sizler de test edebilirsiniz.
+            </p>
+
+            <p className="mt-6 hidden leading-relaxed text-muted-foreground lg:block">
               Liman Merkezi Yönetim Sistemi halihazırda bulunan sisteminize
               kesinti yaşatmadan entegre olabilmektedir. Bileşen olarak Cihaz
               Yöneticisi, Ağ Keşif, Ağ İzleme, Domain Yöneticisi ve
@@ -36,8 +39,8 @@ export default function ContactSection() {
           </div>
           <div className="col-span-3">
             <Card className="shadow shadow-accent">
-              <CardContent className="p-8">
-                <div className="mb-5 font-semibold leading-none tracking-tight text-foreground">
+              <CardContent className="p-4 md:p-6 lg:p-8">
+                <div className="mb-5 font-semibold tracking-tight text-foreground">
                   Aşağıdaki formu doldurun ve takımımız sizinle iletişime
                   geçsin.
                 </div>

diff --git a/components/home/hero.tsx b/components/home/hero.tsx
@@ -41,15 +41,15 @@ export default function Hero() {
             Açık Kaynak
             <br /> Merkezi Yönetim Sistemi.
           </h1>
-          <p className="mt-6 max-w-[42rem] leading-normal text-muted-foreground sm:text-xl sm:leading-8">
+          <p className="mt-6 max-w-[42rem] text-base leading-normal text-muted-foreground sm:text-xl sm:leading-8">
             <b>Liman Merkezi Yönetim Sistemi</b> bilgi teknolojisi
             süreçlerinizde bulunan <b>sunucu</b>, <b>istemci</b> (Windows,
             Linux), <b>ağ cihazları</b> (router, switch) ve
             <b> yazıcıları</b> uzaktan, kararlı, güvenli ve genişletilebilir
             yöntemler ile merkezi olarak yönetmenizi sağlar.
           </p>
 
-          <AppWindow className="relative mt-10">
+          <AppWindow className="relative -m-5 mt-10">
             <Image
               src={HeroPictureWhite}
               className="block dark:hidden"

diff --git a/components/home/showcase.tsx b/components/home/showcase.tsx
@@ -163,11 +163,11 @@ export default function Showcase() {
     <motion.div variants={variants} initial="in" animate="inactive" exit="out">
       <section
         id="showcase"
-        className="relative overflow-hidden border-t bg-background bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] pb-28 pt-20 sm:py-32"
+        className="relative overflow-hidden border-t bg-background bg-[linear-gradient(to_right,#80808012_1px,transparent_1px),linear-gradient(to_bottom,#80808012_1px,transparent_1px)] bg-[size:24px_24px] py-16 sm:py-32"
       >
         <ShowcaseGradient />
         <div className="container relative px-4 sm:px-6 lg:px-8">
-          <div className="flex max-w-2xl flex-col items-center justify-center md:mx-auto md:text-center xl:max-w-none">
+          <div className="flex max-w-2xl flex-col items-center justify-center text-center md:mx-auto xl:max-w-none">
             <h2
               className={cn(
                 "bg-gradient-to-r from-cyan-400 to-blue-500 bg-clip-text font-heading text-3xl text-transparent sm:text-4xl md:text-5xl",
@@ -176,15 +176,15 @@ export default function Showcase() {
             >
               Eklentilerimiz
             </h2>
-            <p className="mt-6 max-w-4xl text-lg font-medium tracking-tight text-muted-foreground">
+            <p className="mt-6 max-w-4xl font-medium tracking-tight text-muted-foreground md:text-lg">
               Liman Merkezi Yönetim Sistemi&apos;nin genişletilebilir yapısı
               sayesinde birçok eklenti geliştirilmiştir. Bu eklentileri
               kullanarak Liman&apos;ı istediğiniz gibi genişletebilirsiniz.
               HAVELSAN A.Ş. olarak geliştirdiğimiz öne çıkan eklentiler
               aşağıdadır.
             </p>
           </div>
-          <div className="mt-16 grid grid-cols-1 items-center gap-y-2 pt-10 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0">
+          <div className="mt-4 grid grid-cols-1 items-center gap-y-2 pt-10 sm:mt-14 sm:gap-y-6 md:mt-20 lg:grid-cols-12 lg:pt-0">
             <div className="-mx-4 flex overflow-x-auto pb-4 sm:mx-0 sm:overflow-visible sm:pb-0 lg:col-span-5">
               <div className="relative flex gap-x-4 whitespace-nowrap px-4 sm:mx-auto sm:px-0 lg:mx-0 lg:block lg:gap-x-0 lg:gap-y-1 lg:whitespace-normal">
                 {ShowcaseItems.map((item, i) => (
@@ -199,7 +199,7 @@ export default function Showcase() {
               </div>
             </div>
             <div className="lg:col-span-7">
-              <div className="relative z-20 -ml-1 mt-10 w-[45rem] rounded-md shadow-xl shadow-blue-900/10 sm:w-auto lg:mt-0 lg:w-[67.8125rem]">
+              <div className="relative z-20 -ml-1 w-[45rem] rounded-md shadow-xl shadow-blue-900/10 sm:w-auto lg:mt-0 lg:w-[67.8125rem]">
                 <AppWindow>{ShowcaseItems[active].content}</AppWindow>
               </div>
             </div>
@@ -226,20 +226,20 @@ function ShowcaseMenuItem({
       className={cn(
         "group relative px-4 py-1 transition-all lg:p-6",
         active &&
-          "rounded-full bg-foreground lg:rounded-l-xl lg:rounded-r-none lg:bg-accent/50 lg:ring-1 lg:ring-inset lg:ring-foreground/10",
+          "rounded-full bg-foreground/20 lg:rounded-l-xl lg:rounded-r-none lg:bg-accent/50 lg:ring-1 lg:ring-inset lg:ring-foreground/10",
         !active && "hover:rounded-l-xl hover:bg-accent/30"
       )}
       onClick={onClick}
     >
       <h3>
         <button
           className={cn(
-            "ui-not-focus-visible:outline-none font-heading text-lg font-semibold tracking-wide",
+            "ui-not-focus-visible:outline-none font-heading font-semibold tracking-wide md:text-lg",
             fontHeading.variable
           )}
           type="button"
         >
-          <span className="absolute inset-0 rounded-full lg:rounded-l-xl lg:rounded-r-none" />
+          <span className="absolute inset-0 rounded-full  lg:rounded-l-xl lg:rounded-r-none" />
           {title}
         </button>
       </h3>

diff --git a/components/main-nav.tsx b/components/main-nav.tsx
@@ -19,7 +19,7 @@ export function MainNav({ items }: MainNavProps) {
         <Logo className="h-7 w-auto" />
       </Link>
       {items?.length ? (
-        <nav className="flex gap-6">
+        <nav className="hidden gap-6 md:flex">
           {items?.map(
             (item, index) =>
               item.href && (

diff --git a/components/ui/window.tsx b/components/ui/window.tsx
@@ -16,7 +16,7 @@ export default function AppWindow({
         className
       )}
     >
-      <div className="flex h-8 items-center gap-2 border-b bg-foreground/5">
+      <div className="flex h-5 items-center gap-2 border-b bg-foreground/5 sm:h-8">
         <div className="ml-1"></div>
         <div className="h-3 w-3 rounded-full bg-red-500 transition-all hover:bg-red-600"></div>
         <div className="h-3 w-3 rounded-full bg-yellow-500 transition-all hover:bg-yellow-600"></div>

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,7 +7,13 @@ module.exports = {
   theme: {
     container: {
       center: true,
-      padding: "2rem",
+      padding: {
+        DEFAULT: "1rem",
+        sm: "1.4rem",
+        lg: "2rem",
+        xl: "2.5rem",
+        "2xl": "3.5rem",
+      },
       screens: {
         "2xl": "1400px",
       },