added organ
This commit is contained in:
102
components/Organ/AboutusContent.tsx
Normal file
102
components/Organ/AboutusContent.tsx
Normal file
@@ -0,0 +1,102 @@
|
||||
import React from 'react'
|
||||
import { OrganProps } from '@/types'
|
||||
const AboutusContent = ({ organ }: { organ: OrganProps[] }) => {
|
||||
return (
|
||||
<div className='relative flex flex-col bg-[#F6E8E9] w-full h-auto items-center pb-30 lg:pt-36 pt-10'>
|
||||
{
|
||||
organ.map((item, index) => {
|
||||
const isEven = index % 2 === 0;
|
||||
return (
|
||||
<div key={index}>
|
||||
<div className="hidden lg:flex relative w-[80vw] lg:mb-28 mb-10">
|
||||
{isEven ? (
|
||||
<div className='lg:grid lg:grid-cols-2 w-[80vw] mb-28'>
|
||||
<div className="flex col-span-1 h-auto w-full ">
|
||||
<img
|
||||
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${item.image}`}
|
||||
alt="Course Image"
|
||||
className="w-full h-[25vw] object-cover object-center rounded-lg shadow-md"
|
||||
style={{ aspectRatio: '1 / 1' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative flex col-span-1 w-full h-auto ml-16 items-center">
|
||||
<div className="relative flex flex-col items-start w-[30vw]">
|
||||
<p className="text-4xl">
|
||||
{item.title}
|
||||
</p>
|
||||
{/* <p className="text-base overflow-hidden mt-8">
|
||||
{item.description}
|
||||
</p> */}
|
||||
<div
|
||||
className='mt-8 [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!bg-transparent'
|
||||
dangerouslySetInnerHTML={{ __html: item.description }}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className='lg:grid lg:grid-cols-2 w-[80vw] mb-28'>
|
||||
<div className="relative flex col-span-1 w-full h-auto ml-16 items-center">
|
||||
<div className="relative flex flex-col items-start w-[30vw]">
|
||||
<p className="text-4xl">
|
||||
{item.title}
|
||||
</p>
|
||||
{/* <p className="text-base overflow-hidden mt-8">
|
||||
{item.description}
|
||||
</p> */}
|
||||
<div
|
||||
className='mt-8 [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!text-start [&_*]:!bg-transparent'
|
||||
dangerouslySetInnerHTML={{ __html: item.description }}
|
||||
/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex col-span-1 h-auto w-full justify-end ">
|
||||
<img
|
||||
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${item.image}`}
|
||||
alt="Course Image"
|
||||
className="w-full h-[25vw] object-cover object-center rounded-lg shadow-md"
|
||||
style={{ aspectRatio: '1 / 1' }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
</div>
|
||||
<div className="flex flex-col relative w-[80vw] lg:mb-28 mb-10 lg:hidden">
|
||||
<div className="flex col-span-1 h-auto w-full ">
|
||||
<img
|
||||
src={`${process.env.NEXT_PUBLIC_IMAGE_URL}${item.image}`}
|
||||
alt="Course Image"
|
||||
className="w-full h-[44vw] object-cover object-center rounded-lg shadow-md"
|
||||
style={{ aspectRatio: '1 / 1' }}
|
||||
/>
|
||||
</div>
|
||||
<div className="relative flex flex-col lg:mt-0 mt-8">
|
||||
<p className="lg:text-4xl text-2xl">
|
||||
{item.title}
|
||||
</p>
|
||||
{/* <p className="text-base overflow-hidden mt-8">
|
||||
{item.description}
|
||||
</p> */}
|
||||
<div
|
||||
className='mt-8 [&_*]:!text-[1.0rem] [&_*]:!text-gray-600 [&_*]:!bg-transparent'
|
||||
dangerouslySetInnerHTML={{ __html: item.description }}
|
||||
/>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
</div >
|
||||
)
|
||||
}
|
||||
|
||||
export default AboutusContent
|
||||
28
components/Organ/Banner.tsx
Normal file
28
components/Organ/Banner.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
import React from 'react'
|
||||
|
||||
const Banner = () => {
|
||||
|
||||
return (
|
||||
<div className='relative flex w-full h-[30vh] lg:h-[50vh] bg-[#E5C6C8] items-center'>
|
||||
|
||||
|
||||
<div className='flex-col flex lg:ml-48 ml-4 z-10'>
|
||||
<p className='text-black lg:text-5xl text-2xl font-bold text-center'>
|
||||
{"電子管風琴"}
|
||||
</p>
|
||||
<img src={"/images/line.png"} className='lg:w-[35vh] h-auto object-cover mt-2' />
|
||||
</div>
|
||||
{/* <div className='absolute bottom-0 right-0 max-sm:-right-32 md:-right-32 lg:right-32 bg-[url("/images/kid2.png")] bg-cover bg-center bg-no-repeat h-full w-[80%]'></div> */}
|
||||
<div className=" w-full h-full">
|
||||
<img
|
||||
src={"/images/piano1.jpg"}
|
||||
alt="piano1"
|
||||
className="absolute right-0 object-cover object-left w-full h-full"
|
||||
/>
|
||||
<div className="absolute inset-0 bg-gradient-to-l from-transparent to-[#D4A3B0] opacity-100"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Banner
|
||||
47
components/Organ/Home.tsx
Normal file
47
components/Organ/Home.tsx
Normal file
@@ -0,0 +1,47 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, Suspense } from "react";
|
||||
import Loading from '../Loading'
|
||||
import Footer from '../Footer'
|
||||
import ContactForm from "../ContactForm";
|
||||
import AboutusContent from "./AboutusContent";
|
||||
import Banner from "./Banner";
|
||||
import Map from "./Map";
|
||||
import { SettingsProps, OrganProps } from "@/types";
|
||||
|
||||
const Home = ({ settings, organ }: { settings: SettingsProps, organ: OrganProps[] }) => {
|
||||
const [loading, setLoading] = useState(true);
|
||||
// const [courses, setCourses] = useState<CoursesProps[]>([]);
|
||||
|
||||
useEffect(() => {
|
||||
const loadCourses = async () => {
|
||||
setLoading(true);
|
||||
await new Promise(resolve => setTimeout(resolve, 300)); // 0.5 second delay
|
||||
setLoading(false);
|
||||
}; loadCourses();
|
||||
}, []);
|
||||
|
||||
const startLoading = () => setLoading(true);
|
||||
const stopLoading = () => setLoading(false);
|
||||
|
||||
return (
|
||||
<div className='bg-[#F2D5D5] sm:bg-[#FFF9F9]'>
|
||||
{loading ? (
|
||||
<div className="flex justify-center items-center h-screen">
|
||||
<Suspense fallback={<div>Loading...</div>}>
|
||||
<Loading />
|
||||
</Suspense>
|
||||
</div>
|
||||
) : (
|
||||
<div>
|
||||
<Banner />
|
||||
<AboutusContent organ={organ} />
|
||||
{/* <Map settings={settings} /> */}
|
||||
<ContactForm startLoading={startLoading} stopLoading={stopLoading} />
|
||||
<Footer settings={settings} />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
export default Home
|
||||
97
components/Organ/Map.tsx
Normal file
97
components/Organ/Map.tsx
Normal file
@@ -0,0 +1,97 @@
|
||||
"use client"
|
||||
import React,{useEffect} from 'react'
|
||||
import { GoogleMap, LoadScript, Marker } from '@react-google-maps/api';
|
||||
import Loading from '../Loading'
|
||||
import Link from 'next/link'
|
||||
import { SettingsProps } from '@/types';
|
||||
import { HiLocationMarker } from "react-icons/hi";
|
||||
import { MdEmail } from "react-icons/md";
|
||||
import { FaPhone } from "react-icons/fa6";
|
||||
import mailgo from "mailgo";
|
||||
const containerStyle = {
|
||||
width: '100%',
|
||||
height: '100%'
|
||||
};
|
||||
const Map = ({ settings }: { settings: SettingsProps }) => {
|
||||
const center = {
|
||||
lat: settings.latitude,
|
||||
lng: settings.longitude,
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
mailgo();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<div className='relative flex flex-col w-full h-auto items-center pb-30 bg-[#F6E8E9]'>
|
||||
<div className='flex-col flex w-[80vw] h-[40vw] items-center rounded-lg overflow-hidden'>
|
||||
<LoadScript googleMapsApiKey="AIzaSyBp6yD01sMuqJh2_OqmTjIUQa24Ykhn3Bo" loadingElement={<Loading />}>
|
||||
<GoogleMap
|
||||
mapContainerStyle={containerStyle}
|
||||
zoom={18}
|
||||
center={center}
|
||||
>
|
||||
<Marker key={"1"} position={center}
|
||||
// icon={{ url: '/images/smalllogo.png', scaledSize: new window.google.maps.Size(40, 40) }}
|
||||
/>
|
||||
</GoogleMap>
|
||||
</LoadScript>
|
||||
</div>
|
||||
<div className="flex justify-start w-[80vw] mt-10 mb-32">
|
||||
<div className="flex flex-col lg:flex-row justify-between w-[70vw] ">
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex h-6 w-6 min-w-[1.5rem] min-h-[1.5rem] justify-center items-center rounded-full bg-mainColor'>
|
||||
<HiLocationMarker className='text-white' size={12} />
|
||||
</div>
|
||||
|
||||
<div className='flex flex-col ml-3'>
|
||||
<p>
|
||||
{"地址"}
|
||||
</p>
|
||||
<button className='text-gray-700 hover:text-mainColor text-left'
|
||||
onClick={() => { window.open(`https://maps.google.com/?q=${settings.latitude},${settings.longitude}`, '_blank') }}>
|
||||
{settings.address}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
<div className='flex h-6 w-6 items-center justify-center rounded-full bg-mainColor'>
|
||||
<MdEmail className='text-white' size={12} />
|
||||
</div>
|
||||
<div className='flex flex-col ml-3'>
|
||||
<p>
|
||||
{"電郵"}
|
||||
</p>
|
||||
<Link href={`mailto:${settings.email}`}>
|
||||
<p className='text-gray-700 hover:text-mainColor'>
|
||||
{settings.email}
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div className='flex flex-row'>
|
||||
|
||||
<div className='flex h-6 w-6 items-center justify-center rounded-full bg-mainColor'>
|
||||
<FaPhone className='text-white' size={12} />
|
||||
</div>
|
||||
<div className='flex flex-col ml-3'>
|
||||
<p>
|
||||
{"電話"}
|
||||
</p>
|
||||
<Link href={`tel:${settings.phone}`}>
|
||||
<p className='text-gray-700 hover:text-mainColor'>
|
||||
{settings.phone}
|
||||
</p>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Map
|
||||
Reference in New Issue
Block a user