Merge version_1 into main #3
@@ -3,7 +3,6 @@
|
||||
import { ThemeProvider } from "@/providers/themeProvider/ThemeProvider";
|
||||
import NavbarStyleCentered from "@/components/navbar/NavbarStyleCentered/NavbarStyleCentered";
|
||||
import HeroBillboardScroll from "@/components/sections/hero/HeroBillboardScroll";
|
||||
import FeatureCardSeven from "@/components/sections/feature/FeatureCardSeven";
|
||||
import FooterBaseReveal from "@/components/sections/footer/FooterBaseReveal";
|
||||
import Link from "next/link";
|
||||
|
||||
@@ -18,8 +17,7 @@ export default function LoginPage() {
|
||||
|
||||
const footerColumns = [
|
||||
{
|
||||
title: "Product",
|
||||
items: [
|
||||
title: "Product", items: [
|
||||
{ label: "Features", href: "features" },
|
||||
{ label: "Pricing", href: "pricing" },
|
||||
{ label: "Security", href: "#" },
|
||||
@@ -27,8 +25,7 @@ export default function LoginPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Company",
|
||||
items: [
|
||||
title: "Company", items: [
|
||||
{ label: "About Us", href: "/about" },
|
||||
{ label: "Blog", href: "/blog" },
|
||||
{ label: "Careers", href: "/careers" },
|
||||
@@ -36,8 +33,7 @@ export default function LoginPage() {
|
||||
],
|
||||
},
|
||||
{
|
||||
title: "Resources",
|
||||
items: [
|
||||
title: "Resources", items: [
|
||||
{ label: "Documentation", href: "#" },
|
||||
{ label: "API Docs", href: "#" },
|
||||
{ label: "Community", href: "#" },
|
||||
@@ -53,7 +49,7 @@ export default function LoginPage() {
|
||||
borderRadius="pill"
|
||||
contentWidth="smallMedium"
|
||||
sizing="medium"
|
||||
background="floatingGradient"
|
||||
background="none"
|
||||
cardStyle="gradient-mesh"
|
||||
primaryButtonStyle="flat"
|
||||
secondaryButtonStyle="layered"
|
||||
@@ -62,66 +58,29 @@ export default function LoginPage() {
|
||||
<div id="nav" data-section="nav">
|
||||
<NavbarStyleCentered
|
||||
navItems={navItems}
|
||||
button={{ text: "Login", href: "/login" }}
|
||||
button={{ text: "Sign Up", href: "/signup" }}
|
||||
brandName="ShopHub"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="hero" data-section="hero">
|
||||
<div id="login-hero" data-section="login-hero">
|
||||
<HeroBillboardScroll
|
||||
title="Secure Login to Your ShopHub Account"
|
||||
description="Access your personalized dashboard, track orders, manage your store, and unlock exclusive seller tools. Your account is protected with bank-level security encryption."
|
||||
tag="Trusted by Thousands"
|
||||
background={{ variant: "plain" }}
|
||||
title="Welcome Back to ShopHub"
|
||||
description="Sign in to access your account, manage orders, and enjoy exclusive benefits. Secure login with multiple authentication options."
|
||||
tag="Secure Login"
|
||||
tagAnimation="slide-up"
|
||||
background={{ variant: "floatingGradient" }}
|
||||
imageSrc="http://img.b2bpic.net/free-vector/business-dashboard-user-panel_23-2148359899.jpg?_wi=3"
|
||||
imageAlt="Secure login dashboard interface"
|
||||
imageSrc="http://img.b2bpic.net/free-vector/business-dashboard-user-panel_23-2148359899.jpg"
|
||||
imageAlt="Secure login dashboard"
|
||||
buttons={[
|
||||
{ text: "Sign In", href: "#" },
|
||||
{ text: "Create Account", href: "#" },
|
||||
{ text: "Login", href: "#" },
|
||||
{ text: "Forgot Password?", href: "#" },
|
||||
]}
|
||||
buttonAnimation="slide-up"
|
||||
useInvertedBackground={false}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="features" data-section="features">
|
||||
<FeatureCardSeven
|
||||
title="Why Secure Login Matters"
|
||||
description="Your account security is our top priority. Learn how we protect your information with industry-leading encryption and authentication methods."
|
||||
tag="Security First"
|
||||
tagAnimation="slide-up"
|
||||
features={[
|
||||
{
|
||||
id: 1,
|
||||
title: "Multi-Layer Authentication",
|
||||
description: "Two-factor authentication and biometric login options ensure only authorized users access your account. Choose from authenticator apps, SMS verification, or security keys.",
|
||||
imageSrc: "http://img.b2bpic.net/free-photo/close-up-person-doing-online-shopping_23-2149159937.jpg?_wi=2",
|
||||
imageAlt: "Multi-factor authentication interface",
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
title: "Bank-Level Encryption",
|
||||
description: "All data transmission uses SSL/TLS 256-bit encryption. Your passwords are hashed with salted bcrypt algorithms. We comply with GDPR, CCPA, and PCI-DSS standards.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/abstract-sales-promotion-banner_23-2148342926.jpg?_wi=2",
|
||||
imageAlt: "Encryption security badge",
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
title: "Account Recovery Options",
|
||||
description: "Forgot your password? Recover access through email verification, security questions, or phone confirmation. Our support team assists with account recovery within minutes.",
|
||||
imageSrc: "http://img.b2bpic.net/free-vector/business-dashboard-user-panel_23-2148359899.jpg?_wi=4",
|
||||
imageAlt: "Account recovery process",
|
||||
},
|
||||
]}
|
||||
animationType="slide-up"
|
||||
textboxLayout="default"
|
||||
useInvertedBackground={true}
|
||||
buttons={[{ text: "Learn About Security", href: "#" }]}
|
||||
buttonAnimation="slide-up"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div id="footer" data-section="footer">
|
||||
<FooterBaseReveal
|
||||
columns={footerColumns}
|
||||
|
||||
@@ -1,51 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { memo } from "react";
|
||||
import useSvgTextLogo from "./useSvgTextLogo";
|
||||
import { cls } from "@/lib/utils";
|
||||
import React from 'react';
|
||||
|
||||
interface SvgTextLogoProps {
|
||||
logoText: string;
|
||||
adjustHeightFactor?: number;
|
||||
verticalAlign?: "top" | "center";
|
||||
text?: string;
|
||||
className?: string;
|
||||
}
|
||||
|
||||
const SvgTextLogo = memo<SvgTextLogoProps>(function SvgTextLogo({
|
||||
logoText,
|
||||
adjustHeightFactor,
|
||||
verticalAlign = "top",
|
||||
className = "",
|
||||
}) {
|
||||
const { svgRef, textRef, viewBox, aspectRatio } = useSvgTextLogo(logoText, false, adjustHeightFactor);
|
||||
|
||||
return (
|
||||
<svg
|
||||
ref={svgRef}
|
||||
viewBox={viewBox}
|
||||
className={cls("w-full", className)}
|
||||
style={{ aspectRatio: aspectRatio }}
|
||||
preserveAspectRatio="none"
|
||||
role="img"
|
||||
aria-label={`${logoText} logo`}
|
||||
>
|
||||
<text
|
||||
ref={textRef}
|
||||
x="0"
|
||||
y={verticalAlign === "center" ? "50%" : "0"}
|
||||
className="font-bold fill-current"
|
||||
style={{
|
||||
fontSize: "20px",
|
||||
letterSpacing: "-0.02em",
|
||||
dominantBaseline: verticalAlign === "center" ? "middle" : "text-before-edge"
|
||||
}}
|
||||
const SvgTextLogo = React.forwardRef<SVGSVGElement, SvgTextLogoProps>(
|
||||
({ text = "Webild", className = "" }, ref) => {
|
||||
return (
|
||||
<svg
|
||||
ref={ref}
|
||||
viewBox="0 0 300 100"
|
||||
className={`w-32 h-auto ${className}`}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
{logoText}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
});
|
||||
<defs>
|
||||
<linearGradient id="textGradient" x1="0%" y1="0%" x2="100%" y2="100%">
|
||||
<stop offset="0%" stopColor="#3b82f6" />
|
||||
<stop offset="100%" stopColor="#8b5cf6" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<text
|
||||
x="150"
|
||||
y="60"
|
||||
textAnchor="middle"
|
||||
dominantBaseline="middle"
|
||||
fontSize="48"
|
||||
fontWeight="bold"
|
||||
fill="url(#textGradient)"
|
||||
>
|
||||
{text}
|
||||
</text>
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
SvgTextLogo.displayName = "SvgTextLogo";
|
||||
SvgTextLogo.displayName = 'SvgTextLogo';
|
||||
|
||||
export default SvgTextLogo;
|
||||
export default SvgTextLogo;
|
||||
Reference in New Issue
Block a user