Skip to content

Commit

Permalink
Merge pull request #255 from w3bdesign/development
Browse files Browse the repository at this point in the history
Refactor
  • Loading branch information
w3bdesign authored Aug 5, 2024
2 parents ec86ae4 + cc4cdbd commit fc2015a
Show file tree
Hide file tree
Showing 3 changed files with 26 additions and 19 deletions.
17 changes: 6 additions & 11 deletions src/components/Index/Hero.component.tsx
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
"use client";

import React, { Suspense } from "react";
import dynamic from "next/dynamic";

import Icons from "./Icons.component";
import FadeDown from "@/components/Animations/FadeDown.component";
import FadeUp from "@/components/Animations/FadeUp.component";
import RotatingLoader from "../Animations/RotatingLoader.component";
import dynamic from "next/dynamic";
import RotatingLoader from "@/components/Animations/RotatingLoader.component";
import MobileBackground from "./MobileBackground.component";

const ReactMatrixAnimation = dynamic(
() => import("../Animations/Matrix.component"),
{ ssr: false },
{ ssr: false }
);

type THero = { text: string };
Expand All @@ -24,14 +26,7 @@ const Hero = ({ content }: IContent) => (
data-testid="main-hero"
className="relative flex flex-col justify-center text-lg h-[26rem] md:h-[28.125rem] overflow-hidden w-full"
>
<div
className="absolute inset-0 md:hidden bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: "url('/images/mobilbg.webp')",
top: "-0.5rem",
marginBottom: "2.5rem",
}}
/>
<MobileBackground />
<div className="hidden md:block absolute inset-0 w-full h-full">
<Suspense
fallback={
Expand Down
16 changes: 8 additions & 8 deletions src/components/Index/Icons.component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,14 @@ interface IAnimateIcons {
iconName: string;
}

const AnimateIcons: IAnimateIcons[] = [
{ id: 0, Icon: FaReact, iconName: "React" },
{ id: 1, Icon: FaVuejs, iconName: "Vue" },
{ id: 2, Icon: SiTypescript, iconName: "Typescript" },
{ id: 3, Icon: SiWordpress, iconName: "Wordpress" },
{ id: 4, Icon: FaPhp, iconName: "PHP" },
];

/**
* Renders SVG icons that are used on the front page
* Uses Framer Motion for animations to show the SVGs
Expand All @@ -18,14 +26,6 @@ interface IAnimateIcons {
*/

const Icons = () => {
const AnimateIcons: IAnimateIcons[] = [
{ id: 0, Icon: FaReact, iconName: "React" },
{ id: 1, Icon: FaVuejs, iconName: "Vue" },
{ id: 2, Icon: SiTypescript, iconName: "Typescript" },
{ id: 3, Icon: SiWordpress, iconName: "Wordpress" },
{ id: 4, Icon: FaPhp, iconName: "PHP" },
];

return (
<div
data-testid="icons"
Expand Down
12 changes: 12 additions & 0 deletions src/components/Index/MobileBackground.component.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
const MobileBackground = () => (
<div
className="absolute inset-0 md:hidden bg-cover bg-center bg-no-repeat"
style={{
backgroundImage: "url('/images/mobilbg.webp')",
top: "-0.5rem",
marginBottom: "2.5rem",
}}
/>
);

export default MobileBackground;

0 comments on commit fc2015a

Please sign in to comment.