Merge pull request #2 from Aditya-150/main

changes push

.github/workflows/gatsby.yml

@@ -0,0 +1,97 @@
+# Sample workflow for building and deploying a Gatsby site to GitHub Pages
+#
+# To get started with Gatsby see: https://www.gatsbyjs.com/docs/quick-start/
+#
+name: Deploy Gatsby site to Pages
+
+on:
+  # Runs on pushes targeting the default branch
+  push:
+    branches: ["main"]
+
+  # Allows you to run this workflow manually from the Actions tab
+  workflow_dispatch:
+
+# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
+# However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
+
+# Default to bash
+defaults:
+  run:
+    shell: bash
+
+jobs:
+  # Build job
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Detect package manager
+        id: detect-package-manager
+        run: |
+          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
+            echo "manager=yarn" >> $GITHUB_OUTPUT
+            echo "command=install" >> $GITHUB_OUTPUT
+            exit 0
+          elif [ -f "${{ github.workspace }}/package.json" ]; then
+            echo "manager=npm" >> $GITHUB_OUTPUT
+            echo "command=ci" >> $GITHUB_OUTPUT
+            exit 0
+          else
+            echo "Unable to determine package manager"
+            exit 1
+          fi
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Setup Pages
+        id: pages
+        uses: actions/configure-pages@v4
+        with:
+          # Automatically inject pathPrefix in your Gatsby configuration file.
+          #
+          # You may remove this line if you want to manage the configuration yourself.
+          static_site_generator: gatsby
+      - name: Restore cache
+        uses: actions/cache@v4
+        with:
+          path: |
+            public
+            .cache
+          key: ${{ runner.os }}-gatsby-build-${{ hashFiles('public') }}
+          restore-keys: |
+            ${{ runner.os }}-gatsby-build-
+      - name: Install dependencies
+        run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
+      - name: Build with Gatsby
+        env:
+          PREFIX_PATHS: 'true'
+        run: ${{ steps.detect-package-manager.outputs.manager }} run build
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: ./public
+
+  # Deployment job
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.prettierignore

@@ -0,0 +1,3 @@
+# Ignore artifacts:
+build
+coverage

.prettierrc

@@ -0,0 +1 @@
+{}

gatsby-browser.tsx

@@ -0,0 +1 @@
+import "./src/styles/global.css";

gatsby-config.ts

@@ -3,32 +3,43 @@ import type { GatsbyConfig } from "gatsby";
 const config: GatsbyConfig = {
   siteMetadata: {
     title: `Devibe`,
-    siteUrl: `https://www.yourdomain.tld`
+    siteUrl: `https://www.yourdomain.tld`,
   },
   // More easily incorporate content into your pages through automatic TypeScript type generation and better GraphQL IntelliSense.
   // If you use VSCode you can also use the GraphQL plugin
   // Learn more at: https://gatsby.dev/graphql-typegen
   graphqlTypegen: true,
-  plugins: ["gatsby-plugin-google-gtag", "gatsby-plugin-image", "gatsby-plugin-sitemap", {
-    resolve: 'gatsby-plugin-manifest',
-    options: {
-      "icon": "src/images/icon.png"
-    }
-  }, "gatsby-plugin-mdx", "gatsby-plugin-sharp", "gatsby-transformer-sharp", {
-    resolve: 'gatsby-source-filesystem',
-    options: {
-      "name": "images",
-      "path": "./src/images/"
+  plugins: [
+    "gatsby-plugin-image",
+    "gatsby-plugin-sitemap",
+    "gatsby-plugin-postcss",
+    {
+      resolve: "gatsby-plugin-manifest",
+      options: {
+        icon: "src/images/icon.png",
+      },
     },
-    __key: "images"
-  }, {
-    resolve: 'gatsby-source-filesystem',
-    options: {
-      "name": "pages",
-      "path": "./src/pages/"
+    "gatsby-plugin-sass",
+    "gatsby-plugin-mdx",
+    "gatsby-plugin-sharp",
+    "gatsby-transformer-sharp",
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "images",
+        path: "./src/images/",
+      },
+      __key: "images",
     },
-    __key: "pages"
-  }]
+    {
+      resolve: "gatsby-source-filesystem",
+      options: {
+        name: "pages",
+        path: "./src/pages/",
+      },
+      __key: "pages",
+    },
+  ],
 };
 
 export default config;

gatsby-ssr.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+
+export const onRenderBody = ({ setHeadComponents }) => {
+  setHeadComponents([
+    <link
+      rel="preload"
+      href="/fonts/Avenir-Heavy.ttf"
+      as="font"
+      type="font/ttf"
+      crossOrigin="anonymous"
+      key="avenirFont"
+    />,
+    <link
+      rel="preload"
+      href="/fonts/Avenir-Regular.ttf"
+      as="font"
+      type="font/ttf"
+      crossOrigin="anonymous"
+      key="avenirFont"
+    />,
+    <link
+      rel="preload"
+      href="/fonts/Alike-Regular.ttf"
+      as="font"
+      type="font/ttf"
+      crossOrigin="anonymous"
+      key="alikeFont"
+    />,
+  ]);
+}

package.json

@@ -16,14 +16,15 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
+    "@gsap/react": "^2.1.0",
     "@mdx-js/react": "^3.0.0",
     "autoprefixer": "^10.4.17",
     "gatsby": "^5.13.2",
-    "gatsby-plugin-google-gtag": "^5.13.1",
     "gatsby-plugin-image": "^3.13.1",
     "gatsby-plugin-manifest": "^5.13.1",
     "gatsby-plugin-mdx": "^5.13.1",
     "gatsby-plugin-postcss": "^6.13.1",
+    "gatsby-plugin-sass": "^6.13.1",
     "gatsby-plugin-sharp": "^5.13.1",
     "gatsby-plugin-sitemap": "^6.13.1",
     "gatsby-source-filesystem": "^5.13.1",
@@ -32,12 +33,15 @@
     "postcss": "^8.4.33",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-icons": "^5.0.1",
+    "sass": "^1.70.0",
     "tailwindcss": "^3.4.1"
   },
   "devDependencies": {
     "@types/node": "^20.11.5",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
+    "prettier": "3.2.4",
     "typescript": "^5.3.3"
   }
 }

postcss.config.js

@@ -3,4 +3,4 @@ module.exports = {
     tailwindcss: {},
     autoprefixer: {},
   },
-}
+};

src/components/Blogs/index.tsx

@@ -0,0 +1,15 @@
+import React from "react";
+
+export default function Blogs() {
+  return (
+    <section
+      className="bg-black flex py-40 rounded-bl-[3.75rem]"
+      style={{ flexDirection: "column" }}
+    >
+      <h2 className="font-heavy text-white mb-10 pl-[6.25rem]">BLOGS</h2>
+      <h1 className="font-serif text-[3.25rem] text-white w-2/5 pl-[6.25rem]">
+        Check out our blogs to maximize your growth
+      </h1>
+    </section>
+  );
+}

src/components/Cursor/index.tsx

@@ -0,0 +1,85 @@
+import React, { MutableRefObject, useEffect, useRef } from "react";
+import { gsap, Linear } from "gsap";
+import { IDesktop, isSmallScreen } from "../../pages/index";
+
+const CURSOR_STYLES = {
+  CURSOR: "fixed hidden bg-white w-4 h-4 select-none pointer-events-none z-50",
+  FOLLOWER: "fixed hidden h-8 w-8 select-none pointer-events-none z-50",
+};
+
+const Cursor = ({ isDesktop }: IDesktop) => {
+  const cursor: MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null);
+  const follower: MutableRefObject<HTMLDivElement | null> =
+    useRef<HTMLDivElement | null>(null);
+
+  const onHover = () => {
+    gsap.to(cursor.current, {
+      scale: 0.5,
+      duration: 0.3,
+    });
+    gsap.to(follower.current, {
+      scale: 3,
+      duration: 0.3,
+    });
+  };
+
+  const onUnhover = () => {
+    gsap.to(cursor.current, {
+      scale: 1,
+      duration: 0.3,
+    });
+    gsap.to(follower.current, {
+      scale: 1,
+      duration: 0.3,
+    });
+  };
+
+  const moveCircle = (e: MouseEvent) => {
+    gsap.to(cursor.current, {
+      x: e.clientX,
+      y: e.clientY,
+      duration: 0.1,
+      ease: Linear.easeNone,
+    });
+    gsap.to(follower.current, {
+      x: e.clientX,
+      y: e.clientY,
+      duration: 0.3,
+      ease: Linear.easeNone,
+    });
+  };
+
+  const initCursorAnimation = () => {
+    follower.current?.classList.remove("hidden");
+    cursor.current?.classList.remove("hidden");
+
+    document.addEventListener("mousemove", moveCircle);
+
+    document.querySelectorAll(".link").forEach((el) => {
+      el.addEventListener("mouseenter", onHover);
+      el.addEventListener("mouseleave", onUnhover);
+    });
+  };
+
+  useEffect(() => {
+    if (isDesktop && !isSmallScreen()) {
+      initCursorAnimation();
+    }
+  }, [cursor, follower, isDesktop]);
+
+  return (
+    <>
+      <div
+        ref={cursor}
+        className={`mix-blend-difference rounded-full ${CURSOR_STYLES.CURSOR}`}
+      ></div>
+      <div
+        ref={follower}
+        className={`rounded-full -left-2 -top-2 bg-white opacity-20 will-change-transform mix-blend-difference ${CURSOR_STYLES.FOLLOWER}`}
+      ></div>
+    </>
+  );
+};
+
+export default Cursor;

src/components/Hero/index.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import HeroVector from "../../images/hero-vector.svg";
+import HeroImage from "../../images/hero-image.webp";
+import { IoArrowForwardOutline } from "react-icons/io5";
+import { Link } from "gatsby";
+
+const Hero = () => {
+  return (
+    <section className="bg-light-yellow px-[6.25rem] pt-72 pb-4 flex flex-row align-top justify-between gap-10">
+      <div>
+        <div className="relative">
+          <img
+            src={HeroVector}
+            alt="hero vector"
+            className="absolute top-[-16%] left-[-5%]"
+          />
+          <h1 className="font-heavy text-black text-[4rem]">
+            Designing Tomorrow <br></br>Your{" "}
+            <span className="text-orange">Ideas,</span> Our
+            <span className="text-green"> Expertise</span>
+          </h1>
+        </div>
+        <p className="font-regular text-2xl text-gray">
+          Try a full-service digital agency, specializing in design, development
+          and brand strategy to find customers and drive revenue.
+        </p>
+        <Link
+          to="https://calendly.com/"
+          className="relative group mt-7 inline-flex gap-x-[0.38rem] items-center border-2 hover:z-10 border-black rounded bg-transparent px-[0.38rem] py-1 font-regular text-xl text-black transition-colors before:absolute before:left-0 before:top-0 before:-z-10 before:h-full before:w-full before:origin-top-left before:scale-x-0 before:bg-black before:transition-transform before:duration-300 before:content-[''] hover:text-white before:hover:scale-x-100"
+        >
+          <p>Request for a meeting</p>
+          <IoArrowForwardOutline className="rotate-45 group-hover:rotate-0 transition-all ease-in-out" />
+        </Link>
+      </div>
+      <img src={HeroImage} alt="hero image" className="w-auto h-96" />
+    </section>
+  );
+};
+
+export default Hero;