feat: improve project ui

Author: svkhrobbeck

.prettierignore

@@ -1,5 +1,4 @@
 build/
 node_modules/
 public/
-package.json
-s
+package.json

src/components/ClientCard.tsx

@@ -6,7 +6,7 @@ interface IProps {
 
 const ClientCard: React.FC<IProps> = ({ logo }): JSX.Element => {
   return (
-    <div className="max-w-[100px] md:max-w-[140px] lg:max-w-[220px]">
+    <div className="max-w-[80px] md:max-w-[120px] lg:max-w-[160px]">
       <img className="w-full h-auto object-contain" src={logo} alt="client logo" />
     </div>
   );

src/components/Clients.tsx

@@ -9,9 +9,9 @@ import { ClientCard } from ".";
 const Clients: React.FC = (): JSX.Element => {
   return (
     <section className={cx("my-4 container", styles.flexCenter)} id="clients">
-      <div className="flex justify-center items-center lg:justify-between gap-[50px] flex-wrap w-full">
-        {clients.map(client => (
-          <ClientCard key={client.id} {...client} />
+      <div className="flex justify-center items-center lg:justify-between gap-[40px] flex-wrap w-full">
+        {clients.map((logo, idx) => (
+          <ClientCard key={idx} logo={logo} />
         ))}
       </div>
     </section>

src/components/Hero.tsx

@@ -10,7 +10,7 @@ const Hero: React.FC = (): JSX.Element => {
   return (
     <section className="font-montserrat py-6 lg:py-9 xl:py-12">
       <div className={cx("lg:flex-row flex-col container", styles.flexBetween)}>
-        <div className="mb-10 lg:mb-0 flex mr-0 lg:mr-[60px] max-w-[500px] h-auto">
+        <div className="mb-10 lg:mb-0 flex mr-0 lg:mr-[60px] max-w-[450px] h-auto">
           <img className="w-full h-auto rounded-md" src={robot} alt="robot ai" />
         </div>
 

src/constants/constants.ts

@@ -92,9 +92,4 @@ export const socials: Types.ISocial[] = [
   { id: "social-4", link: "https://linkedin.com/", icon: icons.linkedin },
 ];
 
-export const clients: Types.IClient[] = [
-  { id: "client-1", logo: icons.airbnb },
-  { id: "client-2", logo: icons.binance },
-  { id: "client-3", logo: icons.coinbase },
-  { id: "client-4", logo: icons.dropbox },
-];
+export const clients = [icons.airbnb, icons.binance, icons.coinbase, icons.dropbox];

src/constants/styles.ts

@@ -4,11 +4,11 @@ export const styles = {
   flexCenter: "flex justify-center items-center",
   flexStart: "flex justify-start items-center",
   flexBetween: "flex justify-between items-center",
-  paragraph: "font-montserrat font-normal text-lightWhite text-[15px] sm:text-[17px]",
+  paragraph: "font-montserrat font-normal text-lightWhite text-[14px] sm:text-[16px]",
   heading1:
-    "font-montserrat font-semibold text-[30px] sm:text-[36px] md:text-[40px] lg:text-[45px] text-white leading-[1.2]",
+    "font-montserrat font-semibold text-[28px] sm:text-[32px] md:text-[36px] lg:text-[42px] text-white leading-[1.2]",
   heading2:
-    "font-montserrat font-semibold text-[18px] sm:text-[20px] md:text-[24px] lg:text-[28px] text-white leading-[1.3]",
+    "font-montserrat font-semibold text-[17px] sm:text-[18px] md:text-[22px] lg:text-[25px] text-white leading-[1.3]",
 };
 
 export const layout = {

src/interfaces/index.ts

@@ -35,8 +35,3 @@ export interface ISocial {
   link: string;
   icon: string;
 }
-
-export interface IClient {
-  id: string;
-  logo: string;
-}

src/main.tsx

@@ -1,7 +1,8 @@
-import { BrowserRouter } from "react-router-dom";
 import "./index.css";
 
+import { BrowserRouter } from "react-router-dom";
 import ReactDOM from "react-dom/client";
+
 import App from "./App";
 
 const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);

tailwind.config.js

@@ -10,8 +10,7 @@ export default {
           sm: "570px",
           md: "750px",
           lg: "1000px",
-          xl: "1140px",
-          "2xl": "1280px",
+          xl: "1200px",
         },
       },
       backgroundImage: theme => ({

vite.config.ts

@@ -5,6 +5,7 @@ import tsconfigPaths from "vite-tsconfig-paths";
 export default defineConfig({
   server: {
     host: true,
+    port: 4000
   },
   build: {
     rollupOptions: {