+
-
-
-
-
- Your brand,
built better -
-
- We transform your brand vision into tangible web, graphic and video experiences that stop prospective
- clients in their tracks.
-
-
-
-
- Introducing MeetMate
- built better -
-
-
-
-
-
-
-
- - Laser-focused on 3 key aspects of design. + Laser-focused on 3 key aspects.
@@ -125,15 +43,16 @@ export default function Home() {
Web Design
-
- Home
-
-
- About Us
-
-
- Services
-
-
- We create stunning, engaging and high-conversion websites based on the versatile and future-proof
- Webflow platform. Search engine optimisation and cutting-edge user experience design come as standard,
- along with exceptional reliability, scalability and performance. Plus, friendly support — whenever you
- need us.
-
+ We create stunning, engaging and high-conversion websites based on a versatile and future-proof
+ platform. Search engine optimisation and cutting-edge user experience design come as standard, along
+ with exceptional reliability, scalability and performance. Plus, friendly support — whenever you need
+ us.
+
- 
@@ -239,6 +158,58 @@ export default function Home() {
+
+ (null);
+ const { scrollYProgress } = useScroll({
+ target: targetRef,
+ offset: ["start end", "end end"]
+ });
+ const textX = useTransform(scrollYProgress, [0.1, 0.7], ["100%", "-100%"]);
+ const opacitySection = useTransform(scrollYProgress, [0.1, 0.5], [0, 1]);
+ const scale = useTransform(scrollYProgress, [0.1, 0.7], [1, 0.7]);
+
+ const opacityBorder = useTransform(scrollYProgress, [0.7, 0.71, 0.72], [1, 1, 0]);
+ const finalTextOpacity = useTransform(scrollYProgress, [0.7, 0.71, 0.72, 0.8, 0.9], [0, 0, 1, 1, 0]);
+
+ const finalTextScale = useTransform(scrollYProgress, [0.8, 0.9], [1, 0.7]);
+
+ return (
+
+
+ );
+};
diff --git a/src/components/Features.tsx b/src/components/Features.tsx
new file mode 100644
index 0000000..e054e67
--- /dev/null
+++ b/src/components/Features.tsx
@@ -0,0 +1,83 @@
+"use client";
+import { stylesWithCssVar } from "@/utils/motion";
+import { useScroll, useTransform, motion } from "framer-motion";
+import React from "react";
+import { Suspense, useRef } from "react";
+const Spline = React.lazy(() => import("@splinetool/react-spline"));
+
+export const Features = () => {
+ const targetRef = useRef(null);
+ const { scrollYProgress } = useScroll({
+ target: targetRef,
+ offset: ["start end", "end end"]
+ });
+
+ const x = useTransform(scrollYProgress, [0.5, 1], ["0%", "-100%"]);
+
+ const text1Opacity = useTransform(scrollYProgress, [0.3, 0.4, 0.5], [0, 1, 0]);
+ const text1Y = useTransform(scrollYProgress, [0.3, 0.4, 0.5], ["30px", "0px", "-30px"]);
+
+ const text2Opacity = useTransform(scrollYProgress, [0.5, 0.6, 0.7], [0, 1, 0]);
+ const text2Y = useTransform(scrollYProgress, [0.5, 0.6, 0.7], ["30px", "0px", "-30px"]);
+
+ const text3Opacity = useTransform(scrollYProgress, [0.7, 0.8, 0.9], [0, 1, 0]);
+ const text3Y = useTransform(scrollYProgress, [0.7, 0.8, 0.9], ["30px", "0px", "-30px"]);
+
+ return (
+
+
+ );
+};
diff --git a/src/components/Hero.tsx b/src/components/Hero.tsx
new file mode 100644
index 0000000..68d06a1
--- /dev/null
+++ b/src/components/Hero.tsx
@@ -0,0 +1,97 @@
+"use client";
+import { motion } from "framer-motion";
+import React from "react";
+import Image from "next/image";
+
+function Hero() {
+ const pulseVariants = {
+ animate: {
+ scale: [1, 1.03],
+ transition: {
+ duration: 2,
+ repeat: Infinity,
+ ease: "easeInOut"
+ }
+ }
+ };
+ return (
+
-
@@ -239,6 +158,58 @@ export default function Home() {
+
+
+
+ Streamlined Experience.
+
+
+ Streamlined Experience.
+
+
+
+ Streamlined
+
+ Experience. +
+
+
+
+ + Experience. +
+
+
+
+
+ Preconfigured environments
+
+
+ We detect your environment so you don't need to fiddle with configuration files. +
+
+
+ Command Pallete
+
+
+ Access and complete any action in seconds with the command palette. +
+
+
+ Devtools
+
+
+ We've bundled useful tools to help you get your work done faster and more efficiently. +
+
+ + We detect your environment so you don't need to fiddle with configuration files. +
+ Access and complete any action in seconds with the command palette. +
+ We've bundled useful tools to help you get your work done faster and more efficiently. +
+
+
+
+ );
+}
+
+export default Hero;
diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx
index aecd79e..9dd3401 100644
--- a/src/components/Navbar.tsx
+++ b/src/components/Navbar.tsx
@@ -2,6 +2,7 @@
import Image from "next/image";
import Link from "next/link";
import { useEffect } from "react";
+import { FaUser } from "react-icons/fa6";
function Navbar() {
useEffect(() => {
@@ -22,23 +23,30 @@ function Navbar() {
+
+
+
+
+ Your brand,
built better +
+
+ Crafting Your Brands Story into Unforgettable Web, Graphic, and Video Masterpieces that Captivate and Convert.
+
+
+
+
+ Introducing MeetMate
+ built better +
+
+
+
+
+
+
+
+ MeetMate
-
- Pricing
+
+
diff --git a/src/contexts/SmoothScroll.context.js b/src/contexts/SmoothScroll.context.js
new file mode 100644
index 0000000..522133d
--- /dev/null
+++ b/src/contexts/SmoothScroll.context.js
@@ -0,0 +1,38 @@
+"use client";
+import React, { createContext, useEffect, useState } from "react";
+
+export const SmoothScrollContext = createContext({
+ scroll: null
+});
+
+export const SmoothScrollProvider = ({ children, options }) => {
+ const [scroll, setScroll] = useState(null);
+
+ useEffect(() => {
+ if (!scroll) {
+ (async () => {
+ try {
+ const LocomotiveScroll = (await import("locomotive-scroll")).default;
+
+ setScroll(
+ new LocomotiveScroll({
+ el: document.querySelector("[data-scroll-container]") ?? undefined,
+ ...options
+ })
+ );
+ } catch (error) {
+ throw Error(`[SmoothScrollProvider]: ${error}`);
+ }
+ })();
+ }
+
+ return () => {
+ scroll && scroll.destroy();
+ };
+ }, [scroll]); // eslint-disable-line react-hooks/exhaustive-deps
+
+ return {children} ;
+};
+
+SmoothScrollContext.displayName = "SmoothScrollContext";
+SmoothScrollProvider.displayName = "SmoothScrollProvider";
diff --git a/src/utils/motion.ts b/src/utils/motion.ts
new file mode 100644
index 0000000..a1c02db
--- /dev/null
+++ b/src/utils/motion.ts
@@ -0,0 +1,20 @@
+import { MotionStyle, MotionValue } from "framer-motion";
+
+/**
+ * Unfortunately animating CSS variables requires you to type the styles
+ * as any in Framer Motion.
+ * To prevent to do typecasting everywhere in the code, I created this small
+ * wrapper function that does the casting for us, as well as still checks pretty
+ * well that we either input a value motion value, or a string looking like a css
+ * variable.
+ * @see: https://www.framer.com/motion/component/#%23%23animating-css-variables
+ */
+type MotionStyleWithCssVar = {
+ [K in keyof MotionStyle as K | `--${string}`]:
+ | MotionStyle[K]
+ | MotionValue
+ | MotionValue
+ | MotionValue;
+};
+
+export const stylesWithCssVar = (styles: MotionStyleWithCssVar) => styles as any;
+
+ Home
+
+ About Us
+
+
+ Services
+
+
-
- Account
+
+
+
+
+ Pricing
+
+
+