diff --git a/package-lock.json b/package-lock.json
index c033ee8..adfc883 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
"name": "lotengdev-web",
"version": "0.0.1",
"dependencies": {
+ "framer-motion": "^11.11.10",
"prop-types": "^15.8.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
@@ -2477,6 +2478,31 @@
"url": "https://github.com/sponsors/rawify"
}
},
+ "node_modules/framer-motion": {
+ "version": "11.11.10",
+ "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.11.10.tgz",
+ "integrity": "sha512-061Bt1jL/vIm+diYIiA4dP/Yld7vD47ROextS7ESBW5hr4wQFhxB5D5T5zAc3c/5me3cOa+iO5LqhA38WDln/A==",
+ "license": "MIT",
+ "dependencies": {
+ "tslib": "^2.4.0"
+ },
+ "peerDependencies": {
+ "@emotion/is-prop-valid": "*",
+ "react": "^18.0.0",
+ "react-dom": "^18.0.0"
+ },
+ "peerDependenciesMeta": {
+ "@emotion/is-prop-valid": {
+ "optional": true
+ },
+ "react": {
+ "optional": true
+ },
+ "react-dom": {
+ "optional": true
+ }
+ }
+ },
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
diff --git a/package.json b/package.json
index ace5251..32a7994 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
"preview": "vite preview"
},
"dependencies": {
+ "framer-motion": "^11.11.10",
"prop-types": "^15.8.1",
"react": "^18.3.1",
"react-dom": "^18.3.1",
diff --git a/src/pages/about/index.jsx b/src/pages/about/index.jsx
index a5c22af..c3ef5be 100644
--- a/src/pages/about/index.jsx
+++ b/src/pages/about/index.jsx
@@ -1,4 +1,5 @@
import { Link } from "react-router-dom";
+import {Motion} from "../framer-motion";// For Motion in Text
export function AboutPage() {
return (
@@ -11,11 +12,31 @@ export function AboutPage() {
> About
-
+
Tentang Komunitas Lombok Tengah Developer (Loteng Dev)
-
+
-
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Ex molestiae quos veritatis nemo sit praesentium aperiam quasi voluptatum quisquam unde delectus mollitia eveniet rem quia, saepe aliquam, consequuntur similique? Vitae.
@@ -25,7 +46,7 @@ export function AboutPage() {
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Eius temporibus vitae at. Consequatur reiciendis sit quidem, impedit, facere aperiam nostrum delectus dolore dolor quibusdam harum animi amet repellendus, sunt
voluptatibus.
-
+
diff --git a/src/pages/event/index.jsx b/src/pages/event/index.jsx
index bbbda85..1b2ae25 100644
--- a/src/pages/event/index.jsx
+++ b/src/pages/event/index.jsx
@@ -1,132 +1,271 @@
import PlayIcon from '@/assets/icons/play.svg'
+import {Motion} from "../framer-motion";// For Motion in Text
export function EventPage() {
return (
-
+
Next meetup kita mau bahas
apa nih?
-
+
+ Kirim ide topik
diff --git a/src/pages/framer-motion/index.tsx b/src/pages/framer-motion/index.tsx
new file mode 100644
index 0000000..10befcf
--- /dev/null
+++ b/src/pages/framer-motion/index.tsx
@@ -0,0 +1,11 @@
+import { MotionA, MotionButton, MotionDiv, MotionH1, MotionH2, MotionP, MotionSection } from "./util";
+
+export const Motion = {
+ div: MotionDiv,
+ a: MotionA,
+ p: MotionP,
+ h1: MotionH1,
+ h2: MotionH2,
+ button: MotionButton,
+ section: MotionSection,
+};
\ No newline at end of file
diff --git a/src/pages/framer-motion/util.tsx b/src/pages/framer-motion/util.tsx
new file mode 100644
index 0000000..a36cdfe
--- /dev/null
+++ b/src/pages/framer-motion/util.tsx
@@ -0,0 +1,39 @@
+'use client'
+import * as React from "react";
+import { motion, HTMLMotionProps } from "framer-motion";
+
+type MotionTags = "div" | "a" | "p" | "h1" | "h2" | "button" | "section";
+
+type MotionComponent = React.ForwardRefRenderFunction<
+ Element,
+ HTMLMotionProps
+>;
+
+export const createMotionComponent = (
+ tag: T
+): MotionComponent => {
+ const MotionTag = motion[tag] as any;
+
+ const MotionComponent: MotionComponent = (
+ { className, children, ...props },
+ ref
+ ) => {
+ return (
+
+ {children}
+
+ );
+ };
+
+ MotionComponent.displayName = `Motion.${tag}`;
+
+ return MotionComponent;
+};
+
+export const MotionDiv = React.forwardRef(createMotionComponent("div"));
+export const MotionA = React.forwardRef(createMotionComponent("a"));
+export const MotionP = React.forwardRef(createMotionComponent("p"));
+export const MotionH1 = React.forwardRef(createMotionComponent("h1"));
+export const MotionH2 = React.forwardRef(createMotionComponent("h2"));
+export const MotionButton = React.forwardRef(createMotionComponent("button"));
+export const MotionSection = React.forwardRef(createMotionComponent("section"));
\ No newline at end of file
diff --git a/src/pages/speaker/index.jsx b/src/pages/speaker/index.jsx
index 0a4ce8d..811e00d 100644
--- a/src/pages/speaker/index.jsx
+++ b/src/pages/speaker/index.jsx
@@ -1,17 +1,38 @@
import LinkedinIcon from '@/assets/icons/linkedin.svg';
import GithubIcon from '@/assets/icons/github.svg';
import WebsiteIcon from '@/assets/icons/website.svg';
+import {Motion} from "../framer-motion";// For Motion in Text
export function SpeakerPage() {
return (
-
+
Semua Pembicara
-
-
+
+
yang telah berbagi di
acara Lotengdev
-
+
