{
+ return (
+ <>
+
+
+
+
+
+
+
+
+ );
+};
+
+export default UrlShortenComponent;
diff --git a/web/src/components/ui/shorten-er/url-shortner-url/create-section/index.tsx b/web/src/components/ui/shorten-er/url-shortner-url/create-section/index.tsx
new file mode 100644
index 00000000..d1f11b74
--- /dev/null
+++ b/web/src/components/ui/shorten-er/url-shortner-url/create-section/index.tsx
@@ -0,0 +1,35 @@
+
+import AnimatedContainer from '@shtcut/components/framer/animate-div';
+import Image from 'next/image';
+import React from 'react';
+
+const CreateSection = () => {
+ return (
+
+
+
+
+
+ Create & Optimize
+ Marketing Campaigns
+
+
+ Send and receive payments in any currency, without any
{' '}
+ extra charges, within 24 hours or less. Make international{' '}
+
ransactions a piece of cake
+
+
+ Avoid late fees and penalties, and capture every early
{' '}
+ payment discount with reminders and automated approvals
+
+
+
+
+
+
+
+
+ Features you can get
from Shtcut
+
+
+ SaaS become a common delivery model for many business application, including office software,
+ messaging software.
We offer a variety of interesting
+ features that you can help
brand and manage links
+
+
+
+
+
+
+
+ Marketing software
that{' '}
+ handles it all.
+
+
+
+
+
+
{ft.title}
+
{ft.text}
+
+
+
+
+
+ Generate short URLs
+ with just a click
+
+
+
+ Paste in any long url, make it sharable, trackable and customizable with just a few clicks.
+
+
+
+ Shorten URL here
+
+
+
+
+ {rateData.map((rate, index) => (
+
+
+
+
+
+
+
+
{rate.text}
+
+ ))}
+
+
+
+
Integrations..
+
Easy access to all your favourite tools.
+
+ {integrationData.map((int, index) => (
+
+
+
{int.id}
+
+
{int.title}
+
+ {int.text}
+
+
+
+
+ {int.img.map((imageSrc, index) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+ Manage all your marketing
+ tools - in one place{' '}
+
+
+ Centralize and simplify payments, and get comprehensive
{' '}
+ insights on your financials. Connect your bank account and{' '}
+
your card to Milestone.
+
+
+
+ {manageData.map((man, index) => (
+
+ ))}
+
+
+
+
+
+
+ Powerful features on all plans for you
+
+
+ URL Shorten-er, Survey Creation, Email Marketing and Social media management - all in one place!
+
+
+
+
+
+ Yearly
+
+
+
+ Monthly
+
+
+
+
+
+
+
+ Save 25%
+
+
+
+
+
+ {PlanInfo.map((plan, index) => (
+
+ ))}
+
+
+
+ Compare all plans & features on the{' '}
+ pricing page.
+
+
+
+
+
+ {plan.title}
+
+
+ {plan.text}
+
+
+
+ {plan.amt}{' '}
+
+ {plan.plan && `/ ${plan.plan}`}
+
+
+
+
+
+ {plan.plans.map((_e) => (
+
+ ))}
+
+
{
- return ;
+const ShortNerPageContainer = () => {
+ return ;
};
+export default ShortNerPageContainer;
diff --git a/web/src/styles/globals.css b/web/src/styles/globals.css
index a1f8c600..aad1e9c0 100644
--- a/web/src/styles/globals.css
+++ b/web/src/styles/globals.css
@@ -110,8 +110,8 @@
}
}
-$primary: black;
-$secondary: rgb(100, 100, 100);
+/* $primary: black;
+$secondary: rgb(100, 100, 100); */
.contentShow {
animation: contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
@@ -192,3 +192,38 @@ $secondary: rgb(100, 100, 100);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
+/* TypingText.css */
+.typing-text {
+
+ white-space: nowrap;
+ overflow: hidden;
+ /* border-right: 0.15em solid black; */
+ animation: blink-caret 0.75s step-end infinite;
+}
+
+/* Blinking cursor animation */
+@keyframes blink-caret {
+ from, to {
+ border-color: transparent;
+ }
+ 50% {
+ border-color: black;
+ }
+}
+
+::-webkit-scrollbar {
+
+ display: none;
+}
+
+.feature-card-container {
+ @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8;
+}
+
+.feature-card {
+ @apply md:p-4 lg:p-6 ;
+}
+
+.feature-big-card {
+ @apply md:col-span-2;
+}
diff --git a/web/src/types/types.d.ts b/web/src/types/types.d.ts
index 77695895..d96b63f2 100644
--- a/web/src/types/types.d.ts
+++ b/web/src/types/types.d.ts
@@ -21,4 +21,25 @@ interface Plan {
interface TypingTextProps {
text: string;
speed: number;
+}
+
+
+interface IntegrationSectionType {
+ text: string;
+ id: string;
+ img: string[];
+ title: string;
+}
+
+
+interface PlanCard {
+ plan: {
+ id: number;
+ title: string;
+ text: string;
+ amt: string;
+ plan: string;
+ btnText: string;
+ plans: string[];
+ };
}
\ No newline at end of file
diff --git a/web/tailwind.config.ts b/web/tailwind.config.ts
index 059e4cf6..b2909fe9 100644
--- a/web/tailwind.config.ts
+++ b/web/tailwind.config.ts
@@ -54,6 +54,7 @@ const config: Config = {
100: '#b2d8d8',
200: '#66b2b2',
300: '#174FDC',
+ 400: '#092059',
// 300: '#66b2b2', you can skip some colors like this or not even commnet them
// 400: '',
500: '#008080',