first commit

resources/assets/css/examples/examples-mouse-hover-split.css

@@ -0,0 +1,29 @@
+/*
+Name: 			Examples - Mouse Hover Split
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+.mouse-hover-split {
+		min-height: 300px;
+}
+
+.mouse-hover-split .side {
+		display: grid;
+		min-height: 300px;
+		overflow: hidden;
+		place-items: center;
+		position: absolute;
+		width: 100%;
+		text-align: center;
+}
+
+.mouse-hover-split .side h2 {
+		margin: 0px 10vw;
+		width: 80vw;
+		text-align: center;
+}
+
+.mouse-hover-split .side-left {
+		width: 60%;
+		z-index: 2;
+}

resources/assets/css/examples/examples-spotlight-cursor-text.css

@@ -0,0 +1,68 @@
+/*
+Name: 			Examples - Spotlight Cursor Text
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+.spotlight-cursor-text {
+		position: relative;
+		height: 100vh;
+		width: 100vw;
+		background: var(--primary);
+		overflow: hidden;
+}
+
+.spotlight-cursor-text .shape {
+		will-change: transform;
+		position: absolute;
+		border-radius: 50%;
+}
+
+.spotlight-cursor-text .shape.shape-1 {
+		background: #1EA6EA;
+		width: 650px;
+		height: 650px;
+		margin: -325px 0 0 -325px;
+}
+
+.spotlight-cursor-text .shape.shape-2 {
+		background: #3CC4FF;
+		width: 440px;
+		height: 440px;
+		margin: -220px 0 0 -220px;
+}
+
+.spotlight-cursor-text .shape.shape-3 {
+		background: #5AE2FF;
+		width: 270px;
+		height: 270px;
+		margin: -135px 0 0 -135px;
+}
+
+.spotlight-cursor-text .content {
+		top: 0;
+		left: 0;
+		position: absolute;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100vh;
+		width: 100vw;
+		background: var(--light);
+		mix-blend-mode: screen;
+}
+
+.spotlight-cursor-text .title {
+		font-size: 150px;
+		line-height: 150px;
+		font-weight: bolder;
+		color: #000;
+		margin: 0;
+		text-align: center;
+}
+
+@media (max-width: 1200px) {
+		.spotlight-cursor-text .title {
+				font-size: 75px;
+				line-height: 75px;
+		}
+}

resources/assets/css/examples/examples-text-bg-clip-animation.css

@@ -0,0 +1,38 @@
+/*
+Name: 			Examples - Text Background Clip Animation
+Written by: 	Okler Themes - (http://www.okler.net)
+Theme Version:	12.1.0
+*/
+.text-bg-clip-animation {
+		font-size: 150px;
+		line-height: 200px;
+		font-weight: bolder;
+		color: #000;
+		margin: 0;
+		text-align: center;
+		background-size: 40%;
+		background-position: 50% 50%;
+		background-clip: text;
+		-webkit-background-clip: text;
+		color: rgba(0, 0, 0, 0.08);
+}
+
+@media (max-width: 1200px) {
+		.text-bg-clip-animation {
+				font-size: 75px;
+				line-height: 100px;
+		}
+}
+
+.text-bg-clip-animation.appear-animation-visible {
+		animation: textBgZoom 10s ease 500ms forwards;
+}
+
+@keyframes textBgZoom {
+		from {
+				background-size: 40%;
+		}
+		to {
+				background-size: 10%;
+		}
+}