Skip to content

Commit

Permalink
biome iterations
Browse files Browse the repository at this point in the history
  • Loading branch information
@Aliiiu
Aliiiu committed Oct 3, 2023
1 parent 2169a2a commit 6447256
Show file tree
Hide file tree
Showing 13 changed files with 869 additions and 869 deletions.
60 changes: 30 additions & 30 deletions src/components/layouts/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,35 +1,35 @@
import Image from 'next/image';
import React from 'react';
import Image from "next/image";
import React from "react";

const Footer = () => {
return (
<div className='pt-16 pb-12 bg-brand-50 dark:bg-brand-200'>
<div className='p-8 flex flex-col items-center gap-10 border-b border-blackAlpha-50'>
<Image src={'/svgs/brainie.svg'} alt='' width={40} height={34} />
<div className='flex flex-col items-center gap-4'>
<h2 className='text-brand-500 dark:text-brand-800 text-center'>
Stay up to date every week with our newsletter
</h2>
<p className='text-gray800 text-center'>
Never miss any of the most popular and trending articles on IQ.wiki
when you sign up to our email newsletter.
</p>
<a
href={''}
target='_blank'
className='flex justify-center w-[210px] text-white/90 bg-brand-500 py-3 rounded-md hover:bg-brand-700 transition-all ease-in-out duration-300'
>
Subscribe
</a>
</div>
</div>
<div className='pt-8 px-8 text-center'>
<small className='pt-5 text-gray600 dark:text-gray800'>
©️2023 Powered by IQ and BrianDAO. All Rights Reserved. Ver 7527ed4
</small>
</div>
</div>
);
return (
<div className="pt-16 pb-12 bg-brand-50 dark:bg-brand-200">
<div className="p-8 flex flex-col items-center gap-10 border-b border-blackAlpha-50">
<Image src={"/svgs/brainie.svg"} alt="" width={40} height={34} />
<div className="flex flex-col items-center gap-4">
<h2 className="text-brand-500 dark:text-brand-800 text-center">
Stay up to date every week with our newsletter
</h2>
<p className="text-gray800 text-center">
Never miss any of the most popular and trending articles on IQ.wiki
when you sign up to our email newsletter.
</p>
<a
href={""}
target="_blank"
className="flex justify-center w-[210px] text-white/90 bg-brand-500 py-3 rounded-md hover:bg-brand-700 transition-all ease-in-out duration-300"
>
Subscribe
</a>
</div>
</div>
<div className="pt-8 px-8 text-center">
<small className="pt-5 text-gray600 dark:text-gray800">
©️2023 Powered by IQ and BrianDAO. All Rights Reserved. Ver 7527ed4
</small>
</div>
</div>
);
};

export default Footer;
126 changes: 63 additions & 63 deletions src/components/layouts/Hero.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,77 +1,77 @@
'use client';
"use client";

import { space_grotesk } from '@/app/font';
import gsap from 'gsap';
import React, { MouseEventHandler, useRef, useState } from 'react';
import { RiArrowDownDoubleLine } from 'react-icons/ri';
import Navbar from './Navbar';
import { space_grotesk } from "@/app/font";
import gsap from "gsap";
import React, { MouseEventHandler, useRef, useState } from "react";
import { RiArrowDownDoubleLine } from "react-icons/ri";
import Navbar from "./Navbar";

const Hero = () => {
const plane = useRef<HTMLDivElement>(null);
const plane = useRef<HTMLDivElement>(null);

let requestAnimationFrameId: number | null = null;
let xForce = 0;
let yForce = 0;
const easing = 0.08;
const speed = 0.01;
let requestAnimationFrameId: number | null = null;
let xForce = 0;
let yForce = 0;
const easing = 0.08;
const speed = 0.01;

const manageMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {
const { movementX, movementY } = e;
xForce += movementX * speed;
yForce += movementY * speed;
const manageMouseMove: React.MouseEventHandler<HTMLDivElement> = (e) => {
const { movementX, movementY } = e;
xForce += movementX * speed;
yForce += movementY * speed;

if (requestAnimationFrameId == null) {
requestAnimationFrameId = requestAnimationFrame(animate);
}
};
if (requestAnimationFrameId == null) {
requestAnimationFrameId = requestAnimationFrame(animate);
}
};

const lerp = (start: number, target: number, amount: number) =>
start * (1 - amount) + target * amount;
const lerp = (start: number, target: number, amount: number) =>
start * (1 - amount) + target * amount;

const animate = () => {
xForce = lerp(xForce, 0, easing);
yForce = lerp(yForce, 0, easing);
gsap.set(plane.current, { x: `+=${xForce}`, y: `+=${yForce}` });
const animate = () => {
xForce = lerp(xForce, 0, easing);
yForce = lerp(yForce, 0, easing);
gsap.set(plane.current, { x: `+=${xForce}`, y: `+=${yForce}` });

if (Math.abs(xForce) < 0.01) xForce = 0;
if (Math.abs(yForce) < 0.01) yForce = 0;
if (Math.abs(xForce) < 0.01) xForce = 0;
if (Math.abs(yForce) < 0.01) yForce = 0;

if (xForce != 0 || yForce != 0) {
requestAnimationFrame(animate);
} else {
cancelAnimationFrame(requestAnimationFrameId!);
requestAnimationFrameId = null;
}
};
if (xForce != 0 || yForce != 0) {
requestAnimationFrame(animate);
} else {
cancelAnimationFrame(requestAnimationFrameId!);
requestAnimationFrameId = null;
}
};

return (
<div ref={plane}>
<div className='relative bg-braindao-sm sm:bg-braindao bg-cover bg-no-repeat bg-center text-whiteAlpha-900'>
<Navbar />
<div className='max-w-[1536px] mx-auto'>
<div className='flex flex-col items-center w-full justify-center relative overflow-y-hidden h-[calc(40vh-65px)] md:h-[calc(60vh-65px)] lg:h-[calc(100vh-65px)]'>
<div className='flex text-center md:text-left items-center md:items-start flex-col sm:pt-10 justify-start mx-auto gap-1 sm:gap-5 w-full max-w-6xl'>
<h1
className={`text-2xl sm:text-4xl md:text-5xl animate-fade-in xl:text-[60px] 2xl:text-[70px] !leading-tight text-center font-bold ${space_grotesk.className}`}
>
Building a more intelligent future through the IQ token.
</h1>
<p className='md:text-lg max-w-[513px] animate-slide-up lg:max-w-2xl text-center mx-auto lg:text-xl'>
Join our mission to expand the scope of human knowledge with
BrainDAO, the governing DAO powering the IQ ecosystem.
</p>
<a
href={'#iq-token'}
className='mt-4 mx-auto hover:animate-bounce'
>
<RiArrowDownDoubleLine size={24} />
</a>
</div>
</div>
</div>
</div>
</div>
);
return (
<div ref={plane}>
<div className="relative bg-braindao-sm sm:bg-braindao bg-cover bg-no-repeat bg-center text-whiteAlpha-900">
<Navbar />
<div className="max-w-[1536px] mx-auto">
<div className="flex flex-col items-center w-full justify-center relative overflow-y-hidden h-[calc(40vh-65px)] md:h-[calc(60vh-65px)] lg:h-[calc(100vh-65px)]">
<div className="flex text-center md:text-left items-center md:items-start flex-col sm:pt-10 justify-start mx-auto gap-1 sm:gap-5 w-full max-w-6xl">
<h1
className={`text-2xl sm:text-4xl md:text-5xl animate-fade-in xl:text-[60px] 2xl:text-[70px] !leading-tight text-center font-bold ${space_grotesk.className}`}
>
Building a more intelligent future through the IQ token.
</h1>
<p className="md:text-lg max-w-[513px] animate-slide-up lg:max-w-2xl text-center mx-auto lg:text-xl">
Join our mission to expand the scope of human knowledge with
BrainDAO, the governing DAO powering the IQ ecosystem.
</p>
<a
href={"#iq-token"}
className="mt-4 mx-auto hover:animate-bounce"
>
<RiArrowDownDoubleLine size={24} />
</a>
</div>
</div>
</div>
</div>
</div>
);
};

export default Hero;
Loading

0 comments on commit 6447256

Please sign in to comment.