-
+
);
};
-export default NavbarStyleApple;
+export default NavbarStyleApple;
\ No newline at end of file
diff --git a/src/components/sections/contact/ContactTwo.tsx b/src/components/sections/contact/ContactTwo.tsx
new file mode 100644
index 0000000..f490a51
--- /dev/null
+++ b/src/components/sections/contact/ContactTwo.tsx
@@ -0,0 +1,85 @@
+import React from 'react';
+import { Mail, Phone, MapPin } from 'lucide-react';
+
+const ContactTwo = () => {
+ return (
+
+
+
+
+ Get in Touch
+
+
+ Ready to start your project? Contact us today.
+
+
+
+
+
+
+
+
+
Email
+
hello@example.com
+
+
+
+
+
+
Phone
+
+1 (555) 123-4567
+
+
+
+
+
+
Address
+
123 Main St, City, State 12345
+
+
+
+
+
+
+
+ );
+};
+
+export default ContactTwo;
\ No newline at end of file
diff --git a/src/components/sections/feature/FeatureCardOne.tsx b/src/components/sections/feature/FeatureCardOne.tsx
index 732a6be..948b3a1 100644
--- a/src/components/sections/feature/FeatureCardOne.tsx
+++ b/src/components/sections/feature/FeatureCardOne.tsx
@@ -1,171 +1,54 @@
-"use client";
+import React from 'react';
+import { Rocket, Shield, Zap } 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;
+const FeatureCardOne = () => {
+ const features = [
+ {
+ icon:
,
+ title: 'Fast Performance',
+ description: 'Optimized for speed and performance with modern web standards.'
+ },
+ {
+ icon:
,
+ title: 'Secure by Default',
+ description: 'Built with security best practices and regular updates.'
+ },
+ {
+ icon:
,
+ title: 'Easy to Use',
+ description: 'Simple API and comprehensive documentation for quick setup.'
}
- | {
- 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);
+ ];
return (
-
- {features.map((feature, index) => (
-
-
-
-
- {feature.title}
-
-
- {feature.description}
-
-
- {feature.button && (
-
- )}
+
+
+
+
+ Why Choose Our Components?
+
+
+ Everything you need to build modern web applications.
+
- ))}
-
+
+ {features.map((feature, index) => (
+
+
+ {feature.icon}
+
+
+ {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/gallery/GalleryOne.tsx b/src/components/sections/gallery/GalleryOne.tsx
new file mode 100644
index 0000000..86ec936
--- /dev/null
+++ b/src/components/sections/gallery/GalleryOne.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+
+const GalleryOne = () => {
+ const images = [
+ '/images/courses-box-1.e8498908-1768918267950.png',
+ '/images/courses-box-2.2e36a41b-1768918267948.png',
+ '/images/courses.aee168f4-1768918267985.png',
+ '/images/256-1768918267936.png'
+ ];
+
+ return (
+
+
+
+
+ Gallery
+
+
+ Showcase of our work and components in action.
+
+
+
+ {images.map((src, index) => (
+
+
+
+ ))}
+
+
+ );
+};
+
+export default GalleryOne;
\ No newline at end of file
diff --git a/src/components/sections/hero/HeroBillboard.tsx b/src/components/sections/hero/HeroBillboard.tsx
index da9e35f..ae2be24 100644
--- a/src/components/sections/hero/HeroBillboard.tsx
+++ b/src/components/sections/hero/HeroBillboard.tsx
@@ -1,93 +1,29 @@
-"use client";
+import React from '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 = () => {
return (
-
-
-
-
-
+
+
+
+
+ Build Beautiful Components
+
+
+ Create stunning web applications with our modern component library.
+ Fast, reliable, and beautiful.
+
+
+
+
+
);
};
-HeroBillboard.displayName = "HeroBillboard";
-
export default HeroBillboard;
\ No newline at end of file
diff --git a/src/components/sections/pricing/PricingOne.tsx b/src/components/sections/pricing/PricingOne.tsx
new file mode 100644
index 0000000..3368789
--- /dev/null
+++ b/src/components/sections/pricing/PricingOne.tsx
@@ -0,0 +1,76 @@
+import React from 'react';
+import { Check } from 'lucide-react';
+
+const PricingOne = () => {
+ const plans = [
+ {
+ name: 'Starter',
+ price: '$9',
+ period: '/month',
+ features: ['Up to 5 projects', 'Basic support', 'Core components']
+ },
+ {
+ name: 'Pro',
+ price: '$29',
+ period: '/month',
+ features: ['Unlimited projects', 'Priority support', 'All components', 'Custom themes'],
+ popular: true
+ },
+ {
+ name: 'Enterprise',
+ price: '$99',
+ period: '/month',
+ features: ['Unlimited everything', '24/7 support', 'Custom development', 'SLA guarantee']
+ }
+ ];
+
+ return (
+
+
+
+
+ Choose Your Plan
+
+
+ Simple, transparent pricing for teams of all sizes.
+
+
+
+ {plans.map((plan, index) => (
+
+ {plan.popular && (
+
+ Most Popular
+
+ )}
+
+ {plan.name}
+
+
+ {plan.price}
+ {plan.period}
+
+
+ {plan.features.map((feature, featureIndex) => (
+ -
+
+ {feature}
+
+ ))}
+
+
+
+ ))}
+
+
+ );
+};
+
+export default PricingOne;
\ 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..72b5c5c
--- /dev/null
+++ b/src/components/ui/ThemeProvider.tsx
@@ -0,0 +1,73 @@
+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;
+};
\ No newline at end of file
diff --git a/src/index.css b/src/index.css
new file mode 100644
index 0000000..4bf1c5d
--- /dev/null
+++ b/src/index.css
@@ -0,0 +1,17 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+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