+
+
+
+
+ {/* Cards */}
+ {textContent.title}
+{textContent.description}
+
+
+
+ {/* Pricing */}
+
+ {/* Graphs (Comparison) */}
+
+
+
+ {/* Sliders */}
+ {textContent['pay-as-you-go']}
+ {/* Monthly price */} +
+
+ {/* Yearly price */}
+ ${monthlyPrice}
+{textContent.perMonth}
+
+
+ ${yearlyPrice}
+{textContent.perMonth}
+
+
+ {textContent.storageAmount}
+ {/* Storage amount slider */} +
+
+ {/* Yearly price */}
+
+
+ {storageAmountValue}
+
+
+
+
+ {percentDownloadValue}
+
+
+
+
+ {textContent.title}
+{textContent.description}
+
+ {textContent.info.map((card) => (
+
+
+
+ ))}
+ {card.title}
+{card.description}
+
+
+
+
+
+ {textContent.title}
+{textContent.description}
+
+
+
+ {/* Fist part */}
+
+
+
+
+ {/* What's included */}
+
+
+ {textContent.cardText.label}
+
+
+ + € + {textContent.cardText.price} +
+{textContent.cardText.perTB}
+
+
+ {textContent.cardText.whatsIncluded.title}
+
+ {textContent.cardText.whatsIncluded.features.map((feature) => (
+
+
+ })
+
+ ))}
+
+ {feature}
+
+
+
+
+ {textContent.title}
+{textContent.description}
+
+
+
+
+
+
+
+
+ {textContent.bannerText.title}
+{textContent.bannerText.description}
+
+
+ {children}
diff --git a/src/pages/cloud-object-storage.tsx b/src/pages/cloud-object-storage.tsx new file mode 100644 index 000000000..f816af5f9 --- /dev/null +++ b/src/pages/cloud-object-storage.tsx @@ -0,0 +1,73 @@ +import { CloudObjectStorageText } from '@/assets/types/cloud-object-storage'; +import { FooterText, MetatagsDescription, NavigationBarText } from '@/assets/types/layout/types'; +import { CloudObjectStorageHeroSection } from '@/components/cloud-object-storage/HeroSection'; +import { HowMuchYouNeedSection } from '@/components/cloud-object-storage/HowMuchYouNeedSection'; +import { PredictablePricingSection } from '@/components/cloud-object-storage/PredictablePricingSection'; +import { CloudObjectStoragePriceCardSection } from '@/components/cloud-object-storage/PriceCardSection'; +import { CloudObjectStorageWhyChooseInternxtSection } from '@/components/cloud-object-storage/WhyChooseInternxtSection'; +import Footer from '@/components/layout/footers/Footer'; +import Layout from '@/components/layout/Layout'; +import Navbar from '@/components/layout/navbars/Navbar'; +import FAQSection from '@/components/shared/sections/FaqSection'; +import { GetServerSidePropsContext } from 'next'; + +interface CloudObjectStorageProps { + metatagsDescription: MetatagsDescription[]; + navbarText: NavigationBarText; + textContent: CloudObjectStorageText; + footerText: FooterText; + locale: GetServerSidePropsContext['locale']; +} + +const CloudObjectStorage = ({ + metatagsDescription, + navbarText, + textContent, + footerText, + locale, +}: CloudObjectStorageProps): JSX.Element => { + const metatags = metatagsDescription.filter((metatag) => metatag.id === 'cloud-object-storage')[0]; + + const lang = locale as string; + + return ( +
+
+ );
+};
diff --git a/src/components/cloud-object-storage/integrated-checkout/components/InputsComponent.tsx b/src/components/cloud-object-storage/integrated-checkout/components/InputsComponent.tsx
new file mode 100644
index 000000000..e86d2ae63
--- /dev/null
+++ b/src/components/cloud-object-storage/integrated-checkout/components/InputsComponent.tsx
@@ -0,0 +1,47 @@
+import { FieldErrors, UseFormRegister } from 'react-hook-form';
+import PasswordInput from '@/components/components/PasswordInput';
+import TextInput from '@/components/components/TextInput';
+import { IFormValues } from '../IntegratedCheckoutView';
+import { IntegratedCheckoutText } from '@/assets/types/integrated-checkout';
+
+export const MAX_PASSWORD_LENGTH = 50;
+
+interface InputsComponentProps {
+ textContent: IntegratedCheckoutText['authComponent'];
+ errors: FieldErrors
+
+
+ {textContent.checkout}
+
+
+
+ {textContent.signup.emailAddress}
+
+
+ {authError && {textContent.signup.password}
+ +{authError}
}
+ {textContent.privacyGuarantee}
+ + ); +}; diff --git a/src/components/cloud-object-storage/integrated-checkout/components/ProductCardComponent.tsx b/src/components/cloud-object-storage/integrated-checkout/components/ProductCardComponent.tsx new file mode 100644 index 000000000..657141a04 --- /dev/null +++ b/src/components/cloud-object-storage/integrated-checkout/components/ProductCardComponent.tsx @@ -0,0 +1,71 @@ +import { PlanData } from '@/pages/cloud-object-storage/integrated-checkout'; +import { Check } from '@phosphor-icons/react'; +import bytes from 'bytes'; +import { currency } from '@/components/services/currency.service'; +import { IntegratedCheckoutText } from '@/assets/types/integrated-checkout'; +import Image from 'next/image'; +import { getImage } from '@/lib/getImage'; + +interface ProductFeaturesComponentProps { + textContent: IntegratedCheckoutText['productCard']; + selectedPlan: PlanData; +} + +const Separator = () => ; + +export const ProductFeaturesComponent = ({ textContent, selectedPlan }: ProductFeaturesComponentProps): JSX.Element => { + const totalBytes = bytes(selectedPlan.bytes); + const features = textContent.planDetails.features; + + const planAmount = selectedPlan.decimalAmount; + + return ( +
+
+ );
+};
diff --git a/src/components/cloud-object-storage/integrated-checkout/components/UserAuthComponent.tsx b/src/components/cloud-object-storage/integrated-checkout/components/UserAuthComponent.tsx
new file mode 100644
index 000000000..3524a925d
--- /dev/null
+++ b/src/components/cloud-object-storage/integrated-checkout/components/UserAuthComponent.tsx
@@ -0,0 +1,27 @@
+import { FieldErrors, UseFormRegister } from 'react-hook-form';
+import { IFormValues } from '../IntegratedCheckoutView';
+import { InputsComponent } from './InputsComponent';
+import { IntegratedCheckoutText } from '@/assets/types/integrated-checkout';
+
+interface UserAuthComponentProps {
+ textContent: IntegratedCheckoutText['authComponent'];
+ errors: FieldErrors
+
+ {textContent.title}
+
+
+
+
+
+
+ {textContent.selectedPlan}
+{textContent.billed.lifetime}
+ {/*
+
*/}
+ {textContent.}
++ {planAmount} + {priceValue[selectedPlan.currency]} +
+
+
+ {textContent.planDetails.title}
+
+ {features.map((feature) => (
+
+
+
+ ))}
+ {feature}
+
+
+ {textContent.total}
++ {planAmount} + {currency[selectedPlan.currency]} +
+
+
+ );
+};
diff --git a/src/components/components/TextInput.tsx b/src/components/components/TextInput.tsx
index c188fb840..38e77e40c 100644
--- a/src/components/components/TextInput.tsx
+++ b/src/components/components/TextInput.tsx
@@ -1,6 +1,9 @@
/*eslint-disable @typescript-eslint/no-explicit-any */
/*eslint-disable @typescript-eslint/explicit-module-boundary-types */
+import { FieldError, UseFormRegister } from 'react-hook-form';
+import { IFormValues } from '../cloud-object-storage/integrated-checkout/IntegratedCheckoutView';
+
export interface TextInputProps {
className?: string;
type?: 'text' | 'email' | 'number' | 'password';
@@ -13,6 +16,10 @@ export interface TextInputProps {
max?: string | number;
disabled?: boolean;
readonly?: boolean;
+ register?: UseFormRegister1. {textContent.title.signUp}
+
+
+