-
-
-
-
-
- {navItems.map((item, index) => (
-
+
+
+
+
- ))}
-
+
+
+
-
+
+
+
+
-
+ {isMenuOpen && (
+
+ )}
);
};
-export default NavbarStyleApple;
+export default NavbarStyleApple;
\ No newline at end of file
diff --git a/src/components/sections/feature/FeatureCardOne.tsx b/src/components/sections/feature/FeatureCardOne.tsx
index 732a6be..a468a05 100644
--- a/src/components/sections/feature/FeatureCardOne.tsx
+++ b/src/components/sections/feature/FeatureCardOne.tsx
@@ -1,171 +1,62 @@
-"use client";
+import React from 'react';
+import { Zap, Shield, Rocket, Users } from 'lucide-react';
-import CardStack from "@/components/cardStack/CardStack";
-import MediaContent from "@/components/shared/MediaContent";
-import Button from "@/components/button/Button";
-import { cls, shouldUseInvertedText } from "@/lib/utils";
-import { getButtonProps } from "@/lib/buttonUtils";
-import { useTheme } from "@/providers/themeProvider/ThemeProvider";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig, GridVariant, CardAnimationType, TitleSegment } from "@/components/cardStack/types";
-
-import type { TextboxLayout, InvertedBackground } from "@/providers/themeProvider/config/constants";
-
-type FeatureCard = {
- title: string;
- description: string;
- button?: ButtonConfig;
-} & (
- | {
- imageSrc: string;
- imageAlt?: string;
- videoSrc?: never;
- videoAriaLabel?: never;
- }
- | {
- videoSrc: string;
- videoAriaLabel?: string;
- imageSrc?: never;
- imageAlt?: never;
- }
- );
-
-interface FeatureCardOneProps {
- features: FeatureCard[];
- carouselMode?: "auto" | "buttons";
- gridVariant: GridVariant;
- uniformGridCustomHeightClasses?: string;
- animationType: CardAnimationType;
- title: string;
- titleSegments?: TitleSegment[];
- description: string;
- tag?: string;
- tagIcon?: LucideIcon;
- buttons?: ButtonConfig[];
- textboxLayout: TextboxLayout;
- useInvertedBackground: InvertedBackground;
- ariaLabel?: string;
- className?: string;
- containerClassName?: string;
- cardClassName?: string;
- mediaClassName?: string;
- textBoxTitleClassName?: string;
- textBoxTitleImageWrapperClassName?: string;
- textBoxTitleImageClassName?: string;
- textBoxDescriptionClassName?: string;
- cardTitleClassName?: string;
- cardDescriptionClassName?: string;
- cardButtonClassName?: string;
- cardButtonTextClassName?: string;
- gridClassName?: string;
- carouselClassName?: string;
- controlsClassName?: string;
- textBoxClassName?: string;
- textBoxTagClassName?: string;
- textBoxButtonContainerClassName?: string;
- textBoxButtonClassName?: string;
- textBoxButtonTextClassName?: string;
-}
-
-const FeatureCardOne = ({
- features,
- carouselMode = "buttons",
- gridVariant,
- uniformGridCustomHeightClasses,
- animationType,
- title,
- titleSegments,
- description,
- tag,
- tagIcon,
- buttons,
- textboxLayout,
- useInvertedBackground,
- ariaLabel = "Feature section",
- className = "",
- containerClassName = "",
- cardClassName = "",
- mediaClassName = "",
- textBoxTitleClassName = "",
- textBoxTitleImageWrapperClassName = "",
- textBoxTitleImageClassName = "",
- textBoxDescriptionClassName = "",
- cardTitleClassName = "",
- cardDescriptionClassName = "",
- cardButtonClassName = "",
- cardButtonTextClassName = "",
- gridClassName = "",
- carouselClassName = "",
- controlsClassName = "",
- textBoxClassName = "",
- textBoxTagClassName = "",
- textBoxButtonContainerClassName = "",
- textBoxButtonClassName = "",
- textBoxButtonTextClassName = "",
-}: FeatureCardOneProps) => {
- const theme = useTheme();
- const shouldUseLightText = shouldUseInvertedText(useInvertedBackground, theme.cardStyle);
+const features = [
+ {
+ icon:
,
+ title: "Lightning Fast", description: "Experience blazing fast performance with our optimized architecture and cutting-edge technology."
+ },
+ {
+ icon:
,
+ title: "Secure & Reliable", description: "Your data is protected with enterprise-grade security measures and 99.9% uptime guarantee."
+ },
+ {
+ icon:
,
+ title: "Scale with Ease", description: "Grow your business without limits. Our platform scales automatically to meet your needs."
+ },
+ {
+ icon:
,
+ title: "Team Collaboration", description: "Work together seamlessly with real-time collaboration tools and shared workspaces."
+ }
+];
+const FeatureCardOne: React.FC = () => {
return (
-
- {features.map((feature, index) => (
-
-
-
-
- {feature.title}
-
-
- {feature.description}
-
-
- {feature.button && (
-
- )}
+
+
+
+
+ Why Choose Our Platform?
+
+
+ Discover the features that make us the preferred choice for thousands of businesses worldwide.
+
- ))}
-
+
+
+ {features.map((feature, index) => (
+
+
+
+
+
+ {feature.title}
+
+
+
+ {feature.description}
+
+
+
+ ))}
+
+
);
};
-FeatureCardOne.displayName = "FeatureCardOne";
-
-export default FeatureCardOne;
+export default FeatureCardOne;
\ No newline at end of file
diff --git a/src/components/sections/hero/HeroBillboard.tsx b/src/components/sections/hero/HeroBillboard.tsx
index da9e35f..c2cf106 100644
--- a/src/components/sections/hero/HeroBillboard.tsx
+++ b/src/components/sections/hero/HeroBillboard.tsx
@@ -1,93 +1,42 @@
-"use client";
+import React from 'react';
+import { ArrowRight, Play } from 'lucide-react';
-import TextBox from "@/components/Textbox";
-import MediaContent from "@/components/shared/MediaContent";
-import { cls } from "@/lib/utils";
-import type { LucideIcon } from "lucide-react";
-import type { ButtonConfig } from "@/types/button";
-
-interface HeroBillboardProps {
- title: string;
- description: string;
- tag?: string;
- tagIcon?: LucideIcon;
- buttons?: ButtonConfig[];
- imageSrc?: string;
- videoSrc?: string;
- imageAlt?: string;
- videoAriaLabel?: string;
- ariaLabel?: string;
- className?: string;
- containerClassName?: string;
- textBoxClassName?: string;
- titleClassName?: string;
- descriptionClassName?: string;
- tagClassName?: string;
- buttonContainerClassName?: string;
- buttonClassName?: string;
- buttonTextClassName?: string;
- mediaWrapperClassName?: string;
- imageClassName?: string;
-}
-
-const HeroBillboard = ({
- title,
- description,
- tag,
- tagIcon,
- buttons,
- imageSrc,
- videoSrc,
- imageAlt = "",
- videoAriaLabel = "Hero video",
- ariaLabel = "Hero section",
- className = "",
- containerClassName = "",
- textBoxClassName = "",
- titleClassName = "",
- descriptionClassName = "",
- tagClassName = "",
- buttonContainerClassName = "",
- buttonClassName = "",
- buttonTextClassName = "",
- mediaWrapperClassName = "",
- imageClassName = "",
-}: HeroBillboardProps) => {
+const HeroBillboard: React.FC = () => {
return (
-
-
-
-
-
+
+
+
+
+
+
+ Build the Future
+
+ Today
+
+
+
+
+ Transform your ideas into reality with our cutting-edge technology solutions.
+ Experience the power of innovation at your fingertips.
+
+
+
+
+
+
+
);
};
-HeroBillboard.displayName = "HeroBillboard";
-
export default HeroBillboard;
\ No newline at end of file
diff --git a/src/components/ui/ThemeProvider.tsx b/src/components/ui/ThemeProvider.tsx
new file mode 100644
index 0000000..c316d3f
--- /dev/null
+++ b/src/components/ui/ThemeProvider.tsx
@@ -0,0 +1,75 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'dark' | 'light' | 'system';
+
+type ThemeProviderProps = {
+ children: React.ReactNode;
+ defaultTheme?: Theme;
+ storageKey?: string;
+};
+
+type ThemeProviderState = {
+ theme: Theme;
+ setTheme: (theme: Theme) => void;
+};
+
+const initialState: ThemeProviderState = {
+ theme: 'system',
+ setTheme: () => null,
+};
+
+const ThemeProviderContext = createContext
(initialState);
+
+export function ThemeProvider({
+ children,
+ defaultTheme = 'system',
+ storageKey = 'vite-ui-theme',
+ ...props
+}: ThemeProviderProps) {
+ const [theme, setTheme] = useState(
+ () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+ );
+
+ useEffect(() => {
+ const root = window.document.documentElement;
+
+ root.classList.remove('light', 'dark');
+
+ if (theme === 'system') {
+ const systemTheme = window.matchMedia('(prefers-color-scheme: dark)')
+ .matches
+ ? 'dark'
+ : 'light';
+
+ root.classList.add(systemTheme);
+ return;
+ }
+
+ root.classList.add(theme);
+ }, [theme]);
+
+ const value = {
+ theme,
+ setTheme: (theme: Theme) => {
+ localStorage.setItem(storageKey, theme);
+ setTheme(theme);
+ },
+ };
+
+ return (
+
+ {children}
+
+ );
+}
+
+export const useTheme = () => {
+ const context = useContext(ThemeProviderContext);
+
+ if (context === undefined)
+ throw new Error('useTheme must be used within a ThemeProvider');
+
+ return context;
+};
+
+export default ThemeProvider;
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..616f86f
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,27 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* {
+ margin: 0;
+ padding: 0;
+ box-sizing: border-box;
+}
+
+html {
+ scroll-behavior: smooth;
+}
+
+body {
+ margin: 0;
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+ 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+ sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+ font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+ monospace;
+}
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
new file mode 100644
index 0000000..23b3422
--- /dev/null
+++ b/src/index.tsx
@@ -0,0 +1,13 @@
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+
+const root = ReactDOM.createRoot(
+ document.getElementById('root') as HTMLElement
+);
+root.render(
+
+
+
+);
\ No newline at end of file
diff --git a/tailwind.config.js b/tailwind.config.js
new file mode 100644
index 0000000..b663997
--- /dev/null
+++ b/tailwind.config.js
@@ -0,0 +1,10 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+ content: [
+ "./src/**/*.{js,jsx,ts,tsx}", "./public/index.html"
+ ],
+ theme: {
+ extend: {},
+ },
+ plugins: [],
+}
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index 07bb88e..da3d104 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,42 +1,21 @@
{
"compilerOptions": {
- "target": "ES2017",
- "lib": [
- "dom",
- "dom.iterable",
- "esnext"
+ "target": "es5", "lib": [
+ "dom", "dom.iterable", "esnext"
],
"allowJs": true,
"skipLibCheck": true,
- "strict": false,
- "noImplicitAny": false,
- "noEmit": true,
"esModuleInterop": true,
- "module": "esnext",
- "moduleResolution": "bundler",
- "resolveJsonModule": true,
+ "allowSyntheticDefaultImports": true,
+ "strict": true,
+ "forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
+ "module": "esnext", "moduleResolution": "node", "resolveJsonModule": true,
"isolatedModules": true,
- "jsx": "react-jsx",
- "incremental": true,
- "plugins": [
- {
- "name": "next"
- }
- ],
- "paths": {
- "@/*": [
- "./src/*"
- ]
- }
+ "noEmit": true,
+ "jsx": "react-jsx"
},
"include": [
- "next-env.d.ts",
- "**/*.ts",
- "**/*.tsx",
- ".next/types/**/*.ts",
- ".next/dev/types/**/*.ts"
- ],
- "exclude": [
- "node_modules"
+ "src"
]
-}
+}
\ No newline at end of file